@section('title', 'Online Bookings')

@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="" 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

@section('top-menu-items')
    <x-partials.top-menu-item name="Organization" route="settings" />
@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;">
            <div class="px-5 pt-5 pb-3">
                <span class="text-muted">
                    Access your Online Booking Form and customize your customer journey. <strong>Pro Tip:</strong> The customer journey in the Online Booking Form can be further customized through the Tour settings.
                </span>
            </div>
            <form wire:submit="save">
                <div class="row p-5">
                 <!-- Left Column -->
                    <div class="col-md-6">
                        <!-- Max Flights Allowed Per Day -->
                        <div class="form-group mb-4">
                            <label for="maxFlights" class="custom-label mb-3">Online Booking Form:</label><br>
                            <span class="text-muted">
                                Place this link on your website or elsewhere so that your Partners and Customers can access your Online Booking Form.
                            </span>
                            <div class="input-group">
                                <input type="text" id="onlineBookingUrl" class="form-control form-control-white"
                                    value="{{ route('tour-booking') }}" readonly>
                                <button class="btn btn-outline-secondary rounded" type="button" id="copyButton" style="background-color: white;">
                                    <i class="fas fa-copy fs-3"></i>
                                </button>                                
                            </div>
                            @error('maxFlights')
                                <span class="text-danger">{{ $message }}</span>
                            @enderror
                        </div> 

                        <div class="fv-row mb-7">
                            <label class="mb-2 custom-label">Same-day Booking</label><br>
                            <span class="text-muted">
                                Allow customers to book tours on the same day.
                            </span>

                            <div class="form-check form-switch mt-3">
                                <input class="form-check-input"
                                type="checkbox"
                                wire:model="settings.same_day_booking"
                                wire:change="saveSettingOnChange"
                                {{ auth()->user()->can('write_global_settings') ? '' : 'disabled' }}>

                                <label class="form-check-label" for="same_day_booking">
                                    Enable same-day booking
                                </label>
                            </div>
                        </div>
                    </div>

                    <!-- Right Column -->
                    <div class="col-md-6">
                        <!-- Booking Time Interval -->
                        <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 a Tour's available start times, how many minutes apart will those start times be?
                            </span>
                            <select class="form-control form-control-white" wire:model.lazy="time_interval_for_frontend" @cannot('write_global_settings') disabled @endcannot>
                                <option value="15">15 minutes apart</option>
                                <option value="30">30 minutes apart</option>
                                <option value="60">1 hour apart</option>
                            </select>
                                                        
                            @error('time_interval_for_frontend')
                                <span class="text-danger">{{ $message }}</span>
                            @enderror                            
                        </div>

                        <!-- Logo Upload Section (moved here) -->
                        <div class="fv-row mb-7">
                            <label class="mb-2 custom-label">Upload Your Logo</label><br>                       

                            @if($logoUrl)
                                <div class="mt-3 mb-3">
                                    <img src="{{ $logoUrl }}" alt="Logo" style="max-width: 200px; max-height: 100px; object-fit: contain;" class="border rounded p-2">
                                </div>
                                @can('write_global_settings')
                                <button type="button" class="btn btn-sm btn-danger" wire:click="removeLogo">
                                    Remove Logo
                                </button>
                                @endcan
                            @endif

                            @can('write_global_settings')
                            <div class="mt-3">
                                <input type="file" 
                                    class="form-control form-control-white" 
                                    wire:model="logo"
                                    accept="image/jpeg,image/jpg,image/png,image/gif,image/webp">
                                <small class="text-muted d-block mt-1">Accepted formats: JPEG, JPG, PNG, GIF, WEBP (Max: 2MB)</small>
                            </div>
                            @endcan

                            @error('logo')
                                <span class="text-danger d-block mt-2">{{ $message }}</span>
                            @enderror

                            @if (session()->has('message'))
                                <div class="alert alert-success mt-3">
                                    {{ session('message') }}
                                </div>
                            @endif
                        </div>
                    </div>

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

<script>
    document.getElementById('copyButton').addEventListener('click', function() {
        var copyText = document.getElementById('onlineBookingUrl');
        copyText.select();
        document.execCommand('copy');
        var tooltip = document.getElementById('tooltip');
        tooltip.style.display = 'block';
        setTimeout(function() {
            tooltip.style.display = 'none';
        }, 2000);
    });
</script>