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

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

    <script>
        CKEDITOR.config.removePlugins = 'notification,notificationaggregator';
    </script> 

@endsection

@section('content')
    <section class="product-page master-add-vehicle">
        <!-- 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-vehicle') }}">Master / <span class="breadcrumb-link">Add
                                    Vehicle</span></a>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Main Container -->
        <div class="container-fluid p-0">
            <form id="productForm" method="POST" action="{{ route('backend.master.store-vehicle') }}"
                enctype="multipart/form-data">
                @csrf
                <input type="hidden" name="ownership_type" value="company">
                @php
                    $selectedAdditionalDriverIds = old('secondary_driver_id');
                    if (!is_array($selectedAdditionalDriverIds)) {
                        $selectedAdditionalDriverIds = is_array($vehicle->secondary_driver_id)
                            ? $vehicle->secondary_driver_id
                            : [];
                    }
                    $selectedAdditionalDriverIds = array_values(
                        array_unique(
                            array_filter(array_map('strval', $selectedAdditionalDriverIds), fn($id) => $id !== ''),
                        ),
                    );
                @endphp
                <!-- Section 1: Product -->
                <div class="add-product-section">
                    <h2 class="section-title">Vehicle Information</h2>

                    <div class="row">

                        <div class="col-lg-4">
                            <label>Vehicle Owner <span class="required">*</span></label>
                            <select class="form-select" id="ownershipTypeSwitchAddCompany">
                                <option value="company" selected>Company</option>
                                <option value="third_party">Third Party</option>
                            </select>
                        </div>

                        <div class="col-lg-4">
                            <label>Vehicle Number <span class="required">*</span></label>
                            <input type="text" name="vehicle_number" placeholder="Auto Generated"
                                value="{{ old('vehicle_number', $vehicleNumberPreview ?? $vehicle->vehicle_number) }}"
                                readonly />
                        </div>
                        <div class="col-lg-4">
                            <label>Vehicle Type <span class="required">*</span></label>
                            <select class="form-select" name="vehicle_type_id">
                                <option value="">Select Vehicle Type</option>
                                @foreach ($vehicleTypes as $vehicleType)
                                    <option value="{{ $vehicleType->id }}"
                                        data-default-capacity="{{ $vehicleType->default_capacity_kg }}"
                                        {{ (string) old('vehicle_type_id', $vehicle->vehicle_type_id) === (string) $vehicleType->id ? 'selected' : '' }}>
                                        {{ $vehicleType->name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-lg-4">
                            <label>Capacity</label>
                            <div class="input-with-prefix">
                                <span class="input-prefix">Kg</span>
                                <input type="text" name="capacity_kg" placeholder="Enter Capacity (Kg)"
                                    value="{{ old('capacity_kg', $vehicle->capacity_kg) }}" />
                            </div>
                        </div>
                        <div class="col-lg-4">
                            <label>Registration Number <span class="required">*</span></label>
                            <input type="text" name="registration_number" placeholder="Enter Registration Number"
                                value="{{ old('registration_number', $vehicle->registration_number) }}" />
                        </div>


                        <div class="col-lg-4">
                            <label>Vehicle Model & Brand</label>
                            <input type="text" name="model_brand" placeholder="Enter Vehicle Model & Brand"
                                value="{{ old('model_brand', $vehicle->model_brand) }}" />
                        </div>

                    </div>
                    <div class="row">

                        <div class="col-lg-4">
                            <label>Assign Driver</label>
                            <select class="form-select" id="primaryDriverSelect" name="primary_driver_id">
                                <option value="">Select Driver Name</option>
                                @foreach ($drivers as $driver)
                                    <option value="{{ $driver->id }}"
                                        {{ (string) old('primary_driver_id', $vehicle->primary_driver_id) === (string) $driver->id ? 'selected' : '' }}>
                                        {{ $driver->name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>

                        <div class="col-lg-4" id="secondaryDriverWrapper">
                            <label>Additional driver</label>
                            <select class="form-select select2" id="secondaryDriverSelect" name="secondary_driver_id[]"
                                multiple data-placeholder="Select additional drivers">
                                @foreach ($drivers as $driver)
                                    <option value="{{ $driver->id }}"
                                        {{ in_array((string) $driver->id, $selectedAdditionalDriverIds, true) ? 'selected' : '' }}>
                                        {{ $driver->name }}
                                    </option>
                                @endforeach
                            </select>
                            <small class="text-muted d-block mt-1">Select one or more additional drivers.</small>
                        </div>
                        <div class="col-lg-4">
                            <label>Service / Maintenance Due Date</label>
                            <div class="date-search-item">
                                <div class="calender-box-item position-relative">
                                    <input type="text" class="date-picker-input" id="fromDate1"
                                        name="maintenance_due_date"
                                        value="{{ old('maintenance_due_date', optional($vehicle->maintenance_due_date)->format('Y-m-d')) }}"
                                        placeholder="Select Service / Maintenance Due Date" />
                                </div>
                                <div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-4">
                            <label class="form-label mt-0">Registration Certificate
                                <div class="upload-wrapper">
                                    <input type="file" id="registrationCertificateInput" name="registration_certificate"
                                        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="registrationCertificateInput"
                                        class="btn upload-btn d-flex align-items-center mb-0">
                                        Upload
                                    </label>
                                </div>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label mt-0">Fitnesss Certificate
                                <div class="upload-wrapper">
                                    <input type="file" id="fitnessCertificateInput" name="fitness_certificate"
                                        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="fitnessCertificateInput"
                                        class="btn upload-btn d-flex align-items-center mb-0">
                                        Upload
                                    </label>
                                </div>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label mt-0">Vehicle Image
                                <div class="upload-wrapper">
                                    <input type="file" id="vehicleImageInput" class="file-input" 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>
                    <div class="row">
                        <div class="col-lg-4">
                            <label>Insurance Expiry Date</label>
                            <div class="date-search-item">
                                <div class="calender-box-item position-relative">
                                    <input type="text" class="date-picker-input" id="fromDate2"
                                        name="insurance_expiry_date"
                                        value="{{ old('insurance_expiry_date', optional($vehicle->insurance_expiry_date)->format('Y-m-d')) }}"
                                        placeholder="Select Insurance Expiry Date" />
                                </div>
                                <div>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-6">
                            <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) $vehicle->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) $vehicle->status) === '0' ? 'checked' : '' }}>
                                    <label class="form-check-label" for="addStatusInactive">Inactive</label>
                                </div>
                                <div class="form-check form-check-inline">
                                    <input class="form-check-input" type="radio" name="status"
                                        id="addStatusUserMaintenance" value="2"
                                        {{ (string) old('status', (int) $vehicle->status) === '2' ? 'checked' : '' }}>
                                    <label class="form-check-label" for="addStatusUserMaintenance">Under
                                        Maintenance</label>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12">
                            <div class="d-flex flex-column mt-3">
                                <label class="form-label">Notes</label>
                                <textarea name="notes" class="w-100" placeholder="Enter Here" id="delivery-note" rows="5">{{ old('notes', $vehicle->notes) }}</textarea>
                            </div>
                        </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-vehicle') }}'">Cancel</button>
            <button type="submit" form="productForm" class="btn btn-primary show-toast"
                data-toast-target="#deleteVehicleToast">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="deleteVehicleToast" 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 vehicle has been created successfully.</p>
                </div>
            </div>
        </div>
    </div>
    @include('template.layouts.error-modal')
@endsection

@section('scripts')
    <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
    <script>
        $(document).ready(function() {
            flatpickr('#fromDate1', {
                dateFormat: 'Y-m-d'
            });
            flatpickr('#fromDate2', {
                dateFormat: 'Y-m-d'
            });

            $('#ownershipTypeSwitchAddCompany').on('change', function() {
                if ($(this).val() === 'third_party') {
                    window.location.href = "{{ route('backend.master.add-third-vehicle') }}";
                }
            });

            $(document).on('input', 'input[name="registration_number"]', function() {
                this.value = String(this.value || '').toUpperCase().replace(/\s+/g, '');
            });

            const normalizeCapacity = function(value) {
                if (value === null || value === undefined || value === '') {
                    return '';
                }
                const num = Number(value);
                if (Number.isNaN(num)) {
                    return '';
                }
                return String(num).replace(/\.0+$/, '').replace(/(\.\d*[1-9])0+$/, '$1');
            };

            const autoFillCapacityFromType = function(force) {
                const $capacity = $('input[name="capacity_kg"]');
                if (!$capacity.length) {
                    return;
                }

                const selectedCapacity = $('select[name="vehicle_type_id"] option:selected').data(
                    'default-capacity');
                const normalized = normalizeCapacity(selectedCapacity);
                if (force || !$capacity.val()) {
                    $capacity.val(normalized);
                }
            };

            $('select[name="vehicle_type_id"]').on('change', function() {
                autoFillCapacityFromType(true);
            });
            autoFillCapacityFromType(false);

            const $primaryDriver = $('#primaryDriverSelect');
            const $secondaryDriver = $('#secondaryDriverSelect');
            const secondaryBaseOptions = $secondaryDriver.find('option').clone();

            const initAdditionalDriverSelect2 = function() {
                if (!$.fn.select2 || !$secondaryDriver.length) {
                    return;
                }

                if ($secondaryDriver.hasClass('select2-hidden-accessible')) {
                    $secondaryDriver.select2('destroy');
                }

                $secondaryDriver.select2({
                    width: '100%',
                    closeOnSelect: false,
                    allowClear: true,
                    placeholder: $secondaryDriver.data('placeholder') || 'Select additional drivers'
                });
            };

            const refreshSecondaryDriverOptions = function() {
                if (!$primaryDriver.length || !$secondaryDriver.length) {
                    return;
                }

                const selectedPrimary = String($primaryDriver.val() || '');
                const selectedSecondary = (($secondaryDriver.val() || [])).map(function(id) {
                    return String(id);
                });

                $secondaryDriver.empty();
                secondaryBaseOptions.each(function() {
                    const optionValue = String($(this).attr('value') || '');
                    if (optionValue === '' || (optionValue !== '' && optionValue === selectedPrimary)) {
                        return;
                    }
                    $secondaryDriver.append($(this).clone());
                });

                const availableSelections = selectedSecondary.filter(function(id) {
                    return $secondaryDriver.find('option[value="' + id + '"]').length > 0;
                });
                if (availableSelections.length > 0) {
                    $secondaryDriver.val(availableSelections);
                } else {
                    $secondaryDriver.val([]);
                }

                if ($secondaryDriver.hasClass('select2-hidden-accessible')) {
                    $secondaryDriver.trigger('change.select2');
                }
            };

            $primaryDriver.on('change', function() {
                refreshSecondaryDriverOptions();
                if ($secondaryDriver.length && $.fn.validate) {
                    $secondaryDriver.valid();
                }
            });

            $secondaryDriver.on('change', function() {
                if ($primaryDriver.length && $.fn.validate) {
                    $primaryDriver.valid();
                }
            });

            refreshSecondaryDriverOptions();
            initAdditionalDriverSelect2();

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

            if ($.validator && !$.validator.methods.notContainPrimaryDriver) {
                $.validator.addMethod('notContainPrimaryDriver', function(value, element, selector) {
                    const compareWith = String($(selector).val() || '');
                    const selectedValues = ($(element).val() || []).map(function(id) {
                        return String(id);
                    });
                    if (!compareWith || selectedValues.length === 0) {
                        return true;
                    }
                    return selectedValues.indexOf(compareWith) === -1;
                }, 'Values must be different');
            }

            $('#productForm').validate({
                ignore: [],
                rules: {
                    vehicle_number: {
                        required: true,
                        minlength: 4,
                        maxlength: 255
                    },
                    vehicle_type_id: {
                        required: true
                    },
                    capacity_kg: {
                        number: true,
                        min: 0
                    },
                    registration_number: {
                        required: true,
                        minlength: 6,
                        maxlength: 255,
                        remote: {
                            url: "{{ route('backend.master.check-registration-number') }}",
                            type: 'get',
                            data: {
                                registration_number: function() {
                                    return String($('input[name="registration_number"]').val() || '')
                                        .toUpperCase()
                                        .replace(/\s+/g, '');
                                },
                                vehicle_id: function() {
                                    return '';
                                }
                            }
                        }
                    },
                    model_brand: {
                        maxlength: 255
                    },
                    'secondary_driver_id[]': {
                        notContainPrimaryDriver: 'select[name="primary_driver_id"]'
                    },
                    maintenance_due_date: {
                        date: true
                    },
                    insurance_expiry_date: {
                        date: true
                    },
                    status: {
                        required: true
                    }
                },
                messages: {
                    vehicle_number: {
                        required: 'Please enter vehicle number',
                        minlength: 'Vehicle number must be at least 4 characters long'
                    },
                    vehicle_type_id: {
                        required: 'Please select vehicle type'
                    },
                    capacity_kg: {
                        number: 'Please enter valid capacity',
                        min: 'Capacity cannot be negative'
                    },
                    registration_number: {
                        required: 'Please enter registration number',
                        minlength: 'Registration number must be at least 6 characters long',
                        remote: 'This registration number already exists'
                    },
                    model_brand: {
                        maxlength: 'Vehicle model & brand must be less than 255 characters'
                    },
                    'secondary_driver_id[]': {
                        notContainPrimaryDriver: 'Primary and additional driver cannot be same'
                    },
                    maintenance_due_date: {
                        date: 'Please enter valid maintenance due date'
                    },
                    insurance_expiry_date: {
                        date: 'Please enter valid insurance expiry date'
                    },
                    status: {
                        required: 'Please select status'
                    }
                },
                errorElement: 'span',
                errorClass: 'text-danger validation-error',
                highlight: function(element) {
                    $(element).addClass('is-invalid');
                    if ($(element).attr('id') === 'secondaryDriverSelect') {
                        $(element).next('.select2').find('.select2-selection').addClass('is-invalid');
                    }
                },
                unhighlight: function(element) {
                    $(element).removeClass('is-invalid');
                    if ($(element).attr('id') === 'secondaryDriverSelect') {
                        $(element).next('.select2').find('.select2-selection').removeClass('is-invalid');
                    }
                },
                errorPlacement: function(error, element) {
                    if (element.attr('type') === 'radio') {
                        error.insertAfter(element.closest('div'));
                    } else if (element.attr('id') === 'secondaryDriverSelect' && element.next('.select2').length) {
                        error.insertAfter(element.next('.select2'));
                    } else {
                        error.insertAfter(element);
                    }
                }
            });
        });
    </script>
@endsection