@extends('layouts.app_booking')
@section('title', __('restaurant.bookings'))
<!-- Main content -->

@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.booking_list')}}</li>
            </ol>
        </nav>

    </section>
    <div class="container">

        @component('components.filters', ['class' => 'card'])
            <div class="row">
                <!-- فلتر الفرع -->
                <div class="col-md-3">
                    <div class="form-floating form-floating-outline mt-2">
                        {!! Form::select('sell_list_filter_location_id', $business_locations, null,
                            ['id'=>'sell_list_filter_location_id','class' => 'form-control select2',
                             'style' => 'width:100%' ]); !!}
                        {!! Form::label('sell_list_filter_location_id', __('purchase.business_location') . ':') !!}
                    </div>
                </div>
                <!-- فلتر العميل -->
                <div class="col-md-3">
                    <div class="form-floating form-floating-outline mt-2">
                        {!! Form::select('sell_list_filter_customer_id', $customers, null,
                            ['id'=>'sell_list_filter_customer_id','class' => 'form-control select2',
                             'style' => 'width:100%', 'placeholder' => __('lang_v1.all')]); !!}
                        {!! Form::label('sell_list_filter_customer_id', __('contact.customer') . ':') !!}
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="form-floating form-floating-outline mt-2">
                        <select id="sell_list_filter_booking_status" class="form-control">
                            <option value="">@lang('lang_v1.all')</option>
                            <option value="completed">@lang('restaurant.completed')</option>
                            <option value="waiting">@lang('restaurant.waiting')</option>
                            <option value="cancelled">@lang('restaurant.cancelled')</option>
                        </select>
                        <label for="sell_list_filter_booking_status">@lang('restaurant.booking_status')</label>
                    </div>
                </div>
                <!-- فلتر نطاق التاريخ -->
                <div class="col-md-3">
                    <div class="form-floating form-floating-outline mt-2">
                        {!! Form::text('sell_list_filter_date_range', null,
                            ['placeholder' => __('lang_v1.select_a_date_range'),
                             'id' => 'sell_list_filter_date_range','class' => 'form-control',
                             'readonly']); !!}
                        {!! Form::label('sell_list_filter_date_range', __('report.date_range') . ':') !!}
                    </div>
                </div>


            </div>
        @endcomponent

            @component('components.widget', ['class' => 'card mt-5'])
            <div class="table-responsive">
                <table class="table table-bordered ajax_view" id="booking_table">
                    <thead>
                    <tr>
                        <th>@lang('new.booking_id')</th>
                        <th>@lang('new.booking_date')</th>
                        <th>@lang('contact.customer')</th>
                        <th>@lang('new.service_count')</th>
                        <th>@lang('new.status')</th>
                        <th>@lang('sale.total')</th>
                        <th>@lang('new.payment_status')</th>
                        <th>@lang('new.booked_by')</th>
                        <th>@lang('new.booked_by')</th>
                    </tr>
                    </thead>
                </table>
            </div>
            @endcomponent
    </div>
    <section class="invoice print_section" id="receipt_section">
    </section>
@endsection

@section('javascript')
    <script>
        $(document).ready(function() {
            // تاريخ اليوم
            moment.tz.setDefault('{{ config("app.timezone") }}');

            // تهيئة فلتر التاريخ
            $('#sell_list_filter_date_range').daterangepicker(
                dateRangeSettings,
                function (start, end) {
                    $('#sell_list_filter_date_range').val(
                        start.format(moment_date_format) + ' - ' + end.format(moment_date_format)
                    );
                    booking_table.ajax.reload();
                }
            );

            // DataTable
            booking_table = $('#booking_table').DataTable({
                processing: true,
                serverSide: true,
                fixedHeader:false,
                'bDestroy':true,
                 ajax: {
                    url: "{{ route('bookings.list_data') }}",
                    data: function(d) {
                        d.location_id = $('#sell_list_filter_location_id').val();
                        d.customer_id = $('#sell_list_filter_customer_id').val();
                        d.booking_status = $('#sell_list_filter_booking_status').val(); // 🔴 إضافة فلتر الحالة
                        d.date_range = $('#sell_list_filter_date_range').val();
                    }
                },
                columns: [
                    { data: 'booking_id', name: 'booking_id' },
                    { data: 'booking_start', name: 'booking_start' },
                     { data: 'customer_name', name: 'customer_name' },
                    { data: 'service_count', name: 'service_count', searchable: false },
                    { data: 'booking_status', name: 'booking_status' },
                    { data: 'total', name: 'final_total', searchable: false },
                    { data: 'payment_status', name: 'payment_status' },
                    { data: 'booked_by', name: 'booked_by' },
                    { data: 'action', name: 'action' }
                ],
                drawCallback: function() {
                    __currency_convert_recursively($('#booking_table'));
                },
                createdRow: function(row, data, dataIndex) {
                    $(row).find('td:eq(6)').attr('class', 'clickable_td');
                }
            });

            // اعادة تحميل الجدول عند تغيير الفلاتر
            $('#sell_list_filter_location_id, #sell_list_filter_customer_id,#sell_list_filter_booking_status').change(function() {
                booking_table.ajax.reload();
            });
            $(document).on('click', 'button.cancel_booking', function() {
                $('div.view_modal').load($(this).data('href'), function() {
                    $(this).modal('show');
                    $('form#edit_booking_form').validate({
                        submitHandler: function(form) {
                            var data = $(form).serialize();

                            $.ajax({
                                method: "PUT",
                                url: $(form).attr("action"),
                                dataType: "json",
                                data: data,
                                beforeSend: function(xhr) {
                                    __disable_submit_button($(form).find('button[type="submit"]'));
                                },
                                success: function(result) {
                                    if (result.success == true) {
                                        $('div.view_modal').modal('hide');
                                        toastr.success(result.msg);
                                        booking_table.ajax.reload()
                                        $(form).find('button[type="submit"]').attr('disabled', false);
                                    } else {
                                        toastr.error(result.msg);
                                    }
                                }
                            });
                        }
                    });
                })
            });

        });
    </script>
@endsection