@extends('Admin.layout')
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css">
@section('content')
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <style>
        .btn-label-viewall {
            background: rgba(19, 43, 82, 0.12);
            color: #132B52;
            border: 1px solid rgba(19, 43, 82, 0.2);
        }

        .btn-label-viewall:hover {
            background: #132B52;
            color: #fff;
            border-color: #132B52;
        }
    </style>

    <div class="row align-items-center justify-content-between mb-3 mt-3 m-2">
        <div class="col-auto">
            <h5>Active Bookings</h5>
            <small class="text-muted">Pending bookings and today's bookings</small>
        </div>
        <div class="col-auto d-flex gap-2">
            <a href="{{ route('booking_history') }}" class="btn btn-label-viewall">
                <i class="ti tabler-history me-1"></i> View History
            </a>
            <a href="{{ route('add_booking') }}"><button class="btn btn-primary">Add Booking</button></a>
        </div>
    </div>

    <div class="card p-0 m-2">
        <div class="row mb-3 align-items-center p-3 g-2">
            <div class="col-1">
                <select id="pageLength" class="form-select">
                    <option value="10">10</option>
                    <option value="25">25</option>
                    <option value="50">50</option>
                    <option value="100">100</option>
                </select>
            </div>

            <div class="col-md-2 ">
                <input type="date" id="dateFilter" class="form-control">
            </div>

            <div class="col-md-3 ms-auto">
                <input type="text" id="customSearch" class="form-control" placeholder="Search">
            </div>
        </div>

        <div class="table-responsive pt-0 pb-2">
            <div class="row card-header flex-column flex-md-row border-bottom mx-0 p-0">
                <div class="justify-content-between dt-layout-table">
                    <div class="justify-content-between align-items-center dt-layout-full table-responsive">
                        <table class="table" id="bookingTable">
                            <thead>
                                <tr>
                                    <th>S.No</th>
                                    <th>Date</th>
                                    <th class="text-nowrap">Booking ID</th>
                                    <th>Name</th>
                                    <th>Mobile</th>
                                    <th class="text-nowrap">Start Time</th>
                                    <th class="text-nowrap">End Time</th>
                                    <th class="text-nowrap">Total Amount</th>
                                    <th>Advance</th>
                                    <th>Balance</th>
                                    <th class="text-nowrap">Payment Method</th>
                                    <th>Status</th>
                                    <th>Action</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        {{-- Cancel Booking Modal --}}
        <div class="modal fade" id="cancelBookingModal" tabindex="-1" data-bs-backdrop="static" data-bs-keyboard="false">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content">
                    <form action="{{ route('booking_cancel') }}" method="POST" id="cancelBookingForm">
                        @csrf
                        <input type="hidden" name="id" id="cancel_booking_id" value="{{ old('id') }}">
                        <div class="modal-header">
                            <h5 class="modal-title">Cancel Booking</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                        </div>

                        <div class="modal-body">
                            <div class="row g-3">
                                <div class="col-12">
                                    <label for="cancel_reason" class="form-label">
                                        Cancellation Reason <span class="text-danger">*</span>
                                    </label>
                                    <textarea name="cancel_reason" id="cancel_reason"
                                        class="form-control @error('cancel_reason') is-invalid @enderror" rows="4"
                                        placeholder="Enter cancellation reason...">{{ old('cancel_reason') }}</textarea>
                                    @error('cancel_reason') <small class="text-danger">{{ $message }}</small> @enderror
                                </div>

                                <div class="col-12">
                                    <label for="refund_credited" class="form-label">Refund Credited</label>
                                    <select name="refund_credited" id="refund_credited"
                                        class="form-select @error('refund_credited') is-invalid @enderror">

                                        <option value="">-- Select --</option>
                                        <option value="1" {{ old('refund_credited') === '1' ? 'selected' : '' }}>Yes</option>
                                        <option value="0" {{ old('refund_credited') === '0' ? 'selected' : '' }}>No</option>
                                    </select>

                                    @error('refund_credited')
                                        <small class="text-danger">{{ $message }}</small>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <div class="modal-footer">
                            <button type="button" class="btn btn-light" data-bs-dismiss="modal">Close</button>
                            <button type="submit" class="btn btn-danger" id="confirmCancel">Cancel Booking</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        {{-- Edit Balance Modal --}}
        <div class="modal fade" id="editBalanceModal" tabindex="-1" data-bs-backdrop="static" data-bs-keyboard="false">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content">
                    <form action="{{ route('booking_update_balance') }}" method="POST" id="editBalanceForm">
                        @csrf
                        <input type="hidden" name="id" id="edit_booking_id" value="{{ old('id') }}">
                        <div class="modal-header">
                            <h5 class="modal-title">Update Balance Amount</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                        </div>

                        <div class="modal-body">
                            <div class="mb-3">
                                <label class="form-label">Booking ID</label>
                                <input type="text" id="display_booking_id" class="form-control"
                                    value="{{ session('booking_number') }}" readonly>
                            </div>

                            <div class="mb-3">
                                <label class="form-label">Current Balance</label>
                                <input type="text" id="current_balance_display" class="form-control"
                                    value="{{ session('current_balance') ? '₹' . session('current_balance') : '' }}"
                                    readonly>
                            </div>

                            <div class="mb-3">
                                <label class="form-label">
                                    Amount Received Now <span class="text-danger">*</span>
                                </label>
                                <input type="number" name="received_amount" id="received_amount"
                                    value="{{ old('received_amount') }}"
                                    class="form-control @error('received_amount') is-invalid @enderror"
                                    placeholder="Enter amount received" min="0.01" step="0.01">
                                @error('received_amount') <small class="text-danger">{{ $message }}</small> @enderror
                                <small class="text-muted">Entering the full balance amount will mark this booking as fully
                                    paid.</small>
                            </div>
                        </div>

                        <div class="modal-footer">
                            <button type="button" class="btn btn-light" data-bs-dismiss="modal">Cancel</button>
                            <button type="submit" class="btn btn-primary" id="confirmBalanceUpdate">Submit</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
        <script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
        <script>
            $(document).ready(function () {
                const table = $('#bookingTable').DataTable({
                    processing: true,
                    serverSide: true,
                    ajax: {
                        url: "{{ route('booking_data') }}",
                        data: function (d) {
                            d.view = 'active';
                            d.date = $('#dateFilter').val();

                        }
                    },
                    columns: [
                        { data: 'DT_RowIndex', orderable: false, searchable: false, },
                        { data: 'date', orderable: false, searchable: false, className: 'text-nowrap' },
                        { data: 'booking_id', searchable: true },
                        { data: 'name', searchable: true },
                        { data: 'mobile', searchable: true },
                        { data: 'start_time', orderable: false, searchable: false },
                        { data: 'end_time', orderable: false, searchable: false, className: 'text-nowrap' },
                        { data: 'amount', orderable: false, searchable: false },
                        { data: 'advance_amount', orderable: false, searchable: false },
                        { data: 'balance_amount', orderable: false, searchable: false },
                        { data: 'payment_method', orderable: false, searchable: false },
                        { data: 'status', orderable: false, searchable: false },
                        { data: 'action', orderable: false, searchable: false, className: 'text-center' },
                    ],
                    dom: 'rt<"d-flex justify-content-between align-items-center p-3"ip>',
                });

                $('#customSearch').on('keyup', function () {
                    table.search(this.value).draw();
                });
                $('#dateFilter').on('change', function () {
                    table.ajax.reload();
                });

                $('#pageLength').on('change', function () {
                    table.page.len(this.value).draw();
                });

                $(document).on('click', '.cancelBtn', function () {
                    $('#cancel_booking_id').val($(this).data('id'));
                });

                $(document).on('click', '.editBalanceBtn', function () {
                    $('#edit_booking_id').val($(this).data('id'));
                    $('#display_booking_id').val($(this).data('booking'));
                    $('#current_balance_display').val('₹' + $(this).data('balance'));
                });
            });
        </script>

        <script>
            document.getElementById('confirmCancel').addEventListener('click', function () {
                let btn = this;
                btn.disabled = true;
                btn.innerText = 'Processing...';
                document.getElementById('cancelBookingForm').submit();
            });

            document.getElementById('confirmBalanceUpdate').addEventListener('click', function () {
                let btn = this;
                btn.disabled = true;
                btn.innerText = 'Processing...';
                document.getElementById('editBalanceForm').submit();
            });
        </script>

        @if(session('open_cancel_modal'))
            <script>
                document.addEventListener('DOMContentLoaded', function () {
                    var cancelModal = new bootstrap.Modal(document.getElementById('cancelBookingModal'));
                    cancelModal.show();
                });
            </script>
        @endif

        @if(session('open_edit_modal'))
            <script>
                document.addEventListener('DOMContentLoaded', function () {
                    var editModal = new bootstrap.Modal(document.getElementById('editBalanceModal'));
                    editModal.show();
                });
            </script>
        @endif

@endsection