@extends('admin.layouts.masterlayout')

@section('title', "Booking Management")
@section('head_title', "Booking Management")

@section('content')
<div class="dashboard-body-content">
    <div class="manage-offers-flex booking-mgt-container">
        <div class="admin-tab-container">
            <ul class="nav nav-pills">
                <li class="nav-item">
                    <a class="nav-link jp_link" data-bs-toggle="pill" href="#booking-requested" data-tab="requested">Requested</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link jp_link" data-bs-toggle="pill" href="#booking-countered" data-tab="countered">Countered</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link jp_link" data-bs-toggle="pill" href="#booking-confirm" data-tab="confirm">Confirm</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link jp_link" data-bs-toggle="pill" href="#booking-inprogress" data-tab="inprogress">In-Progress</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link jp_link" data-bs-toggle="pill" href="#booking-noshow" data-tab="noshow">No-Show</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link jp_link" data-bs-toggle="pill" href="#booking-completed" data-tab="completed">Completed</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link jp_link" data-bs-toggle="pill" href="#booking-cancelled" data-tab="cancelled">Cancelled</a>
                </li>
            </ul>
        </div>
        <div class="d-flex gap-3 align-items-center manage-search-container">
            <div class="position-relative w-100">
                <input type="search" class="form-control search_text" placeholder="Search here">
                <div class="search-icon">
                    <img src="{{ asset('assets/img/dashboard/search-icon.png') }}" alt="">
                </div>
            </div>
            <!-- <a href="#" id="dynamicButton" class="ct-btn text-center add-ct-btn" data-booking-route="">Add Booking</a> -->
        </div>
    </div>

    <div class="tab-content">
        <!-- Requested Tab -->
        <div class="tab-pane jp" id="booking-requested">
            <div class="ct-dashboard-table-container">
                <div class="card p-2">
                    <div class="table-responsive">
                        <table class="table mb-0" id="requestedTable">
                            <thead>
                                <tr>
                                    <th>#</th>
                                    <th>Client</th>
                                    <th>Shop</th>
                                    <th>Artist</th>
                                    <th>Description</th>
                                    <th>Tattoo Size</th>
                                    <th>Placement</th>
                                    <th>Created At</th>
                                    <th>Action</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        <!-- Countered Tab -->
        <div class="tab-pane jp" id="booking-countered">
            <div class="ct-dashboard-table-container">
                <div class="card p-2">
                    <div class="table-responsive">
                        <table class="table mb-0" id="counteredTable">
                            <thead>
                                <tr>
                                    <th>#</th>
                                    <th>Client</th>
                                    <th>Shop Name</th>
                                    <th>Counter Price</th>
                                    <th>Description</th>
                                    <th>Status</th>
                                    <th>Created At</th>
                                    <th>Action</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        <!-- Confirm Tab -->
        <div class="tab-pane jp" id="booking-confirm">
            <div class="ct-dashboard-table-container">
                <div class="card p-2">
                    <div class="table-responsive">
                        <table class="table mb-0" id="confirmTable">
                            <thead>
                                <tr>
                                    <th>#</th>
                                    <th>Client</th>
                                    <th>Shop Name</th>
                                    <th>Counter Price</th>
                                    <th>Description</th>
                                    <th>Created At</th>
                                    <th>Action</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        <!-- In-Progress Tab -->
        <div class="tab-pane jp" id="booking-inprogress">
            <div class="ct-dashboard-table-container">
                <div class="card p-2">
                    <div class="table-responsive">
                        <table class="table mb-0" id="inprogressTable">
                            <thead>
                                <tr>
                                    <th>#</th>
                                    <th>Client</th>
                                    <th>Shop Name</th>
                                    <th>Requested Date</th>
                                    <th>Description</th>
                                    <th>Created At</th>
                                    <th>Action</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        <!-- No-Show Tab -->
        <div class="tab-pane jp" id="booking-noshow">
            <div class="ct-dashboard-table-container">
                <div class="card p-2">
                    <div class="table-responsive">
                        <table class="table mb-0" id="noshowTable">
                            <thead>
                                <tr>
                                    <th>#</th>
                                    <th>Client</th>
                                    <th>Shop Name</th>
                                    <th>Counter Price</th>
                                    <th>Description</th>
                                    <th>Created At</th>
                                    <th>Action</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        <!-- Completed Tab -->
        <div class="tab-pane jp" id="booking-completed">
            <div class="ct-dashboard-table-container">
                <div class="card p-2">
                    <div class="table-responsive">
                        <table class="table mb-0" id="completedTable">
                            <thead>
                                <tr>
                                    <th>#</th>
                                    <th>Client</th>
                                    <th>Shop Name</th>
                                    <th>Counter Price</th>
                                    <th>Description</th>
                                    <th>Created At</th>
                                    <th>Action</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        <div class="tab-pane jp" id="booking-cancelled">
            <div class="ct-dashboard-table-container">
                <div class="card p-2">
                    <div class="table-responsive">
                        <table class="table mb-0" id="cancelledTable">
                            <thead>
                                <tr>
                                    <th>#</th>
                                    <th>Client</th>
                                    <th>Shop Name</th>
                                    <th>Counter Price</th>
                                    <th>Description</th>
                                    <th>Created At</th>
                                    <th>Action</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('script')
<script src="{{ asset('assets/js/dataTables.js') }}"></script>
<script>
    $(document).ready(function() {
        // === REQUESTED DATATABLE ===
        const requestedTable = $('#requestedTable').DataTable({
            dom: '<<"table-responsive"t><"pagination-container"<i><p>>>',
            processing: true,
            serverSide: true,
            ajax: "{{route('admin.getBookingRequestedData')}}",
            order: [],
            columns: [{
                    data: 'DT_RowIndex',
                    name: 'DT_RowIndex',
                    orderable: false,
                    searchable: false
                },
                {
                    data: 'client',
                    name: 'client',
                },
                {
                    data: 'shop',
                    name: 'shop',
                },
                {
                    data: 'artist',
                    name: 'artist',
                },
                {
                    data: 'tattoo_style',
                    name: 'tattoo_style',
                },
                {
                    data: 'tattoo_size',
                    name: 'tattoo_size',
                },
                {
                    data: 'placement',
                    name: 'placement',
                },
                {
                    data: 'requested_date',
                    name: 'requested_date',
                },
                {
                    data: 'action',
                    name: 'action',
                    orderable: false,
                    searchable: false
                }
            ],
        });

        // === COUNTERED DATATABLE ===
        const counteredTable = $('#counteredTable').DataTable({
            dom: '<<"table-responsive"t><"pagination-container"<i><p>>>',
            processing: true,
            serverSide: true,
            ajax: "{{ route('admin.getBookingCounteredData') }}",
            order: [],
            columns: [{
                    data: 'DT_RowIndex',
                    name: 'DT_RowIndex',
                    orderable: false,
                    searchable: false
                },
                {
                    data: 'client',
                    name: 'client',
                },
                {
                    data: 'shop_name',
                    name: 'shop_name',
                },
                {
                    data: 'counter_price',
                    name: 'counter_price',
                },
                {
                    data: 'tattoo_style',
                    name: 'tattoo_style',
                },
                {
                    data: 'status',
                    name: 'status',
                    searchable: false
                },
                {
                    data: 'requested_date',
                    name: 'requested_date',
                },
                {
                    data: 'action',
                    name: 'action',
                    orderable: false,
                    searchable: false
                }
            ],
        });

        const confirmTable = $('#confirmTable').DataTable({
            dom: '<<"table-responsive"t><"pagination-container"<i><p>>>',
            processing: true,
            serverSide: true,
            ajax: "{{ route('admin.getBookingConfirmData') }}",
            order: [],
            columns: [{
                    data: 'DT_RowIndex',
                    name: 'DT_RowIndex',
                    orderable: false,
                    searchable: false
                },
                {
                    data: 'client',
                    name: 'client',
                },
                {
                    data: 'shop_name',
                    name: 'shop_name',
                },
                {
                    data: 'counter_price',
                    name: 'counter_price',
                },
                {
                    data: 'tattoo_style',
                    name: 'tattoo_style',
                },
                {
                    data: 'requested_date',
                    name: 'requested_date',
                },
                {
                    data: 'action',
                    name: 'action',
                    orderable: false,
                    searchable: false
                }
            ],
        });

        // === IN-PROGRESS DATATABLE ===
        const inprogressTable = $('#inprogressTable').DataTable({
            dom: '<<"table-responsive"t><"pagination-container"<i><p>>>',
            processing: true,
            serverSide: true,
            ajax: "{{ route('admin.getBooking_inprogressData') }}",
            order: [],
            columns: [{
                    data: 'DT_RowIndex',
                    name: 'DT_RowIndex',
                    orderable: false,
                    searchable: false
                },
                {
                    data: 'client',
                    name: 'customer_detail.name',
                },
                {
                    data: 'shop_name',
                    name: 'shop_detail.shop_name',
                },
                {
                    data: 'counter_price',
                    name: 'counter_price',
                },
                {
                    data: 'tattoo_style',
                    name: 'tattoo_style',
                },
                {
                    data: 'requested_date',
                    name: 'requested_date',
                },
                {
                    data: 'action',
                    name: 'action',
                    orderable: false,
                    searchable: false
                }
            ],

        });

        // === NO-SHOW DATATABLE ===
        const noshowTable = $('#noshowTable').DataTable({
            dom: '<<"table-responsive"t><"pagination-container"<i><p>>>',
            processing: true,
            serverSide: true,
            ajax: "{{route('admin.getNoShowBookings')}}",
            order: [],
            columns: [{
                    data: 'DT_RowIndex',
                    name: 'DT_RowIndex',
                    orderable: false,
                    searchable: false
                },
                {
                    data: 'client',
                    name: 'client'
                },
                {
                    data: 'shop_name',
                    name: 'shop_name'
                },
                {
                    data: 'counter_price',
                    name: 'counter_price'
                },
                {
                    data: 'tattoo_style',
                    name: 'tattoo_style'
                },
                {
                    data: 'requested_date',
                    name: 'requested_date'
                },
                {
                    data: 'action',
                    name: 'action',
                    orderable: false,
                    searchable: false
                }
            ]
        });

        // === COMPLETED DATATABLE ===
        const completedTable = $('#completedTable').DataTable({
            dom: '<<"table-responsive"t><"pagination-container"<i><p>>>',
            processing: true,
            serverSide: true,
            ajax: "{{route('admin.getCompletedBookings')}}",
            order: [],
            columns: [{
                    data: 'DT_RowIndex',
                    name: 'DT_RowIndex',
                    orderable: false,
                    searchable: false
                },
                {
                    data: 'client',
                    name: 'client'
                },
                {
                    data: 'shop_name',
                    name: 'shop_name'
                },
                {
                    data: 'counter_price',
                    name: 'counter_price'
                },
                {
                    data: 'tattoo_style',
                    name: 'tattoo_style'
                },
                {
                    data: 'requested_date',
                    name: 'requested_date'
                },
                {
                    data: 'action',
                    name: 'action',
                    orderable: false,
                    searchable: false
                }
            ]
        });

        // === Cancelled DATATABLE ===
        const cancelledTable = $('#cancelledTable').DataTable({
            dom: '<<"table-responsive"t><"pagination-container"<i><p>>>',
            processing: true,
            serverSide: true,
            ajax: "{{route('admin.getCancelledBookings')}}",
            order: [],
            columns: [{
                    data: 'DT_RowIndex',
                    name: 'DT_RowIndex',
                    orderable: false,
                    searchable: false
                },
                {
                    data: 'client',
                    name: 'client'
                },
                {
                    data: 'shop_name',
                    name: 'shop_name'
                },
                {
                    data: 'counter_price',
                    name: 'counter_price'
                },
                {
                    data: 'tattoo_style',
                    name: 'tattoo_style'
                },
                {
                    data: 'requested_date',
                    name: 'requested_date'
                },
                {
                    data: 'action',
                    name: 'action',
                    orderable: false,
                    searchable: false
                }
            ]
        });

        // === SHARED SEARCH LOGIC ===
        $('.manage-search-container input[type="search"]').on('input', function() {
            const activeTab = $('.tab-pane.jp.active').attr('id');
            const searchText = $(this).val();

            if (activeTab === 'booking-requested') {
                requestedTable.search(searchText).draw();
            } else if (activeTab === 'booking-countered') {
                counteredTable.search(searchText).draw();
            } else if (activeTab === 'booking-confirm') {
                confirmTable.search(searchText).draw();
            } else if (activeTab === 'booking-inprogress') {
                inprogressTable.search(searchText).draw();
            } else if (activeTab === 'booking-noshow') {
                noshowTable.search(searchText).draw();
            } else if (activeTab === 'booking-completed') {
                completedTable.search(searchText).draw();
            } else if (activeTab === 'cancelled') {
                cancelledTable.search(searchText).draw();
            }
        });

        var tab = getUrlParameter('tab') || 'requested';

        // Activate correct tab
        $('.jp_link').removeClass('active');
        $('.jp').removeClass('active show');
        $('.jp_link[data-tab="' + tab + '"]').addClass('active');
        $('#booking-' + tab).addClass('active show');

        // Set initial button state
        $('#dynamicButton').text('Add Booking');
        $('#dynamicButton').attr('href', $('#dynamicButton').data('booking-route'));

        $('.jp_link').on('click', function(e) {
            var selectedTab = $(this).data('tab');
            var newUrl = window.location.protocol + "//" + window.location.host + window.location.pathname + '?tab=' + selectedTab;
            window.history.pushState({
                path: newUrl
            }, '', newUrl);

            $('.jp_link').removeClass('active');
            $(this).addClass('active');
            $('.jp').removeClass('active show');
            $('#booking-' + selectedTab).addClass('active show');
        });
    });
</script>
@endsection