@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-5">
                    <form class="row g-3 needs-validation" action="{{ isset($workOrder) ? route('save_workorder', ['id' => $workOrder->id]) : route('save_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" value="{{ $workOrder->wo_id }}" name="wo_number" 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}}"{{ $workOrder->service_category ? 'selected' : '' }}>{{$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}}" {{ $workOrder->service_type ? 'selected' : '' }}>{{$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" value="{{ $date }}" 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"  value="{{ $time }}" 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>{{ $workOrder->description }}</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>{{ $workOrder->comments }}</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>Suggestions</th>
                                                    <th></th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                            @if($workOrder->workOrderDetails->isNotEmpty())
                                            @foreach($workOrder->workOrderDetails as $workOrderDetail)
                                                <tr class="mb-3" data-repeater-item>
                                                        <input type="hidden" class="form-control form-select custom-input"  value="{{ $workOrderDetail->id }}" name="detail_id">
                                                    <td>
                                                        <select class="form-select" name="vehicle" required>
                                                            <option value="" selected>Please Select</option>
                                                            @foreach($companyVehicles as $vehicle)
                                                                <option value="{{$vehicle->id}}" {{ $workOrderDetail->vehicle_id == $vehicle->id ? 'selected' : '' }}>
                                                                    {{$vehicle->make}} {{$vehicle->model}} - {{$vehicle->reg_no}}
                                                                </option>
                                                            @endforeach
                                                        </select>
                                                        <p>
                                                            @if($workOrderDetail->status == 100)
                                                                <span class="badge pending">Pending</span>
                                                            @elseif($workOrderDetail->status == 0)
                                                                <span class="badge unverified">Disapproved</span>
                                                            @elseif($workOrderDetail->status == 1000)
                                                                <span class="badge verified">Approved</span>
                                                            @endif
                                                        </p>
                                                    </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}}" {{ $workOrderDetail->work_nature_def_id == $category->id ? 'selected' : '' }}>
                                                                    {{$category->service_title}}
                                                                </option>
                                                            @endforeach
                                                        </select>
                                                    </td>
                                                    <td>
                                                        <textarea class="form-control custom-input" name="vehicle_notes" required>{{ $workOrderDetail->description }}</textarea>
                                                    </td>
                                                    <td>
                                                        <span>{{$workOrderDetail->suggestions}}</span>
                                                    </td>
                                                    <td>
                                                    @if(!$workOrderDetail->status == 1000)

                                                        <button type="button" class="btn" data-repeater-delete>
                                                            <i class="bi bi-trash me-2"></i>
                                                        </button>
                                                        @endif

                                                    </td>
                                                </tr>
                                            @endforeach
                                            @else
                                                <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>
                                            @endif

                                            </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: false,
            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