@push('page_css')
<link href="https://cdn.datatables.net/2.3.0/css/dataTables.dataTables.min.css" rel="stylesheet"/>
<style>
  /* table.dataTable th.dt-type-numeric, table.dataTable td.dt-type-numeric {
    text-align: left !important;  /* Adjust this value as needed */
  /* } */
  .ml-3 {
    margin-left: 3px !important;
  }
</style>
@endpush
@php ($headerOption = [
'title' => "",
'header_buttons' => [],
'filters' => isset($filters) ? $filters : [],
'data' => isset($data) ? $data : []
])
@extends('admin.layouts.layout', $headerOption)


@section('content')
 <div class="row mb-2 d-none">
    <div class="col-sm-12">
        <div class="search-box mr-2 mb-2 d-inline-block">
            <div class="position-relative">
                <input type="text" class="form-control" placeholder="Search...">
                <i class="bx bx-search-alt search-icon"></i>
            </div>
        </div>
    </div>
</div>
<div class="table-responsive">
  <table class="{!! \Config::get('view.table.table_class') !!}" id="drinkLogTable">
    <thead class="{!! \Config::get('view.table.table_head_class') !!}">
      <tr>
        <th width="29%">Customer Name</th>
        <th>&nbsp;</th>
        <th width="29%">Customer DOB</th>
        <th width="20%">Current Status</th>
        <th width="10%">Avail after</th>
        <th width="5%" style="text-align: right;">Action</th>
      </tr>
    </thead>
  </table>  
</div>
<div class="modal fade" id="viewModal" tabindex="-2" aria-labelledby="viewModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="viewModalLabel">Today's Drinks Log <a class="btn btn-dark waves-effect ms-3" id="drink_log_export" href="javascript:void(0)" data-toggle="tooltip" data-original-title="Export Records"><i class="bx bx-download"></i></a></h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <input type="hidden" id="modal_customer_id" value="">
                <div class="row">
                    <div class="col-lg-6" id="drink-status-label">
                        Current Hour Status:<i>(4/5)</i>
                    </div>
                    <div class="col-lg-6">
                        <div id="drink-status">
                            <i class="fas fa-beer fa-2x beer-red"></i>
                            <i class="fas fa-beer fa-2x beer-red"></i>
                            <i class="fas fa-beer fa-2x beer-red"></i>
                            <i class="fas fa-beer fa-2x beer-red"></i>
                            <i class="fas fa-beer fa-2x beer-green"></i>
                        </div>
                    </div>
                </div>
                <div class="table-responsive scroll-div">
                    <table class="table table-centered  table-hover">
                        <tbody id="modal-body-content">
                            <tr>
                                <td class="align-middle" style="width: 70px;">
                                    <div class="avatar-md">
                                        <img class="mr-3 rounded-circle avatar-sm" src="/assets/images/users/avatar-1.jpg" alt="Robert Clive" height="64">
                                    </div>
                                </td>
                                <td class="align-top">
                                    <h5 class="font-size-14 mb-1"><a href="javascript:void(0)" class="show-modal-lg text-dark">Staff: Robert Clive (#46545646)</a></h5>
                                    <p class="text-muted mb-0">Serve drink #1</p>
                                </td>
                                <td class="align-top"><p class="text-muted mb-0 text-right">08:20PM</p></td>
                            </tr>
                            <tr>
                                <td class="align-middle" style="width: 70px;">
                                    <div class="avatar-md">
                                        <img class="mr-3 rounded-circle avatar-sm" src="/assets/images/users/avatar-2.jpg" alt="Logan Carter" height="64">
                                    </div>
                                </td>
                                <td class="align-top">
                                    <h5 class="font-size-14 mb-1"><a href="javascript:void(0)" class="show-modal-lg text-dark">Staff: Logan Carter (#46545647)</a></h5>
                                    <p class="text-muted mb-0">Serve drink #2</p>
                                </td>
                                <td class="align-top"><p class="text-muted mb-0 text-right">08:30PM</p></td>
                            </tr>                            
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

@include('admin.components.pagination')
@push('page_script')
<script src="https://cdn.datatables.net/2.3.0/js/dataTables.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/luxon@3/build/global/luxon.min.js"></script>
<script src="https://cdn.socket.io/4.8.1/socket.io.min.js" referrerpolicy="origin"></script>
<script>
    let table;

    $(document).ready(function() {      
        
        let drinks_limit = parseInt('{{ $drinks_limit }}');
        let drinks_limit_per_trip = parseInt('{{ $drinks_limit_per_trip }}');
        let slot_cal = drinks_limit_per_trip / drinks_limit;
        let slot_num = Math.floor(slot_cal);
        let fraction = Math.abs(slot_cal % 1); // 0.78
        let fraction_slot = Math.ceil(fraction * drinks_limit); // 1
        console.log('Fraction Slot:', fraction_slot);
        let SocketListeners = {};
        initializeSocket();
        // Get the datetime string from backend and convert it to a Date object once
        let currentDateTime = new Date("{{ $srch_params['currentDateTime'] }}".replace(' ', 'T'));

        setInterval(function() {
            // Increment the Date object by 1 second
            currentDateTime.setSeconds(currentDateTime.getSeconds() + 1);
            // If you want a formatted output:
            // console.log(currentDateTime.toISOString().replace('T', ' ').split('.')[0]);
        }, 1000);


        // Initialize DataTable
        table = $('#drinkLogTable').DataTable({
            processing: true,
            serverSide: true,
            searching: true,
            autoWidth: false,
            ajax: {
                url: "{{ route('drinks.index') }}",
                type: 'GET',
                dataType: "json",
                cache: false,
                data: function (d) {
                    d.page = (d.start / d.length) + 1;
                // You can add any additional parameters to the request here
                },
                dataSrc: function (json) {
                    // Example of setting a value based on the response data
                    if (json.srch_params.length > 0) {
                        // currentDateTime = json.srch_params.currentDateTime;
                    }
                    return json.aaData; // Always return the data to DataTables
                }
            },
            columnDefs: [
                { width: "29%", targets: 0 },   // First column (index 0)
                { width: "10%", targets: 1 },
                { width: "29%", targets: 2 },   // Second column (index 1)
                { width: "20%", targets: 3 },   // Third column
                { width: "10%", targets: 4 },   // Fourth column
                { width: "5%", targets: 5 }     // Fifth column
            ],
            columns: [
                {data: 'customer_name', name: 'customer_name', orderable: false},
                {data: 'flag_reason', name: 'flag_reason', orderable: false},
                {data: 'customer_dob', name: 'customer_dob', orderable: false},
                {
                    data: 'current_drink', 
                    name: 'current_drink', 
                    orderable: false,
                    createdCell: function (td, cellData, rowData, row, col) {
                        // console.log('Created cell for current_drink:', cellData, rowData, row, col);
                        $(td).attr('id', 'glass-' + rowData.customer_id);
                    },
                    render: function (data, type, row) {
                        let new_html = '';
                        let trip_remaining = drinks_limit_per_trip - row.total_drink_served;                        
                        let new_data = (trip_remaining == 0) ? drinks_limit : data; // Ensure data does not exceed glass count
                        for (var i = 0; i < drinks_limit; i++) {
                            if (i < new_data) {
                                new_html += '<i class="fas fa-beer fa-2x beer-red ml-3"></i>';
                            } else {
                                new_html += '<i class="fas fa-beer fa-2x beer-green ml-3"></i>';
                            }
                        }
                        return new_html;
                    }
                },
                {
                    data: 'avail_after', 
                    name: 'avail_after', 
                    orderable: false,
                    render: function(data, type, row, meta) {
                    if (row.total_drink_served == drinks_limit_per_trip) {
                        return '<span class="badge badge-pill badge-soft-danger font-size-12">Limit Over</span>';
                    }
                    else {
                        if (row.current_drink === drinks_limit) {
                                return '<span class="timer" data-end="' + data + '" data-current_time="' + currentDateTime + '" data-customer_id="' + row.customer_id + '" data-customer_service_id="' + row.customer_service_id + '">-</span>';
                            } else {
                                return '-';
                            }
                        }
                    }
                },
                {data: 'action', name: 'action', orderable: false},
            ],
            order: [],
            pageLength : 25,
            lengthMenu : [10, 25, 50, 100],
            responsive: true,
            drawCallback: function(settings) {
                startTimers();  // Start or refresh timers after draw
            }        
        });

        $('#viewModal').on('shown.bs.modal', function (event) {
            // Get button that triggered modal
            var button = $(event.relatedTarget);
            modalDataUpdate(button.data('customer_id'));
        });
        function modalDataUpdate(customer_id) {      
            $('#modal_customer_id').val(customer_id);     
            var button = $('#cst_log_' + customer_id);
            var customer_id = button.data('customer_id'); // Extract info from data-* attributes
            $('#drink_log_export').attr('href', PATH + '/drink/export-customer-drink-logs?user_id=' + button.data('user_id') + '&customer_id=' + customer_id);
            
            // AJAX call
            $.ajax({
                url: PATH + '/drink/get-customer-drink-logs',
                method: 'GET',
                data: { customer_id: customer_id, user_id: button.data('user_id') },
                success: function(response) {
                    $('#modal-body-content').html(response.data.html);
                    if (response.data.is_export) {
                        $('#drink_log_export').removeClass('d-none');
                    } else {
                        $('#drink_log_export').addClass('d-none');
                    }
                    /** Show status and glass */
                    let drink_count = response.data.drink_count;
                    let total_drink_served = response.data.total_drink_served;
                    let current_status = drink_count + '/' + drinks_limit;
                    let trip_remaining = drinks_limit_per_trip - total_drink_served;         
                    let beer_html = '';            
                    let new_data = (trip_remaining == 0) ? drinks_limit : drink_count;
                    for (var i = 0; i < drinks_limit; i++) {
                        if (i < new_data) {
                            beer_html += '<i class="fas fa-beer fa-2x beer-red ml-3"></i>';
                        } else {
                            beer_html += '<i class="fas fa-beer fa-2x beer-green ml-3"></i>';
                        }
                    }
                    $('#drink-status').html(beer_html);
                    if (total_drink_served == drinks_limit_per_trip){
                        current_status = '<span class="badge badge-pill badge-soft-danger font-size-12">Limit Over</span>';
                    }            
                    $('#drink-status-label').html('Current Hour Status:<i>(' + current_status + ')</i>');
                },
                error: function() {
                    $('#modal-body-content').html('<div class="text-danger">Error loading data.</div>');
                    $('#drink_log_export').addClass('d-none');
                }
            });
        }
        function startTimers() {
            clearInterval(window.rowTimerInterval);  // avoid duplicates
            window.rowTimerInterval = setInterval(function() {
                $('.timer').each(function() {
                    
                    const $el = $(this);
                    const endTimeStr = $el.attr('data-end');
                    let service_id = $el.attr('data-customer_service_id');
                    let customer_id = $el.attr('data-customer_id');
                    const endTime = new Date((endTimeStr.replace(' ', 'T'))); // Ensure correct format
                    let now = currentDateTime;                  
                    const diffInMs = endTime - now;
                    let diff = Math.floor(diffInMs / 1000);
                    if (diff > 0) {
                        const hours = String(Math.floor(diff / 3600)).padStart(2, '0');
                        const mins = String(Math.floor((diff % 3600) / 60)).padStart(2, '0');
                        const secs = String(diff % 60).padStart(2, '0');
                        // $el.text(`${hours}:${mins}:${secs}`);
                        $el.html(`<span class="badge badge-pill badge-soft-success font-size-12">${mins}:${secs}</span>`);
                    } else {
                        
                        let current_drink = $('#cst_log_' + customer_id).attr('data-drink_count');
                        let total_drink_served = $('#cst_log_' + customer_id).attr('data-total_drink_served');
                        let trip_remaining = drinks_limit_per_trip - total_drink_served;
                        
                        if (trip_remaining > 0) {
                            $.ajax({
                                url: PATH + '/drink/get-customer-last-hour-drink-served',
                                method: 'GET',
                                data: { customer_id: customer_id},
                                success: function(response) {
                                    $el.text('-');
                                    let new_html = '';
                                    for (var i = 0; i < drinks_limit; i++) {
                                        new_html += '<i class="fas fa-beer fa-2x beer-green ml-3"></i>';
                                    }
                                    
                                    let drink_count = response.data.drink_count;
                                    let total_drink_served = response.data.total_drink_served;
                                    let trip_remaining = drinks_limit_per_trip - total_drink_served;         
                                    let beer_html = '';            
                                    let new_data = (trip_remaining == 0) ? drinks_limit : drink_count;
                                    for (var i = 0; i < drinks_limit; i++) {
                                        if (i < new_data) {
                                            beer_html += '<i class="fas fa-beer fa-2x beer-red ml-3"></i>';
                                        } else {
                                            beer_html += '<i class="fas fa-beer fa-2x beer-green ml-3"></i>';
                                        }
                                    }
                                    $('#glass-' + customer_id).html(beer_html);
                                    $('#cst_log_' + customer_id).attr('data-drink_count', drink_count);
                                },
                                error: function() {
                                    $el.text('-');
                                    let new_html = '';
                                    for (var i = 0; i < drinks_limit; i++) {
                                        new_html += '<i class="fas fa-beer fa-2x beer-green ml-3"></i>';
                                    }
                                    $('#glass-' + customer_id).html(new_html);
                                    $('#cst_log_' + customer_id).attr('data-drink_count', 0);
                                }
                            });
                            
                        }
                        else {
                            $el.html(`<span class="badge badge-pill badge-soft-danger font-size-12">Limit Over</span>`);
                        }
                        
                    }
                });
            }, 1000); // Update every second
        }

        function initializeSocket() {
            SocketListeners[`socket`] = io('{{ \Config::get("settings.SOCKET_ENDPOINT_URL") }}', {
                transports: ["websocket", "polling"]
            });
            SocketListeners.socket.on("connect", () => {
                // console.log("✅ Connected to socket server, ID:", SocketListeners.socket.id);
            });
            SocketListeners.socket.on(`flagCustomer`, data => {
                table.ajax.reload(null, false);
            });
            SocketListeners.socket.on(`scanCustomer`, data => {
                table.ajax.reload(null, false);
            });
            SocketListeners.socket.on('serveDrink', data => {
                table.ajax.reload(null, false);
                if ($('#viewModal').is(':visible')) {
                    let customer_id = $('#modal_customer_id').val();
                    if (customer_id == data.customer_id) {
                        $('#cst_log_' + customer_id).attr('data-drink_count', data.serve_drink_count);
                        $('#cst_log_' + customer_id).attr('data-total_drink_served', data.total_serve_drink_count);
                        modalDataUpdate(customer_id);
                    }
                }
            });
        }
    });

    function confirmFlagCustomer(user_id) {
        Swal.fire({
            title: 'Are you sure you want to flag this customer?',
            text: "If you proceed, drink serve for the rest of the day will be stopped, and no staff member will serve drinks to this customer.",
            input: 'text',
            inputLabel: 'Reason for flagging',
            inputPlaceholder: 'Enter reason...',
            inputAttributes: {
                'aria-label': 'Reason for flagging the customer'
            },
            showCancelButton: true,
            confirmButtonText: 'Submit',
            showLoaderOnConfirm: true,
            preConfirm: (reason) => {
                if (!reason) {
                    Swal.showValidationMessage('Reason is required');
                    return false;
                }

                // Return AJAX as Promise
                return $.ajax({
                        url: "{{ route('customers.flag') }}",
                        type: "POST",
                        data: {
                            user_id: user_id,
                            reason: reason,
                            _token: "{{ csrf_token() }}"
                        }}
                    ).then(response => {
                        if (response.status !== 'success') {
                            throw new Error(response.message || 'Something went wrong');
                        }
                        return response;
                    }).catch(error => {
                        Swal.showValidationMessage(`Request failed: ${error.message}`);
                    });
            },
            allowOutsideClick: () => !Swal.isLoading()
        }).then((result) => {
            console.log(result);
            if (result.isConfirmed) {
                Swal.fire('Success!', result.value.message, 'success');
                table.ajax?.reload(null, false); // Optional: reload table if using DataTables
            }
        });
    }    

    function confirmUnFlagCustomer(user_id) {
        Swal.fire({
            title: 'Are you sure you want to unflag this customer?',
            text: "If you proceed, drink serve for the rest of the day will be resumed.",
            showCancelButton: true,
            confirmButtonText: 'Yes, unflag it!',
            preConfirm: () => {
                return $.ajax({
                    url: "{{ route('customers.unflag') }}",
                    type: "POST",
                    data: {
                        user_id: user_id,
                        _token: "{{ csrf_token() }}"
                    }
                }).then(response => {
                    if (response.status !== 'success') {
                        throw new Error(response.message || 'Something went wrong');
                    }
                    return response;
                }).catch(error => {
                    Swal.showValidationMessage(`Request failed: ${error.message}`);
                });
            }
        }).then((result) => {
            if (result.isConfirmed) {
                Swal.fire('Unflagged!', result.value.message, 'success');
                table.ajax?.reload(null, false); // Optional: reload table if using DataTables
            }
        });
    }

    function showFlagMsg(msg) {
        
        Swal.fire({
            title: 'Flag Reason',
            text: msg,
            icon: 'info',
            confirmButtonText: 'Thanks'
        });
    }
        
</script>
@endpush

@endsection