@extends('layouts.app_booking')
@section('title',__('restaurant.todays_bookings'))
@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">{{__('restaurant.todays_bookings')}}</li>
            </ol>
        </nav>

    </section>
    @component('components.filters', ['class' => 'card mt-5'])
    <div class="container">

        <!-- فلاتر الفرع والعميل -->
        <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>

    </div>
    @endcomponent
    @component('components.widget', ['class' => 'card mt-5'])
        <!-- عرض الحجوزات بشكل شبكي -->
        <div class="row" id="booking_grid">
            @foreach($bookings as $booking)
                <div class="col-sm-3">
                    @php
                        $bg = $booking->booking_status == 'completed' ? 'success' :
                                 ($booking->booking_status == 'waiting' ? 'warning' : 'danger');
                    @endphp
                    <div class="card mb-3 bg-label-{{$bg }} ">
                        <div class="card-header">

                            <strong>@lang('new.booking_number'): {{ $booking->invoice_no }}</strong>
                        </div>
                        <div class="card-body text-black">
                            <p>
                                <strong>@lang('new.customer'):</strong> {{ $booking->customer_name }}
                            </p>
                            <p>
                                <strong>@lang('new.service_count'):</strong> {{ $booking->service_count }}
                                <button class=" btn-info btn-sm open-details-modal"
                                        data-booking_id="{{ $booking->booking_id }}">
                                    {{__('new.show')}}
                                </button>
                            </p>
                            <p>
                                <strong>@lang('new.status'):</strong>
                                @php
                                    $color = $booking->booking_status == 'completed' ? 'green' :
                                             ($booking->booking_status == 'waiting' ? 'orange' : 'red');
                                @endphp
                                <span style="color: {{ $color }}">{{ __('restaurant.'.$booking->booking_status )}}

                                </span>
                            </p>
                            <p>
                                <strong>@lang('new.total'):</strong>
                                <span class="display_currency" data-currency_symbol="true">
                                {{ $booking->total }}
                              </span>
                            </p>

                            <p>
                                <strong>@lang('new.booked_by'):</strong>
                                👨‍💼 {{ \App\User::find($booking->created_by) ? \App\User::find($booking->created_by)->first_name  . ' '. \App\User::find($booking->created_by)->last_name  : ' '}}

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

            @endforeach

            @if($bookings->count() == 0)

                <div class="col-md-12">
                    <p class="text-center text-muted">🚫 {{__('new.no_booking_today')}}</p>
                </div>
            @endif
        </div>
    @endcomponent


    <!-- مودال عرض تفاصيل الخدمات -->
    <div class="modal fade" id="bookingDetailsModal" tabindex="-1" role="dialog" aria-labelledby="bookingDetailsModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="bookingDetailsModalLabel">تفاصيل الخدمات</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="@lang('messages.close')">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body" id="bookingDetailsModalBody">
                    <!-- يتم تحميل التفاصيل هنا عبر AJAX -->
                </div>
            </div>
        </div>
    </div>

@endsection

@section('javascript')
    <script>
        $(document).ready(function() {
            // تحديث الصفحة عند تغيير الفرع أو العميل
            $('#location_filter, #customer_filter').on('change', function(){
                filterBookings();
            });

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

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

            $(document).on('click', '.open-details-modal', function() {
                let booking_id = $(this).data('booking_id');

                // افتح المودال
                $('#bookingDetailsModal').modal('show');
                // اجعل محتوى المودال قيد التحميل
                $('#bookingDetailsModalBody').html('<p class="text-center text-info">جاري التحميل...</p>');

                // 🔎 نحتاج لاستدعاء راوت يأتي بتفاصيل هذه الخدمات
                // لنفترض راوت اسمه bookings.getServices
                let detailsUrl = "{{ route('bookings.get_services') }}?booking_id=" + booking_id;

                // AJAX
                $.ajax({
                    url: detailsUrl,
                    method: 'GET',
                    success: function(response){
                        $('#bookingDetailsModalBody').html(response);
                    },
                    error: function(xhr){
                        console.error("خطأ في جلب تفاصيل الخدمات:", xhr.responseText);
                        $('#bookingDetailsModalBody').html('<div class="alert alert-danger">حدث خطأ.</div>');
                    }
                });
            });

        });
    </script>
@endsection