@extends('layouts.customer')

@section('content')
<!-- 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%;">Online Ordering Availability</h1>

                    <div class="d-flex align-items-center">
                        <a href="{{ route('restaurants.online-ordering.availability.create', ['account' => $account, 'restaurant' => $restaurant]) }}" class="btn btn-secondary float-right mr-2">Create Availability</a>
                        
                        @php
                            $filter_items = [
                                'this_week'  =>  'This Week',
                                'last_week'  =>  'Last Week',
                                'this_month'  =>  'This Month',
                                'last_month'  =>  'Last Month',
                                'this_year'  =>  'This Year',
                                'last_year'  =>  'Last Year',
                            ];
                        @endphp
                        <div class="dropdown d-inline mr-2">
                            <button id="date-filter-btn" class="btn btn-primary dropdown-toggle date-filter-btn" data-toggle="dropdown" aria-expanded="false">{{ $filter_items[request()->get('filter') ?? 'this_week'] }}</button>
                            <div class="dropdown-menu dropdown-menu-right dropdown-menu-lg-start px-2 py-3">
                                <!-- .current class for active or current selected -->
                                @foreach($filter_items as $key => $value)
                                    <a class="dropdown-item date-filter-item {{ $key == request()->get('filter') ? 'current' : '' }}" data-filter="{{ $key }}">{{ $value }}</a>
                                @endforeach
                                
                                <!-- <a class="dropdown-item date-filter-item" data-filter="this_week">This Week</a>
                                <a class="dropdown-item date-filter-item" data-filter="last_week">Last Week</a>
                                <a class="dropdown-item date-filter-item" data-filter="this_month">This Month</a>
                                <a class="dropdown-item date-filter-item" data-filter="last_month">Last Month</a>
                                <a class="dropdown-item date-filter-item" data-filter="this_year">This Year</a>
                                <a class="dropdown-item date-filter-item" data-filter="last_year">Last Year</a> -->
                            </div>
                        </div>

                        <!-- 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>
    
                            @if(isset($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($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>

                        {!! Form::open(['route' => ['restaurants.online-ordering.availability.index', ['account'=>$account, 'restaurant' => $restaurant]], 'method' => 'GET', 'id' => 'date-filter-form', 'style'=>'display:inline']) !!}
                            {{ Form::hidden( 'to', request()->get('to') ?? '', ['id' => 'to-date'] ) }}
                            {{ Form::hidden( 'from', request()->get('from') ?? '', ['id' => 'from-date'] ) }}

                            <select id="preset-range" name="filter" class="d-none">
                                @foreach($filter_items as $key => $value)
                                    <option value="{{ $key }}" @if($key == request()->get('from')) selected @endif>{{ $value }}</option>
                                @endforeach
                                
                                <!-- <option value="this_week" @if('this_week' == request()->get('from')) selected @endif>This Week</option>
                                <option value="last_week" @if('last_week' == request()->get('from')) selected @endif>Last Week</option>
                                <option value="this_month" @if('this_month' == request()->get('from')) selected @endif>This Month</option>
                                <option value="last_month" @if('last_month' == request()->get('from')) selected @endif>Last Month</option>
                                <option value="this_year" @if('this_year' == request()->get('from')) selected @endif>This Year</option>
                                <option value="last_year" @if('last_year' == request()->get('from')) selected @endif>Last Year</option> -->
                            </select>

                            <button type="submit" class="btn btn-info" style="display:none">Submit</button>
                        {!! Form::close() !!}
                    </div>
                </div>
            </div>
            <div class="col-12">
                <div class="px-2">
                    <div class="row mb-2">
                        <div class="card">
                            <p class="card-body">
                                Create and manage custom online ordering hours for special dates. Use this section to adjust your restaurant’s availability for holidays, events, or maintenance days. These settings temporarily override your weekly schedule.
                            </p>
                        </div>
                    </div>
                    <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="{{ collect($specialDays)->unique('date')->count() ?? 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 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>
                                                    <strong>
                                                        {{ $specialDay->date ? \Carbon\Carbon::parse($specialDay->date)->format('F j, Y') : '-' }} <br />
                                                        {{ $specialDay->note ?? '' }}
                                                    </strong>
                                                </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' => $restaurant, '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' => $restaurant, '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>
        </div>
    </div>
@endsection
@section('script')
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.30.1/moment.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 = "{{  route('restaurants.online-ordering.availability.index', ['account' => $account, 'restaurant' => $restaurant])  }}?location="+$(this).val();
            window.location.href = refUrl;
       }
    });
</script>

<script>
    (function($) {
        let toDate = '';
        let fromDate = '';
        
        $(document).ready(function () {
            $('#preset-range').change(function () {
                const value = $(this).val();
                let start = null, end = null;

                switch (value) {
                    case 'this_week':
                        start = moment().startOf('week');
                        end = moment().endOf('week');
                        break;
                    case 'last_week':
                        start = moment().subtract(1, 'weeks').startOf('week');
                        end = moment().subtract(1, 'weeks').endOf('week');
                        break;
                    case 'this_month':
                        start = moment().startOf('month');
                        end = moment().endOf('month');
                        break;
                    case 'last_month':
                        start = moment().subtract(1, 'months').startOf('month');
                        end = moment().subtract(1, 'months').endOf('month');
                        break;
                    case 'this_year':
                        start = moment().startOf('year');
                        end = moment().endOf('year');
                        break;
                    case 'last_year':
                        start = moment().subtract(1, 'years').startOf('year');
                        end = moment().subtract(1, 'years').endOf('year');
                        break;
                    default:
                        fromDate = toDate = '';
                        
                        // Set From and To date
                        $('#to-date').val(toDate);
                        $('#from-date').val(fromDate);
                        break;
                }

                if (start && end) {
                    // Format date
                    fromDate = start.format('YYYY-MM-DD');
                    toDate = end.format('YYYY-MM-DD');

                    // Set From and To date
                    $('#to-date').val(toDate);
                    $('#from-date').val(fromDate);
                }
            });
        });

        $(document).ready(function () {
            // Click event on custom dropdown items
            $('.date-filter-item').on('click', function (e) {
                e.preventDefault();

                var selectedFilter = $(this).data('filter');
                var selectedText = $(this).text();

                // Update the button text
                $('#date-filter-btn').text(selectedText);

                // Update the hidden <select>
                $('#preset-range').val(selectedFilter).trigger('change');

                // Highlight selected item
                $('.date-filter-item').removeClass('current');
                $(this).addClass('current');

                // Submit Filter Form
                $("#date-filter-form").submit();
            });

            // Optionally, if select changes by other means, update the button
            $('#preset-range').on('change', function () {
                var selectedText = $('#preset-range option:selected').text();
                $('#date-filter-btn').text(selectedText);
                $('.date-filter-item').removeClass('current');
                $('.date-filter-item[data-filter="' + $(this).val() + '"]').addClass('current');
            });

            // If no filter is selected (no .current exists)
            if ($('.date-filter-item.current').length === 0) {
                console.log("fired...");

                // Pick default option
                var defaultFilter = 'this_week';

                // Find that item and trigger click
                $('.date-filter-item[data-filter="' + defaultFilter + '"]').trigger('click');
            }
        });
    })(jQuery);
</script>
@endsection