@extends('layouts.default')


@section('title', 'Damage References')
@section('header_right')
  <a href="{{ route('damage-reference.export') }}" class="btn btn-info">
        <i class="fa-solid fa-file-export"></i>
        Export File
    </a>
@endsection
@section('content')
<div class="row">
    <div class="col-md-12">
        <div class="box box-primary">
            <div class="box box-body">
                <div class="box-header with-border">
                    <h3 class="box-title">
                        Create Damage Reference
                    </h3>
                </div>
                <form style="margin-top: 16px;" acion="{{ route('damage-reference.store') }}" method="POST">
                    @csrf
                    <div class="row">
                        <div class="col-md-4">
                            <div class="mt-3">
                                <label for="categoryList" class="form-label">Category</label>
                                <select class="form-control" id="categoryList" aria-label="category" name="category_id" required>
                                    <option>Open this select menu</option>
                                    @foreach ( $categories as $category )
                                        <option value="{{ $category->id }}">{{ $category->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="mt-3">
                                <label for="selectType" class="form-label">Choose Type</label>
                                <select class="form-control" id="selectType" aria-label="choose type" name="type" required>
                                    <option selected>Open this select menu</option>
                                    <option value="Software">Software</option>
                                    <option value="Hardware">Hardware</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-4" >
                            <div class="mt-3">
                                <label for="description" class="form-label">Description</label>
                                <input class="form-control" id="description" name="description" placeholder="Masukkan detail kerusakan" required>
                            </div>
                        </div>
                    </div>
                    <button type="submit" class="btn btn-primary" style="margin-top: 16px;">Submit</button>

                </form>
            </div>
        </div>
    </div>
    <div class="col-md-12">
        <div class="box box-default">
            <div class="box box-body">
                 <div class="box-header with-border">
                    <h3 class="box-title">
                        List Damage Reference
                    </h3>
                </div>
                <livewire:damage-reference-table/>
            </div>
        </div>
    </div>
</div>
@endsection