@extends('layout.admin.master')

@section('content')
    <!-- Main Content -->
    <div class="main-content">
        <section class="section">
            <div class="section-body">
                <div class="row justify-content-center">
                    <div class="col-12 col-md-8 col-lg-6">
                        <div class="card">
                            <form action="{{ route('bookings.store') }}" method="POST" enctype="multipart/form-data">
                                @csrf
                                <div class="card-header">
                                    <h4>{{ __('messages.add_booking') }}</h4>
                                </div>
                                <div class="card-body">

                                    <div class="form-group">
                                        <label>{{ __('messages.on_road') }}</label>
                                        <input name="on_road" id="on_road" type="checkbox" value="1"
                                            {{ old('on_road') ? 'checked' : '' }}>

                                        @if ($errors->has('on_road'))
                                            <div class="text-danger">{{ $errors->first('on_road') }}</div>
                                        @endif
                                    </div>

                                    <div class="form-group">
                                        <label>{{ __('messages.travel_date') }}</label>
                                        <input name="travel_date" type="date" class="form-control"
                                            value="{{ old('travel_date') }}">

                                        @if ($errors->has('travel_date'))
                                            <div class="text-danger">{{ $errors->first('travel_date') }}</div>
                                        @endif
                                    </div>

                                    <div class="form-group road_dependent_field">
                                        <label>{{ __('messages.travel_time') }}</label>
                                        <input name="travel_time" type="time" class="form-control"
                                            value="{{ old('travel_time') }}">

                                        @if ($errors->has('travel_time'))
                                            <div class="text-danger">{{ $errors->first('travel_time') }}</div>
                                        @endif
                                    </div>

                                    <div class="form-group if_on_road">
                                        <label>{{ __('messages.account') }}</label>
                                        <select name="account_id" id="account" class="form-control">
                                            <option selected disabled>{{ __('messages.select_account') }}</option>
                                            @forelse ($accounts as $account)
                                                <option value="{{ $account->id }}"
                                                    {{ old('account_id') == $account->id ? 'selected' : '' }}>
                                                    {{ $account->title . '  --  ' . $account->type }}
                                                </option>
                                            @empty
                                                <option disabled>{{ __('messages.no_accounts') }}</option>
                                            @endforelse
                                        </select>

                                        @if ($errors->has('account_id'))
                                            <div class="text-danger">{{ $errors->first('account_id') }}</div>
                                        @endif
                                    </div>

                                    <div class="form-group">
                                        <label>{{ __('messages.partner') }}</label>
                                        <select name="partner_id" class="form-control">
                                            <option value="" selected>{{ __('messages.select_partner') }}</option>
                                            @forelse ($partners as $partner)
                                                <option value="{{ $partner->id }}"
                                                    {{ old('partner_id') == $partner->id ? 'selected' : '' }}>
                                                    {{ $partner->fname . ' ' . $partner->lname }}</option>
                                            @empty
                                                <option disabled>{{ __('messages.no_partners') }}</option>
                                            @endforelse
                                        </select>

                                        @if ($errors->has('partner_id'))
                                            <div class="text-danger">{{ $errors->first('partner_id') }}</div>
                                        @endif
                                    </div>

                                    <div class="form-group">
                                        <label>{{ __('messages.driver') }}</label>
                                        <select name="employee_id" id="employee_id" class="form-control">
                                            <option value="" selected>{{ __('messages.select_driver') }}</option>
                                            @forelse ($drivers as $driver)
                                                <option value="{{ $driver->id }}"
                                                    {{ old('employee_id', $selectedDriverId ?? '') == $driver->id ? 'selected' : '' }}>
                                                    {{ $driver->fname . ' ' . $driver->lname }}</option>
                                            @empty
                                                <option disabled>{{ __('messages.no_drivers') }}</option>
                                            @endforelse
                                        </select>

                                        @if ($errors->has('employee_id'))
                                            <div class="text-danger">{{ $errors->first('employee_id') }}</div>
                                        @endif
                                    </div>

                                    <div class="form-group">
                                        <label>{{ __('messages.vehicle') }}</label>
                                        <select name="vehicle_id" id="vehicle_id" class="form-control">
                                            <option value="" selected>{{ __('messages.select_vehicle') }}</option>
                                            @forelse ($vehicles as $vehicle)
                                                <option value="{{ $vehicle->id }}"
                                                    {{ old('vehicle_id', $selectedVehicleId ?? '') == $vehicle->id ? 'selected' : '' }}>
                                                    {{ $vehicle->name }}</option>
                                            @empty
                                                <option disabled>{{ __('messages.no_vehicles') }}</option>
                                            @endforelse
                                        </select>

                                        @if ($errors->has('vehicle_id'))
                                            <div class="text-danger">{{ $errors->first('vehicle_id') }}</div>
                                        @endif
                                    </div>

                                    <div class="form-group road_dependent_field">
                                        <label>{{ __('messages.passenger_name') }}</label>
                                        <input name="passenger_name" type="text" class="form-control"
                                            value="{{ old('passenger_name') }}">

                                        @if ($errors->has('passenger_name'))
                                            <div class="text-danger">{{ $errors->first('passenger_name') }}</div>
                                        @endif
                                    </div>

                                    <div class="form-group road_dependent_field">
                                        <label>{{ __('messages.passenger_phone') }}</label>
                                        <input name="passenger_phone" type="text" class="form-control"
                                            value="{{ old('passenger_phone') }}">

                                        @if ($errors->has('passenger_phone'))
                                            <div class="text-danger">{{ $errors->first('passenger_phone') }}</div>
                                        @endif
                                    </div>

                                    <div class="form-group road_dependent_field">
                                        <label>{{ __('messages.airline') }}</label>
                                        <input name="airline" type="text" class="form-control"
                                            value="{{ old('airline') }}">

                                        @if ($errors->has('airline'))
                                            <div class="text-danger">{{ $errors->first('airline') }}</div>
                                        @endif
                                    </div>

                                    <div class="form-group">
                                        <label>{{ __('messages.pickup_location') }}</label>
                                        <input name="pickup_location" type="text" class="form-control"
                                            value="{{ old('pickup_location') }}">

                                        @if ($errors->has('pickup_location'))
                                            <div class="text-danger">{{ $errors->first('pickup_location') }}</div>
                                        @endif
                                    </div>

                                    <div class="form-group">
                                        <label>{{ __('messages.dropoff_location') }}</label>
                                        <input name="dropoff_location" type="text" class="form-control"
                                            value="{{ old('dropoff_location') }}">

                                        @if ($errors->has('dropoff_location'))
                                            <div class="text-danger">{{ $errors->first('dropoff_location') }}</div>
                                        @endif
                                    </div>

                                    <div class="form-group">
                                        <label>{{ __('messages.debit') }}</label>
                                        <input name="debit" type="number" class="form-control"
                                            value="{{ old('debit') }}" required="">

                                        @if ($errors->has('debit'))
                                            <div class="text-danger">{{ $errors->first('debit') }}</div>
                                        @endif
                                    </div>

                                    <div class="form-group if_on_road">
                                        <label>{{ __('messages.credit') }}</label>
                                        <input name="credit" type="number" class="form-control"
                                            value="{{ old('credit') }}">

                                        @if ($errors->has('credit'))
                                            <div class="text-danger">{{ $errors->first('credit') }}</div>
                                        @endif
                                    </div>

                                </div>
                                <div class="card-footer text-right">
                                    <button class="btn btn-primary">{{ __('messages.submit') }}</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

    <script>
        $(document).ready(function() {
            function toggleRoadFields() {
                if ($('#on_road').is(':checked')) {
                    $('.if_on_road').show();
                    $('.road_dependent_field').hide();
                } else {
                    $('.if_on_road').hide();
                    $('.road_dependent_field').show();
                }
            }

            // Initialize the fields visibility based on the checkbox state
            toggleRoadFields();

            // Attach event listener to the checkbox
            $('#on_road').change(function() {
                toggleRoadFields();
            });

            
            // JSON data for drivers
            const drivers = @json($drivers);

            // Get references to elements
            const employeeSelect = document.getElementById('employee_id');
            const vehicleSelect = document.getElementById('vehicle_id');
            const onRoadCheckbox = document.getElementById('on_road');

            // Function to auto-select vehicle based on employee
            function autoSelectVehicle() {
                const selectedDriverId = employeeSelect.value;
                const selectedDriver = drivers.find(driver => driver.id == selectedDriverId);

                if (selectedDriver) {
                    vehicleSelect.value = selectedDriver.vehicle_id;
                }
            }

            // Function to auto-select employee based on vehicle if on_road is checked
            function autoSelectEmployee() {
                if (onRoadCheckbox.checked) {
                    const selectedVehicleId = vehicleSelect.value;
                    const selectedDriver = drivers.find(driver => driver.vehicle_id == selectedVehicleId);

                    if (selectedDriver) {
                        employeeSelect.value = selectedDriver.id;
                    }
                }
            }

            // Attach event listeners
            employeeSelect.addEventListener('change', autoSelectVehicle);
            vehicleSelect.addEventListener('change', autoSelectEmployee);

            // Initialize vehicle selection on page load
            autoSelectVehicle();
            autoSelectEmployee();


        });
    </script>
@endsection