@section('title', $isEditMode ? 'Edit Vessel' : 'Add Vessel')
@section('heading', $isEditMode ? 'Edit Vessel' : 'Add Vessel')
@section('top-menu-items')
    <x-partials.top-menu-item name="Tour Vessels" route="vessels" />
@endsection
<div>
    <div class="content d-flex flex-column flex-column-fluid" id="kt_content">
        <!--begin::Container-->
        <div id="kt_content_container" class="container-xxl">
            <!--begin::Card-->
            <div class="card" style="background-color: #F3F3F3;">
                <div class="col-12 m-2 pb-0 mb-0 p-3 mr-5">
                    <p class="text-muted">
                        {{ $isEditMode ? 'Change the settings of this Tour Vessel. Pro Tip: Use the Special Unavailability section to refine the availability of this Tour Vessel.' : 'Add a new Tour Vessel to your fleet. Pro Tip: Use the Special Unavailability section to refine the availability of this Tour Vessel.' }}
                    </p>
                </div>
                <form wire:submit.prevent="{{ $isEditMode ? 'update' : 'submit' }}">
                    <div class="row p-5 pt-0">
                        <!-- Left Column -->
                        <div class="col-md-6">
                            <!-- Vessel Type -->
                            <div class="form-group mb-4">
                                <label for="vessel_type_id" class="custom-label mb-1">Vessel Type:</label>
                                <p class="form-text pt-0 mt-0">What type of vessel is this?</p>
                                <div>
                                    @foreach (App\Enums\VesselType::cases() as $vesselType)
                                        <div class="form-check mt-2">
                                            <input type="radio" id="vessel_type_{{ $vesselType->value }}"
                                                class="form-check-input" wire:model="vessel_type_id"
                                                value="{{ $vesselType->value }}">
                                            <label class="form-check-label"
                                                style=" font-family: Poppins, Helvetica, sans-serif;"
                                                for="vessel_type_{{ $vesselType->value }}">{{ $vesselType->name() }}</label>
                                        </div>
                                    @endforeach
                                </div>
                                @error('vessel_type_id')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>

                            <!-- Number of Seats -->
                            <div class="form-group mb-4">
                                <label for="seats" class="custom-label mb-1">Passenger Occupancy:</label>
                                <br><small class="text-muted">What is the maximum number of passengers that can be accommodated by this Tour Vessel?</small>
                                <input type="number" id="seats" class="form-control  back-g form-control-white"
                                    wire:model="seats" placeholder="Number of Seats" style="background-color: #F3F3F3;" onwheel="this.blur()">
                                @error('seats')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>

                            <!-- Priority -->
                            <div class="form-group mb-4">
                                <label for="priority" class="custom-label mb-1">Online Booking Priority:</label>
                                <br><small class="text-muted">Of the available Tour Vessels,the Tour Vessel with
                                    lowest number will receive the booking first.</small>
                                <input type="number" id="priority" class="form-control  back-g form-control-white"
                                    wire:model="priority" placeholder="Enter Priority"
                                    style="background-color: #F3F3F3;" required  onwheel="this.blur()">
                                @error('priority')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                        </div>

                        <!-- Right Column -->
                        <div class="col-md-6">
                            <!-- Vessel Name -->
                            <div class="form-group mb-4">
                                <label for="name" class="custom-label mb-1">Vessel Name:</label>
                                <br><small class="text-muted">Give this Tour Vessel a unique name to be displayed on the
                                    Schedule.</small>
                                <input type="text" id="name" class="form-control  back-g form-control-white"
                                    wire:model="name" placeholder="Enter Vessel Name"
                                    style="background-color: #F3F3F3;">
                                @error('name')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>

                            <!-- Default Availability -->
                            <div class="form-group mb-4">
                                <label for="default_availability" class="custom-label mb-1">Availability:</label>
                                <br><small class="text-muted">Would you like this Tour Vessel added to the Schedule,
                                    ready to receive bookings?</small>
                                <select id="default_availability" class="form-select back-g form-select-white"
                                    wire:model="default_availability" style="background-color: #F3F3F3;">
                                    <option value="available">Available</option>
                                    <option value="not_available">Not Available</option>
                                </select>
                                @error('default_availability')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                        </div>


                        <livewire:unavailability :id="$isEditMode ? $vessel_id : null" :type="\App\Models\Vessel::class"
                          mainSubtext="Select a single date or several dates that your Tour Vessel will be blocked from bookings."
                                subtexts='{
                                "start_date": "Select the first day to block.",
                                "end_date": "Select the last day to block.",
                                "start_time": "Select the time that the block will start for each Date selected.",
                                "end_time": "Select the time that the block will end for each Date selected."
                            }' />


                        <div class="modal-footer flex-right" style="border-top: 0; padding-right: 4.5rem;">
                                <button 
                                type="button" 
                                class="btn btn-cancel me-3"                              
                                wire:click.prevent="
                                    $dispatch('run-cancel-js', { route: '{{ route('vessels') }}' })
                                ">
                                Cancel
                            </button>

                            <button type="submit" class="btn add-btn">
                                <span class="indicator-label">Save</span>
                                <span class="indicator-progress">Please wait...
                                    <span class="spinner-border spinner-border-sm align-middle ms-2"></span></span>
                            </button>
                        </div>
                        @if (session()->has('message'))
                            <div class="alert alert-success mt-3">
                                {{ session('message') }}
                            </div>
                        @endif
                </form>
            </div>
        </div>
    </div>
</div>
@push('styles')
    <link rel="stylesheet" href="/assets/css/custom/message.css" type="text/css" />
@endpush

@push('scripts')
    <script>

        window.addEventListener('run-cancel-js', event => {
        const route = event.detail.route;
        Swal.fire({
            text: "Are you sure you want to leave without saving changes?",
            icon: "warning",
            showCancelButton: true,
            buttonsStyling: false,
            confirmButtonText: "Yes, leave",
            cancelButtonText: "No, stay",
            customClass: {
                confirmButton: "btn fw-bold btn-danger",
                cancelButton: "btn fw-bold btn-active-light-primary",
            },
            }).then(function (result) {
                if (result.isConfirmed) {
                    window.location.href = route;
                }
            });
        });
        document.addEventListener('DOMContentLoaded', function() {
            document.getElementById('seats').addEventListener('wheel', function(e) {
                e.preventDefault();  
            });
        });
        Livewire.on('saveUnavailability', function(data) {
            setTimeout(() => {
                Livewire.dispatch('loadUnavailabilities', data); // Dispatch the event with data
            }, 300);
        });
    </script>
@endpush