@push('page_css')
    <style>
        .ml-3 {
            margin-left: 3px !important;
        }
        table.custom-table {
            width: 100%;
            border-collapse: collapse;
        }
        table.custom-table th, table.custom-table td {
            border: 1px solid #ddd;
            padding: 8px;
        }
        table.custom-table th {
            background-color: #f2f2f2;
            text-align: left;
        }
    </style>
@endpush

@php(
    $headerOption = [
        'title' => '',
        'header_buttons' => [],
        'filters' => isset($filters) ? $filters : [],
        'data' => isset($data) ? $data : [],
    ]
)
@extends('admin.layouts.layout', $headerOption)

@section('content')
    <div class="d-flex border border-secondary btn-light p-2">
        <div class="flex-grow-1 me-3">
            <div class="row" id="menu-dropdowns">
                <div class="col-lg-3">
                    @php($staffs[""] = 'Select Staff')
                    @if (isset($staffs) && count($staffs) > 1)
                        {!! html()->select('staff_id', $staffs, array_key_exists(1, array_keys($staffs)) ? array_keys($staffs)[1] : null)->attributes(['class' => 'form-control form-select']) !!}
                    @else
                    {!! html()->select('staff_id', $staffs, array_key_exists(1, array_keys($staffs)) ? array_keys($staffs)[1] : null)->attributes(['class' => 'form-control form-select']) !!}

                    @endif
                   
                </div>
            </div>
        </div>
        <div class="flex-shrink-0 align-self-center">
             <h5 class="modal-title" id="viewModalLabel">Today's Log <a class="btn btn-dark waves-effect ms-3" id="staff_log_export" data-staff-id="" href="javascript:void(0)" data-toggle="tooltip" data-original-title="Export Records"><i class="bx bx-download"></i></a></h5>
        </div>
    </div>

    <div class="table-responsive mt-3">
        <table class="custom-table" id="drinkLogTable">
            <thead>
                <tr>
                    <th width="20%">Activity</th>
                    <th width="10%">Activity At</th>
                </tr>
            </thead>
            <tbody></tbody>
        </table>
    </div>
@endsection

@push('page_script')
<script>
    $(document).ready(function() {
        const $staffSelect = $('select[name="staff_id"]');
        const $tableBody = $('#drinkLogTable tbody');

        // Set the staff ID for export button
        $('#staff_log_export').attr('data-staff-id', $staffSelect.val());
        if ($staffSelect.val() === '') {
            $('#viewModalLabel').hide();
        } else {
            $('#viewModalLabel').show();
        }

        function loadStaffLog(staffId) {          
            $.ajax({
                url: '{{ route('staff.get-staff-logs') }}',
                method: 'GET',
                data: { staff_id: staffId },
                success: function(response) {
                    $tableBody.empty();
                    if (response.data && response.data.length > 0) {
                        response.data.forEach(log => {
                            // Check if normal_serve is explicitly 0 (not null or undefined)
                            const isError = log.normal_serve === 0 || log.flagged === 3;
                            const row = `<tr${isError ? ' style="background-color: #ffcccc;"' : ''}>
                                <td>${log.activity}</td>
                                <td>${log.activity_at}</td>
                            </tr>`;
                            $tableBody.append(row);
                        });
                    } else {
                        $tableBody.append('<tr><td colspan="2">No data available</td></tr>');
                    }
                },
                error: function() {
                    $tableBody.html('<tr><td colspan="2">Error loading data</td></tr>');
                }
            });

        }

        // Initial load
        loadStaffLog($staffSelect.val());

        // On staff change
        $staffSelect.change(function() {
            loadStaffLog($(this).val());
            $('#staff_log_export').attr('data-staff-id', $staffSelect.val());           
            if ($(this).val() === '') {
                $('#viewModalLabel').hide();
            } else {
                $('#viewModalLabel').show();
            }
        });

        // Export button click
        $('#staff_log_export').click(function() {
            const staffId = $(this).data('staff-id');
            if (staffId) {
                window.location.href = `{{ route('staff.export-staff-logs') }}?staff_id=${staffId}`;
            } else {
                alert('Please select a staff member to export logs.');
            }
            //help of the ajax request to export the logs
            $.ajax({
                url: `{{ route('staff.export-staff-logs') }}`,
                method: 'GET',
                data: { staff_id: staffId },
                success: function(response) {
                    // Handle the response if needed
                    console.log('Export successful:', response);
                },
                error: function(xhr) {
                    // Handle the error if needed
                    console.error('Export failed:', xhr);
                    alert('Failed to export logs. Please try again.');
                }
            });
        });
    });
</script>
@endpush