@section('title', 'Admin Console')

@section('top-menu-items')
<x-partials.top-menu-item name="Organization" route="settings" />
<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 class="content d-flex flex-column flex-column-fluid" id="kt_content">
    <div id="kt_content_container" class="container-xxl">
        <div class="card mt-12" style="background-color: #F3F3F3;">
            <form wire:submit="save">
                <div class="row p-5">
                    <!-- General Subtext -->
                    <div class="col-12 mb-4">
                        <p class="text-muted">
                            These settings apply to the Schedule and can be further restricted through the Special Unavailability settings,
                            Tour Vessel settings, and Tour settings. <strong>Pro Tip:</strong> Aim to keep Availability settings as open as possible.
                        </p>
                    </div>
                   @php
                        $canEdit = auth()->user()->can('write_global_settings');
                    @endphp

                    <!-- Left Column -->
                    <div class="col-md-6">

                        <!-- Booking Start Time -->
                        <div class="form-group mb-4">
                            <label for="startTime" class="custom-label mb-1">Start Time:</label>
                            <br><small class="text-muted">What is the earliest time you open during the week?</small>
                            <input type="time" id="startTime" class="form-control form-control-white"
                                wire:model="settings.start_time"     @if($canEdit) wire:change="saveSettingOnChange" @else disabled @endif>
                            @error('startTime')
                            <span class="text-danger">{{ $message }}</span>
                            @enderror
                        </div>

                        <!-- Booking End Time -->
                        <div class="form-group mb-4">
                            <label for="endTime" class="custom-label mb-1">End Time:</label>
                            <br><small class="text-muted">What is the latest time you close during the week?</small>
                            <input type="time" id="endTime" class="form-control form-control-white"
                                wire:model="settings.end_time"     @if($canEdit) wire:change="saveSettingOnChange" @else disabled @endif>
                            @error('endTime')
                            <span class="text-danger">{{ $message }}</span>
                            @enderror
                        </div>
                        <!-- Calendar Time Increment -->
                        <div class="form-group mb-4">
                            <label for="calendarIncrement" class="custom-label mb-1">Time Interval:</label>
                            <br><small class="text-muted">Choose how you want the Schedule time slots to be displayed.</small>
                            <select id="calendarIncrement" class="form-control form-control-white"
                                wire:model="settings.calendar_increment"    @if($canEdit) wire:change="saveSettingOnChange" @else disabled @endif>
                                <option value="15">15 minutes</option>
                                <option value="30">30 minutes</option>
                            </select>
                            @error('calendar_increment')
                            <span class="text-danger">{{ $message }}</span>
                            @enderror
                        </div>
                        <div class="form-group mb-4">
                            <label for="bookingWindow" class="custom-label mb-1">Booking Window:</label>
                            <br><small class="text-muted">Your Schedule will be available for bookings until the selected date.</small>
                            <input type="date" id="bookingWindow" class="form-control form-control-white"
                                wire:model="settings.booking_window"   @if($canEdit) wire:change="saveSettingOnChange" @else disabled @endif>
                            @error('settings.booking_window')
                            <span class="text-danger">{{ $message }}</span>
                            @enderror
                        </div>
                    </div>
                    <!-- Right Column -->
                    <div class="col-md-6">
                        <div class="form-group mb-4 px-5">
                            <label class="custom-label mb-1">Open Days of the Week:</label>
                            <br><small class="text-muted">What are all the possible days of the week that you can be open?</small>
                            <div class="d-flex flex-column mt-2">
                                @foreach (['Monday','Tuesday','Wednesday','Thursday','Friday','Saturday','Sunday'] as $day)
                                <div class="form-check">
                                    <input type="checkbox"
                                        class="form-check-input custom-checkbox"
                                        id="day-{{ $day }}"
                                        value="{{ $day }}"
                                        wire:model="settings.available_days"
                                        @if($canEdit) wire:change="saveSettingOnChange" @else disabled @endif>

                                    <label class="form-check-label custom-label-checkbox" for="day-{{ $day }}">
                                        {{ $day }}
                                    </label>
                                </div>
                            @endforeach

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

            </form>

        </div>
    </div>
</div>

@push('styles')
<link rel="stylesheet" href="/assets/css/custom/settings.css" type="text/css" />
@endpush