@section('title', 'Special Unavalilability')

@section('top-menu-items')
    <div class="menu-item here show menu-lg-down-accordion me-lg-1">
        <a class="menu_link py-3 " style="background: #F3F3F3; color: #F4404B" href="/special-unavailability" wire:navigate>
            <span class="menu-title">Organization</span>
            <span class="menu-arrow d-lg-none"></span>
        </a>
    </div>
    <x-partials.top-menu-item name="Tour Vessels" route="vessels" /> 
    <x-partials.top-menu-item name="Team Members" route="users" />
@endsection
@section('sub-menu-items')
    <x-partials.sub-menu-item name=" Availability" route="settings" />
    <x-partials.sub-menu-item name="Special Unavailability" route="special-unavailability" />
    <x-partials.sub-menu-item name="Taxes" route="taxes" />
    <x-partials.sub-menu-item name="Online Bookings" route="online-booking" />
    <x-partials.sub-menu-item name="Airport Settings" route="airport-setting" />
    <x-partials.sub-menu-item name="Booking Settings" route="order-information" />  
    <x-partials.sub-menu-item name="APIs" route="auth-token" />
    <x-partials.sub-menu-item name="Integrations" route="stripe-connect" />   
@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 mt-12" style="background-color: #F3F3F3;">
                <div class="col-12 m-2 pb-0 mb-0 p-3 pt-0 mr-5">
                    <p class="text-muted">
                        These settings will block the Schedule from accepting bookings. Select a single date or several
                        dates that your Schedule will be blocked from bookings. Pro Tip: Use these settings to prevent
                        bookings from occurring during holidays, team meetings, season changes, and more!
                    </p>
                </div>
                <!-- <form wire:submit.prevent="saveUnavailability"> -->
                    <div class="row  pb-0 p-5 pt-0">
                        <livewire:unavailability mainSubtext=""
                            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."
                            }'
                            :id="null" 
                           :type="\App\Models\Setting::class"
                           :setting="true"
                            />

                        @if (session()->has('message'))
                            <div class="alert alert-success mt-3">
                                {{ session('message') }}
                            </div>
                        @endif
                    </div>
                    <!-- <div class="d-flex justify-content-end p-3 pt-0">
                        <button type="submit" class="btn btn-primary " style="margin-right:20px;">
                            Save
                        </button>
                    </div> -->

                <!-- </form> -->
            </div>
        </div>
    </div>
</div>
@push('styles')
    <link rel="stylesheet" href="/assets/css/custom/message.css" type="text/css" />
@endpush