@extends('layouts.business')

@section('title', 'Vehicle Bookings')
@section('breadcrumb_title', 'Vehicle Bookings')
@section('breadcrumb_title_route', route('business.vehicle_bookings.index'))
@section('breadcrumb_sub_title', 'Create')
@section('page_title', 'Create Vehicle Booking')

@section('content')
    <style>
        /* Remove Bootstrap's default validation icon (exclamation mark) from invalid inputs */
        .form-control.is-invalid {
            background-image: none !important;
            padding-right: 0.75rem !important;
        }

        .form-control.is-invalid:focus {
            background-image: none !important;
        }
    </style>


    <div class="min-h-screen bg-gray-50">
        <div class="row mt-4">
            <div class="col-12">
                @if (session('success'))
                    <div class="alert alert-success alert-dismissible fade show" role="alert">
                        <span class="alert-icon"><i class="ni ni-check-bold"></i></span>
                        <span class="alert-text">{{ session('success') }}</span>
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                @endif

                @if (session('error'))
                    <div class="alert alert-danger alert-dismissible fade show" role="alert">
                        <span class="alert-icon"><i class="ni ni-bell-55"></i></span>
                        <span class="alert-text">{{ session('error') }}</span>
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                @endif
            </div>
        </div>

        <div class="row mt-4">
            <div class="col-12">
                <div class="card">
                    <!-- Card header -->
                    <div class="card-header">
                        <div class="d-flex justify-content-between align-items-center">
                            <div>
                                <h5 class="mb-0">Booking Information</h5>
                                <p class="text-sm mb-0">
                                    Create a new vehicle booking.
                                </p>
                            </div>
                            <div>
                                <a href="{{ route('business.vehicle_bookings.index') }}" class="btn btn-secondary">
                                    <i class="fas fa-arrow-left me-2"></i>Back
                                </a>
                            </div>
                        </div>
                    </div>

                    <!-- Card body -->
                    <div class="card-body">
                        <form id="createBookingForm" method="POST" novalidate>
                            @csrf

                            <!-- Rental Details Section -->
                            <div class="mb-5">
                                <h6 class="text-uppercase text-body text-xs font-weight-bolder mb-3">Rental Details</h6>

                                <div class="row">
                                    <div class="col-md-6 mb-3">
                                        <label for="pickup_date" class="form-label">
                                            <i class="ni ni-calendar-grid-58 me-2"></i>Pickup Date
                                            <span class="text-danger">*</span>
                                        </label>
                                        <div class="input-group">
                                            <input class="form-control" type="date" id="pickup_date" name="pickup_date" required />
                                        </div>
                                        <small class="text-muted d-block d-lg-none mt-1">Select pickup date</small>
                                        <small class="text-danger font-weight-bold err_pickup_date d-block mt-1"></small>
                                    </div>

                                    <div class="col-md-6 mb-3">
                                        <label for="return_date" class="form-label">
                                            <i class="ni ni-calendar-grid-58 me-2"></i>Return Date
                                            <span class="text-danger">*</span>
                                        </label>
                                        <div class="input-group">
                                            <input class="form-control" type="date" id="return_date" name="return_date" required />
                                        </div>
                                        <small class="text-muted d-block d-lg-none mt-1">Select return date</small>
                                        <small class="text-danger font-weight-bold err_return_date d-block mt-1"></small>
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="col-md-6 mb-3">
                                        <label for="pickup_time" class="form-label">
                                            <i class="ni ni-watch-time me-2"></i>Pickup Time
                                            <span class="text-danger">*</span>
                                        </label>
                                        <div class="input-group">
                                            <input class="form-control" type="time" id="pickup_time" name="pickup_time" required />
                                        </div>
                                        <small class="text-muted d-block d-lg-none mt-1">Select pickup time</small>
                                        <small class="text-danger font-weight-bold err_pickup_time d-block mt-1"></small>
                                    </div>

                                    <div class="col-md-6 mb-3">
                                        <label for="return_time" class="form-label">
                                            <i class="ni ni-watch-time me-2"></i>Return Time
                                            <span class="text-danger">*</span>
                                        </label>
                                        <div class="input-group">
                                            <input class="form-control" type="time" id="return_time" name="return_time" required />
                                        </div>
                                        <small class="text-muted d-block d-lg-none mt-1">Select return time</small>
                                        <small class="text-danger font-weight-bold err_return_time d-block mt-1"></small>
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="col-md-6 mb-3">
                                        <label for="vehicle_type" class="form-label">
                                            <i class="ni ni-bus-front-12 me-2"></i>Vehicle Type
                                            <span class="text-danger">*</span>
                                        </label>
                                        <div class="input-group">
                                            <select class="form-control select2" id="vehicle_type" name="vehicle_type"
                                                    required>
                                                <option value="" disabled selected>Select Vehicle Type</option>
                                                @if (isset($carTypes) && $carTypes->count() > 0)
                                                    @foreach ($carTypes as $carType)
                                                        <option value="{{ $carType->id }}">
                                                            {{ $carType->name }}</option>
                                                    @endforeach
                                                @else
                                                    <option value="" disabled>No vehicle types available</option>
                                                @endif
                                            </select>
                                        </div>
                                        <small class="text-danger font-weight-bold err_vehicle_type"></small>
                                    </div>

                                    <div class="col-md-6 mb-3">
                                        <label for="vehicle" class="form-label">
                                            <i class="ni ni-bus-front-12 me-2"></i>Vehicle
                                            <span class="text-danger">*</span>
                                        </label>
                                        <div class="input-group">
                                            <select class="form-control select2" id="vehicle" name="vehicle" required>
                                                <option value="" disabled selected>Select Vehicle</option>
                                                @if (isset($vehicles) && $vehicles->count() > 0)
                                                    @foreach ($vehicles as $vehicle)
                                                        <option value="{{ $vehicle->id }}">{{ $vehicle->name }}</option>
                                                    @endforeach
                                                @endif
                                            </select>
                                        </div>
                                        <small class="text-danger font-weight-bold err_vehicle"></small>
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="col-md-6 mb-3">
                                        <label for="pickup_location" class="form-label">
                                            <i class="ni ni-pin-3 me-2"></i>Pickup Location
                                            <span class="text-danger">*</span>
                                        </label>
                                        <div class="input-group">
                                            <select class="form-control select2" id="pickup_location"
                                                    name="pickup_location" required>
                                                <option value="" disabled selected>Select Location</option>
                                                @if (isset($pickupLocations) && $pickupLocations->count() > 0)
                                                    @foreach ($pickupLocations as $location)
                                                        <option value="{{ $location->id }}">{{ $location->location }}
                                                        </option>
                                                    @endforeach
                                                @endif
                                            </select>
                                        </div>
                                        <small class="text-danger font-weight-bold err_pickup_location"></small>
                                    </div>
                                </div>

                                {{--  <div class="row">
                                    <div class="col-md-6 mb-3">
                                        <label for="latitude" class="form-label">
                                            <i class="ni ni-pin-3 me-2"></i></i>Latitude
                                            <span class="text-danger"></span>
                                        </label>
                                        <div class="input-group">
                                            <input class="form-control" type="number" id="latitude" name="latitude"
                                                step="any" min="-90" max="90"
                                                placeholder="e.g., 6.9271" />
                                        </div>
                                        <small class="text-danger font-weight-bold err_latitude"></small>
                                    </div>

                                    <div class="col-md-6 mb-3">
                                        <label for="longitude" class="form-label">
                                            <i class="ni ni-pin-3 me-2"></i></i>Longitude
                                            <span class="text-danger"></span>
                                        </label>
                                        <div class="input-group">
                                            <input class="form-control" type="number" id="longitude" name="longitude"
                                                step="any" min="-180" max="180"
                                                placeholder="e.g., 79.8612" />
                                        </div>
                                        <small class="text-danger font-weight-bold err_longitude"></small>
                                    </div>
                                </div>
                            </div>  --}}

                                <!-- Personal Information Section -->
                                <div class="mb-4">
                                    <h6 class="text-uppercase text-body text-xs font-weight-bolder mb-3">Personal
                                        Information</h6>

                                    <div class="row">
                                        <div class="col-md-12 mb-3">
                                            <label for="full_name" class="form-label">
                                                <i class="ni ni-single-02 me-2"></i>Full Name
                                                <span class="text-danger">*</span>
                                            </label>
                                            <div class="input-group">
                                                <input class="form-control" type="text" id="full_name"
                                                       name="full_name" placeholder="John Doe" required />
                                            </div>
                                            <small class="text-danger font-weight-bold err_full_name"></small>
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="col-md-6 mb-3">
                                            <label for="email" class="form-label">
                                                <i class="ni ni-email-83 me-2"></i>Email
                                                <span class="text-danger">*</span>
                                            </label>
                                            <div class="input-group">
                                                <input class="form-control" type="email" id="email" name="email"
                                                       placeholder="john@example.com" required />
                                            </div>
                                            <small class="text-danger font-weight-bold err_email"></small>
                                        </div>

                                        <div class="col-md-6 mb-3">
                                            <label for="phone" class="form-label">
                                                <i class="ni ni-mobile-button me-2"></i>Phone
                                                <span class="text-danger">*</span>
                                            </label>
                                            <input class="form-control" type="text" id="phone" name="phone"
                                                   placeholder=" +94 777 123 456" required />
                                            <small class="text-danger font-weight-bold err_phone"></small>
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="col-md-12 mb-3">
                                            <label for="special_requests" class="form-label">
                                                <i class="ni ni-settings me-2"></i>Special Requests
                                            </label>
                                            <div class="input-group">
                                                <textarea class="form-control" id="special_requests" name="special_requests"
                                                          placeholder="Any special requirements or requests?" rows="3" maxlength="255"></textarea>
                                            </div>
                                            <small class="text-muted d-block mt-1">Characters: <span id="char_count">0</span>/255</small>
                                            <small class="text-danger font-weight-bold err_special_requests"></small>
                                        </div>
                                    </div>
                                </div>

                                <div class="row mt-4">
                                    <div class="col-12">
                                        <div class="d-flex justify-content-end">
                                            <button type="button" class="btn bg-gradient-secondary btn-sm me-2"
                                                    onclick="window.location.href='{{ route('business.vehicle_bookings.index') }}'">
                                                Cancel
                                            </button>
                                            <button type="submit" class="btn bg-gradient-primary btn-sm" id="submitBtn">
                                                Create Booking
                                            </button>
                                        </div>
                                    </div>
                                </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    <script>
        $(document).ready(function() {
            // Set minimum date to tomorrow (prevent today from being selected)
            const today = new Date();
            const tomorrow = new Date(today);
            tomorrow.setDate(tomorrow.getDate() + 1);
            const minDate = tomorrow.toISOString().split('T')[0];

            $('#pickup_date').attr('min', minDate);
            $('#return_date').attr('min', minDate);

            // Set default time to 00:00 (12:00 AM) when time inputs are focused
            $('#pickup_time').on('focus', function() {
                if (!$(this).val()) {
                    $(this).val('00:00');
                }
            });

            $('#return_time').on('focus', function() {
                if (!$(this).val()) {
                    $(this).val('00:00');
                }
            });

            // Update return date minimum when pickup date changes
            $('#pickup_date').on('change', function() {
                const pickupDate = $(this).val();
                if (pickupDate) {
                    // Ensure return date is at least the pickup date
                    $('#return_date').attr('min', pickupDate);
                } else {
                    // Reset to tomorrow if pickup date is cleared
                    $('#return_date').attr('min', minDate);
                }
                // Update return time constraints when pickup date changes
                updateReturnTimeConstraints();
            });

            // Update return time constraints when return date changes
            $('#return_date').on('change', function() {
                updateReturnTimeConstraints();
            });

            // Update return time constraints when pickup time changes
            $('#pickup_time').on('change', function() {
                updateReturnTimeConstraints();
            });

            // Validate return time when it changes
            $('#return_time').on('change', function() {
                // Clear error when user selects a return time
                $(this).removeClass('is-invalid border-danger');
                $('.err_return_time').css({
                    'display': 'none',
                    'visibility': 'hidden'
                });
            });

            // Helper function to update return time constraints
            function updateReturnTimeConstraints() {
                const pickupDate = $('#pickup_date').val();
                const returnDate = $('#return_date').val();
                const returnTimeField = $('#return_time');

                // If pickup and return dates are the same, keep return time empty
                if (pickupDate && returnDate && pickupDate === returnDate) {
                    returnTimeField.prop('disabled', false);
                } else if (pickupDate && returnDate && pickupDate !== returnDate) {
                    // If dates are different, allow return time
                    returnTimeField.prop('disabled', false);
                } else {
                    // If conditions not met, clear the field
                    returnTimeField.val('');
                }

                // Always hide error message
                returnTimeField.removeClass('is-invalid border-danger');
                $('.err_return_time').css({
                    'display': 'none',
                    'visibility': 'hidden'
                });
            }

            // Handle vehicle type change - fetch vehicles by Vehicle type
            $('#vehicle_type').on('change', function() {
                const carTypeId = $(this).val();
                const vehicleSelect = $('#vehicle');

                // Clear vehicle selection and errors
                vehicleSelect.val(null).trigger('change');
                $('.err_vehicle').text('');
                vehicleSelect.removeClass('is-invalid border-danger');

                if (!carTypeId) {
                    // Clear vehicle dropdown if no Vehicle type selected
                    vehicleSelect.html('<option value="" disabled selected>Select Vehicle</option>');
                    return;
                }

                // Fetch vehicles for selected vehicle type
                $.ajax({
                    type: 'GET',
                    url: "{{ route('business.vehicle_bookings.get-vehicles-by-type', ':carTypeId') }}"
                        .replace(':carTypeId', carTypeId),
                    success: function(response) {
                        if (response.status && response.data) {
                            let html = '<option value="" disabled selected>Select Vehicle</option>';
                            response.data.forEach(function(vehicle) {
                                html += '<option value="' + vehicle.id + '">' + vehicle
                                        .vehicle_name + ' (' + vehicle.vehicle_no +
                                    ')</option>';
                            });
                            vehicleSelect.html(html);
                            vehicleSelect.trigger('change');
                        } else {
                            vehicleSelect.html(
                                '<option value="" disabled>No vehicles available</option>');
                        }
                    },
                    error: function() {
                        vehicleSelect.html(
                            '<option value="" disabled>Error loading vehicles</option>');
                    }
                });
            });

            // Clear errors when user starts typing
            $('#pickup_date, #pickup_time, #return_date, #return_time, #vehicle_type, #vehicle, #pickup_location, #full_name, #email, #phone, #special_requests, #latitude, #longitude')
                .on('input change', function() {
                    const fieldName = $(this).attr('name');
                    $('.err_' + fieldName).text('');
                    $(this).removeClass('is-invalid border-danger');

                    // If this is a select2 field, also clear select2's visible selection error styling
                    if ($(this).hasClass('select2-hidden-accessible')) {
                        $(this).next('.select2-container, .select2').find('.select2-selection').removeClass(
                            'is-invalid border-danger');
                    }
                });

            // Real-time character count for special requests with max limit of 255
            $('#special_requests').on('input', function() {
                const charCount = $(this).val().length;
                const maxLength = 255;
                $('#char_count').text(charCount);

                // Change color to warning when approaching limit (200+ characters)
                if (charCount >= 200) {
                    $('#char_count').closest('small').addClass('text-warning');
                } else {
                    $('#char_count').closest('small').removeClass('text-warning');
                }
            });

            // Form submission
            $('#createBookingForm').on('submit', function(e) {
                e.preventDefault();

                // Clear previous errors
                $('.err_pickup_date, .err_pickup_time, .err_return_date, .err_return_time, .err_vehicle_type, .err_vehicle, .err_pickup_location, .err_full_name, .err_email, .err_phone, .err_special_requests, .err_latitude, .err_longitude')
                    .text('');
                $('#pickup_date, #pickup_time, #return_date, #return_time, #vehicle_type, #vehicle, #pickup_location, #full_name, #email, #phone, #special_requests, #latitude, #longitude')
                    .removeClass('is-invalid border-danger');
                $('.select2-container .select2-selection, .select2 .select2-selection').removeClass(
                    'is-invalid border-danger');

                var formData = {
                    _token: $('meta[name="csrf-token"]').attr('content'),
                    pickup_date: $('#pickup_date').val(),
                    pickup_time: $('#pickup_time').val(),
                    return_date: $('#return_date').val(),
                    return_time: $('#return_time').val(),
                    vehicle_type: $('#vehicle_type').val(),
                    vehicle: $('#vehicle').val(),
                    pickup_location: $('#pickup_location').val(),
                    latitude: $('#latitude').val(),
                    longitude: $('#longitude').val(),
                    full_name: $('#full_name').val(),
                    email: $('#email').val(),
                    phone: $('#phone').val(),
                    special_requests: $('#special_requests').val(),
                };

                $.ajax({
                    type: "POST",
                    url: "{{ route('business.vehicle_bookings.store') }}",
                    data: formData,
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    beforeSend: function() {
                        $("#loader").show();
                        $("#submitBtn").prop('disabled', true);
                    },
                    success: function(response) {
                        $("#loader").hide();
                        $("#submitBtn").prop('disabled', false);

                        // Handle validation errors (status: false with errors)
                        if (response.status === false) {
                            // Handle field-specific errors
                            if (response.errors) {
                                $.each(response.errors, function(key, item) {
                                    if (key) {
                                        const errorMessage = Array.isArray(item) ? item[
                                            0] : item;
                                        const errorSelector = '.err_' + key;
                                        const inputSelector = '#' + key;

                                        const errorElement = $(errorSelector);
                                        const inputElement = $(inputSelector);

                                        if (errorElement.length > 0) {
                                            errorElement.text(errorMessage).css({
                                                'display': 'block',
                                                'visibility': 'visible',
                                                'opacity': '1'
                                            });
                                        }

                                        if (inputElement.length > 0) {
                                            inputElement.addClass(
                                                'is-invalid border-danger');

                                            // If this is a select2-enhanced select, style the visible select2 selection
                                            if (inputElement.hasClass(
                                                'select2-hidden-accessible')) {
                                                inputElement.next(
                                                    '.select2-container, .select2')
                                                    .find('.select2-selection')
                                                    .addClass(
                                                        'is-invalid border-danger');
                                            }
                                        }
                                    }
                                });
                            }

                            // Handle general message errors (like vehicle availability)
                            if (response.message) {
                                const message = response.message;

                                // Check if message is about vehicle availability
                                if (message.toLowerCase().includes('vehicle') &&
                                    (message.toLowerCase().includes('not available') ||
                                        message.toLowerCase().includes('available'))) {
                                    const errorElement = $('.err_vehicle_type');
                                    const inputElement = $('#vehicle_type');

                                    if (errorElement.length > 0) {
                                        errorElement.text(message).css({
                                            'display': 'block',
                                            'visibility': 'visible',
                                            'opacity': '1'
                                        });
                                    }

                                    if (inputElement.length > 0) {
                                        inputElement.addClass('is-invalid border-danger');
                                    }
                                }
                            }

                            return;
                        }

                        // Handle success response
                        if (response.status === true) {
                            $.confirm({
                                theme: 'modern',
                                columnClass: 'col-xl-6 col-lg-6 col-md-8 col-sm-12 col-12',
                                title: 'Success!',
                                content: response.message ||
                                    'Booking created successfully!',
                                type: 'green',
                                typeAnimated: true,
                                buttons: {
                                    confirm: {
                                        text: 'OK',
                                        btnClass: 'btn-primary',
                                        action: function() {
                                            window.location.href =
                                                '{{ route('business.vehicle_bookings.index') }}';
                                        }
                                    }
                                }
                            });
                        }
                    },
                    error: function(xhr) {
                        $("#loader").hide();
                        $("#submitBtn").prop('disabled', false);
                        console.error('Booking creation error:', xhr);
                        console.error('Response:', xhr.responseJSON);

                        if (xhr.status === 422) {
                            var response = xhr.responseJSON;
                            console.log('422 Validation Error - Full Response:', response);

                            if (response && response.errors) {
                                console.log('Errors object:', response.errors);

                                $.each(response.errors, function(key, item) {
                                    console.log('Processing error - Key:', key, 'Item:',
                                        item);

                                    if (key) {
                                        const errorMessage = Array.isArray(item) ? item[
                                            0] : item;
                                        const errorSelector = '.err_' + key;
                                        const inputSelector = '#' + key;

                                        console.log('Error Selector:', errorSelector);
                                        console.log('Input Selector:', inputSelector);
                                        console.log('Error Message:', errorMessage);

                                        const errorElement = $(errorSelector);
                                        const inputElement = $(inputSelector);

                                        console.log('Error Element Found:', errorElement
                                            .length);
                                        console.log('Input Element Found:', inputElement
                                            .length);

                                        if (errorElement.length > 0) {
                                            errorElement.text(errorMessage).css({
                                                'display': 'block',
                                                'visibility': 'visible'
                                            });
                                            console.log(
                                                'Error message set successfully for:',
                                                key);
                                        } else {
                                            console.error(
                                                'Error element NOT found for selector:',
                                                errorSelector);
                                        }

                                        if (inputElement.length > 0) {
                                            inputElement.addClass(
                                                'is-invalid border-danger');

                                            if (inputElement.hasClass(
                                                'select2-hidden-accessible')) {
                                                inputElement.next(
                                                    '.select2-container, .select2')
                                                    .find('.select2-selection')
                                                    .addClass(
                                                        'is-invalid border-danger');
                                            }

                                            console.log(
                                                'Error class added to input for:',
                                                key);
                                        } else {
                                            console.error(
                                                'Input element NOT found for selector:',
                                                inputSelector);
                                        }
                                    }
                                });
                            } else if (response && response.message) {
                                // Show validation error message
                                $.confirm({
                                    theme: 'modern',
                                    columnClass: 'col-lg-6 col-md-8 col-sm-10 col-12',
                                    title: 'Validation Error!',
                                    content: response.message,
                                    type: 'red',
                                    typeAnimated: true,
                                    buttons: {
                                        confirm: {
                                            text: 'OK',
                                            btnClass: 'btn-danger'
                                        }
                                    }
                                });
                            }
                        } else {
                            var errorMessage = 'Something went wrong!';
                            if (xhr.responseJSON && xhr.responseJSON.message) {
                                errorMessage = xhr.responseJSON.message;
                            }
                            $.confirm({
                                theme: 'modern',
                                columnClass: 'col-lg-6 col-md-8 col-sm-10 col-12',
                                title: 'Error!',
                                content: errorMessage,
                                type: 'red',
                                typeAnimated: true,
                                buttons: {
                                    confirm: {
                                        text: 'OK',
                                        btnClass: 'btn-danger'
                                    }
                                }
                            });
                        }
                    }
                });
            });
        });
    </script>
@endsection