@extends('template.layouts.template-base')
@section('title', 'Edit Driver')

@section('styles')
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css" />
    <script src="https://cdn.ckeditor.com/4.21.0/standard/ckeditor.js"></script>
    <link rel="stylesheet"
        href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.14.0-beta3/css/bootstrap-select.min.css" />
    <script>
        CKEDITOR.config.removePlugins = 'notification,notificationaggregator';
    </script>
    <style>
        .bootstrap-select .dropdown-menu li a {
            padding: 10px 15px;
            font-size: 15px;
        }

        .bootstrap-select .dropdown-toggle {
            background: #f8f9fa;
        }
    </style>
@endsection

@section('content')
    @php
        $selectedVehicleIds = collect(old('vehicle_ids', $assignedVehicleIds ?? []))
            ->filter(fn($id) => !is_null($id) && $id !== '')
            ->map(fn($id) => (string) $id)
            ->values()
            ->all();
    @endphp
    <section class="product-page master-add-driver">
        <!-- Header -->
        <div class="page-header">
            <div class="container-fluid">
                <div class="row align-items-center">
                    <div class="col">
                        <div class="page-title">
                            <a href="{{ route('backend.master.index-driver') }}">Master / <span class="breadcrumb-link">Edit
                                    Driver</span></a>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Main Container -->
        <div class="container-fluid p-0">
            <form id="productForm" method="POST" action="{{ route('backend.master.update-driver', $driver->id) }}"
                enctype="multipart/form-data">
                @csrf
                @method('PUT')
                <!-- Section 1: Product -->
                <div class="add-product-section">
                    <h2 class="section-title">Driver Information</h2>

                    <div class="row">
                        <div class="col-lg-4">
                            <label>Driver ID <span class="required">*</span></label>
                            <input type="text" id="driverUniqueNoDisplay" placeholder="Auto Generated"
                                value="{{ old('driver_unique_no', $driverUniqueNo ?? '') }}" readonly />
                        </div>
                        <div class="col-lg-4">
                            <label>Driver Name <span class="required">*</span></label>
                            <input type="text" name="name" placeholder="Enter Driver Name"
                                value="{{ old('name', $driver->name) }}" />
                        </div>
                        <div class="col-lg-4">
                            <label>Contact Number <span class="required">*</span></label>
                            <div class="input-with-prefix">
                                <span class="input-prefix">+91</span>
                                <input type="text" name="phone" placeholder="Enter Phone Number"
                                    value="{{ old('phone', $driver->phone) }}" />
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-lg-4">
                            <label>Assign Vehicle</label>
                            <select class="form-select select2" id="vehicleSelect" name="vehicle_ids[]" multiple
                                data-placeholder="Select Vehicle Number">
                                @foreach ($vehicles as $vehicle)
                                    <option value="{{ $vehicle->id }}"
                                        {{ in_array((string) $vehicle->id, $selectedVehicleIds, true) ? 'selected' : '' }}>
                                        {{ $vehicle->registration_number ?: $vehicle->vehicle_number }}
                                    </option>
                                @endforeach
                            </select>
                            <small class="text-muted d-block mt-1">Select one or more vehicles.</small>
                        </div>
                        <div class="col-lg-4">
                            <div class="rating-sec">
                                <label>Rating<span class="required">*</span></label>
                                <div class="select-wrapper">
                                    <div class="custom-select-trigger" id="trigger">
                                        <span id="selected-label"><span class="star">★</span> 5 Star</span>
                                        <div class="arrow"></div>
                                    </div>
                                    <div class="dropdown" id="dropdown">
                                        <div class="option selected" data-value="5">
                                            <span class="star">★</span> 5 Star
                                        </div>
                                        <div class="option" data-value="4">
                                            <span class="star">★</span> 4 Star
                                        </div>
                                        <div class="option" data-value="3">
                                            <span class="star">★</span> 3 Star
                                        </div>
                                        <div class="option" data-value="2">
                                            <span class="star">★</span> 2 Star
                                        </div>
                                        <div class="option" data-value="1">
                                            <span class="star">★</span> 1 Star
                                        </div>
                                    </div>
                                </div>
                                <select class="native" id="native-select" name="rating">
                                    <option value="">Select Rating</option>
                                    <option value="5"
                                        {{ (string) old('rating', $driver->rating) === '5' ? 'selected' : '' }}>5 Star
                                    </option>
                                    <option value="4"
                                        {{ (string) old('rating', $driver->rating) === '4' ? 'selected' : '' }}>4 Star
                                    </option>
                                    <option value="3"
                                        {{ (string) old('rating', $driver->rating) === '3' ? 'selected' : '' }}>3 Star
                                    </option>
                                    <option value="2"
                                        {{ (string) old('rating', $driver->rating) === '2' ? 'selected' : '' }}>2 Star
                                    </option>
                                    <option value="1"
                                        {{ (string) old('rating', $driver->rating) === '1' ? 'selected' : '' }}>1 Star
                                    </option>
                                </select>
                            </div>
                        </div>
                        <div class="col-lg-4">
                            <label class="form-label">Status <span class="text-danger">*</span></label>
                            <div>
                                <div class="form-check form-check-inline">
                                    <input class="form-check-input" type="radio" name="status" id="addStatusActive"
                                        value="1"
                                        {{ (string) old('status', (int) $driver->status) === '1' ? 'checked' : '' }}>
                                    <label class="form-check-label" for="addStatusActive">Active</label>
                                </div>
                                <div class="form-check form-check-inline">
                                    <input class="form-check-input" type="radio" name="status" id="addStatusInactive"
                                        value="0"
                                        {{ (string) old('status', (int) $driver->status) === '0' ? 'checked' : '' }}>
                                    <label class="form-check-label" for="addStatusInactive">Inactive</label>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-4">
                            <label class="form-label mt-0">Profile Image</label>
                            <div class="upload-wrapper">
                                <input type="file" id="vehicleImageInput" name="vehicle_image" class="file-input"
                                    accept=".jpg,.jpeg,.png,.webp" hidden>
                                <input type="text" class="form-control upload-display" placeholder="No File Chosen"
                                    value="{{ old('vehicle_image', $driver->vehicle_image ? basename($driver->vehicle_image) : '') }}"
                                    readonly>
                                <label for="vehicleImageInput" class="btn upload-btn d-flex align-items-center mb-0">
                                    Upload
                                </label>
                            </div>
                            @if (!empty($driver->vehicle_image))
                                <a href="javascript:void(0)" class="btn btn-sm btn-outline-primary show_file_modal mt-2"
                                    data-url="{{ asset($driver->vehicle_image) }}" data-title="Profile Image">
                                    <i class="fa fa-eye"></i> View
                                </a>
                            @endif
                        </div>
                        <div class="col-lg-8">
                            <label class="form-label">Notes</label>
                            <textarea name="notes" class="w-100 driver-textarea" placeholder="Enter Here" id="delivery-note">{{ old('notes', $driver->notes) }}</textarea>
                        </div>
                    </div>

                </div>
                <div class="add-product-section">
                    <h2 class="section-title">Address</h2>

                    <div class="row">
                        <div class="col-lg-4">
                            <label>Pincode <span class="text-danger">*</span></label>
                            <input type="text" class="pincode-input" name="pincode" placeholder="Enter Pincode"
                                value="{{ old('pincode', $driver->pincode) }}" />
                        </div>
                        <div class="col-lg-4">
                            <label>City</label>
                            <input type="text" class="city-input" name="city" placeholder="Enter City"
                                value="{{ old('city', $driver->city) }}" />
                        </div>

                        <div class="col-lg-4">
                            <label>State<span class="required">*</span></label>
                            <input type="text" class="state-input" name="state" placeholder="Enter State"
                                value="{{ old('state', $driver->state) }}" />

                        </div>
                    </div>
                    <div class="row">
                        <div class="col-lg-4">
                            <label>Country<span class="required">*</span></label>
                            <input type="text" class="country-input" name="country" placeholder="Enter Country"
                                value="{{ old('country', $driver->country) }}" />
                        </div>
                        <div class="col-lg-4">
                            <label>Building No / Colony / Area / Street <span class="required">*</span></label>
                            <input type="text" name="address_line"
                                placeholder="Enter Building No / Colony / Area / Street "
                                value="{{ old('address_line', $driver->address_line) }}" />
                        </div>
                    </div>

                </div>
                <div class="add-product-section">
                    <h2 class="section-title">Documents</h2>

                    <div class="row">
                        <div class="col-lg-4">
                            <label>License Number<span class="text-danger">*</span></label>
                            <input type="text" name="license_number" placeholder="Enter License Number"
                                value="{{ old('license_number', $driver->license_number) }}" />
                        </div>
                        <div class="col-lg-4">
                            <label>License Document <span class="text-danger">*</span></label>
                            <div class="upload-wrapper">
                                <input type="file" id="licenseDocumentInput" name="license_document" class="file-input"
                                    accept=".jpg,.jpeg,.png,.webp,.pdf" hidden>
                                <input type="text" class="form-control upload-display"
                                    placeholder="No File Chosen"
                                    value="{{ old('license_document', $driver->license_document ? basename($driver->license_document) : '') }}"
                                    readonly>
                                <label for="licenseDocumentInput"
                                    class="btn upload-btn d-flex align-items-center mb-0">Upload</label>
                            </div>
                            @if (!empty($driver->license_document))
                                <a href="javascript:void(0)" class="btn btn-sm btn-outline-primary show_file_modal mt-2"
                                    data-url="{{ asset($driver->license_document) }}" data-title="License Document">
                                    <i class="fa fa-eye"></i> View
                                </a>
                            @endif
                        </div>

                        <div class="col-lg-4">
                            <label>Aadhar Number<span class="required">*</span></label>
                            <input type="text" name="aadhar_number" placeholder="Enter Aadhar Number"
                                value="{{ old('aadhar_number', $driver->aadhar_number) }}" />
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-lg-4">
                            <label>Aadhar Document<span class="required">*</span></label>
                            <div class="upload-wrapper">
                                <input type="file" id="aadharDocumentInput" name="aadhar_document" class="file-input"
                                    accept=".jpg,.jpeg,.png,.webp,.pdf" hidden>
                                <input type="text" class="form-control upload-display" placeholder="No File Chosen"
                                    value="{{ old('aadhar_document', $driver->aadhar_document ? basename($driver->aadhar_document) : '') }}"
                                    readonly>
                                <label for="aadharDocumentInput" class="btn upload-btn d-flex align-items-center mb-0">
                                    Upload </label>
                            </div>
                            @if (!empty($driver->aadhar_document))
                                <a href="javascript:void(0)" class="btn btn-sm btn-outline-primary show_file_modal mt-2"
                                    data-url="{{ asset($driver->aadhar_document) }}" data-title="Aadhar Document">
                                    <i class="fa fa-eye"></i> View
                                </a>
                            @endif
                        </div>
                    </div>
                </div>
            </form>
        </div>

        <!-- Action Buttons -->
        <div class="action-buttons py-4">
            <button type="button" class="btn btn-secondary"
                onclick="window.location.href='{{ route('backend.master.index-driver') }}'">Cancel</button>
            <button type="submit" form="productForm" class="btn btn-primary show-toast"
                data-toast-target="#deleteDriverToast">Save</button>
        </div>

    </section>
    <div class="modal fade remove-role-name forgot-popup-screen" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content rounded-4">
                <div class="modal-header">
                    <div class="modal-icon-box">
                        <i class="bx bxs-trash"></i>
                    </div>
                    <h5>Delete Role Name?</h3>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>

                <div class="modal-body inquiry-preview-modal p-4">
                    <div class="row form-row edit-category">
                        <div class="col-lg-12 col-md-12">
                            <p>Are you sure you want to delete role name? These role name will be permanently removed from
                                the roles list. This action cannot be undone. If any users are assigned to this role, you
                                must reassign them before deleting.</p>
                        </div>
                    </div>

                    <!-- Buttons -->
                    <div class="hstack gap-2 w-100 mt-4 justify-content-end">
                        <button type="button" data-bs-dismiss="modal" class="btn cancel-btn">
                            Cancel
                        </button>
                        <button type="button" class="btn delete-btn show-toast"
                            data-toast-target="#deleteUserNameToast">
                            Delete
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="position-fixed top-0 start-50 translate-middle-x p-4" style="z-index: 1090">
        <div id="deleteUserNameToast" class="toast login-success-toast" role="alert" aria-live="assertive"
            aria-atomic="true">
            <div class="toast-body d-flex align-items-center gap-3">
                <div class="toast-left">
                    <div class="check-circle">
                        ✓
                    </div>
                </div>
                <div class="toast-right">
                    <h6>Deleted Successful</h6>
                    <p>These roles has been deleted successfully.</p>
                </div>
            </div>
        </div>
    </div>


    <div class="position-fixed top-0 start-50 translate-middle-x p-4" style="z-index: 1090">
        <div id="deleteDriverToast" class="toast login-success-toast" role="alert" aria-live="assertive"
            aria-atomic="true">
            <div class="toast-body d-flex align-items-center gap-3">
                <div class="toast-left">
                    <div class="check-circle">
                        ✓
                    </div>
                </div>
                <div class="toast-right">
                    <h6>Created Successfully</h6>
                    <p>The driver has been created successfully.</p>
                </div>
            </div>
        </div>
    </div>
    @include('template.layouts.error-modal')
@endsection

@section('scripts')
    <script>
        $(document).ready(function() {
            if ($.fn.selectpicker && $('.selectpicker').length) {
                $('.selectpicker').selectpicker();
            }

            const trigger = document.getElementById('trigger');
            const dropdown = document.getElementById('dropdown');
            const selectedLabel = document.getElementById('selected-label');
            const nativeSelect = document.getElementById('native-select');
            const options = dropdown ? dropdown.querySelectorAll('.option') : [];

            if (trigger && dropdown && selectedLabel && nativeSelect) {
                trigger.addEventListener('click', function() {
                    trigger.classList.toggle('open');
                    dropdown.classList.toggle('open');
                });

                options.forEach(function(opt) {
                    opt.addEventListener('click', function() {
                        options.forEach(function(item) {
                            item.classList.remove('selected');
                        });
                        opt.classList.add('selected');
                        selectedLabel.innerHTML = '<span class="star">*</span> ' + opt.dataset
                            .value + ' Star';
                        nativeSelect.value = opt.dataset.value;
                        $(nativeSelect).valid();
                        trigger.classList.remove('open');
                        dropdown.classList.remove('open');
                    });
                });

                document.addEventListener('click', function(e) {
                    const wrapper = trigger.closest('.select-wrapper');
                    if (wrapper && !wrapper.contains(e.target)) {
                        trigger.classList.remove('open');
                        dropdown.classList.remove('open');
                    }
                });

                if (nativeSelect.value) {
                    selectedLabel.innerHTML = '<span class="star">*</span> ' + nativeSelect.value + ' Star';
                }
            }

            const $vehicleSelect = $('#vehicleSelect');
            if ($vehicleSelect.length && $.fn.select2) {
                $vehicleSelect.select2({
                    width: '100%',
                    closeOnSelect: false,
                    allowClear: true,
                    placeholder: $vehicleSelect.data('placeholder') || 'Select Vehicle Number'
                });
            }

            $(document).on('change', '.file-input', function() {
                const fileName = this.files && this.files[0] ? this.files[0].name : '';
                $(this).closest('.upload-wrapper').find('.upload-display').val(fileName);
            });

            $(document).on('input', '.pincode-input', function() {
                const pincode = ($(this).val() || '').replace(/\D/g, '').slice(0, 6);
                $(this).val(pincode);

                if (pincode.length !== 6) {
                    $('.city-input').val('');
                    $('.state-input').val('');
                    $('.country-input').val('');
                    return;
                }

                $.ajax({
                    url: "{{ route('backend.master.lookup-pincode') }}",
                    method: 'GET',
                    data: {
                        pincode: pincode
                    }
                }).done(function(response) {
                    if (!response || !response.status || !response.data) {
                        $('.city-input').val('');
                        $('.state-input').val('');
                        $('.country-input').val('');
                        return;
                    }

                    $('.city-input').val(response.data.city || '');
                    $('.state-input').val(response.data.state || '');
                    $('.country-input').val(response.data.country || '');
                }).fail(function() {
                    $('.city-input').val('');
                    $('.state-input').val('');
                    $('.country-input').val('');
                });
            });

            $(document).on('blur', '.pincode-input', function() {
                const pincode = ($(this).val() || '').replace(/\D/g, '');
                if (pincode.length > 0 && pincode.length < 6) {
                    toastr.warning('Please enter 6 digit pincode number');
                }
            });

            if (!$.fn.validate) {
                return;
            }

            $(document).on('input', 'input[name="phone"]', function() {
                this.value = String(this.value || '').replace(/\D/g, '').slice(0, 10);
            });

            $(document).on('input', 'input[name="aadhar_number"]', function() {
                this.value = String(this.value || '').replace(/\D/g, '').slice(0, 12);
            });

            $.validator.addMethod('cityFormat', function(value, element) {
                if (this.optional(element)) {
                    return true;
                }
                const city = $.trim(value);
                return /^[A-Za-z][A-Za-z.\-\s]{1,49}$/.test(city);
            }, 'Please enter valid city name');

            $.validator.addMethod('licenseFormat', function(value, element) {
                if (this.optional(element)) {
                    return true;
                }
                const normalized = String(value).toUpperCase().replace(/[\s-]/g, '');
                return /^[A-Z]{2}[0-9]{2}[0-9]{4}[0-9]{7}$/.test(normalized);
            }, 'Please enter valid license number (e.g. MH1220110012345)');

            $(document).on('input', 'input[name="license_number"]', function() {
                this.value = String(this.value || '').toUpperCase();
            });

            $('#productForm').validate({
                ignore: [],
                onkeyup: function(element, event) {
                    const excluded = [16, 17, 18, 20, 35, 36, 37, 38, 39, 40, 45, 144, 225];
                    if (!(event.which === 9 && !this.elementValue(element)) && !excluded.includes(event
                            .keyCode)) {
                        this.element(element);
                    }
                },
                onfocusout: function(element) {
                    this.element(element);
                },
                rules: {
                    name: {
                        required: true,
                        minlength: 2
                    },
                    phone: {
                        required: true,
                        digits: true,
                        minlength: 10,
                        maxlength: 10
                    },
                    rating: {
                        required: true
                    },
                    status: {
                        required: true
                    },
                    pincode: {
                        required: true,
                        digits: true,
                        minlength: 6,
                        maxlength: 6
                    },
                    city: {
                        required: true,
                        minlength: 2,
                        cityFormat: true
                    },
                    state: {
                        required: true
                    },
                    country: {
                        required: true
                    },
                    address_line: {
                        required: true,
                        minlength: 3
                    },
                    license_number: {
                        required: true,
                        licenseFormat: true
                    },
                    aadhar_number: {
                        required: true,
                        digits: true,
                        minlength: 12,
                        maxlength: 12
                    }
                },
                messages: {
                    name: {
                        required: 'Please enter driver name',
                        minlength: 'Driver name must be at least 2 characters long'
                    },
                    phone: {
                        required: 'Please enter contact number',
                        digits: 'Please enter valid contact number',
                        minlength: 'Contact number must be 10 digits',
                        maxlength: 'Contact number must be 10 digits'
                    },
                    rating: {
                        required: 'Please select rating'
                    },
                    status: {
                        required: 'Please select status'
                    },
                    pincode: {
                        required: 'Please enter pincode',
                        digits: 'Pincode must contain only numbers',
                        minlength: 'Pincode must be 6 digits',
                        maxlength: 'Pincode must be 6 digits'
                    },
                    city: {
                        required: 'Please enter city',
                        minlength: 'City must be at least 2 characters long',
                        cityFormat: 'Please enter valid city name'
                    },
                    state: {
                        required: 'Please enter state'
                    },
                    country: {
                        required: 'Please enter country'
                    },
                    address_line: {
                        required: 'Please enter address',
                        minlength: 'Address must be at least 3 characters long'
                    },
                    license_number: {
                        required: 'Please enter license number',
                        licenseFormat: 'License format should be like MH1220110012345'
                    },
                    aadhar_number: {
                        required: 'Please enter Aadhar number',
                        digits: 'Aadhar number must contain only numbers',
                        minlength: 'Aadhar number must be 12 digits',
                        maxlength: 'Aadhar number must be 12 digits'
                    }
                },
                errorElement: 'span',
                errorClass: 'text-danger validation-error',
                highlight: function(element) {
                    $(element).addClass('is-invalid');
                },
                unhighlight: function(element) {
                    $(element).removeClass('is-invalid');
                },
                errorPlacement: function(error, element) {
                    if (element.attr('name') === 'rating') {
                        const ratingWrapper = $('#trigger').closest('.select-wrapper');
                        if (ratingWrapper.length) {
                            error.insertAfter(ratingWrapper);
                        } else {
                            error.insertAfter(element);
                        }
                        return;
                    }

                    if (element.attr('name') === 'phone') {
                        error.insertAfter(element.closest('.input-with-prefix'));
                        return;
                    }

                    if (element.attr('type') === 'radio') {
                        error.insertAfter(element.closest('div'));
                    } else {
                        error.insertAfter(element);
                    }
                },
                submitHandler: function(form) {
                    $('#loading-image').removeClass('d-none').attr('aria-hidden', 'false');
                    $(':submit', form).prop('disabled', true);
                    form.submit();
                }
            });
        });
    </script>
@endsection