@if($booking)
    <!-- Modal -->
    <div class="modal fade" id="bookingUpdateModal" tabindex="-1" role="dialog" aria-labelledby="bookingUpdateLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="bookingUpdateModalLabel">{{ __('general.update_status') }}</h5>
                    <button type="button" class="close" data-bs-dismiss="modal">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <form id="edit_order_form" action="{{ route('bookings.update',$booking->id) }}">
                    {{ csrf_field() }}
                    <input type="hidden" name="_method" value="PUT">

                    <div class="modal-body">
                        <div class="row">
                            <div class="col-4">
                                {{ __('voyager::seeders.data_rows.status') }}
                            </div>
                            <div class="col-8">
                                <select class="form-control" name="status" id="e_status">
                                    @foreach(\App\Models\Booking::$status as $status)
                                        <option value="{{ $status }}" {{ $booking->status == $status ? 'selected' : '' }}>{{ __('booking.status.'.$status) }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="submit" class="btn bg-gradient-success" >{{ __('voyager::generic.update') }}</button>
                        <button type="button" class="btn bg-gradient-dark" data-bs-dismiss="modal">{{ __('voyager::generic.close') }}</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <script>
        $('#edit_order_form').submit(function(e) {
            e.preventDefault();
            var submit = $(this).find("[type=submit]");

            // Serialize the form data
            let form = $('#edit_order_form')[0];
            const formData = new FormData(form);
            const formAction = $(this).attr('action');
            // Send an AJAX request
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });

            $.ajax({
                url: formAction,
                type: "POST",
                data : formData,
                dataType:"JSON",
                processData : false,
                contentType:false,

                success: function(response) {

                    if (response.errors) {
                        var errorMsg = '';
                        $.each(response.errors, function(field, errors) {
                            var field_parent = $('#e_'+field).parent();
                            $.each(errors, function(index, error) {
                                // errorMsg += error + '<br>';
                                if(field_parent.hasClass( "error" ))
                                {
                                    field_parent.find('.error-massage').remove( ".error-massage" );
                                }

                                field_parent.addClass('error')
                                field_parent.append(`
                                        <div class="text-danger error-massage text-right">`+error+`</div>
                                    `)
                            });
                        });
                    } else {
                        $('.error-massage').remove();
                        var data = response.data;

                        toastr.success(response.success)

                        window.location.reload();
                    }
                },
                beforeSend: function(){
                    submit.attr("value", "Loading...");
                },
                error: function(xhr, status, error) {
                    toastr.error('An error occurred: ' + error)
                }

            });
        });
    </script>

@endif