@extends('layouts.customer')

@section('content')
<link rel="stylesheet" href="{{ asset('css/duration-picker.css') }}" />
<!-- location dropdown css -->
<style>
    /* Visual styles modeled after your screenshot */
    .loc-display {
      background: #fff;
      border-radius: 8px;
      box-shadow: 0 0 0 1px rgba(0,0,0,0.03);
      padding: 12px 14px;
      display:flex;
      gap:12px;
      align-items:flex-start;
      justify-content:space-between;
    }
    .right-0 {right: 0;}
    .loc-left { display:flex; gap:12px; min-width:0; align-items:flex-start; }
    .loc-pin { color:#c03957; font-size:20px; margin-top:2px; }
    .loc-meta { min-width:0; }
    .loc-title { font-weight:600; color:#212529; display:flex; gap:8px; align-items:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .loc-sub { color:#6c757d; font-size:0.9rem; margin-top:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .loc-badge { font-size:0.68rem; padding:.2rem .45rem; border-radius:.375rem; }
    .loc-edit { color:#0d6efd; cursor:pointer; font-size:18px; }
    .dropdown-panel {
        position: absolute; background:#fff; border-radius:8px; box-shadow:0 8px 24px rgba(0,0,0,0.12);
        margin-top:8px; width:420px; max-width:calc(100% - 32px); overflow:hidden; z-index: 999;
    }
    .dropdown-header { padding:10px 12px; border-bottom:1px solid #eee; display:flex; gap:8px; align-items:center; }
    .dropdown-search { flex:1; }
    .dropdown-list { max-height:280px; overflow:auto; }
    .loc-row { display:flex; gap:10px; padding:10px 12px; align-items:flex-start; cursor:pointer; }
    .loc-row:hover { background:#f8f9fb; }
    .loc-row.active { background:#e9f4ff; border-left:3px solid #0d6efd; }
    .loc-row .row-icon { color:#c03957; font-size:16px; margin-top:3px; }
    .loc-row .row-body { min-width:0; }
    .small-muted{ color:#6c757d; font-size:.88rem; }
    .no-results { padding:12px; color:#6c757d; text-align:center; }
</style>
    <div class="container-fluid">
        <div class="row">
            <div class="col-12">
                <div class="d-flex align-items-center mb-3">
                    <h1 class="mb-0" style="flex: 1 1 0%;">Restaurant Hours</h1>

                    <div class="d-flex align-items-center">
                        <!-- <a href="{{ route('restaurants.online-ordering.availability.create', ['account' => $account, 'restaurant' => $business->id]) }}" class="btn btn-secondary float-right mr-2">Add Future Availability</a> -->
    
                        <!-- location code -->
                        <!-- <h5 class="mb-3">Selected Location (click pencil to change)</h5> -->
    
                        <!-- Wrapper: data-multiple="false" => single-select; true => multi (not used for pencil) -->
                        <div id="location-selector-1" class="location-selector" data-multiple="false">
                            <!-- Selected display area -->
                            <div class="loc-display" tabindex="0" role="button" aria-haspopup="listbox">
                            <div class="loc-left">
                                <div class="loc-pin"><i class="fa fa-map-pin"></i></div>
                                <div class="loc-meta">
                                <div class="loc-title">
                                    <span class="loc-name">-- no location --</span>
                                    <span class="badge bg-success loc-badge d-none">Master</span>
                                </div>
                                <div class="loc-sub">Select a location</div>
                                </div>
                            </div>
    
                            <!-- pencil EDIT icon (only on display) -->
                            <div class="loc-controls">
                                <i class="fa fa-pen loc-edit" title="Change location" aria-label="Change location"></i>
                            </div>
                            </div>
    
                            <!-- Dropdown panel (hidden by default) -->
                            <div class="dropdown-panel d-none right-0 mt-2" role="dialog" aria-modal="false">
                                <div class="dropdown-header">
                                    <input type="search" class="form-control form-control-sm dropdown-search" placeholder="Search locations..." aria-label="Search locations">
                                </div>
        
                                <div class="dropdown-list">
                                    <!-- rows will be injected here -->
                                </div>
        
                                <div class="p-2 border-top text-end small-muted">
                                    Tip: click an item to select.
                                </div>
                            </div>
    
                            {{--
                            <!-- Hidden original select element (single mode uses single hidden input) -->
                            <select class="d-none source-select" name="location_id" aria-hidden="true">
                            <!-- sample options; replace with server-side rendering -->
                            <option value="">-- none --</option>
                            <option value="1" data-title="Default Test Account yop" data-sub="StoryPoint Middletown, 40243, Middletown, Kentucky, United States" data-badge="Master">Default Test Account yop</option>
                            <option value="2" data-title="Downtown Store" data-sub="123 Main St, Springfield" data-badge="">Downtown Store</option>
                            <option value="3" data-title="Airport Outlet" data-sub="Airport Rd, Terminal 2" data-badge="">Airport Outlet</option>
                            <option value="4" data-title="Uptown Branch" data-sub="45 High St, Uptown" data-badge="Secondary">Uptown Branch</option>
                            <option value="5" data-title="Remote Pickup" data-sub="Warehouse District" data-badge="">Remote Pickup</option>
                            </select> 
                            --}}
    
                            @if(isset($business->locations))
                                <select name="location" class="d-none form-control source-select no-validate" id="__location">
                                    <option value="all" data-title="All locations" data-sub="All locations" data-badge="" @if( 'all' == request()->get('location') ) selected @endif>All locations</option>
                                    @foreach($business->locations ?? [] as $loc)
                                        <option 
                                            value="{{ $loc->id}}" 
                                            data-title="{{ $loc->name ?? '' }}" 
                                            data-sub="{{ $loc->name ?? '' }}" 
                                            data-badge="{{ 1 == $loc->is_primary ? 'Master' : '' }}" 
                                            @if( request()->get('location') == $loc->id || ( 'all' != request()->get('location') && 1 == $loc->is_primary ) ) selected @endif
                                        >{{ $loc->name }}</option>
                                    @endforeach
                                </select>
                            @endif  
                        </div>
    
                        {{--
                        <div class="mt-4">
                            <button id="listen-demo" class="btn btn-outline-primary btn-sm">Listen to location:changed event (open console)</button>
                        </div> --}}
                    </div>
                </div>
            </div>
            {{--
            <div class="col-12">
                <div class="px-2">
                    <div class="row mb-2">
                        <x-widgets.simple class="col-12 col-sm-6 col-md-6 px-1 mb-2" title="Total Holidays" value="{{ count($specialDays) ?? 0 }}"></x-widgets.simple>
                        <x-widgets.simple class="col-12 col-sm-6 col-md-6 px-1 mb-2" title="Upcoming Holiday" value="{{ $nextHoliday?->date ? \Carbon\Carbon::parse($nextHoliday->date)->format('F j, Y') : '-' }}"></x-widgets.simple>
                    </div>
                </div>
            </div>
            --}}
            <div class="col-12">
                <div class="card mb-4">
                    <div class="card-body">
                        <div class="row mb-2">
                            @if ($message = Session::get('success'))
                                <div class="w-100 alert alert-success">
                                    <p>{{ $message }}</p>
                                </div>
                            @endif
                        </div>

                        <div>
                            <form name="working_hours" id="working_hours" action="{{ route('business.working.hours', ['account' => $account, 'business_id' => $business->id]) }}" method="POST" autocomplete="off" autofill="off">
                                @csrf
                                <input type="hidden" name="location" value="{{ isset($location->id) ? $location->id : ''}}"> 
                                
                                <!-- location select -->
                                <!-- add select below if needed -->
                                
                                <div class="row" style="margin-top: 2%;">
                                    <div class="col-2">
                                        <div class="form-group row mb-1">
                                            <label class="col-12 col-form-label">
                                                <strong>Cut Off Duration</strong> 
                                            </label>
                                        </div>
                                    </div>
                                    <div class="col-6">
                                        <div class="form-group mb-3">
                                            <input type="text" 
                                                class="form-control master-cutoff-duration-picker" 
                                                data-duration="{{ $location->cutoff_time ?? 90 }}"
                                                data-output-format="minutes"
                                                placeholder="Select duration">
                                            <input type="hidden" name="cutoff_time" value="{{ $location->cutoff_time ?? 90 }}" />
                                        </div>
                                    </div>
                                    <div class="col-2">
                                        
                                    </div>
                                </div>
                                <div class="row switch-wrapper" style="margin-top: 2%;">
                                    <div class="col-2">
                                        <div class="form-group row mb-1">
                                            <label class="col-12 col-form-label">Monday</label>
                                            <div class="col-12">
                                                <div class="custom-switch custom-switch-secondary mb-2">
                                                    <input class="custom-switch-input" id="switch1" type="checkbox" name="is_avaliable1" @if(isset($working_hours[1]) && $working_hours[1]->is_avaliable) checked="" @endif>
                                                    <label class="custom-switch-btn" for="switch1"></label>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-4">
                                        <div class="form-group mb-3">
                                            <label>FROM</label>
                                            <input type="text" @if(isset($working_hours[1])) value="{{date('H:i',strtotime($working_hours[1]->open_time))}}" @else value="09:00" @endif class="form-control timepicker" name="from1" placeholder="Date">
                                        </div>
                                    </div>
                                    <div class="col-4">
                                        <div class="form-group mb-3">
                                            <label>TO</label>
                                            <input type="text" @if(isset($working_hours[1])) value="{{date('H:i',strtotime($working_hours[1]->close_time))}}" @else value="17:00" @endif class="form-control timepicker" name="to1" placeholder="Date">
                                        </div>
                                    </div>
                                    <div class="col-2">
                                        <div class="form-group mb-3">
                                            <label>Cut Off Duration</label>
                                            <input type="text" @if(isset($working_hours[1])) data-duration="{{ $working_hours[1]->cutoff_time }}" @else data-duration="90" @endif class="form-control cutoff-duration-picker" placeholder="Select duration" data-output-format="minutes" data-position="right">
                                            <input type="hidden" name="cutoff_time1" @if(isset($working_hours[1])) value="{{ $working_hours[1]->cutoff_time }}" @else value="90" @endif />
                                        </div>
                                    </div>
                                </div>

                                <div class="row switch-wrapper">
                                    <div class="col-2">
                                        <div class="form-group row mb-1">
                                            <label class="col-12 col-form-label">Tuesday</label>
                                            <div class="col-12">
                                                <div class="custom-switch custom-switch-secondary mb-2">
                                                    <input name="is_avaliable2" class="custom-switch-input" id="switch2" type="checkbox" @if(isset($working_hours[2]) && $working_hours[2]->is_avaliable) checked="" @endif>
                                                    <label class="custom-switch-btn" for="switch2"></label>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-4">
                                        <div class="form-group mb-3">
                                            <label>FROM</label>
                                            <input type="text" @if(isset($working_hours[2])) value="{{date('H:i',strtotime($working_hours[2]->open_time))}}" @else value="09:00" @endif class="form-control timepicker" name="from2" placeholder="Date">
                                        </div>
                                    </div>
                                    <div class="col-4">
                                        <div class="form-group mb-3">
                                            <label>TO</label>
                                            <input type="text" @if(isset($working_hours[2])) value="{{date('H:i',strtotime($working_hours[2]->close_time))}}" @else value="17:00" @endif class="form-control timepicker" name="to2" placeholder="Date">
                                        </div>
                                    </div>
                                    <div class="col-2">
                                        <div class="form-group mb-3">
                                            <label>Cut Off Duration</label>
                                            <input type="text" @if(isset($working_hours[2])) data-duration="{{ $working_hours[2]->cutoff_time }}" @else data-duration="90" @endif class="form-control cutoff-duration-picker" placeholder="Select duration" data-output-format="minutes" data-position="right">
                                            <input type="hidden" name="cutoff_time2" @if(isset($working_hours[2])) value="{{ $working_hours[2]->cutoff_time }}" @else value="90" @endif />
                                        </div>
                                    </div>
                                </div>

                                <div class="row switch-wrapper">
                                    <div class="col-2">
                                        <div class="form-group row mb-1">
                                            <label class="col-12 col-form-label">Wednesday</label>
                                            <div class="col-12">
                                                <div class="custom-switch custom-switch-secondary mb-2">
                                                    <input name="is_avaliable3" class="custom-switch-input" id="switch3" type="checkbox" @if(isset($working_hours[3]) && $working_hours[3]->is_avaliable) checked="" @endif>
                                                    <label class="custom-switch-btn" for="switch3"></label>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-4">
                                        <div class="form-group mb-3">
                                            <label>FROM</label>
                                            <input type="text" @if(isset($working_hours[3])) value="{{date('H:i',strtotime($working_hours[3]->open_time))}}" @else value="09:00" @endif class="form-control timepicker" name="from3" placeholder="Date">
                                        </div>
                                    </div>
                                    <div class="col-4">
                                        <div class="form-group mb-3">
                                            <label>TO</label>
                                            <input type="text" @if(isset($working_hours[3])) value="{{date('H:i',strtotime($working_hours[3]->close_time))}}" @else value="17:00" @endif class="form-control timepicker" name="to3" placeholder="Date">
                                        </div>
                                    </div>
                                    <div class="col-2">
                                        <div class="form-group mb-3">
                                            <label>Cut Off Duration</label>
                                            <input type="text" @if(isset($working_hours[3])) data-duration="{{ $working_hours[3]->cutoff_time }}" @else data-duration="90" @endif class="form-control cutoff-duration-picker" placeholder="Select duration" data-output-format="minutes" data-position="right">
                                            <input type="hidden" name="cutoff_time3" @if(isset($working_hours[3])) value="{{ $working_hours[3]->cutoff_time }}" @else value="90" @endif />
                                        </div>
                                    </div>
                                </div>

                                <div class="row switch-wrapper">
                                    <div class="col-2">
                                        <div class="form-group row mb-1">
                                            <label class="col-12 col-form-label">Thursday</label>
                                            <div class="col-12">
                                                <div class="custom-switch custom-switch-secondary mb-2">
                                                    <input name="is_avaliable4" class="custom-switch-input" id="switch4" type="checkbox" @if(isset($working_hours[4]) && $working_hours[4]->is_avaliable) checked="" @endif>
                                                    <label class="custom-switch-btn" for="switch4"></label>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-4">
                                        <div class="form-group mb-3">
                                            <label>FROM</label>
                                            <input type="text" name="from4" @if(isset($working_hours[4])) value="{{date('H:i',strtotime($working_hours[4]->open_time))}}" @else value="09:00" @endif class="form-control timepicker" placeholder="Date">
                                        </div>
                                    </div>
                                    <div class="col-4">
                                        <div class="form-group mb-3">
                                            <label>TO</label>
                                            <input type="text" @if(isset($working_hours[4])) value="{{date('H:i',strtotime($working_hours[4]->close_time))}}" @else value="17:00" @endif class="form-control timepicker" name="to4" placeholder="Date">
                                        </div>
                                    </div>
                                    <div class="col-2">
                                        <div class="form-group mb-3">
                                            <label>Cut Off Duration</label>
                                            <input type="text" @if(isset($working_hours[4])) data-duration="{{ $working_hours[4]->cutoff_time }}" @else data-duration="90" @endif class="form-control cutoff-duration-picker" placeholder="Select duration" data-output-format="minutes" data-position="right">
                                            <input type="hidden" name="cutoff_time4" @if(isset($working_hours[4])) value="{{ $working_hours[4]->cutoff_time }}" @else value="90" @endif />
                                        </div>
                                    </div>
                                </div>

                                <div class="row switch-wrapper">
                                    <div class="col-2">
                                        <div class="form-group row mb-1">
                                            <label class="col-12 col-form-label">Friday</label>
                                            <div class="col-12">
                                                <div class="custom-switch custom-switch-secondary mb-2">
                                                    <input class="custom-switch-input" id="switch5" type="checkbox" name="is_avaliable5" @if(isset($working_hours[5]) && $working_hours[5]->is_avaliable) checked="" @endif >
                                                    <label class="custom-switch-btn" for="switch5"></label>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-4">
                                        <div class="form-group mb-3">
                                            <label>FROM</label>
                                            <input name="from5" type="text" @if(isset($working_hours[5])) value="{{date('H:i',strtotime($working_hours[5]->open_time))}}" @else value="09:00" @endif class="form-control timepicker" placeholder="Date">
                                        </div>
                                    </div>
                                    <div class="col-4">
                                        <div class="form-group mb-3">
                                            <label>TO</label>
                                            <input type="text" @if(isset($working_hours[5])) value="{{date('H:i',strtotime($working_hours[5]->close_time))}}" @else value="17:00" @endif class="form-control timepicker" name="to5" placeholder="Date">
                                        </div>
                                    </div>
                                    <div class="col-2">
                                        <div class="form-group mb-3">
                                            <label>Cut Off Duration</label>
                                            <input type="text" @if(isset($working_hours[5])) data-duration="{{ $working_hours[5]->cutoff_time }}" @else data-duration="90" @endif class="form-control cutoff-duration-picker" placeholder="Select duration" data-output-format="minutes" data-position="right">
                                            <input type="hidden" name="cutoff_time5" @if(isset($working_hours[5])) value="{{ $working_hours[5]->cutoff_time }}" @else value="90" @endif />
                                        </div>
                                    </div>
                                </div>

                                <div class="row switch-wrapper">
                                    <div class="col-2">
                                        <div class="form-group row mb-1">
                                            <label class="col-12 col-form-label">Saturday</label>
                                            <div class="col-12">
                                                <div class="custom-switch custom-switch-secondary mb-2">
                                                    <input class="custom-switch-input" id="switch6" type="checkbox" name="is_avaliable6" @if(isset($working_hours[6]) && $working_hours[6]->is_avaliable) checked="" @endif>
                                                    <label class="custom-switch-btn" for="switch6"></label>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-4">
                                        <div class="form-group mb-3">
                                            <label>FROM</label>
                                            <input type="text" class="form-control timepicker" placeholder="Date" @if(isset($working_hours[6])) value="{{date('H:i',strtotime($working_hours[6]->open_time))}}" @else value="09:00" @endif name="from6">
                                        </div>
                                    </div>
                                    <div class="col-4">
                                        <div class="form-group mb-3">
                                            <label>TO</label>
                                            <input type="text" class="form-control timepicker" placeholder="Date" @if(isset($working_hours[6])) value="{{date('H:i',strtotime($working_hours[6]->close_time))}}" @else value="17:00" @endif name="to6">
                                        </div>
                                    </div>
                                    <div class="col-2">
                                        <div class="form-group mb-3">
                                            <label>Cut Off Duration</label>
                                            <input type="text" @if(isset($working_hours[6])) data-duration="{{ $working_hours[6]->cutoff_time }}" @else data-duration="90" @endif class="form-control cutoff-duration-picker" placeholder="Select duration" data-output-format="minutes" data-position="right">
                                            <input type="hidden" name="cutoff_time6" @if(isset($working_hours[6])) value="{{ $working_hours[6]->cutoff_time }}" @else value="90" @endif />
                                        </div>
                                    </div>
                                </div>

                                <div class="row switch-wrapper">
                                    <div class="col-2">
                                        <div class="form-group row mb-1">
                                            <label class="col-12 col-form-label">Sunday</label>
                                            <div class="col-12">
                                                <div class="custom-switch custom-switch-secondary mb-2">
                                                    <input class="custom-switch-input" id="switch7" type="checkbox" name="is_avaliable0" @if(isset($working_hours[0]) && $working_hours[0]->is_avaliable) checked="" @endif>
                                                    <label class="custom-switch-btn" for="switch7"></label>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-4">
                                        <div class="form-group mb-3">
                                            <label>FROM</label>
                                            <input name="from0" type="text" class="form-control timepicker" placeholder="Date" @if(isset($working_hours[0])) value="{{date('H:i',strtotime($working_hours[0]->open_time))}}" @else value="09:00" @endif>
                                        </div>
                                    </div>
                                    <div class="col-4">
                                        <div class="form-group mb-3">
                                            <label>TO</label>
                                            <input name="to0" type="text" class="form-control timepicker" placeholder="Date" @if(isset($working_hours[0])) value="{{date('H:i',strtotime($working_hours[0]->close_time))}}" @else value="17:00" @endif>
                                        </div>
                                    </div>
                                    <div class="col-2">
                                        <div class="form-group mb-3">
                                            <label>Cut Off Duration</label>
                                            <input type="text" @if(isset($working_hours[0])) data-duration="{{ $working_hours[0]->cutoff_time }}" @else data-duration="90" @endif class="form-control cutoff-duration-picker" placeholder="Select duration" data-output-format="minutes" data-position="right">
                                            <input type="hidden" name="cutoff_time0" @if(isset($working_hours[0])) value="{{ $working_hours[0]->cutoff_time }}" @else value="90" @endif />
                                        </div>
                                    </div>
                                </div>


                                <!-- new field -->
                                <!-- <div class="row">
                                    <div class="col-12">
                                        <div class="form-group row mb-1">
                                            <label class="col-12 col-form-label">Apply to all locations</label>
                                            <div class="col-12">
                                                <div class="custom-switch custom-switch-secondary mb-2">
                                                    <input class="custom-switch-input" id="applyToAll" type="checkbox" name="applyToAll" @if( 'all' == request()->get('location') ) {{ 'checked' }} @endif>
                                                    <label class="custom-switch-btn" for="applyToAll"></label>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    
                                </div> -->

                                <!-- end new field -->
                                <div class="row">
                                    <div class="col-12">
                                        <button class="btn btn-success" style="float: right;" type="submit">save</button>
                                    </div>
                                </div>
                            </form>
                        </div>

                        {{--

                        <div>
                            <ul class="nav nav-tabs card-header-tabs ml-0 mr-0 mb-1" role="tablist">
                                <li class="nav-item text-center">
                                    <a class="nav-link active" id="first-tab" data-toggle="tab" href="#firstFull" role="tab" aria-selected="true">Weekly Routine Availability</a>
                                </li>
                                <li class="nav-item text-center">
                                    <a class="nav-link" id="second-tab" data-toggle="tab" href="#secondFull" role="tab" aria-selected="false">Schedule Future Availability</a>
                                </li>
                            </ul>

                            <div class="p-4">
                                <div class="tab-content">
                                    <div class="tab-pane fade active show" id="firstFull" role="tabpanel" aria-labelledby="first-tab">
                                        <form name="working_hours" id="working_hours" action="{{ route('business.working.hours', ['account' => $account, 'business_id' => $business->id]) }}" method="POST" autocomplete="off" autofill="off">
                                            @csrf
                                            <input type="hidden" name="location" value="{{ isset($location->id) ? $location->id : ''}}"> 
                                            
                                            <!-- location select -->
                                            <!-- add select below if needed -->
                                            
                                            <div class="row" style="margin-top: 2%;">
                                                <div class="col-2">
                                                    <div class="form-group row mb-1">
                                                        <label class="col-12 col-form-label">
                                                            <strong>Cut Off Duration</strong> 
                                                        </label>
                                                    </div>
                                                </div>
                                                <div class="col-6">
                                                    <div class="form-group mb-3">
                                                        <input type="text" 
                                                            class="form-control master-cutoff-duration-picker" 
                                                            data-duration="{{ $location->cutoff_time ?? 90 }}"
                                                            data-output-format="minutes"
                                                            placeholder="Select duration">
                                                        <input type="hidden" name="cutoff_time" value="{{ $location->cutoff_time ?? 90 }}" />
                                                    </div>
                                                </div>
                                                <div class="col-2">
                                                    
                                                </div>
                                            </div>
                                            <div class="row switch-wrapper" style="margin-top: 2%;">
                                                <div class="col-2">
                                                    <div class="form-group row mb-1">
                                                        <label class="col-12 col-form-label">Monday</label>
                                                        <div class="col-12">
                                                            <div class="custom-switch custom-switch-secondary mb-2">
                                                                <input class="custom-switch-input" id="switch1" type="checkbox" name="is_avaliable1" @if(isset($working_hours[1]) && $working_hours[1]->is_avaliable) checked="" @endif>
                                                                <label class="custom-switch-btn" for="switch1"></label>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-4">
                                                    <div class="form-group mb-3">
                                                        <label>FROM</label>
                                                        <input type="text" @if(isset($working_hours[1])) value="{{date('H:i',strtotime($working_hours[1]->open_time))}}" @else value="09:00" @endif class="form-control timepicker" name="from1" placeholder="Date">
                                                    </div>
                                                </div>
                                                <div class="col-4">
                                                    <div class="form-group mb-3">
                                                        <label>TO</label>
                                                        <input type="text" @if(isset($working_hours[1])) value="{{date('H:i',strtotime($working_hours[1]->close_time))}}" @else value="17:00" @endif class="form-control timepicker" name="to1" placeholder="Date">
                                                    </div>
                                                </div>
                                                <div class="col-2">
                                                    <div class="form-group mb-3">
                                                        <label>Cut Off Duration</label>
                                                        <input type="text" @if(isset($working_hours[1])) data-duration="{{ $working_hours[1]->cutoff_time }}" @else data-duration="90" @endif class="form-control cutoff-duration-picker" placeholder="Select duration" data-output-format="minutes" data-position="right">
                                                        <input type="hidden" name="cutoff_time1" @if(isset($working_hours[1])) value="{{ $working_hours[1]->cutoff_time }}" @else value="90" @endif />
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="row switch-wrapper">
                                                <div class="col-2">
                                                    <div class="form-group row mb-1">
                                                        <label class="col-12 col-form-label">Tuesday</label>
                                                        <div class="col-12">
                                                            <div class="custom-switch custom-switch-secondary mb-2">
                                                                <input name="is_avaliable2" class="custom-switch-input" id="switch2" type="checkbox" @if(isset($working_hours[2]) && $working_hours[2]->is_avaliable) checked="" @endif>
                                                                <label class="custom-switch-btn" for="switch2"></label>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-4">
                                                    <div class="form-group mb-3">
                                                        <label>FROM</label>
                                                        <input type="text" @if(isset($working_hours[2])) value="{{date('H:i',strtotime($working_hours[2]->open_time))}}" @else value="09:00" @endif class="form-control timepicker" name="from2" placeholder="Date">
                                                    </div>
                                                </div>
                                                <div class="col-4">
                                                    <div class="form-group mb-3">
                                                        <label>TO</label>
                                                        <input type="text" @if(isset($working_hours[2])) value="{{date('H:i',strtotime($working_hours[2]->close_time))}}" @else value="17:00" @endif class="form-control timepicker" name="to2" placeholder="Date">
                                                    </div>
                                                </div>
                                                <div class="col-2">
                                                    <div class="form-group mb-3">
                                                        <label>Cut Off Duration</label>
                                                        <input type="text" @if(isset($working_hours[2])) data-duration="{{ $working_hours[2]->cutoff_time }}" @else data-duration="90" @endif class="form-control cutoff-duration-picker" placeholder="Select duration" data-output-format="minutes" data-position="right">
                                                        <input type="hidden" name="cutoff_time2" @if(isset($working_hours[2])) value="{{ $working_hours[2]->cutoff_time }}" @else value="90" @endif />
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="row switch-wrapper">
                                                <div class="col-2">
                                                    <div class="form-group row mb-1">
                                                        <label class="col-12 col-form-label">Wednesday</label>
                                                        <div class="col-12">
                                                            <div class="custom-switch custom-switch-secondary mb-2">
                                                                <input name="is_avaliable3" class="custom-switch-input" id="switch3" type="checkbox" @if(isset($working_hours[3]) && $working_hours[3]->is_avaliable) checked="" @endif>
                                                                <label class="custom-switch-btn" for="switch3"></label>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-4">
                                                    <div class="form-group mb-3">
                                                        <label>FROM</label>
                                                        <input type="text" @if(isset($working_hours[3])) value="{{date('H:i',strtotime($working_hours[3]->open_time))}}" @else value="09:00" @endif class="form-control timepicker" name="from3" placeholder="Date">
                                                    </div>
                                                </div>
                                                <div class="col-4">
                                                    <div class="form-group mb-3">
                                                        <label>TO</label>
                                                        <input type="text" @if(isset($working_hours[3])) value="{{date('H:i',strtotime($working_hours[3]->close_time))}}" @else value="17:00" @endif class="form-control timepicker" name="to3" placeholder="Date">
                                                    </div>
                                                </div>
                                                <div class="col-2">
                                                    <div class="form-group mb-3">
                                                        <label>Cut Off Duration</label>
                                                        <input type="text" @if(isset($working_hours[3])) data-duration="{{ $working_hours[3]->cutoff_time }}" @else data-duration="90" @endif class="form-control cutoff-duration-picker" placeholder="Select duration" data-output-format="minutes" data-position="right">
                                                        <input type="hidden" name="cutoff_time3" @if(isset($working_hours[3])) value="{{ $working_hours[3]->cutoff_time }}" @else value="90" @endif />
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="row switch-wrapper">
                                                <div class="col-2">
                                                    <div class="form-group row mb-1">
                                                        <label class="col-12 col-form-label">Thursday</label>
                                                        <div class="col-12">
                                                            <div class="custom-switch custom-switch-secondary mb-2">
                                                                <input name="is_avaliable4" class="custom-switch-input" id="switch4" type="checkbox" @if(isset($working_hours[4]) && $working_hours[4]->is_avaliable) checked="" @endif>
                                                                <label class="custom-switch-btn" for="switch4"></label>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-4">
                                                    <div class="form-group mb-3">
                                                        <label>FROM</label>
                                                        <input type="text" name="from4" @if(isset($working_hours[4])) value="{{date('H:i',strtotime($working_hours[4]->open_time))}}" @else value="09:00" @endif class="form-control timepicker" placeholder="Date">
                                                    </div>
                                                </div>
                                                <div class="col-4">
                                                    <div class="form-group mb-3">
                                                        <label>TO</label>
                                                        <input type="text" @if(isset($working_hours[4])) value="{{date('H:i',strtotime($working_hours[4]->close_time))}}" @else value="17:00" @endif class="form-control timepicker" name="to4" placeholder="Date">
                                                    </div>
                                                </div>
                                                <div class="col-2">
                                                    <div class="form-group mb-3">
                                                        <label>Cut Off Duration</label>
                                                        <input type="text" @if(isset($working_hours[4])) data-duration="{{ $working_hours[4]->cutoff_time }}" @else data-duration="90" @endif class="form-control cutoff-duration-picker" placeholder="Select duration" data-output-format="minutes" data-position="right">
                                                        <input type="hidden" name="cutoff_time4" @if(isset($working_hours[4])) value="{{ $working_hours[4]->cutoff_time }}" @else value="90" @endif />
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="row switch-wrapper">
                                                <div class="col-2">
                                                    <div class="form-group row mb-1">
                                                        <label class="col-12 col-form-label">Friday</label>
                                                        <div class="col-12">
                                                            <div class="custom-switch custom-switch-secondary mb-2">
                                                                <input class="custom-switch-input" id="switch5" type="checkbox" name="is_avaliable5" @if(isset($working_hours[5]) && $working_hours[5]->is_avaliable) checked="" @endif >
                                                                <label class="custom-switch-btn" for="switch5"></label>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-4">
                                                    <div class="form-group mb-3">
                                                        <label>FROM</label>
                                                        <input name="from5" type="text" @if(isset($working_hours[5])) value="{{date('H:i',strtotime($working_hours[5]->open_time))}}" @else value="09:00" @endif class="form-control timepicker" placeholder="Date">
                                                    </div>
                                                </div>
                                                <div class="col-4">
                                                    <div class="form-group mb-3">
                                                        <label>TO</label>
                                                        <input type="text" @if(isset($working_hours[5])) value="{{date('H:i',strtotime($working_hours[5]->close_time))}}" @else value="17:00" @endif class="form-control timepicker" name="to5" placeholder="Date">
                                                    </div>
                                                </div>
                                                <div class="col-2">
                                                    <div class="form-group mb-3">
                                                        <label>Cut Off Duration</label>
                                                        <input type="text" @if(isset($working_hours[5])) data-duration="{{ $working_hours[5]->cutoff_time }}" @else data-duration="90" @endif class="form-control cutoff-duration-picker" placeholder="Select duration" data-output-format="minutes" data-position="right">
                                                        <input type="hidden" name="cutoff_time5" @if(isset($working_hours[5])) value="{{ $working_hours[5]->cutoff_time }}" @else value="90" @endif />
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="row switch-wrapper">
                                                <div class="col-2">
                                                    <div class="form-group row mb-1">
                                                        <label class="col-12 col-form-label">Saturday</label>
                                                        <div class="col-12">
                                                            <div class="custom-switch custom-switch-secondary mb-2">
                                                                <input class="custom-switch-input" id="switch6" type="checkbox" name="is_avaliable6" @if(isset($working_hours[6]) && $working_hours[6]->is_avaliable) checked="" @endif>
                                                                <label class="custom-switch-btn" for="switch6"></label>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-4">
                                                    <div class="form-group mb-3">
                                                        <label>FROM</label>
                                                        <input type="text" class="form-control timepicker" placeholder="Date" @if(isset($working_hours[6])) value="{{date('H:i',strtotime($working_hours[6]->open_time))}}" @else value="09:00" @endif name="from6">
                                                    </div>
                                                </div>
                                                <div class="col-4">
                                                    <div class="form-group mb-3">
                                                        <label>TO</label>
                                                        <input type="text" class="form-control timepicker" placeholder="Date" @if(isset($working_hours[6])) value="{{date('H:i',strtotime($working_hours[6]->close_time))}}" @else value="17:00" @endif name="to6">
                                                    </div>
                                                </div>
                                                <div class="col-2">
                                                    <div class="form-group mb-3">
                                                        <label>Cut Off Duration</label>
                                                        <input type="text" @if(isset($working_hours[6])) data-duration="{{ $working_hours[6]->cutoff_time }}" @else data-duration="90" @endif class="form-control cutoff-duration-picker" placeholder="Select duration" data-output-format="minutes" data-position="right">
                                                        <input type="hidden" name="cutoff_time6" @if(isset($working_hours[6])) value="{{ $working_hours[6]->cutoff_time }}" @else value="90" @endif />
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="row switch-wrapper">
                                                <div class="col-2">
                                                    <div class="form-group row mb-1">
                                                        <label class="col-12 col-form-label">Sunday</label>
                                                        <div class="col-12">
                                                            <div class="custom-switch custom-switch-secondary mb-2">
                                                                <input class="custom-switch-input" id="switch7" type="checkbox" name="is_avaliable0" @if(isset($working_hours[0]) && $working_hours[0]->is_avaliable) checked="" @endif>
                                                                <label class="custom-switch-btn" for="switch7"></label>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-4">
                                                    <div class="form-group mb-3">
                                                        <label>FROM</label>
                                                        <input name="from0" type="text" class="form-control timepicker" placeholder="Date" @if(isset($working_hours[0])) value="{{date('H:i',strtotime($working_hours[0]->open_time))}}" @else value="09:00" @endif>
                                                    </div>
                                                </div>
                                                <div class="col-4">
                                                    <div class="form-group mb-3">
                                                        <label>TO</label>
                                                        <input name="to0" type="text" class="form-control timepicker" placeholder="Date" @if(isset($working_hours[0])) value="{{date('H:i',strtotime($working_hours[0]->close_time))}}" @else value="17:00" @endif>
                                                    </div>
                                                </div>
                                                <div class="col-2">
                                                    <div class="form-group mb-3">
                                                        <label>Cut Off Duration</label>
                                                        <input type="text" @if(isset($working_hours[0])) data-duration="{{ $working_hours[0]->cutoff_time }}" @else data-duration="90" @endif class="form-control cutoff-duration-picker" placeholder="Select duration" data-output-format="minutes" data-position="right">
                                                        <input type="hidden" name="cutoff_time0" @if(isset($working_hours[0])) value="{{ $working_hours[0]->cutoff_time }}" @else value="90" @endif />
                                                    </div>
                                                </div>
                                            </div>


                                            <!-- new field -->
                                            <!-- <div class="row">
                                                <div class="col-12">
                                                    <div class="form-group row mb-1">
                                                        <label class="col-12 col-form-label">Apply to all locations</label>
                                                        <div class="col-12">
                                                            <div class="custom-switch custom-switch-secondary mb-2">
                                                                <input class="custom-switch-input" id="applyToAll" type="checkbox" name="applyToAll" @if( 'all' == request()->get('location') ) {{ 'checked' }} @endif>
                                                                <label class="custom-switch-btn" for="applyToAll"></label>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                
                                            </div> -->

                                            <!-- end new field -->
                                            <div class="row">
                                                <div class="col-12">
                                                    <button class="btn btn-success" style="float: right;" type="submit">save</button>
                                                </div>
                                            </div>
                                        </form> 
                                    </div>

                                    <div class="tab-pane fade" id="secondFull" role="tabpanel" aria-labelledby="second-tab">
                                        <div id="DataTables_Table_0_wrapper">
                                            <table class="data-table" id="DataTables_Table_0">
                                                <thead>
                                                    <tr>
                                                        <th>Date</th>
                                                        <th>Opening Time</th>
                                                        <th>Closing Time</th>
                                                        <th>Cut Off Time (Mins)</th>
                                                        <th class="text-center" style="width: 120px;">Action</th>
                                                    </tr>
                                                </thead>

                                                <tbody>
                                                    @if($specialDays)
                                                        @foreach($specialDays as $specialDay)
                                                            <tr>
                                                                <td>{{ $specialDay->date ? \Carbon\Carbon::parse($specialDay->date)->format('F j, Y') : '-' }}</td>
                                                                
                                                                <td>{{ $specialDay->open_time ?? '-' }}</td>
                                                                <td>{{ $specialDay->close_time ?? '-' }}</td>
                                                                <td>{{ $specialDay->cutoff_time ?? '-' }}</td>
                                                                <td class="text-center">
                                                                    <a href="{{ route('restaurants.online-ordering.availability.edit', ['account' => $account, 'restaurant' => $business->id, 'future_availability' => $specialDay->id]) }}" class="btn btn-sm " title="Edit">
                                                                        <i class="simple-icon-pencil"></i>
                                                                    </a>

                                                                    <button class="btn btn-sm " data-toggle="modal"
                                                                        data-target="#deleteModal-{{ $specialDay->id }}" title="Delete">
                                                                        <i class="simple-icon-trash"></i>
                                                                    </button>

                                                                    <!-- Delete Modal -->
                                                                    <div class="modal fade" id="deleteModal-{{ $specialDay->id }}" tabindex="-1" role="dialog" aria-hidden="true">
                                                                        <div class="modal-dialog modal-dialog-centered" role="document">
                                                                            <div class="modal-content border-0 shadow">
                                                                                <div class="modal-header bg-danger text-white">
                                                                                    <h5 class="modal-title">Delete</h5>
                                                                                    <button type="button" class="close text-white" data-dismiss="modal" aria-label="Close">
                                                                                        <span aria-hidden="true">&times;</span>
                                                                                    </button>
                                                                                </div>
                                                                                <div class="modal-body text-center">
                                                                                    <p>Are you sure you want to delete this record?</p>
                                                                                </div>
                                                                                <div class="modal-footer justify-content-center">
                                                                                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                                                                                    <form action="{{ route('restaurants.online-ordering.availability.destroy', ['account' => $account, 'restaurant' => $business->id, 'future_availability' => $specialDay->id]) }}" method="POST">
                                                                                        @csrf
                                                                                        @method('DELETE')
                                                                                        <button type="submit" class="btn btn-danger px-4">Delete</button>
                                                                                    </form>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </td>
                                                            </tr>
                                                        @endforeach
                                                    @else
                                                        <tr>
                                                            <td colspan="6" class="text-center text-muted py-4">
                                                                No record found!
                                                            </td>
                                                        </tr>
                                                    @endif
                                                </tbody>
                                            </table>

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

                            <a class="app-menu-button d-inline-block d-xl-none" href="#">
                                <i class="simple-icon-options"></i>
                            </a>
                        </div>   

                        --}}
                    </div>
                </div>
            </div>

            {{-- <div class="col-12">
                <div class="card mb-4">
                    <div class="card-body">
                        <div class="row mb-5">
                            <div class="col-12">
                                <h3>Special Days</h3>
                                
                            </div>
                        </div>
                        
                    </div>
                </div>
            </div> --}}
        </div>
    </div>
@endsection
@section('script')
<script src="{{ asset('js/day.js')}}"></script>  
<script src="{{ asset('js/timepicker-bs4.js')}}"></script> 
<script src="{{ asset('js/duration-picker.js')}}"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootbox.js/6.0.4/bootbox.min.js"></script> 

<!-- location dropdown js -->
<script>
    /*
    Minimal reusable Location Selector (single-select-focused for pencil behavior)
    - Keeps a hidden <select> as source of truth
    - Shows selected location in top bar (with badge if present)
    - Pencil on top bar opens the dropdown
    - Selecting an item updates hidden select and UI
    - Fires custom event 'location:changed' on the wrapper element with detail { id, option }
    - initLocationSelector($wrapper)
    */

    (function($){
        function initLocationSelector($wrapper) {
            const $select = $wrapper.find('.source-select').first();
            const $display = $wrapper.find('.loc-display');
            const $nameEl = $wrapper.find('.loc-name');
            const $subEl = $wrapper.find('.loc-sub');
            const $badge = $wrapper.find('.loc-badge');
            const $edit = $wrapper.find('.loc-edit');
            const $panel = $wrapper.find('.dropdown-panel');
            const $list = $panel.find('.dropdown-list');
            const $search = $panel.find('.dropdown-search');
            const multiple = $wrapper.data('multiple') === true || String($wrapper.data('multiple')) === 'true';

            // build array from options (skip first empty if desired)
            const options = [];
            $select.find('option').each(function(){
                const $o = $(this);
                options.push({
                    value: $o.attr('value'),
                    title: $o.data('title') || $o.text(),
                    sub: $o.data('sub') || '',
                    badge: $o.data('badge') || ''
                });
            });

            console.log( options );

            // render list rows (no edit icons inside list)
            function renderList(filter = '') {
                $list.empty();
                const q = String(filter || '').trim().toLowerCase();
                const filtered = options.filter(o => {
                    if (!q) return true;
                    return (o.title + ' ' + o.sub + ' ' + (o.badge||'')).toLowerCase().indexOf(q) !== -1;
                });

                if (filtered.length === 0) {
                    $list.append('<div class="no-results">No locations found</div>');
                    return;
                }

                filtered.forEach(o => {
                    const active = String($select.val()) === String(o.value);
                    const $row = $(`
                    <div class="loc-row ${active? 'active':''}" data-value="${o.value}" role="option" aria-selected="${active}">
                        <div class="row-icon"><i class="fa fa-map-pin"></i></div>
                        <div class="row-body">
                        <div class="fw-semibold">${escapeHtml(o.title)} ${o.badge? `<span class="badge bg-success ms-2 loc-badge-sm">${escapeHtml(o.badge)}</span>` : ''}</div>
                        <div class="small-muted">${escapeHtml(o.sub)}</div>
                        </div>
                    </div>
                    `);
                    $list.append($row);
                });
            }

            function escapeHtml(s) {
                if (s == null) return '';
                return String(s).replace(/[&<>"']/g, function(m){ return ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'})[m]; });
            }

            // update display bar from current select value
            function updateDisplayFromSelect() {
                const val = $select.val();
                const opt = options.find(o => String(o.value) === String(val));
                if (!val || val === '') {
                    $nameEl.text('No location selected');
                    $subEl.text('Click the pencil to choose');
                    $badge.addClass('d-none').text('');
                } else if (opt) {
                    $nameEl.text(opt.title);
                    $subEl.text(opt.sub);
                    if (opt.badge) {
                    $badge.removeClass('d-none').text(opt.badge);
                    } else {
                    $badge.addClass('d-none').text('');
                    }
                } else {
                    $nameEl.text(val);
                    $subEl.text('');
                    $badge.addClass('d-none').text('');
                }
                // ensure list highlights proper row
                $list.find('.loc-row').removeClass('active').attr('aria-selected','false');
                $list.find(`.loc-row[data-value="${CSS.escape(String(val))}"]`).addClass('active').attr('aria-selected','true');
            }

            // update select from clicked row, then fire event
            function selectValue(value) {
                $select.val(value);
                $select.trigger('change'); // allow external handlers on select element
                updateDisplayFromSelect();
                // dispatch custom event on wrapper
                const opt = options.find(o => String(o.value) === String(value)) || null;
                const event = new CustomEvent('location:changed', { detail: { id: value, option: opt } });
                $wrapper[0].dispatchEvent(event);
            }

            // open/close helpers
            function openPanel() { $panel.removeClass('d-none'); setTimeout(()=> $search.trigger('focus'), 50); }
            function closePanel() { $panel.addClass('d-none'); $search.val(''); renderList(''); }

            // initial render
            renderList();
            updateDisplayFromSelect();

            // Edit pencil click opens the panel
            $edit.on('click', function(e){
                e.stopPropagation();
                if ($panel.hasClass('d-none')) openPanel(); else closePanel();
            });

            // clicking the display area (outside pencil) — optional: open as well
            $display.on('click', function(e){
                // only open if clicked not on the badge region? Keep it simple: open as well
                if ($panel.hasClass('d-none')) openPanel();
            });

            // click row to select (single-select)
            $list.on('click', '.loc-row', function(e){
                const val = $(this).data('value');
                selectValue(val);
                closePanel();
            });

            // search
            $search.on('input', function(){ renderList($(this).val()); });

            // close when clicking outside
            $(document).on('click.' + getId($wrapper), function(e){
                if ($wrapper.has(e.target).length === 0 && !$wrapper.is(e.target)) {
                    closePanel();
                }
            });

            // reflect changes to select from external code
            $select.on('change', function(){
                updateDisplayFromSelect();
                // dispatch custom event as well
                const val = $select.val();
                const opt = options.find(o => String(o.value) === String(val)) || null;
                const event = new CustomEvent('location:changed', { detail: { id: val, option: opt } });
                $wrapper[0].dispatchEvent(event);
            });

            // Utility: create a small unique id for namespacing events
            function getId($el) {
                if (!$el.data('ls-id')) {
                    $el.data('ls-id', 'ls_' + Math.random().toString(36).slice(2,8));
                }
                return $el.data('ls-id');
            }

            // expose minimal API via data on wrapper
            $wrapper.data('locationSelector', {
                getSelected: () => $select.val(),
                setSelected: (v) => { $select.val(v); $select.trigger('change'); },
                open: openPanel,
                close: closePanel
            });

            // return API (for convenience)
            return $wrapper.data('locationSelector');
        }

        // Auto-init any .location-selector on page load
        $(function(){
            $('.location-selector').each(function(){
                initLocationSelector($(this));
            });

            // demo listener test
            // $('#listen-demo').on('click', function(){
            //     const wrapper = document.getElementById('location-selector-1');
            //     wrapper.addEventListener('location:changed', function(e){
            //         console.log('location:changed event fired ->', e.detail);
            //         alert('location changed -> id: ' + e.detail.id + (e.detail.option ? ', title: ' + e.detail.option.title : ''));
            //     }, { once: false });
            //     alert('Listener attached — now change location (open console for details).');
            // });
        });

    })(jQuery);
</script>

<script type="text/javascript">
    $(document).on('change','#__location',function(){
       if($(this).val() != "" && $(this).val() != 'undefined'){
            var refUrl = "{{ url('restaurants/'.$business->id.'/restaurant-hours')}}?location="+$(this).val();
            window.location.href = refUrl;
       }
    })
    $('input.timepicker').timepicker({}); 

    function toggleChildren(switchInput) {
        let checked = $(switchInput).is(':checked');

        // Step 1: Find parent (adjust as needed)
        let parent = $(switchInput).closest('.switch-wrapper');

        // Step 2: Find children inside parent
        let children = parent.find('.timepicker');
        let children2 = parent.find('.duration-picker-input');

        // Step 3: Enable/disable
        children.prop('disabled', !checked);
        children2.prop('disabled', !checked);
    } 

    $(document).on('change', '.custom-switch-input:not(#applyToAll)', function () {
        toggleChildren(this);
    });

    // Run ON PAGE LOAD (for previously saved state)
    $('.custom-switch-input:not(#applyToAll)').each(function () {
        toggleChildren(this);
    });

    // cutoff-duration-picker
    $('.master-cutoff-duration-picker, .cutoff-duration-picker').durationPicker({
        duration: 60,              // Initial duration in minutes
        outputFormat: 'minutes',   // 'minutes' or 'seconds'
        mode: 'input',            // 'input' or 'display'
        showSliders: true,        // Show hour/minute sliders
        showPresets: true,        // Show quick select buttons
        scrollSlider: true,       // Enable mouse wheel on sliders
        resizable: true,          // Allow popup resize
        width: 'auto',           // Dropdown width (number or 'auto')
        presets: [15, 30, 60, 120, 240], // Quick select values (minutes)
        onChange: function(data) {} // Callback function
    });

    $('.cutoff-duration-picker').on('durationChange', function(e, data) {
        $(this).parent().next().val(data.totalMinutes);
        // console.log(data); // { hours, minutes, totalMinutes, totalSeconds, display }
    });

    $('.master-cutoff-duration-picker').on('durationChange', function(e, data) {
        $(this).parent().next().val(data.totalMinutes);
        const minutes = data.totalMinutes;

        bootbox.confirm({
            title: 'Confirmation',
            message: 'Are you sure to apply all the cutoff duration.',
            buttons: {
                cancel: {
                    label: '<i class="fa fa-times"></i> Cancel'
                },
                confirm: {
                    label: '<i class="fa fa-check"></i> Confirm'
                }
            },
            callback: function (result) {
                if( result ) {
                    $('.cutoff-duration-picker').each(function(index) {
                        $(this).data('durationPicker').setValue(minutes);
                        $(this).data('durationPicker').apply();
                    });
                }
                // console.log('This was logged in the callback: ' + result);
            }
        });

        /*
        if(confirm("Are you sure to apply all the cutoff duration")) {
            $('.cutoff-duration-picker').each(function(index) {
                $(this).data('durationPicker').setValue(minutes);
                $(this).data('durationPicker').apply();
            });
            // $('.cutoff-duration-picker').durationPicker('setValue', data.totalMinutes);
            // $('.cutoff-duration-picker').durationPicker('apply');
        }*/
        // $(this).parent().next().val(data.totalMinutes);
        // console.log(data); // { hours, minutes, totalMinutes, totalSeconds, display }
    });
</script>
@endsection