@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="third_party">
                <input type="hidden" name="vehicle_number" id="thirdPartyVehicleNumber"
                    value="{{ old('vehicle_number', $vehicleNumberPreview ?? $vehicle->vehicle_number) }}">
                <!-- Section 1: Product -->
                <div class="add-product-section">
                    <h2 class="section-title">Basic Information</h2>

                    <div class="row">

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

                        <div class="col-lg-4">
                            <label>Transporter Name <span class="required">*</span></label>
                            <input type="text" id="ownerNameInput" name="owner_name"
                                placeholder="Enter Transporter Name"
                                value="{{ old('owner_name', $transporter?->name ?? $vehicle->owner_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" class="tp-contact-input" name="contact_number" placeholder="Enter Phone Number" value="{{ old('contact_number', $transporter?->contact_number ?? '') }}" />
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-lg-4">
                            <label>Vehicle Number <span class="required">*</span></label>
                            <input type="text" id="thirdPartyVehicleNumberDisplay" placeholder="Auto Generated"
                                value="{{ old('vehicle_number', $vehicleNumberPreview ?? $vehicle->vehicle_number) }}"
                                readonly />
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-lg-4">
                            <label>Pincode <span class="required">*</span></label>
                            <input type="text" class="tp-pincode-input" name="pincode" placeholder="Enter Pincode" value="{{ old('pincode', $transporter?->pincode ?? '') }}" />
                        </div>
                        <div class="col-lg-4">
                            <label>City</label>
                            <input type="text" class="tp-city-input" name="city" placeholder="Enter City" value="{{ old('city', $transporter?->city ?? '') }}" />
                        </div>


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

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

                        </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-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', $transporter?->notes ?? $vehicle->notes) }}</textarea>
                            </div>
                        </div>
                    </div>

                </div>
                <div class="add-product-section">
                    <h2 class="section-title">Vehicle Information</h2>
                    @php
                        $oldVehicleTypeIds = old('vehicle_type_id');
                        $oldCapacities = old('capacity_kg');
                        $oldModelBrands = old('model_brand');
                        $oldRegistrations = old('registration_number');
                        $oldDeliveryTypes = old('delivery_type');
                        $oldStatuses = old('status');
                        $vehicleRows = [];

                        $hasMultipleRows = is_array($oldVehicleTypeIds) || is_array($oldCapacities) || is_array($oldModelBrands) || is_array($oldRegistrations) || is_array($oldDeliveryTypes) || is_array($oldStatuses);

                        if ($hasMultipleRows) {
                            $rowCount = max(
                                count((array) $oldVehicleTypeIds),
                                count((array) $oldCapacities),
                                count((array) $oldModelBrands),
                                count((array) $oldRegistrations),
                                count((array) $oldDeliveryTypes),
                                count((array) $oldStatuses),
                                1
                            );

                            for ($i = 0; $i < $rowCount; $i++) {
                                $vehicleRows[] = [
                                    'vehicle_type_id' => old("vehicle_type_id.$i"),
                                    'capacity_kg' => old("capacity_kg.$i"),
                                    'model_brand' => old("model_brand.$i"),
                                    'registration_number' => old("registration_number.$i"),
                                    'delivery_type' => old("delivery_type.$i"),
                                    'vehicle_image' => null,
                                    'status' => (string) old("status.$i", '1'),
                                ];
                            }
                        } else {
                            $vehicleRows[] = [
                                'vehicle_type_id' => old('vehicle_type_id', $vehicle->vehicle_type_id),
                                'capacity_kg' => old('capacity_kg', $vehicle->capacity_kg),
                                'model_brand' => old('model_brand', $vehicle->model_brand),
                                'registration_number' => old('registration_number', $vehicle->registration_number),
                                'delivery_type' => old('delivery_type', $vehicle->delivery_type),
                                'vehicle_image' => old('vehicle_image', $vehicle->vehicle_image),
                                'status' => (string) old('status', (int) $vehicle->status),
                            ];
                        }
                    @endphp

                    <div id="thirdPartyVehicleRows">
                        @foreach ($vehicleRows as $index => $row)
                            <div class="third-party-vehicle-row border rounded p-3 mb-3" data-index="{{ $index }}">
                                <div class="d-flex justify-content-between align-items-center mb-2">
                                    <h6 class="mb-0">Vehicle {{ $index + 1 }}</h6>
                                    <button type="button" class="btn btn-sm btn-outline-danger remove-third-party-row {{ $index === 0 ? 'd-none' : '' }}">Remove</button>
                                </div>
                                <div class="row">
                                    <div class="col-lg-4">
                                        <label>Vehicle Type <span class="required">*</span></label>
                                        <select class="form-select vehicle-type-input" name="vehicle_type_id[{{ $index }}]">
                                            <option value="">Select Vehicle Type</option>
                                            @foreach ($vehicleTypes as $vehicleType)
                                                <option value="{{ $vehicleType->id }}" data-default-capacity="{{ $vehicleType->default_capacity_kg }}" {{ (string) $row['vehicle_type_id'] === (string) $vehicleType->id ? 'selected' : '' }}>
                                                    {{ $vehicleType->name }}
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>

                                    <div class="col-lg-4">
                                        <label>Capacity</label>
                                        <div class="input-with-prefix">
                                            <span class="input-prefix">Kg</span>
                                            <input type="text" class="capacity-input" name="capacity_kg[{{ $index }}]" placeholder="Enter Capacity (Kg)" value="{{ $row['capacity_kg'] }}" />
                                        </div>
                                    </div>
                                    <div class="col-lg-4">
                                        <label>Vehicle Model & Brand</label>
                                        <input type="text" class="model-brand-input" name="model_brand[{{ $index }}]" placeholder="Enter Vehicle Model & Brand" value="{{ $row['model_brand'] }}" />
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-lg-4">
                                        <label>Registration Number <span class="required">*</span></label>
                                        <input type="text" class="registration-number-input" name="registration_number[{{ $index }}]" placeholder="Enter Registration Number" value="{{ $row['registration_number'] }}" />
                                    </div>
                                    <div class="col-lg-4">
                                        <label>Delivery Type <span class="required">*</span></label>
                                        <select class="form-select delivery-type-input" name="delivery_type[{{ $index }}]">
                                            <option value="">Delivery Type</option>
                                            <option value="national" {{ ($row['delivery_type'] ?? '') === 'national' ? 'selected' : '' }}>National</option>
                                            <option value="local" {{ ($row['delivery_type'] ?? '') === 'local' ? 'selected' : '' }}>Local</option>
                                            <option value="both" {{ ($row['delivery_type'] ?? '') === 'both' ? 'selected' : '' }}>Both</option>
                                        </select>
                                    </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 status-active-input" type="radio" name="status[{{ $index }}]" id="addStatusActive{{ $index }}" value="1" {{ (string) $row['status'] === '1' ? 'checked' : '' }}>
                                                <label class="form-check-label status-active-label" for="addStatusActive{{ $index }}">Active</label>
                                            </div>
                                            <div class="form-check form-check-inline">
                                                <input class="form-check-input status-inactive-input" type="radio" name="status[{{ $index }}]" id="addStatusInactive{{ $index }}" value="0" {{ (string) $row['status'] === '0' ? 'checked' : '' }}>
                                                <label class="form-check-label status-inactive-label" for="addStatusInactive{{ $index }}">Inactive</label>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-lg-4">
                                        <label class="form-label mt-0">Vehicle Image</label>
                                        <div class="upload-wrapper">
                                            <input type="file"
                                                id="thirdPartyVehicleImage{{ $index }}"
                                                class="file-input third-party-vehicle-image-input"
                                                name="vehicle_image[{{ $index }}]"
                                                accept=".jpg,.jpeg,.png,.webp"
                                                hidden>
                                            <input type="text" class="form-control upload-display"
                                                placeholder="No File Chosen"
                                                value="{{ !empty($row['vehicle_image']) ? basename((string) $row['vehicle_image']) : '' }}"
                                                readonly>
                                            <label for="thirdPartyVehicleImage{{ $index }}"
                                                class="btn upload-btn d-flex align-items-center mb-0 third-party-vehicle-image-label">
                                                Upload
                                            </label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>

                    <template id="thirdPartyVehicleRowTemplate">
                        <div class="third-party-vehicle-row border rounded p-3 mb-3" data-index="__INDEX__">
                            <div class="d-flex justify-content-between align-items-center mb-2">
                                <h6 class="mb-0">Vehicle __ROW_NUMBER__</h6>
                                <button type="button" class="btn btn-sm btn-outline-danger remove-third-party-row">*</button>
                            </div>
                            <div class="row">
                                <div class="col-lg-4">
                                    <label>Vehicle Type <span class="required">*</span></label>
                                    <select class="form-select vehicle-type-input" name="vehicle_type_id[__INDEX__]">
                                        <option value="">Select Vehicle Type</option>
                                        @foreach ($vehicleTypes as $vehicleType)
                                            <option value="{{ $vehicleType->id }}" data-default-capacity="{{ $vehicleType->default_capacity_kg }}">{{ $vehicleType->name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-lg-4">
                                    <label>Capacity</label>
                                    <div class="input-with-prefix">
                                        <span class="input-prefix">Kg</span>
                                        <input type="text" class="capacity-input" name="capacity_kg[__INDEX__]" placeholder="Enter Capacity (Kg)" value="" />
                                    </div>
                                </div>
                                <div class="col-lg-4">
                                    <label>Vehicle Model & Brand</label>
                                    <input type="text" class="model-brand-input" name="model_brand[__INDEX__]" placeholder="Enter Vehicle Model & Brand" value="" />
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-lg-4">
                                    <label>Registration Number <span class="required">*</span></label>
                                    <input type="text" class="registration-number-input" name="registration_number[__INDEX__]" placeholder="Enter Registration Number" value="" />
                                </div>
                                <div class="col-lg-4">
                                    <label>Delivery Type <span class="required">*</span></label>
                                    <select class="form-select delivery-type-input" name="delivery_type[__INDEX__]">
                                        <option value="">Delivery Type</option>
                                        <option value="national">National</option>
                                        <option value="local">Local</option>
                                        <option value="both">Both</option>
                                    </select>
                                </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 status-active-input" type="radio" name="status[__INDEX__]" id="addStatusActive__INDEX__" value="1" checked>
                                            <label class="form-check-label status-active-label" for="addStatusActive__INDEX__">Active</label>
                                        </div>
                                        <div class="form-check form-check-inline">
                                            <input class="form-check-input status-inactive-input" type="radio" name="status[__INDEX__]" id="addStatusInactive__INDEX__" value="0">
                                            <label class="form-check-label status-inactive-label" for="addStatusInactive__INDEX__">Inactive</label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-lg-4">
                                    <label class="form-label mt-0">Vehicle Image</label>
                                    <div class="upload-wrapper">
                                        <input type="file" id="thirdPartyVehicleImage__INDEX__"
                                            class="file-input third-party-vehicle-image-input"
                                            name="vehicle_image[__INDEX__]"
                                            accept=".jpg,.jpeg,.png,.webp"
                                            hidden>
                                        <input type="text" class="form-control upload-display"
                                            placeholder="No File Chosen" readonly>
                                        <label for="thirdPartyVehicleImage__INDEX__"
                                            class="btn upload-btn d-flex align-items-center mb-0 third-party-vehicle-image-label">
                                            Upload
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </template>

                    <button type="button" class="btn btn-primary btn-add-more" id="addThirdPartyVehicleRowBtn"><span>Add More +</span></button>
                </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>
        // Initialize date pickers for all tabs
        flatpickr("#fromDate1", {
            dateFormat: "M d, Y"
        });
        flatpickr("#toDate1", {
            dateFormat: "M d, Y"
        });
        flatpickr("#fromDate2", {
            dateFormat: "M d, Y"
        });
        flatpickr("#toDate2", {
            dateFormat: "M d, Y"
        });
        flatpickr("#fromDate3", {
            dateFormat: "M d, Y"
        });
        flatpickr("#toDate3", {
            dateFormat: "M d, Y"
        });
        flatpickr("#fromDate4", {
            dateFormat: "M d, Y"
        });
        flatpickr("#toDate4", {
            dateFormat: "M d, Y"
        });

        function syncThirdPartyVehicleNumber() {
            const autoVehicleNumber = @json(old('vehicle_number', $vehicleNumberPreview ?? $vehicle->vehicle_number));
            $('#thirdPartyVehicleNumber').val(autoVehicleNumber);
            $('#thirdPartyVehicleNumberDisplay').val(autoVehicleNumber);
        }

        function normalizeCapacity(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');
        }

        function applyRowCapacityFromType($row, force) {
            const $select = $row.find('.vehicle-type-input');
            const $capacity = $row.find('.capacity-input');
            if (!$select.length || !$capacity.length) {
                return;
            }

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

        let rowCount = $('#thirdPartyVehicleRows .third-party-vehicle-row').length;

        function toggleThirdPartyRowActions() {
            $('#thirdPartyVehicleRows .third-party-vehicle-row').each(function(index) {
                $(this).find('.remove-third-party-row').toggleClass('d-none', index === 0);
                $(this).find('h6').text('Vehicle ' + (index + 1));
            });
        }

        function reindexThirdPartyRows() {
            $('#thirdPartyVehicleRows .third-party-vehicle-row').each(function(index) {
                $(this).attr('data-index', index).attr('id', 'row-' + index);
                $(this).find('.vehicle-type-input').attr('name', 'vehicle_type_id[' + index + ']');
                $(this).find('.capacity-input').attr('name', 'capacity_kg[' + index + ']');
                $(this).find('.model-brand-input').attr('name', 'model_brand[' + index + ']');
                $(this).find('.registration-number-input').attr('name', 'registration_number[' + index + ']');
                $(this).find('.delivery-type-input').attr('name', 'delivery_type[' + index + ']');
                const imageInputId = 'thirdPartyVehicleImage' + index;
                $(this).find('.third-party-vehicle-image-input').attr({
                    'name': 'vehicle_image[' + index + ']',
                    'id': imageInputId
                });
                $(this).find('.third-party-vehicle-image-label').attr('for', imageInputId);
                $(this).find('.remove-third-party-row').attr('onclick', 'removeThirdPartyRow(' + index + ')');

                const activeId = 'addStatusActive' + index;
                const inactiveId = 'addStatusInactive' + index;
                $(this).find('.status-active-input').attr({
                    'name': 'status[' + index + ']',
                    'id': activeId
                });
                $(this).find('.status-inactive-input').attr({
                    'name': 'status[' + index + ']',
                    'id': inactiveId
                });
                $(this).find('.status-active-label').attr('for', activeId);
                $(this).find('.status-inactive-label').attr('for', inactiveId);
                applyRowCapacityFromType($(this), false);
            });

            rowCount = $('#thirdPartyVehicleRows .third-party-vehicle-row').length;
            toggleThirdPartyRowActions();
            syncThirdPartyVehicleNumber();
        }

        function buildThirdPartyRowHtml(index) {
            const vehicleTypeOptions = $('#thirdPartyVehicleRows .vehicle-type-input').first().html() || '<option value="">Select Vehicle Type</option>';

            return `
                <div class="third-party-vehicle-row border rounded p-3 mb-3 position-relative" id="row-${index}" data-index="${index}">
                    <div class="d-flex justify-content-between align-items-center mb-2">
                        <h6 class="mb-0">Vehicle ${index + 1}</h6>
                        <button type="button" class="btn btn-sm btn-outline-danger remove-third-party-row" onclick="removeThirdPartyRow(${index})">Remove</button>
                    </div>
                    <div class="row">
                        <div class="col-lg-4">
                            <label>Vehicle Type <span class="required">*</span></label>
                            <select class="form-select vehicle-type-input" name="vehicle_type_id[${index}]">
                                ${vehicleTypeOptions}
                            </select>
                        </div>
                        <div class="col-lg-4">
                            <label>Capacity</label>
                            <div class="input-with-prefix">
                                <span class="input-prefix">Kg</span>
                                <input type="text" class="capacity-input" name="capacity_kg[${index}]" placeholder="Enter Capacity (Kg)" value="" />
                            </div>
                        </div>
                        <div class="col-lg-4">
                            <label>Vehicle Model & Brand</label>
                            <input type="text" class="model-brand-input" name="model_brand[${index}]" placeholder="Enter Vehicle Model & Brand" value="" />
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-lg-4">
                            <label>Registration Number <span class="required">*</span></label>
                            <input type="text" class="registration-number-input" name="registration_number[${index}]" placeholder="Enter Registration Number" value="" />
                        </div>
                        <div class="col-lg-4">
                            <label>Delivery Type <span class="required">*</span></label>
                            <select class="form-select delivery-type-input" name="delivery_type[${index}]">
                                <option value="">Delivery Type</option>
                                <option value="national">National</option>
                                <option value="local">Local</option>
                                <option value="both">Both</option>
                            </select>
                        </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 status-active-input" type="radio" name="status[${index}]" id="addStatusActive${index}" value="1" checked>
                                    <label class="form-check-label status-active-label" for="addStatusActive${index}">Active</label>
                                </div>
                                <div class="form-check form-check-inline">
                                    <input class="form-check-input status-inactive-input" type="radio" name="status[${index}]" id="addStatusInactive${index}" value="0">
                                    <label class="form-check-label status-inactive-label" for="addStatusInactive${index}">Inactive</label>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-lg-4">
                            <label class="form-label mt-0">Vehicle Image</label>
                            <div class="upload-wrapper">
                                <input type="file" id="thirdPartyVehicleImage${index}"
                                    class="file-input third-party-vehicle-image-input"
                                    name="vehicle_image[${index}]"
                                    accept=".jpg,.jpeg,.png,.webp"
                                    hidden>
                                <input type="text" class="form-control upload-display" placeholder="No File Chosen" readonly>
                                <label for="thirdPartyVehicleImage${index}" class="btn upload-btn d-flex align-items-center mb-0 third-party-vehicle-image-label">
                                    Upload
                                </label>
                            </div>
                        </div>
                    </div>
                </div>`;
        }

        window.removeThirdPartyRow = function(index) {
            $('#row-' + index).remove();
            reindexThirdPartyRows();
        };

        $('#addThirdPartyVehicleRowBtn').on('click', function() {
            const newRow = buildThirdPartyRowHtml(rowCount);
            $('#thirdPartyVehicleRows').append(newRow);
            reindexThirdPartyRows();

            $('html, body').animate({
                scrollTop: $('#row-' + (rowCount - 1)).offset().top - 50
            }, 300);
        });

        $(document).on('input', '#thirdPartyVehicleRows .registration-number-input, #ownerNameInput', function() {
            syncThirdPartyVehicleNumber();
        });

        $(document).on('change', '#thirdPartyVehicleRows .vehicle-type-input', function() {
            applyRowCapacityFromType($(this).closest('.third-party-vehicle-row'), true);
        });

        reindexThirdPartyRows();

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

        $(document).on('input', '.tp-contact-input', function() {
            this.value = String(this.value || '').replace(/\D/g, '').slice(0, 10);
        });

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

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

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

                $('.tp-city-input').val(response.data.city || '');
                $('.tp-state-input').val(response.data.state || '');
            });
        });

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

        $(document).on('input', '#thirdPartyVehicleRows .registration-number-input', function() {
            this.value = String(this.value || '').toUpperCase().replace(/\s+/g, '');
            syncThirdPartyVehicleNumber();
        });

        function clearRowFieldError($field) {
            $field.removeClass('is-invalid');
            $field.siblings('.dynamic-row-error').remove();
        }

        function setRowFieldError($field, message) {
            clearRowFieldError($field);
            $field.addClass('is-invalid');
            $('<span class="text-danger validation-error dynamic-row-error"></span>').text(message).insertAfter($field);
        }

        function clearRowGroupError($container) {
            $container.find('.status-active-input, .status-inactive-input').removeClass('is-invalid');
            $container.find('.dynamic-row-group-error').remove();
        }

        function setRowGroupError($container, message) {
            clearRowGroupError($container);
            $container.find('.status-active-input, .status-inactive-input').addClass('is-invalid');
            $('<span class="text-danger validation-error dynamic-row-group-error"></span>').text(message).appendTo($container);
        }

        function validateThirdPartyRows(checkServer) {
            if (typeof checkServer === 'undefined') {
                checkServer = true;
            }

            let isValid = true;
            let $firstInvalid = null;
            const seenRegistrations = {};
            const serverRegistrationChecks = [];
            const validationDeferred = $.Deferred();

            $('#thirdPartyVehicleRows .third-party-vehicle-row').each(function() {
                const $row = $(this);
                const $vehicleType = $row.find('.vehicle-type-input');
                const $capacity = $row.find('.capacity-input');
                const $modelBrand = $row.find('.model-brand-input');
                const $registration = $row.find('.registration-number-input');
                const $deliveryType = $row.find('.delivery-type-input');
                const $statusWrap = $row.find('.col-lg-4').last();
                const $statusInputs = $row.find('.status-active-input, .status-inactive-input');

                clearRowFieldError($vehicleType);
                clearRowFieldError($capacity);
                clearRowFieldError($modelBrand);
                clearRowFieldError($registration);
                clearRowFieldError($deliveryType);
                clearRowGroupError($statusWrap);

                if (!$vehicleType.val()) {
                    isValid = false;
                    setRowFieldError($vehicleType, 'Please select vehicle type');
                    $firstInvalid = $firstInvalid || $vehicleType;
                }

                const registrationValue = String($registration.val() || '').trim().toUpperCase().replace(/\s+/g, '');
                $registration.val(registrationValue);
                if (registrationValue === '') {
                    isValid = false;
                    setRowFieldError($registration, 'Please enter registration number');
                    $firstInvalid = $firstInvalid || $registration;
                } else if (registrationValue.length < 6) {
                    isValid = false;
                    setRowFieldError($registration, 'Registration number must be at least 6 characters');
                    $firstInvalid = $firstInvalid || $registration;
                } else if (seenRegistrations[registrationValue]) {
                    isValid = false;
                    setRowFieldError($registration, 'Registration number must be unique in added rows');
                    $firstInvalid = $firstInvalid || $registration;
                } else {
                    seenRegistrations[registrationValue] = true;
                    serverRegistrationChecks.push({
                        value: registrationValue,
                        $field: $registration
                    });
                }

                if ($capacity.val() !== '') {
                    const capacity = Number($capacity.val());
                    if (Number.isNaN(capacity) || capacity < 0) {
                        isValid = false;
                        setRowFieldError($capacity, 'Please enter valid capacity');
                        $firstInvalid = $firstInvalid || $capacity;
                    }
                }

                if (String($modelBrand.val() || '').length > 255) {
                    isValid = false;
                    setRowFieldError($modelBrand, 'Vehicle model & brand must be less than 255 characters');
                    $firstInvalid = $firstInvalid || $modelBrand;
                }

                const deliveryTypeValue = String($deliveryType.val() || '').trim();
                if (!deliveryTypeValue) {
                    isValid = false;
                    setRowFieldError($deliveryType, 'Please select delivery type');
                    $firstInvalid = $firstInvalid || $deliveryType;
                } else if (['national', 'local', 'both'].indexOf(deliveryTypeValue) === -1) {
                    isValid = false;
                    setRowFieldError($deliveryType, 'Please select valid delivery type');
                    $firstInvalid = $firstInvalid || $deliveryType;
                }

                if (!$statusInputs.filter(':checked').length) {
                    isValid = false;
                    setRowGroupError($statusWrap, 'Please select status');
                    $firstInvalid = $firstInvalid || $statusInputs.first();
                }
            });

            if (!isValid && $firstInvalid && $firstInvalid.length) {
                $firstInvalid.focus();
                validationDeferred.resolve(false);
                return validationDeferred.promise();
            }

            if (!checkServer || !serverRegistrationChecks.length) {
                validationDeferred.resolve(isValid);
                return validationDeferred.promise();
            }

            const pendingRequests = [];

            $.each(serverRegistrationChecks, function(_, item) {
                const request = $.ajax({
                    url: "{{ route('backend.master.check-registration-number') }}",
                    method: 'GET',
                    dataType: 'json',
                    data: {
                        registration_number: item.value,
                        vehicle_id: ''
                    }
                }).done(function(response) {
                    const isAvailable = response === true || response === 'true' || response === 1 || response === '1';
                    if (!isAvailable) {
                        isValid = false;
                        setRowFieldError(item.$field, 'This registration number already exists');
                        $firstInvalid = $firstInvalid || item.$field;
                    }
                }).fail(function() {
                    isValid = false;
                    setRowFieldError(item.$field, 'Unable to verify registration number. Please try again.');
                    $firstInvalid = $firstInvalid || item.$field;
                });

                pendingRequests.push(request);
            });

            $.when.apply($, pendingRequests).always(function() {
                if (!isValid && $firstInvalid && $firstInvalid.length) {
                    $firstInvalid.focus();
                }
                validationDeferred.resolve(isValid);
            });

            return validationDeferred.promise();
        }

        if ($.fn.validate) {
            $('#productForm').validate({
                ignore: [],
                rules: {
                    owner_name: {
                        required: true,
                        minlength: 2,
                        maxlength: 255
                    },
                    contact_number: {
                        required: true,
                        digits: true,
                        minlength: 10,
                        maxlength: 10
                    },
                    pincode: {
                        required: true,
                        digits: true,
                        minlength: 6,
                        maxlength: 6
                    },
                    city: {
                        required: true,
                        minlength: 2
                    },
                    state: {
                        required: true,
                        minlength: 2
                    },
                    address_line: {
                        required: true,
                        minlength: 3
                    }
                },
                messages: {
                    owner_name: {
                        required: 'Please enter transporter name',
                        minlength: 'Transporter name must be at least 2 characters long'
                    },
                    contact_number: {
                        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'
                    },
                    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'
                    },
                    state: {
                        required: 'Please enter state',
                        minlength: 'State must be at least 2 characters long'
                    },
                    address_line: {
                        required: 'Please enter address',
                        minlength: 'Address must be at least 3 characters long'
                    }
                },
                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) {
                    error.insertAfter(element);
                },
                invalidHandler: function() {
                    validateThirdPartyRows(false);
                },
                submitHandler: function(form) {
                    validateThirdPartyRows(true).done(function(rowsAreValid) {
                        if (!rowsAreValid) {
                            toastr.warning('Please fill all required vehicle details correctly.');
                            return;
                        }
                        form.submit();
                    });
                    return false;
                }
            });
        } else {
            $('#productForm').on('submit', function(e) {
                e.preventDefault();
                const form = this;
                validateThirdPartyRows(true).done(function(rowsAreValid) {
                    if (!rowsAreValid) {
                        toastr.warning('Please fill all required vehicle details correctly.');
                        return;
                    }
                    form.submit();
                });
            });
        }
    </script>
    <script>
        const selectAll = document.getElementById('selectAll');
        const checkboxes = document.querySelectorAll('.category-checkbox');
        const bulkActions = document.getElementById('bulkActions');

        // Toggle buttons visibility
        function toggleBulkActions() {
            const anyChecked = [...checkboxes].some(cb => cb.checked);
            bulkActions.classList.toggle('d-none', !anyChecked);
        }

        // Select All checkbox
        selectAll?.addEventListener('change', function() {
            checkboxes.forEach(cb => cb.checked = this.checked);
            toggleBulkActions();
        });

        // Individual checkbox change
        checkboxes.forEach(cb => {
            cb.addEventListener('change', () => {
                selectAll.checked = [...checkboxes].every(c => c.checked);
                toggleBulkActions();
            });
        });
    </script>
@endsection