@extends('layouts.app_booking')
@section('title',__('new.late_services'))

@section('content')
    <section class="content-header">
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb breadcrumb-style1">
                <li class="breadcrumb-item">
                    <a href="#">{{__('home.home')}}</a>
                </li>
                <li class="breadcrumb-item">
                    <a href="#">{{__('restaurant.bookings')}}</a>
                </li>
                <li class="breadcrumb-item active">{{__('new.late_services')}}</li>
            </ol>
        </nav>

    </section>
    <div class="container">
        @component('components.filters', ['class' => 'card mt-5'])
        <!-- فلاتر الفرع والعميل -->
        <div class="row mb-3">
            <div class="col-md-3">
                <div class="form-floating form-floating-outline mt-2">
                    {!! Form::select('location_id', $business_locations, $location_id,
                        ['id'=>'location_filter','class'=>'form-control select2',
                         'style'=>'width:100%', 'placeholder'=>__('lang_v1.all')]); !!}
                    {!! Form::label('location_filter', __('purchase.business_location') . ':') !!}
                </div>
            </div>
            <div class="col-md-3">
                <div class="form-floating form-floating-outline mt-2">
                    {!! Form::select('customer_id', $customers, $customer_id,
                        ['id'=>'customer_filter','class'=>'form-control select2',
                         'style'=>'width:100%', 'placeholder'=>__('lang_v1.all')]); !!}
                    {!! Form::label('customer_filter', __('contact.customer') . ':') !!}
                </div>
            </div>
        </div>

        @endcomponent
        @component('components.widget', ['class' => 'card mt-5'])

            <div class="  row" id="services_grid">
            @forelse($services_by_staff as $staff => $services)
                <div class="col-sm-3 ">
                    <div class="card mb-3">
                        <span class="position-absolute top-0 no-print start-100 translate-middle badge badge-center bg-label-danger border border-warning">{{count($services)}}</span>

                        <div class="card-header bg-danger text-white">
                            <strong>👨‍💼 {{ $staff }}
                                {{ \App\User::find($staff) ? \App\User::find($staff)->first_name  . ' '. \App\User::find($staff)->last_name  : ' '}}
                            </strong> <small>(متأخر)</small>
                        </div>
                        <div class="card-body">
                            @foreach($services as $srv)
                                <p class="border-bottom pb-1 mb-2">
                                    <strong>🛎 الخدمة:</strong> {{ $srv->product_name }} <br>
                                    <strong>🚦 الحالة:</strong> {{ __('restaurant.'.$srv->booking_status )}}<br>
                                    <strong>👤 العميل:</strong> {{ $srv->customer_name }} <br>
                                    <strong>⏰ وقت البدء:</strong> {{  date('h:i A', strtotime($srv->start_time)) }} <br>
                                    <strong>⏳ وقت الانتهاء:</strong> {{  date('h:i A', strtotime($srv->end_time)) }}
                                </p>
                            @endforeach
                        </div>
                    </div>
                </div>
            @empty
                <div class="col-sm-12 mt-5">
                    <p class="text-center text-muted">🚫{{__('new.no_late_services')}}</p>
                </div>
            @endforelse
        </div>
            @endcomponent
    </div>
@endsection

@section('javascript')
    <script>
        $(document).ready(function() {
            $('#location_filter, #customer_filter').on('change', function() {
                filterLateServices();
            });

            function filterLateServices(){
                let location_id = $('#location_filter').val() || '';
                let customer_id = $('#customer_filter').val() || '';
                let url = "{{ route('bookings.late_services_grid') }}";

                // إعادة تحميل الصفحة مع الفلاتر
                window.location.href = url + "?location_id=" + location_id + "&customer_id=" + customer_id;
            }
        });
    </script>
@endsection