@extends('layouts.app_booking')
@section('title',__('new.completed_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">{{__('new.completed_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 }}
                            </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
@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.completed_grid') }}";

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