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

@section('styles')
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css" />
    <link rel="stylesheet"
        href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.14.0-beta3/css/bootstrap-select.min.css" />
    <script src="https://cdn.ckeditor.com/4.21.0/standard/ckeditor.js"></script>
    <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
        $d = $driver;
        $old = fn($k) => old($k, $d->$k ?? '');
        $selectedVehicleIds = collect(old('vehicle_ids', []))
            ->filter(fn($id) => !is_null($id) && $id !== '')
            ->map(fn($id) => (string) $id)
            ->values()
            ->all();
    @endphp

    <section class="product-page master-add-driver">
        <div class="page-header">
            <div class="container-fluid">
                <div class="page-title">
                    <a href="{{ route('backend.master.index-driver') }}">Master / <span class="breadcrumb-link">Add
                            Driver</span></a>
                </div>
            </div>
        </div>

        <div class="container-fluid p-0">
            <form id="productForm" method="POST" action="{{ route('backend.master.store-driver') }}"
                enctype="multipart/form-data">
                @csrf

                {{-- Driver Information --}}
                <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') }}" />
                        </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') }}" />
                            </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>

                        {{-- Rating --}}
                        <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>

                        {{-- Status --}}
                        <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="statusActive"
                                        value="1" {{ old('status', $d->status) == 1 ? 'checked' : '' }}>
                                    <label class="form-check-label" for="statusActive">Active</label>
                                </div>
                                <div class="form-check form-check-inline">
                                    <input class="form-check-input" type="radio" name="status" id="statusInactive"
                                        value="0" {{ old('status', $d->status) == 0 ? 'checked' : '' }}>
                                    <label class="form-check-label" for="statusInactive">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"
                                    readonly>
                                <label for="vehicleImageInput"
                                    class="btn upload-btn d-flex align-items-center mb-0">Upload</label>
                            </div>
                        </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') }}</textarea>
                        </div>
                    </div>
                </div>

                {{-- Address --}}
                <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') }}" />
                        </div>
                        <div class="col-lg-4">
                            <label>City</label>
                            <input type="text" class="city-input" name="city" placeholder="Enter City"
                                value="{{ $old('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') }}" />
                        </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') }}" />
                        </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') }}" />
                        </div>
                    </div>
                </div>

                {{-- Documents --}}
                <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') }}" />
                        </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"
                                    readonly>
                                <label for="licenseDocumentInput"
                                    class="btn upload-btn d-flex align-items-center mb-0">Upload</label>
                            </div>
                        </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') }}" />
                        </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="aadharInput" 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"
                                    readonly>
                                <label for="aadharInput"
                                    class="btn upload-btn d-flex align-items-center mb-0">Upload</label>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>

        <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>

    {{-- Toast: Driver Created --}}
    <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() {
            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(o) {
                            o.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, .state-input, .country-input').val('');
                    return;
                }

                $.get("{{ route('backend.master.lookup-pincode') }}", { pincode: pincode })
                    .done(function(res) {
                        $('.city-input').val(res?.data?.city || '');
                        $('.state-input').val(res?.data?.state || '');
                        $('.country-input').val(res?.data?.country || '');
                    })
                    .fail(function() {
                        $('.city-input, .state-input, .country-input').val('');
                    });
            });

            $(document).on('blur', '.pincode-input', function() {
                const len = ($(this).val() || '').replace(/\D/g, '').length;
                if (len > 0 && len < 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) {
                return this.optional(element) || /^[A-Za-z][A-Za-z.\-\s]{1,49}$/.test($.trim(value));
            }, 'Please enter valid city name');

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

            $(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'
                    },
                    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'
                    },
                    state: {
                        required: 'Please enter state'
                    },
                    country: {
                        required: 'Please enter country'
                    },
                    address_line: {
                        required: 'Please enter address',
                        minlength: 'Address must be at least 3 characters'
                    },
                    license_number: {
                        required: 'Please enter license number',
                        licenseFormat: 'Format: MH1220110012345'
                    },
                    aadhar_number: {
                        required: 'Please enter Aadhar number',
                        digits: 'Aadhar must contain only numbers',
                        minlength: 'Aadhar must be 12 digits',
                        maxlength: 'Aadhar must be 12 digits'
                    }
                },
                errorElement: 'span',
                errorClass: 'text-danger validation-error',
                highlight: function(element) {
                    $(element).addClass('has-error');
                },
                unhighlight: function(element) {
                    $(element).removeClass('has-error');
                },
                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