@extends('master')
@section('content')
    <section class="section dashboard">
        <div class="row">
            <div class="col-12">
                <div class="d-flex justify-content-between align-items-center mb-4">
                    <h3 class="fw-bold fs-5">Work Order Edit</h3>
                </div>
                <div class="card e-collect-form card-min-height  repeater-content">
                    <div class="card-body mt-2">
                    <form class="row g-3 needs-validation" action="{{ route('store.workorder') }}" method="post" novalidate>
                        @csrf

                            <div class="row">
                                <div class="col-md-6 mb-3">
                                    <label for="validationCustom01" class="form-label fw-600">Work Order #</label>
                                    <input type="text" class="form-control custom-input" name="wo_number" value="{{$woRefNum}}" disabled>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-6 mb-3">
                                    <label for="validationCustom01" class="form-label fw-600">Service Category</label>
                                    <select class="form-select" name="service_category" required>
                                        <option value="" selected>Please Select</option>
                                        @foreach($serviceCategories as $id => $category)
                                            <option value="{{$id}}">{{$category['name']}}</option>
                                        @endforeach
                                    </select>
                                    <div class="valid-feedback">Looks good! </div>
                                </div>
                                <div class="col-md-6 mb-3">
                                    <label for="validationCustom02" class="form-label fw-600">Service Type</label>
                                    <select class="form-select" name="service_type" required>
                                        <option value="" selected>Please Select</option>
                                        @foreach($serviceTypes as $id => $type)
                                            <option value="{{$id}}">{{$type}}</option>
                                        @endforeach
                                    </select>
                                    <div class="valid-feedback"> Looks good!</div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-6 mb-3">
                                    <label for="validationCustom01" class="form-label fw-600">Date</label>
                                    <input type="date" class="form-control custom-input"  name="date" id="validationCustom03" required>
                                    <div class="valid-feedback">Looks good! </div>
                                </div>
                                <div class="col-md-6 mb-3">
                                    <label for="validationCustom01" class="form-label fw-600">Time</label>
                                    <input type="time" class="form-control custom-input"  name="time" id="validationCustom03" required>
                                    <div class="valid-feedback">Looks good! </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-6 mb-3">
                                    <label for="validationCustom01" class="form-label fw-600">Description</label>
                                    <textarea rows="5" class="form-control custom-input" name="description" required></textarea>
                                    <div class="valid-feedback">Looks good! </div>
                                </div>

                                <div class="col-md-6 mb-3">
                                    <label for="validationCustom01" class="form-label fw-600">Comment</label>
                                    <textarea rows="5" class="form-control custom-input" name="comment" required></textarea>
                                    <div class="valid-feedback">Looks good! </div>
                                </div>
                            </div>

                            <div class="row mt-4">
                                <div class="d-flex justify-content-between align-items-center">
                                    <h4 class="fw-bold fs-5">Work Order Details</h4>
                                </div>
                            </div>

                            <div class="row justify-content-between align-items-center my-2">
                                <div class="col-md-12 d-flex align-items-center justify-content-between justify-content-md-end">
                                    <div class="all-button-box me-2">
                                        <button type="button" class="btn btn-sm save-btn" data-repeater-create>
                                            <i class="bi bi-plus me-1"></i>Add More</button>
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-12 mb-3">
                                    <div class="table-responsive">
                                        <table id="work_order_details" class="table customer-tbl" style="width:100%" data-repeater-list="items">
                                            <thead>
                                                <tr>
                                                    <th>Vehicle</th>
                                                    <th>Nature of Work</th>
                                                    <th>Notes</th>
                                                    <th></th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr class="mb-3" data-repeater-item>
                                                    <td>
                                                        <select class="form-select" name="vehicle" required>
                                                            <option value="" selected>Please Select</option>
                                                            @foreach($companyVehicles as $vehicle)
                                                                <option value="{{$vehicle->id}}">{{$vehicle->make}} {{$vehicle->model}} - {{$vehicle->reg_no}}</option>
                                                            @endforeach
                                                        </select>
                                                    </td>
                                                    <td>
                                                        <select class="form-select" name="nature_of_work" required>
                                                            <option value="" selected>Please Select</option>
                                                            @foreach($workCategories as $category)
                                                                <option value="{{$category->id}}">{{$category->service_title}}</option>
                                                            @endforeach
                                                        </select>
                                                    </td>
                                                    <td>
                                                        <textarea class="form-control custom-input" name="vehicle_notes" required></textarea>
                                                    </td>
                                                    <td>
                                                        <button type="button" class="btn" data-repeater-delete>
                                                            <i class="bi bi-trash me-2"></i>
                                                        </button>
                                                    </td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                            <div class="col-12 mt-5">
                                <div class="form-action-button">
                                    <button type="submit" class="btn save-btn">Save</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
            
        </div>
    </section>
@endsection


@push('scripts')
<script src="https://unpkg.com/jquery.repeater@1.2.1/jquery.repeater.js"></script>

<script>
    $(document).ready(function () {
        $('.repeater-content').repeater({
            initEmpty: false,
            isFirstItemUndeletable: true,
            show: function () {
                $(this).slideDown();
                if ($(this).is(':first-child')) {
                    $(this).find('[data-repeater-delete]').hide();
                }
            },
            hide: function (deleteElement) {
                if (confirm('Are you sure you want to delete this element?')) {
                    $(this).slideUp(deleteElement);
                    $(this).remove();
                }
            },
        });
    });
</script>
@endpush