@section('title', $isEditMode ? 'Edit Tour' : 'Add Tour')
@section('heading', $isEditMode ? 'Edit Tour' : 'Add Tour')

@section('top-menu-items')
<x-partials.top-menu-item name="Tours" route="tours" />
@endsection
<div class="container mt-2">
    <form wire:submit.prevent="{{ $isEditMode ? 'update' : 'submit' }}">
        <div class="row mt-5">
            <span class="text-muted">Add a new Tour to your Store for purchase. Pro Tip: Use the Special Unavailability section to refine the availability of this Tour.</span>
            <div class="row">
                <div class="col-lg-5" style="padding-right: 40px">
                    <div class="mb-4">
                        <label class="my-2 custom-label">Tour Type</label>
                        <div class="btn-group-vertical d-flex">
                            <span class="text-muted">What is the primary Tour Vessel type that this Tour uses?</span>
                            @foreach ($filteredVesselTypes as $vesselType)
                            <button type="button" wire:click="$set('vessel_type_id', '{{ $vesselType->value }}')"
                                class="btn {{ $vessel_type_id == $vesselType->value ? 'btn-danger' : 'btn-outline-secondary' }} 
                                flex-fill d-flex align-items-center mb-2 rounded"
                                style="background-color: #f3f3f3; height: 53px;">
                                <i class="fas {{ $vesselType->icon() }} me-4"
                                    style="color: {{ $vessel_type_id == $vesselType->value ? 'white' : 'black' }}; font-size: 24px;"></i>
                                <span
                                    style="text-align: center; color: {{ $vessel_type_id == $vesselType->value ? 'white' : 'inherit' }};">
                                    {{ $vesselType->name() }} Tour
                                </span>
                            </button>
                            @endforeach
                        </div>
                        @error('vessel_type_id')
                        <span class="text-danger">{{ $message }}</span>
                        @enderror
                    </div>

                    <div class="mb-4">
                        <x-input-label customClass="custom-label" class="mb-2" for="tourName" :value="__('Tour Name')" /><br>
                        <span class="text-muted">What Tour name would you like displayed to your Customers?</span>
                        <x-text-input wire:model="name" id="tourName" class="form-control form-control-solid"
                            type="text" placeholder="Tour Name" style="background-color: #F3F3F3;" />
                        <x-input-error :messages="$errors->get('name')" class="mt-2" />
                    </div>
                    <div class="mb-4">
                        <label for="description" class="custom-label mb-3">Tour Description</label><br>
                        <span class="text-muted">Briefly describe the Tour to your Customers so that they know they
                            selected the correct Tour.</span>
                        <textarea id="description" class="form-control form-control-solid" wire:model="description" rows="5"
                            placeholder="Enter tour description here" style="background-color: #F3F3F3;"></textarea>
                        @error('description')
                        <span class="text-danger">{{ $message }}</span>
                        @enderror
                    </div>

                    <div class="col-md-12 mb-3">
                        <label for="duration" class="mb-2 custom-label">
                            Tour Duration
                        </label><br>
                        <span class="text-muted">
                            How many minutes does this Tour take on your schedule, from departure to being ready to
                            depart again?
                        </span>
                        <input type="number" id="duration" class="form-control form-control-solid w-100"
                            wire:model.defer="duration" style="background-color: #F3F3F3;" onwheel="this.blur()">
                        @error('duration')
                        <span class="text-danger">{{ $message }}</span>
                        @enderror
                    </div>

                    <div class="col-md-12 mb-4">
                        <label for="schedule_colour" class="custom-label d-block mb-2">
                            Select Colour
                        </label>
                        <span class="text-muted d-block">
                            Select an RGB or Hex colour for this Tour to display on the Schedule.<br>
                            <strong>Pro Tip:</strong> Choose a colour that complements black icons and text on the
                            Schedule.
                        </span>
                        <input type="color" id="schedule_colour" class="form-control form-control-solid w-50"
                            wire:model.defer="schedule_colour" style="height: 40px; cursor: pointer;">

                        @error('schedule_colour')
                        <span class="text-danger">{{ $message }}</span>
                        @enderror
                    </div>


                    <div class="fv-row mb-7">
                        <label class="mb-2 custom-label">Availability</label><br>
                        <span class="text-muted">Would you like this Tour added to the Schedule, ready to receive
                            bookings?</span>
                        <select class="form-control form-control-solid" wire:model.defer="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 class="fv-row mb-7">
                        <label class="mb-2 custom-label">Online Booking</label><br>
                        <span class="text-muted">Do you want this Tour to be available for booking through the
                            Online Booking Form?</span>
                        <select class="form-control form-control-solid" wire:model.defer="online_booking"
                            style="background-color: #F3F3F3;">
                            <option value="1">Yes</option>
                            <option value="0">No</option>
                        </select>
                        @error('online_booking')
                        <span class="text-danger">{{ $message }}</span>
                        @enderror
                    </div>

                    <div class="fv-row mb-7">
                        <label class="mb-2 custom-label">Booking Time Interval</label><br>
                        <span class="text-muted">When your Customers see this Tour's available start times, how
                            many minutes apart will those start times be?</span>
                        <select class="form-control form-control-solid"
                            wire:model.defer="time_interval_for_frontend" style="background-color: #F3F3F3;" onwheel="this.blur()">
                            <option value="15">15</option>
                            <option value="30">30</option>
                            <option value="1">60</option>
                        </select>
                        @error('time_interval_for_frontend')
                        <span class="text-danger">{{ $message }}</span>
                        @enderror
                    </div>
                </div>

                <div class="col-lg-7" style="padding-left: 50px">
                    <!-- Tour Image -->
                    <div class="mb-4">
                        <label class="my-2 custom-label">Tour Image</label>
                        <div class="image-upload-box position-relative text-center">
                            @if ($image)
                            <img src="{{ $image->temporaryUrl() }}" class="img-fluid rounded" alt="Tour Image">
                            @else
                            <img src="/assets/tenancy/images/tourspic.png" class="img-fluid rounded"
                                alt="Tour Image">
                            @endif

                            <button type="button"
                                class="btn-lights btn-upload position-absolute top-50 start-50 translate-middle"
                                onclick="document.getElementById('imageInput').click();">
                                Upload
                            </button>

                            <input type="file" id="imageInput" style="display:none;" accept="image/*"
                                wire:model="image">
                        </div>
                    </div>

                    <div class="row g-3 mb-4">

                        <div class="col-md-12 d-flex flex-column mb-3">
                            <label for="max_seats" class="mb-1 custom-label mb-2" style="width: 200px;">
                                Maximum Participants
                            </label>
                            <span class="text-muted">
                                The maximum number of participants that can attend this Tour at a single start time is
                                determined
                                by the maximum number of passengers your Tour Vessels can accommodate.
                            </span>
                            <input type="number" id="max_seats" class="form-control form-control-solid"
                                wire:model.defer="max_seats" style="background-color: #F3F3F3; width: 100%;"
                                placeholder="" onwheel="this.blur()">
                            @error('max_seats')
                            <span class="text-danger mt-1">{{ $message }}</span>
                            @enderror
                        </div>

                        <div class="col-md-12 mb-3">
                            <label for="min_seats" class="mb-2 custom-label">
                                Minimum Participants
                            </label>
                            <span class="text-muted d-block">
                                When this Tour is booked, what is the minimum number of participants required to
                                complete the booking?
                            </span>
                            <input type="number" id="min_seats" class="form-control form-control-solid w-100"
                                wire:model.defer="min_seats" style="background-color: #F3F3F3;" onwheel="this.blur()">
                            @error('min_seats')
                            <span class="text-danger">{{ $message }}</span>
                            @enderror
                        </div>                          
                        <div class="col-md-12 mb-4">
                            <div class="mb-2">
                                <label for="checkbox_private_by_default" class="custom-label">
                                    Private Flight by Default
                                </label>
                                <span class="text-muted d-block">
                                    When enabled, every Booking made on this Tour will automatically be set as a Private Flight.
                                </span>
                                <div class="passenger-input">
                                    <div class="form-check form-switch form-check-custom form-check-solid">
                                        <input class="form-check-input h-20px w-40px"
                                            type="checkbox"
                                            id="checkbox_private_by_default"
                                            wire:model="private_by_default"
                                            @if($private_by_default) checked @endif />
                                    </div>
                                </div>
                                @error('private_by_default')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                        </div>
                        

                        <!-- Price Per Person Checkbox -->
                        <div class="col-md-12 mb-4">
                            <div class="mb-2">
                                <label for="checkbox_private_flight_fee" class="custom-label">
                                    Private Flight Fee
                                </label>
                                <span class="text-muted d-block">
                                    Would you like to allow Private Flight Fees as an Add-On to this Tour?
                                </span>
                                <div class="passenger-input">
                                    <div class="form-check form-switch form-check-custom form-check-solid">
                                        <input class="form-check-input h-20px w-40px" type="checkbox"
                                            id="checkbox_private_flight_fee"
                                            wire:click="toggleShowPrivateFeeInput"
                                            @if($private_flight_fee) checked @endif
                                            onwheel="this.blur()" />
                                    </div>
                                </div>
                            </div>

                            @if ($private_flight_fee)
                            <div id="private_fee_input" class="mt-3">
                                <label class="custom-label">Private Flight Fee Price</label>
                                <input type="number" step="0.01" min="0"
                                    wire:model.defer="private_fee_price"
                                    @if($private_flight_fee) required @endif
                                    class="form-control form-control-solid w-100"
                                    style="background-color: #F3F3F3;" />                      
                            </div>
                            @endif
                        </div>

                        <div class="fv-row mb-7 border-none" wire:ignore>
                            <x-input-label customClass="custom-label" class="mb-2" for="selectedTaxes"
                                :value="__('Applicable Taxes')" /><br>
                            <span class="text-muted">Select the taxes that apply to this Tour at the time of
                                payment</span>
                            <select wire:model="selectedTaxes" class="form-select form-control-solid bg"
                                id="selectedTo" data-control="select2" data-placeholder="Select taxes"
                                data-allow-clear="true" multiple="multiple">

                                <option></option>
                                @foreach ($taxes as $tax)
                                <option value="{{ $tax->id }}"
                                    @if (in_array($tax->id, $selectedTaxes)) selected @endif>
                                    {{ $tax->name }}
                                </option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <div class="col-md-12 mb-4">
                        <!-- Section Header -->
                        <h2 class="custom-header">Pricing</h2>
                        <span class="text-muted d-block mb-3">
                            What pricing options would you like your Customers to choose from. Select all that apply
                            to this Tour.
                        </span>
                        <div class="mb-2">
                            <input class="h-20px w-40px"
                                type="checkbox"
                                id="price_per_person_checkbox"
                                @if ($show_price_input) checked @endif
                                wire:click="toggleShowPriceInput" />
                            <label for="price_per_person_checkbox" class="custom-label">
                                Price by Tour
                            </label>
                        </div>
                        @if ($show_price_input)
                        <span class="text-muted d-block ">
                            What is this cost of this Tour?
                        </span>
                        <div id="price_input_wrapper">
                            <input type="number" min="0" step="0.01" id="Pricing" class="form-control form-control-solid w-100"
                                wire:model.defer="price_by_tour" style="background-color: #F3F3F3;" onwheel="this.blur()">
                        </div>
                        @error('price_per_person')
                        <span class="text-danger">{{ $message }}</span>
                        @enderror
                        @endif
                    </div>
                </div>
                <livewire:price-per-participant :id="$isEditMode ? $tour_id : null" :type="\App\Models\Tour::class"
                    mainSubtext=" Add different pricing types with discount."
                    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."
                            }' />
                <livewire:unavailability :id="$isEditMode ? $tour_id : null" :type="\App\Models\Tour::class"
                    mainSubtext=" Select a single date or several dates that your Tour 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;">
                <!-- Cancel Button -->
                <button 
                    type="button" 
                    class="btn btn-cancel me-3"                 
                    wire:click.prevent="
                        $dispatch('run-cancel-js', { route: '{{ route('tours') }}' })
                    ">
                    Cancel
                </button>

                    <button type="submit" id="kt_modal_add_customer_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
            </div>
    </form>
</div>

@push('styles')
<link rel="stylesheet" href="/assets/css/custom/tour.css" type="text/css" />
<style>
    .bg {
        background: #F3F3F3 !important;
        border-color: rgb(255, 255, 255) !important;
    }
</style>
@endpush

@push('scripts')
<script src="/assets/js/custom/tour.js"></script>
<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('livewire:load', function() {
        // Run once when the page fully loads
        setTimeout(() => {
            KTApp.initSelect2();
            selectVesselType(vesselType);
            reinitialize();
        }, 10);
    });
    $(document).ready(function() {
        $('#selectedTo').on('change', function(e) {            
            @this.set('selectedTaxes', $(this).val());
        });
    });

    $(document).ready(function() {
        $('#checkbox_private_flight_fee').on('change', function() {
            if ($(this).is(':checked')) {
                $('#private_fee_input').removeClass('d-none');
            } else {
                $('#private_fee_input').addClass('d-none');
            }
        });
    });
</script>

@endpush