@extends('layouts.master')
@section('body_id', 'vendor_booking_stream_page')
@section('content')

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css">

    <meta name="csrf-token" content="{{ csrf_token() }}">

    <style>
        .premium-dashboard-core {
            background: #ffffff;
            border-radius: 16px;
            padding: 24px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
            margin-bottom: 40px;
        }
        
        .stream-metric-card {
            background: #f8fafc;
            border: 1px solid #e2e8f0;
            border-radius: 12px;
            padding: 20px;
            display: flex;
            align-items: center;
            gap: 16px;
            transition: all 0.3s ease;
            margin-bottom: 15px;
        }
        .stream-metric-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05);
        }
        .metric-icon-box {
            width: 48px;
            height: 48px;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
            float: left;
            margin-right: 15px;
        }
        .bg-pill-blue { background: #e0f2fe; color: #0369a1; }
        .bg-pill-orange { background: #ffedd5; color: #c2410c; }
        .bg-pill-green { background: #dcfce7; color: #15803d; }
        .bg-pill-purple { background: #f3e8ff; color: #6b21a8; }
        
        .metric-info h3 {
            font-size: 22px;
            font-weight: 700;
            margin: 0;
            color: #1e293b;
        }
        .metric-info p {
            font-size: 13px;
            color: #64748b;
            margin: 0;
        }

        .stream-filter-nav {
            border-bottom: 2px solid #f1f5f9 !important;
            margin-bottom: 24px;
            display: flex;
            flex-wrap: nowrap;
            overflow-x: auto;
        }
        .stream-filter-nav li a {
            border: none !important;
            color: #64748b !important;
            font-weight: 600;
            padding: 12px 20px !important;
            font-size: 14px;
            background: transparent !important;
        }
        .stream-filter-nav li.active a {
            color: #dc2626 !important;
            border-bottom: 2px solid #dc2626 !important;
            border-radius: 0;
        }

        .status-stream-pill {
            padding: 6px 12px;
            border-radius: 50px;
            font-size: 12px;
            font-weight: 600;
            display: inline-block;
        }
        .stream-pill-pending { background: #fef9c3; color: #713f12; }
        .stream-pill-confirmed { background: #dbeafe; color: #1e40af; }
        .stream-pill-checkedin { background: #dcfce7; color: #166534; }
        .stream-pill-checkedout { background: #e2e8f0; color: #475569; }

        .btn-stream-action {
            width: 34px;
            height: 34px;
            border-radius: 8px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border: 1px solid #e2e8f0;
            background: #ffffff;
            color: #475569;
        }
        .text-success-custom { color: #16a34a; }
        .text-warning-custom { color: #ca8a04; }
        .text-danger-custom { color: #dc2626; }
    </style>

    <section class="vendor_dashboard_main_wrapper my-4">
        <div class="container">
            <div class="row">
                
                @include('frontend.vendor.partials.sidebar')

                <div class="col-lg-9 col-md-8 col-sm-12 col-xs-12">
                    <div class="premium-dashboard-core">
                        
                        <div class="elite-dashboard-header mb-4 pb-3" style="border-bottom: 1px solid #e2e8f0;">
                            <h2 class="main-welcome-heading fw-bold" style="color: #1e293b; font-size: 24px; margin-bottom: 4px; font-family: 'Playfair Display', serif;">Live Booking Stream</h2>
                            <p class="sub-welcome-caption text-muted mb-0">Monitor pricing configurations, active occupancies, and manage pipeline filter statuses.</p>
                        </div>

                        <div class="row mb-4 clearfix">
                            <div class="col-md-3 col-sm-6">
                                <div class="stream-metric-card clearfix">
                                    <div class="metric-icon-box bg-pill-blue"><i class="fa fa-shopping-bag"></i></div>
                                    <div class="metric-info">
                                        <h3>{{ $counters['new'] ?? $bookings->where('status', 'pending')->count() }}</h3>
                                        <p>New Requests</p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-3 col-sm-6">
                                <div class="stream-metric-card clearfix">
                                    <div class="metric-icon-box bg-pill-orange"><i class="fa fa-sign-in"></i></div>
                                    <div class="metric-info">
                                        <h3>{{ $counters['active'] ?? $bookings->where('status', 'checked_in')->count() }}</h3>
                                        <p>Active Stay</p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-3 col-sm-6">
                                <div class="stream-metric-card clearfix">
                                    <div class="metric-icon-box bg-pill-green"><i class="fa fa-check-circle"></i></div>
                                    <div class="metric-info">
                                        <h3>{{ $counters['completed'] ?? $bookings->where('status', 'checked_out')->count() }}</h3>
                                        <p>Completed</p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-3 col-sm-6">
                                <div class="stream-metric-card clearfix">
                                    <div class="metric-icon-box bg-pill-purple"><i class="fa fa-calendar"></i></div>
                                    <div class="metric-info">
                                        <h3>{{ $counters['upcoming'] ?? $bookings->where('status', 'confirmed')->count() }}</h3>
                                        <p>Upcoming</p>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <ul class="nav nav-tabs stream-filter-nav" id="bookingStreamTab">
                            <li class="active"><a data-toggle="tab" href="#tab-all">All Bookings ({{ $bookings->count() }})</a></li>
                            <li><a data-toggle="tab" href="#tab-pending">Pending Approval ({{ $bookings->where('status', 'pending')->count() }})</a></li>
                            <li><a data-toggle="tab" href="#tab-confirmed">Upcoming ({{ $bookings->where('status', 'confirmed')->count() }})</a></li>
                            <li><a data-toggle="tab" href="#tab-checkedin">Active Stay ({{ $bookings->where('status', 'checked_in')->count() }})</a></li>
                            <li><a data-toggle="tab" href="#tab-completed">Completed ({{ $bookings->where('status', 'checked_out')->count() }})</a></li>
                        </ul>

                        <div class="tab-content" id="bookingStreamTabContent">
                            <div class="tab-pane fade in active" id="tab-all">
                                @include('frontend.vendor.booking.partials.stream_table', ['filteredBookings' => $bookings])
                            </div>
                            <div class="tab-pane fade" id="tab-pending">
                                @include('frontend.vendor.booking.partials.stream_table', ['filteredBookings' => $bookings->where('status', 'pending')])
                            </div>
                            <div class="tab-pane fade" id="tab-confirmed">
                                @include('frontend.vendor.booking.partials.stream_table', ['filteredBookings' => $bookings->where('status', 'confirmed')])
                            </div>
                            <div class="tab-pane fade" id="tab-checkedin">
                                @include('frontend.vendor.booking.partials.stream_table', ['filteredBookings' => $bookings->where('status', 'checked_in')])
                            </div>
                            <div class="tab-pane fade" id="tab-completed">
                                @include('frontend.vendor.booking.partials.stream_table', ['filteredBookings' => $bookings->where('status', 'checked_out')])
                            </div>
                        </div> 
                        
                    </div>
                </div>

            </div>
        </div>
    </section>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

    <script>
    jQuery.noConflict();
    (function($) {
        $(document).ready(function() {
            $.ajaxSetup({
                headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') }
            });

            function bootNativeTableEngine(wrapper) {
                var rowsPerPage = 10;
                var currentPage = 1;
                var searchInput = wrapper.find('.native-table-search-trigger')[0];
                var allRows = wrapper.find('.booking-data-stream-row').get();
                var activeRows = [...allRows];

                function renderEngineCycle() {
                    var totalEntries = activeRows.length;
                    var totalPages = Math.ceil(totalEntries / rowsPerPage) || 1;
                    if (currentPage > totalPages) currentPage = totalPages;
                    
                    var startIdx = (currentPage - 1) * rowsPerPage;
                    var endIdx = startIdx + rowsPerPage;
                    
                    $(allRows).hide();
                    var visibleChunk = activeRows.slice(startIdx, endIdx);
                    $(visibleChunk).show();
                    
                    var displayStart = totalEntries === 0 ? 0 : startIdx + 1;
                    var displayEnd = endIdx > totalEntries ? totalEntries : endIdx;
                    wrapper.find('.target-pagination-info-label').text(`Showing ${displayStart} to ${displayEnd} of ${totalEntries} indexed logs`);
                    
                    renderControlButtons(totalPages);
                }

                function renderControlButtons(totalPages) {
                    var btnContainer = wrapper.find('.target-pagination-buttons-row');
                    btnContainer.empty();
                    if (totalPages <= 1) return;

                    var prevBtn = $('<button class="btn-luxury-page"><i class="fa fa-angle-left"></i></button>');
                    prevBtn.prop('disabled', currentPage === 1);
                    prevBtn.on('click', function() { currentPage--; renderEngineCycle(); });
                    btnContainer.append(prevBtn);

                    for (var i = 1; i <= totalPages; i++) {
                        (function(pageIdx) {
                            var pageBtn = $(`<button class="btn-luxury-page">${pageIdx}</button>`);
                            if (pageIdx === currentPage) pageBtn.addClass('active');
                            pageBtn.on('click', function() { currentPage = pageIdx; renderEngineCycle(); });
                            btnContainer.append(pageBtn);
                        })(i);
                    }

                    var nextBtn = $('<button class="btn-luxury-page"><i class="fa fa-angle-right"></i></button>');
                    nextBtn.prop('disabled', currentPage === totalPages);
                    nextBtn.on('click', function() { currentPage++; renderEngineCycle(); });
                    btnContainer.append(nextBtn);
                }

                if (searchInput) {
                    $(searchInput).on('input', function() {
                        var query = $(this).val().toLowerCase().trim();
                        activeRows = allRows.filter(function(row) {
                            return $(row).text().toLowerCase().indexOf(query) > -1;
                        });
                        currentPage = 1;
                        renderEngineCycle();
                    });
                }
                renderEngineCycle();
            }

            $('.elite-table-card-wrapper').each(function() {
                bootNativeTableEngine($(this));
            });

            $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
                var targetPanelId = $(e.target).attr('href');
                var targetWrapper = $(targetPanelId).find('.elite-table-card-wrapper');
                if (targetWrapper.length > 0) {
                    bootNativeTableEngine(targetWrapper);
                }
            });

            $(document).on('click', '.trigger-stream-accept', function(e) {
                e.preventDefault();
                let rowId = $(this).attr('data-id');
                Swal.fire({
                    title: 'Confirm Booking Request?',
                    text: "Accept reservation and occupy property room inventory?",
                    icon: 'question',
                    showCancelButton: true,
                    confirmButtonColor: '#16a34a',
                    cancelButtonColor: '#64748b',
                    confirmButtonText: 'Yes, Accept'
                }).then((result) => {
                    if (result.isConfirmed) { dispatchStreamPOST('vendor/booking-stream/accept/' + rowId); }
                });
            });

            $(document).on('click', '.trigger-stream-checkin', function(e) {
                e.preventDefault();
                let rowId = $(this).attr('data-id');
                Swal.fire({
                    title: 'Process Customer Check-In?',
                    text: "Confirm that the guest has arrived at the property and activate stay status.",
                    icon: 'question',
                    showCancelButton: true,
                    confirmButtonColor: '#0ea5e9',
                    cancelButtonColor: '#64748b',
                    confirmButtonText: 'Yes, Check-In Guest'
                }).then((result) => {
                    if (result.isConfirmed) { dispatchStreamPOST('vendor/booking-stream/checkin/' + rowId); }
                });
            });

            $(document).on('click', '.trigger-stream-checkout', function(e) {
                e.preventDefault();
                let rowId = $(this).attr('data-id');
                Swal.fire({
                    title: 'Process Check-Out Operations?',
                    text: "Verify billing balances before clearing inventory logs.",
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#ca8a04',
                    cancelButtonColor: '#64748b',
                    confirmButtonText: 'Confirm Check-Out'
                }).then((result) => {
                    if (result.isConfirmed) { dispatchStreamPOST('vendor/booking-stream/checkout/' + rowId); }
                });
            });

            $(document).on('click', '.trigger-stream-cancel', function(e) {
                e.preventDefault();
                let rowId = $(this).attr('data-id');
                Swal.fire({
                    title: 'Cancel Booking Request?',
                    text: "Reject reservation transaction from your property channel node?",
                    icon: 'error',
                    showCancelButton: true,
                    confirmButtonColor: '#dc2626',
                    cancelButtonColor: '#64748b',
                    confirmButtonText: 'Yes, Reject'
                }).then((result) => {
                    if (result.isConfirmed) { dispatchStreamPOST('vendor/booking-stream/cancel/' + rowId); }
                });
            });

            function dispatchStreamPOST(targetUrl) {
                var baseAppPath = window.location.origin + "/disha_vishram_sthan/public/";
                if (targetUrl.startsWith('/')) { targetUrl = targetUrl.substring(1); }
                var finalUrlPattern = baseAppPath + targetUrl;

                Swal.fire({
                    title: 'Processing Request...',
                    allowOutsideClick: false,
                    didOpen: () => { Swal.showLoading(); }
                });

                $.ajax({
                    url: finalUrlPattern,
                    type: 'POST',
                    dataType: 'json',
                    success: function(response) {
                        Swal.close();
                        if(response.success || response.status === 'success') {
                            Swal.fire({ title: 'Success!', text: response.message || 'Operation successful', icon: 'success', timer: 2000 })
                            .then(() => { location.reload(); });
                        }
                    },
                    error: function(xhr) {
                        Swal.close();
                        console.error(xhr.responseText);
                        Swal.fire('Error!', 'Pipeline communication routing broken inside server core nodes.', 'error');
                    }
                });
            }

            $(document).on('click', '.btn-download-excel-trigger', function() {
                var activeTabPane = $('.tab-pane.active.in, .tab-pane.active');
                var targetedRows = activeTabPane.find('.booking-data-stream-row');

                if (targetedRows.length === 0) {
                    Swal.fire('Empty Grid!', 'No matching records available under this scope index.', 'warning');
                    return;
                }

                var excelTemplateSchema = 
                    '<tr>' +
                    '<th style="background-color: #15803d; color: #ffffff; font-weight: bold;">Stream ID</th>' +
                    '<th style="background-color: #15803d; color: #ffffff; font-weight: bold;">Guest Name</th>' +
                    '<th style="background-color: #15803d; color: #ffffff; font-weight: bold;">Contact Phone</th>' +
                    '<th style="background-color: #15803d; color: #ffffff; font-weight: bold;">Property Node</th>' +
                    '<th style="background-color: #15803d; color: #ffffff; font-weight: bold;">Room Segment</th>' +
                    '<th style="background-color: #15803d; color: #ffffff; font-weight: bold;">Quantity Allocation</th>' +
                    '<th style="background-color: #15803d; color: #ffffff; font-weight: bold;">Check-In Timeline</th>' +
                    '<th style="background-color: #15803d; color: #ffffff; font-weight: bold;">Check-Out Timeline</th>' +
                    '<th style="background-color: #15803d; color: #ffffff; font-weight: bold;">Live Pipeline Status</th>' +
                    '</tr>';

                targetedRows.each(function() {
                    var currentRow = $(this);
                    var streamId = currentRow.find('.excel-ref-id').text().trim();
                    var guestName = currentRow.find('.excel-ref-name').text().trim();
                    var phoneNum  = currentRow.find('.excel-ref-phone').text().trim();
                    var hotelName = currentRow.find('.excel-ref-hotel').text().trim();
                    var roomType  = currentRow.find('.excel-ref-room').text().trim();
                    var roomQty   = currentRow.find('.excel-ref-qty').text().replace('Qty:', '').trim();
                    var checkIn   = currentRow.find('.excel-ref-checkin').text().trim();
                    var checkOut  = currentRow.find('.excel-ref-checkout').text().trim();
                    var statusLog = currentRow.find('.excel-ref-status').text().trim();

                    excelTemplateSchema += 
                        '<tr>' +
                        '<td>' + streamId + '</td>' +
                        '<td>' + guestName + '</td>' +
                        '<td>' + phoneNum + '</td>' +
                        '<td>' + hotelName + '</td>' +
                        '<td>' + roomType + '</td>' +
                        '<td>' + roomQty + '</td>' +
                        '<td>' + checkIn + '</td>' +
                        '<td>' + checkOut + '</td>' +
                        '<td>' + statusLog + '</td>' +
                        '</tr>';
                });

                var finalMetaDocumentUri = 'data:application/vnd.ms-excel;charset=utf-8,' + encodeURIComponent(
                    '<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns="http://www.w3.org/TR/REC-html40">' +
                    '<head></head><body><table border="1">' + excelTemplateSchema + '</table></body></html>'
                );

                var virtualAnchorLinkNode = document.createElement("a");
                virtualAnchorLinkNode.href = finalMetaDocumentUri;
                virtualAnchorLinkNode.download = 'Booking_Stream_Export_' + new Date().toISOString().slice(0,10) + '.xls';
                document.body.appendChild(virtualAnchorLinkNode);
                virtualAnchorLinkNode.click();
                document.body.removeChild(virtualAnchorLinkNode);
            });
        });
    })(jQuery);
    </script>
@endsection