@extends('layouts.room-booking-master')
@section('css')
    <link href="{{ URL::asset('assets/libs/sweetalert2/sweetalert2.min.css') }}" rel="stylesheet" type="text/css" />
    <link href="https://cdn.datatables.net/1.11.5/css/dataTables.bootstrap5.min.css" rel="stylesheet" type="text/css" />
    <!--datatable responsive css-->
    <link href="https://cdn.datatables.net/responsive/2.2.9/css/responsive.bootstrap.min.css" rel="stylesheet"
        type="text/css" />
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" type="text/css" />
    <link href="{{ URL::asset('assets/libs/sweetalert2/sweetalert2.min.css') }}" rel="stylesheet" type="text/css" />

    <style>
        .filepond--root,
        .filepond--drop-label.filepond--drop-label label {
            cursor: pointer !important;
        }
        input[type="checkbox"]::before {
        /* ...existing styles */
            transform-origin: bottom left;
            clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
        }
        /* camera style */
       .camera-wrapper {
            display: flex;
            flex-direction: column;
            align-items: center;
            position: relative;
        }

        .camera-box {
            position: relative;
            width: 320px;
            height: 240px;
            background-color: #000;
            border-radius: 8px;
            overflow: hidden;
            border: 2px solid #007bff;
            box-shadow: 0 0 10px rgba(0, 123, 255, 0.3);
        }

        #camera-stream {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .close-btn {
            position: absolute;
            top: 8px;
            right: 8px;
            background-color: red;
            color: white;
            border: none;
            font-size: 18px;
            padding: 4px 10px;
            border-radius: 4px;
            cursor: pointer;
            z-index: 10;
        }

        .capture-btn {
            margin-top: 10px;
            background-color: #007bff;
            color: white;
            border: none;
            padding: 8px 20px;
            border-radius: 4px;
            font-size: 16px;
            cursor: pointer;
        }
        .capture-btn {
            width: 50px;
            height: 50px;
            background-color: #007bff;
            color: white;
            border: none;
            border-radius: 50%;
            font-size: 27px;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
            transition: background-color 0.2s ease;
        }

        .capture-btn:hover {
            background-color: #0056b3;
        }

    </style>
@endsection
{{-- @section('title')
@endsection --}}

@section('content')
@component('admin.room-booking.breadcrumb')
@slot('li_1')
    Room Booking
@endslot
@slot('title')
    @isset($roomBooking)
        Edit
    @endisset Book Room
@endslot
@endcomponent
    <div class="col-lg-12 ">
        @isset($roomBooking)
            <form action="/admin/room-booking/{{ $roomBooking->id }}" method="post" id="roomBookingUpdateForm">
                @method('put')
            @else
                <form action="/admin/room-booking" method="post" id="roomBookingForm">
                    @method('post')
                @endisset
                @csrf
               
               <input type="text" name="room_id" value="{{ isset($roomBooking) ? $roomBooking->id : '' }}" hidden>
                <div class="row">
                    <div class="col-xl-12">
                        <div class="card mb-4">
                            <div class="card-header d-flex phcl-flx">
                                <h4 class="card-title mb-0 flex-grow-1 text-nowrap">
                                 
                                </h4>
                                {{-- <div class="d-flex" style="width: 10%;">
                                    <input type="date" value="{{ date('Y-m-d') }}" name="date" id="date_filter" class="form-control shadow-sm rounded px-2 py-1 border border-secondary" style="font-size: 14px;">
                                </div> --}}

                                <div>
                                    <div class="phcl-flx-btns" style="padding-left: 28px;">
                                        <a href="/admin/room-booking"
                                            class="btn btn-soft-primary waves-effect waves-light"><i
                                                class="las la-arrow-left"></i> Back</a>
                                    </div>
                                </div>
                            </div>
                            <div class="card-body">
                                <div class="row gx-3 mb-3">
                                    {{-- main customer --}}
                                    <div class="col-md-3 col-sm-6">
                                        <label class="small mb-1" for="inputFirstName">Customer Name</label>
                                        <select name="customer" id="customer-select" required>
                                            <option value="">Select Customer</option>
                                            @isset($roomBooking)
                                                <option value="{{ $roomBooking->customer_id }}" selected>
                                                    {{ $roomBooking->customer->name }}</option>
                                            @endisset
                                        </select>
                                    </div>
                                    <div class="col-md-9 col-sm-6" id="customerDataContainer">
                                        <div class="show-customer-details border rounded p-3 bg-light"
                                            style="position: relative;">
                                            <div class="row mb-2">
                                                <div class="fw-bold" style="width: 8%;">Name</div>
                                                <div class="col-sm-9" id="customer-name" style="width: 50%;"><strong>:
                                                    </strong>
                                                    <span id="show-customer-name"></span>
                                                </div>
                                                <button type="button" class="btn btn-sm btn-info mr-2 add-customer-btn"
                                                    style="width: fit-content; padding: 8px 10px; position: absolute; right: 10px;">
                                                    ➕ Add New Customer
                                                </button>
                                            </div>
                                            <div class="row mb-2">
                                                <div class="fw-bold" style="width: 8%;">Mobile</div>
                                                <div class="col-sm-9" id="customer-mobile" style="width: 50%;"><strong>:
                                                    </strong>
                                                    <span id="show-customer-mobile"></span>
                                                </div>
                                            </div>
                                            <div class="row">
                                                <div class="fw-bold" style="width: 8%;">Address</div>
                                                <div class="col-sm-9 text-wrap" id="customer-address"
                                                    style="word-break: break-word; width: 50%;"><strong>: </strong>
                                                    <span id="show-customer-address"></span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                </div>
                                <hr>
                                @isset($roomBooking)
                                    @foreach ($roomBooking->roomBookingItems as $index => $bookingItem)
                                        {{-- @dd($bookingItem) --}}
                                        <div id="roomDataRow">
                                            <div class="row gx-3 mb-3 rows" id="row_{{ $index + 1 }}">
                                                <div class="col-md-3 col-sm-6">
                                                    <label class="small mb-1" for="inputFirstName">Room</label>
                                                    <select name="items[]" id="room-select_{{ $index + 1 }}"
                                                        class="form-control room-select room-slct" required>
                                                        <option value="">Select Room</option>
                                                        @foreach ($stockItems as $item)
                                                            <option value="{{ $item->id }}"
                                                                {{ $bookingItem->stock_item_id == $item->id ? 'selected' : '' }}>
                                                                {{ $item->name }}</option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                                <div class="col-md-2 col-sm-6">
                                                    <label class="small mb-1" for="inputFirstName">Price</label>
                                                    <input type="number" class="form-control" name="unit_price[]" value="{{ $bookingItem->price }}" id="unit_price_{{ $index + 1 }}" placeholder="Enter Room Price" required>
                                                </div>
                                                <div class="col-md-2 col-sm-6">
                                                    <label class="small mb-1" for="inputFirstName">From Date</label>
                                                    <input class="form-control" name="from_date[]"
                                                        value="{{ $bookingItem->from_date }}" type="date"
                                                        id="from_date" required>
                                                </div>
                                                <div class="col-md-2 col-sm-6">
                                                    <label class="small mb-1" for="inputFirstName">To Date</label>
                                                    <input class="form-control" name="to_date[]"
                                                        value="{{ $bookingItem->to_date }}" type="date"
                                                        id="to_date" required>
                                                </div>
                                                <div class="col-md-2 col-sm-5">
                                                    <label class="small mb-1" for="inputFirstName">No of persons</label>
                                                    <input class="form-control" name="no_of_person[]"
                                                        value="{{ $bookingItem->number_of_persons }}"
                                                        placeholder="Enter No of persons" type="number" id="no_of_person">
                                                </div>
                                                <div class="col-md-1 col-sm-5">
                                                    <button type="button" class="btn btn-danger mt-4"
                                                        onclick="removeRoomRow({{ $index + 1 }})">-</button>
                                                </div>
                                            </div>
                                        </div>
                                    @endforeach
                                @else
                                    <div id="roomDataRow">
                                        <div class="row gx-3 mb-3 rows" id="row_1">
                                            <div class="col-md-3 col-sm-6">
                                                <label class="small mb-1" for="inputFirstName">Room</label>
                                                <select name="items[]" id="room-select" class="form-control room-slct" required>
                                                    <option value="">Select Room</option>
                                                   
                                                </select>
                                            </div>
                                            <div class="col-md-2 col-sm-6">
                                                <label class="small mb-1" for="inputFirstName">Price</label>
                                                <input class="form-control" name="unit_price[]" type="number" id="unit_price_1" placeholder="Enter Room Price" required>
                                            </div>
                                            <div class="col-md-2 col-sm-6">
                                                <label class="small mb-1" for="inputFirstName">From Date</label>
                                                <input class="form-control" name="from_date[]" type="date"  value="{{ \Carbon\Carbon::now('Asia/Kolkata')->format('Y-m-d') }}"
                                                    id="from_date" required>
                                            </div>
                                            <div class="col-md-2 col-sm-6">
                                                <label class="small mb-1" for="inputFirstName">To Date</label>
                                                <input class="form-control" name="to_date[]" type="date" value="{{ \Carbon\Carbon::now('Asia/Kolkata')->addDay()->format('Y-m-d') }}"
                                                    id="to_date" required>
                                            </div>
                                            <div class="col-md-2 col-sm-5">
                                                <label class="small mb-1" for="inputFirstName">No of persons</label>
                                                <input class="form-control" name="no_of_person[]"
                                                    placeholder="Enter No of persons" type="number" id="no_of_person">
                                            </div>
                                            <div class="col-md-1 col-sm-5">
                                                <button type="button" class="btn btn-danger mt-4"
                                                    onclick="removeRoomRow(1)">-</button>
                                            </div>
                                        </div>
                                    </div>
                                @endisset


                                <div class="row gx-3 mb-3">
                                    <div class="col-md-3 col-sm-6">
                                        <label class="small mb-1" for="id_proof">Id Proof</label>
                                        <input class="form-control filepondSingle" name="id_proof[]" type="file"
                                            style="cursor: pointer;" id="id_proof" multiple>
                                    </div>

                                    <div class="col-md-3 col-sm-6 d-flex align-items-center">
                                        <button class="btn text-white btn-primary" type="button" id="camera-btn">
                                            <i class="fa-solid fa-camera" style="font-size: 20px;"></i>
                                        </button>

                                       <div class="camera-wrapper" id="camera-wrapper" style="display: none;">
                                            <div class="camera-box">
                                                <video id="camera-stream" autoplay playsinline></video>
                                                <button type="button" id="close-camera-btn" class="close-btn text-white">X</button>
                                            </div>
                                            <button type="button" id="capture-btn" class="capture-btn">
                                                <i class="fa-regular fa-circle"></i>
                                            </button>
                                        </div>
                                        <canvas id="snapshot" style="display: none;"></canvas>

                                    </div>
                                </div>
                                <br>
                                <div class="col-md-12 d-flex justify-content-end p-4 gap-2">
                                    <button type="button" class="btn text-white btn-success" id="addRoomRowBtn" style="width: 100px;">
                                        <i class="fa-solid fa-plus text-white" style="font-size: 20px;"></i></button>
                                    <button class="btn text-white btn-primary" id="roomBookingSubmit" type="submit" style="width: 100px;">
                                        @isset($roomBooking)
                                            Update
                                        @else
                                            Save
                                        @endisset
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
    </div>
    <div id="customerAddModal" class="modal fade zoomIn" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <form action="" method="POST" id="customer-add-form" enctype="multipart/form-data">
                    @csrf
                    <div class="modal-header">
                        <h4>Add Customer</h4>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"
                            id="btn-close"></button>
                    </div>
                    <div class="modal-body">
                        <div class="mb-3 form-check" style="display: flex; align-items: end; gap: 10px;">
                            <input type="checkbox" class="form-check-input" id="is_credit_party" name="is_credit_party" style="padding: 12px; border: 1px solid black;">
                            <label class="form-check-label" for="is_credit_party">Is Credit Party</label>
                        </div>
                        <div class="mb-3">
                            <label for="name" class="form-label">Name</label>
                            <input type="text" class="form-control" placeholder="Enter customer name"
                                id="customerName" name="name" autocomplete="off" required>
                        </div>
                        <div class="mb-3">
                            <label for="name" class="form-label">Mobile</label>
                            <input type="number" class="form-control" placeholder="Enter mobile number"
                                id="customerMobile" name="mobile" autocomplete="off" required>
                        </div>
                        <div class="mb-3">
                            <label for="name" class="form-label">Age</label>
                            <input type="number" class="form-control" placeholder="Enter age" id="customerAge"
                                name="age" autocomplete="off">
                        </div>
                        <div class="mb-3">
                            <label for="name" class="form-label">Address</label>
                            <textarea class="form-control" placeholder="Enter address" rows="2" id="customerAddress" name="address"
                                autocomplete="off"></textarea>
                        </div>
                        <div class="mb-3">
                            <label class="small mb-1" for="inputFirstName">Id Proof</label>
                            <input class="form-control filepondSingle" name="id_proof" type="file"
                                id="customer_id_proof" />
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-primary" id="customerSubmit">Save</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection
@section('script')
    <script src="{{ URL::asset('/assets/libs/sweetalert2/sweetalert2.min.js') }}"></script>
    <script src="{{ URL::asset('/assets/js/app.min.js') }}"></script>
    <script src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.11.5/js/dataTables.bootstrap5.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/2.3.2/js/dataTables.buttons.min.js" type="text/javascript"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js" type="text/javascript"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js" type="text/javascript"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js" type="text/javascript"></script>
    <script src="https://cdn.datatables.net/buttons/2.3.2/js/buttons.html5.min.js" type="text/javascript"></script>
    <script src="https://cdn.datatables.net/buttons/2.3.2/js/buttons.print.min.js" type="text/javascript"></script>
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
    <script src="{{ URL::asset('/assets/libs/sweetalert2/sweetalert2.min.js') }}"></script>

    <script>
        $(document).ready(function() {
            fetchCustomer();
            // FilePond.registerPlugin(
            //     // encodes the file as base64 data
            //     FilePondPluginFileEncode,
            //     // validates the size of the file
            //     FilePondPluginFileValidateSize,
            //     // corrects mobile image orientation
            //     FilePondPluginImageExifOrientation,
            //     // previews dropped images
            //     FilePondPluginImagePreview
            // );
            // $('.filepondSingle').filepond({
            //     credits: false,
            //     multiple: false,
            // });
            $('.room-select').select2({
                placeholder: 'Select room',
            });
// customer select
            $('#customer-select').select2({
                placeholder: 'Select customer',
                ajax: {
                    url: "/admin/get-customers",
                    type: "POST",
                    dataType: 'json',
                    delay: 250,
                    data: function(params) {
                        return {
                            _token: "{{ csrf_token() }}",
                            search: params.term,
                            page: params.page,
                        };
                    },
                    processResults: function(data, params) {
                        params.page = params.page || 1;
                        var results = data.data.map(function(item) {
                            var name = item.description != null ? item.name + ' (' + item
                                .description + ')' : item.name;
                            return {
                                id: item.id,
                                text: name,
                            };
                        });

                        return {
                            results: results,
                            pagination: {
                                more: (params.page * data.per_page) < data.total
                            }
                        };
                    },
                    cache: true
                },
                language: {
                    noResults: function() {
                        return `<div style="padding: 5px;">
                        <button type="button" class="btn btn-sm btn-primary mt-2 add-customer-btn">
                            ➕ Add New Customer
                        </button>
                    </div>`;
                    }
                },
                escapeMarkup: function(markup) {
                    return markup;
                }
            });
// Room select
            $('.room-slct').select2({
                placeholder: 'Select room',
                ajax: {
                    url: "/admin/get-rooms",
                    type: "POST",
                    dataType: 'json',
                    delay: 250,
                    data: function(params) {
                        return {
                            _token: "{{ csrf_token() }}",
                            search: params.term,
                            page: params.page,
                        };
                    },
                    processResults: function(data, params) {
                        params.page = params.page || 1;
                        var results = data.data.map(function(item) {
                            var name = item.description != null ? item.name + ' (' + item
                                .description + ')' : item.name;
                            return {
                                id: item.id,
                                text: name,
                            };
                        });

                        return {
                            results: results,
                            pagination: {
                                more: (params.page * data.per_page) < data.total
                            }
                        };
                    },
                    cache: true
                },
                language: {
                    noResults: function() {
                        return `<div style="padding: 5px; color: red;">
                       Room not found !
                        </div>`;
                    }
                },
                escapeMarkup: function(markup) {
                    return markup;
                }
            });
        $(document).on('change', '.room-slct', function(e) {
            e.preventDefault();
            let roomId = $(this).val();
            let rowId = $(this).closest('.rows').attr('id').match(/row_(\d+)/)[1];
            console.log(rowId);
            $.ajax({
                url: "/admin/get-room-price/" + roomId,
                type: "POST",
                data: {
                    _token: "{{ csrf_token() }}",
                    room_id: roomId,
                },
                success: function(response) {
                    $('#unit_price_' + rowId).val(response);
                }
            })
        })

            $(document).on('click', '.add-customer-btn', function(e) {
                e.preventDefault();

                $('#customerAddModal').modal('show');
            })
            $('#customerAddModal').on('shown.bs.modal', function() {
                $('#customerName').focus().select();
            });

            $('#customer-add-form').submit(function(e) {
                let validateMobile = $('#customerMobile').val();
                if (!validateMobile.match(/^[0-9]{10}$/)) {
                    Swal.fire({
                        icon: 'error',
                        title: 'Error',
                        text: 'Please enter valid mobile number',
                        showConfirmButton: true
                    });
                    return false;
                }
                e.preventDefault();
                var formData = new FormData(this);
                $.ajax({
                    url: "/admin/store-customer",
                    type: "POST",
                    data: formData,
                    contentType: false,
                    processData: false,
                    success: function(response) {
                        console.log(response.customer);
                        if (response.status === true) {
                            Swal.fire({
                                icon: 'success',
                                text: 'Customer saved successfully.'
                            });
                            let newCustomer = new Option(response.customer.name, response.customer.id, true, true);
                            $('#customer-select').append(newCustomer).trigger('change');
                            $('#customer-add-form')[0].reset();
                            $('#customerAddModal').modal('hide');
                        } else {
                            Swal.fire({
                                icon: 'error',
                                title: 'Error',
                                text: response.message || 'Something went wrong'
                            });
                        }
                    },
                    error: function(xhr) {
                        if (xhr.status === 422) {
                            let errors = xhr.responseJSON.errors;
                            let errorList = '';
                            $.each(errors, function(key, value) {
                                errorList += `${value[0]}<br>`;
                            });

                            Swal.fire({
                                icon: 'error',
                                title: 'Validation Error',
                                html: errorList
                            });
                        } else {
                            Swal.fire({
                                icon: 'error',
                                title: 'Error',
                                text: xhr.responseJSON.message || 'Something went wrong'
                            });
                        }
                    }
                });
            });
            $(document).on('change', '#customer-select', function(e) {
                e.preventDefault();
                fetchCustomer();
            });

            function fetchCustomer() {
                let customerId = $('#customer-select').val();

                if (customerId) {
                    $.ajax({
                        url: "/admin/get-selected-customer",
                        type: "POST",
                        data: {
                            customer_id: customerId,
                            _token: $('meta[name="csrf-token"]').attr('content')
                        },
                        success: function(response) {
                            if (response.status == true) {
                                console.log(response.customer);
                                $('#show-customer-name').html(response.customer.name || '');
                                $('#show-customer-mobile').html(response.customer.mobile || '');
                                $('#show-customer-address').html(response.customer.address || '');
                            } else {
                                $('#customer-select').val('').trigger('change')
                                Swal.fire({
                                    icon: 'error',
                                    title: 'Error',
                                    text: response.message || 'Something went wrong'
                                });
                            }
                        }
                    });
                }
            }
// Get Rooms
            // function fetchRooms() {
            //     let roomId = $('.room-select').val();

            //     if (roomId) {
            //         $.ajax({
            //             url: "/admin/get-select-rooms",
            //             type: "POST",
            //             data: {
            //                 room_id: roomId,
            //                 _token: $('meta[name="csrf-token"]').attr('content')
            //             },
            //             success: function(response) {
            //                 if (response.status == true) {
            //                     console.log(response.customer);
            //                     $('#show-customer-name').html(response.customer.name || '');
                              
            //                     // single proof image
            //                     $('#id_proof').empty();
            //                     if (response.id_proof != '' && response.id_proof != null) {
            //                         $('#id_proof').filepond({
            //                             credits: false,
            //                             allowMultiple: true,
            //                             name: 'id_proof',
            //                             files: [{
            //                                 source: response.id_proof,
            //                             }, ],
            //                         });
            //                     } else {
            //                         $('#id_proof').filepond({
            //                             credits: false,
            //                             allowMultiple: true,
            //                             name: 'id_proof',
            //                         });
            //                     }
            //                 } else {
            //                     $('#customer-select').val('').trigger('change')
            //                     Swal.fire({
            //                         icon: 'error',
            //                         title: 'Error',
            //                         text: response.message || 'Something went wrong'
            //                     });
            //                 }
            //             }
            //         });
            //     }

            // }

            // Room Booking AddRow
            $('#addRoomRowBtn').on('click', function() {
                var lastRow = $('#roomDataRow .rows').length;
                var rowCount = (lastRow === "" || lastRow === undefined) ? 1 : parseInt(lastRow) + 1;
                if (lastRow == "" || lastRow == undefined) {
                    rowCount = 1;
                } else {
                    rowCount = parseInt(lastRow) + parseInt(1);
                }
                let bookHtml = `<div class="row gx-3 mb-3 rows" id="row_${rowCount}">
                                <div class="col-md-3 col-sm-6">
                                    <label class="small mb-1" for="inputFirstName">Room</label>
                                    <select name="items[]" id="room-select_${rowCount}" class="form-control room-slct" required>
                                        <option value="">Select Room</option>
                                        
                                    </select>
                                </div>
                                <div class="col-md-2 col-sm-6">
                                    <label class="small mb-1" for="inputFirstName">Price</label>
                                    <input class="form-control" name="unit_price[]" type="number" id="unit_price_${rowCount}" placeholder="Enter Room Price" required>
                                </div>
                            <div class="col-md-2 col-sm-6">
                                <label class="small mb-1" for="inputFirstName">From Date</label>
                                <input class="form-control" name="from_date[]" type="date" id="from_date" value="{{ \Carbon\Carbon::now('Asia/Kolkata')->format('Y-m-d') }}" required>
                            </div>
                            <div class="col-md-2 col-sm-6">
                                <label class="small mb-1" for="inputFirstName">To Date</label>
                                <input class="form-control" name="to_date[]" type="date" value="{{ \Carbon\Carbon::now('Asia/Kolkata')->addDay()->format('Y-m-d') }}" id="to_date">
                            </div>
                            <div class="col-md-2 col-sm-5">
                                <label class="small mb-1" for="inputFirstName">No of persons</label>
                                <input class="form-control" name="no_of_person[]" placeholder="Enter No of persons" type="number" id="no_of_person">
                            </div>
                            <div class="col-md-1 col-sm-5">
                                <button type="button" class="btn btn-danger mt-4" onclick="removeRoomRow(${rowCount})">-</button>
                            </div>
                        </div>`;


                $('#roomDataRow').append(bookHtml);
                $('#room-select_' + rowCount).select2({
                placeholder: 'Select room',
                ajax: {
                    url: "/admin/get-rooms",
                    type: "POST",
                    dataType: 'json',
                    delay: 250,
                    data: function(params) {
                        return {
                            _token: "{{ csrf_token() }}",
                            search: params.term,
                            page: params.page,
                        };
                    },
                    processResults: function(data, params) {
                        params.page = params.page || 1;
                        var results = data.data.map(function(item) {
                            var name = item.description != null ? item.name + ' (' + item
                                .description + ')' : item.name;
                            return {
                                id: item.id,
                                text: name,
                            };
                        });

                        return {
                            results: results,
                            pagination: {
                                more: (params.page * data.per_page) < data.total
                            }
                        };
                    },
                    cache: true
                },
                language: {
                    noResults: function() {
                        return `<div style="padding: 5px; color: red;">
                       Room not found !
                        </div>`;
                    }
                },
                escapeMarkup: function(markup) {
                    return markup;
                }
            });
                
            });

        }); // end of document ready
        function removeRoomRow(rowCount) {
            if (rowCount > 1) {
                $('#row_' + rowCount).remove();
            } else {
                alert('At least one row is required');
            }
        }

        $('#roomBookingForm').on('submit', function(e) {
            e.preventDefault();
            let isValid = true;
            let errorMessage = '';
            $('#roomBookingForm').find()
            $('#roomBookingForm').find('input[required], select[required], textarea[required]').each(function() {
                if (!$(this).val()) {
                    isValid = false;
                    // Clean field name
                    let fieldName = $(this).attr('name').replace(/\[\]/g, '').replace(/_/g, ' ');
                    fieldName = fieldName.charAt(0).toUpperCase() + fieldName.slice(1);

                    errorMessage += fieldName + ' is required.\n';
                    $(this).addClass('is-invalid');
                } else {
                    $(this).removeClass('is-invalid');
                }
            });

            if (!isValid) {
                Swal.fire({
                    icon: 'warning',
                    title: 'Validation Error',
                    text: errorMessage
                });
                return;
            }

            $('.roomBookingSubmit').prop('disabled', true);
            var url = $(this).attr('action');
            var formData = new FormData(this);
            $.ajax({
                url: url,
                type: "POST",
                data: formData,
                contentType: false,
                processData: false,
                success: function(response) {
                    if (response.status == true) {
                        // window.location.href = "{{ route('room-booking.index') }}";
                        $('.roomBookingSubmit').prop('disabled', false);
                        Swal.fire({
                            icon: 'success',
                            text: response.message
                        }).then((result) => {
                            if (result.isConfirmed) {
                                location.reload();
                            }
                        });
                    } else {
                        $('.room-booking-btn').prop('disabled', false);
                        Swal.fire({
                            icon: 'error',
                            title: 'Error',
                            text: response.message || 'Something went wrong'
                        });
                    }
                },
                error: function(data) {
                    response = JSON.parse(data.responseText);
                    $('.room-booking-btn').prop('disabled', false);
                    Swal.fire({
                        html: response.message || 'Something went wrong',
                        icon: 'warning',
                        confirmButtonText: 'Ok'
                    });
                }
            });
        })
    // room booking update
            $('#roomBookingUpdateForm').on('submit', function(e) {
            e.preventDefault();
            let isValid = true;
            let errorMessage = '';
            $('#roomBookingUpdateForm').find()
            $('#roomBookingUpdateForm').find('input[required], select[required], textarea[required]').each(function() {
                if (!$(this).val()) {
                    isValid = false;
                    // Clean field name
                    let fieldName = $(this).attr('name').replace(/\[\]/g, '').replace(/_/g, ' ');
                    fieldName = fieldName.charAt(0).toUpperCase() + fieldName.slice(1);

                    errorMessage += fieldName + ' is required.\n';
                    $(this).addClass('is-invalid');
                } else {
                    $(this).removeClass('is-invalid');
                }
            });

            if (!isValid) {
                Swal.fire({
                    icon: 'warning',
                    title: 'Validation Error',
                    text: errorMessage
                });
                return;
            }

            $('.roomBookingSubmit').prop('disabled', true);
            var url = $(this).attr('action');
            var formData = new FormData(this);
            $.ajax({
                url: url,
                type: "POST",
                data: formData,
                contentType: false,
                processData: false,
                success: function(response) {
                    if (response.status == true) {
                        // window.location.href = "{{ route('room-booking.index') }}";
                        $('.roomBookingSubmit').prop('disabled', false);
                        Swal.fire({
                            icon: 'success',
                            text: response.message
                        }).then((result) => {
                            if (result.isConfirmed) {
                                location.reload();
                            }
                        });
                    } else {
                        $('.room-booking-btn').prop('disabled', false);
                        Swal.fire({
                            icon: 'error',
                            title: 'Error',
                            text: response.message || 'Something went wrong'
                        });
                    }
                },
                error: function(data) {
                    response = JSON.parse(data.responseText);
                    $('.room-booking-btn').prop('disabled', false);
                    Swal.fire({
                        html: response.message || 'Something went wrong',
                        icon: 'warning',
                        confirmButtonText: 'Ok'
                    });
                }
            });
        });
            // camera section

            // Register FilePond plugins
            FilePond.registerPlugin(
                FilePondPluginFileEncode,
                FilePondPluginFileValidateSize,
                FilePondPluginImageExifOrientation,
                FilePondPluginImagePreview
            );

            // Initialize FilePond instance after DOM is loaded
            window.addEventListener('DOMContentLoaded', () => {
        
            const pond = FilePond.create(document.querySelector('#id_proof'), {
                credits: false,
                name: 'id_proof[]',
                @if (isset($roomBooking) && $roomBooking->hasMedia('bookingProofs'))
                    files: [
                        @foreach ($roomBooking->getMedia('bookingProofs') as $image)
                            { source: "{{ $image->getUrl() }}" },
                        @endforeach
                    ],
                @endif
            });


                // DOM elements
                const cameraBtn = document.getElementById("camera-btn");
                const video = document.getElementById("camera-stream");
                const captureBtn = document.getElementById("capture-btn");
                const canvas = document.getElementById("snapshot");
                const closeBtn = document.getElementById("close-camera-btn");
                const cameraWrapper = document.getElementById("camera-wrapper");


                let currentStream = null;

                // Open camera
                cameraBtn.addEventListener("click", async () => {
                    try {
                        const stream = await navigator.mediaDevices.getUserMedia({ video: true });
                        currentStream = stream;
                        video.srcObject = stream;

                        cameraWrapper.style.display = "flex";
                    } catch (err) {
                        alert("Camera access denied or not available.");
                    }
                });

                // Capture image, show in preview, and upload to FilePond
                captureBtn.addEventListener("click", () => {
                const context = canvas.getContext("2d");
                canvas.width = video.videoWidth;
                canvas.height = video.videoHeight;
                context.drawImage(video, 0, 0, canvas.width, canvas.height);

                const dataURL = canvas.toDataURL("image/png");


                // Convert to File and add to FilePond
                const file = dataURLtoFile(dataURL, 'captured-image.png');
                pond.addFile(file).catch(error => {
                    console.error("Error adding file to FilePond:", error);
                });
                // $('#id_proof').addFile(file).catch(error => {
                //     console.error("Error adding file to FilePond:", error);
                // });
                });

                closeBtn.addEventListener("click", () => {
                    if (currentStream) {
                        currentStream.getTracks().forEach(track => track.stop());
                        currentStream = null;
                    }

                    cameraWrapper.style.display = "none";
                });

                // Convert base64 to File
                function dataURLtoFile(dataurl, filename) {
                const arr = dataurl.split(',');
                const mime = arr[0].match(/:(.*?);/)[1];
                const bstr = atob(arr[1]);
                let n = bstr.length;
                const u8arr = new Uint8Array(n);
                while (n--) {
                    u8arr[n] = bstr.charCodeAt(n);
                }
                return new File([u8arr], filename, { type: mime });
                }
            });
    </script>
@endsection