@extends('layout.super-admin-two')

@section('title', 'Acquired LR')

@section('content')
    <div class="container-fluid">
        <!-- Header Section -->
        <div class="row mb-4">
            <div class="col-12">
                <div class="d-flex justify-content-between align-items-center">
                    <div>
                        <h1 class="h3 fw-bold text-dark mb-1">Acquired Learning Resources</h1>
                        <p class="text-muted">Manage learning resource edit functionality for <span class="fw-semibold">{{ $results->first()->station_name ?? 'this school' }}</span>.</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- Table Card -->
        <div class="card border shadow-none">
                                                    
        <div class="d-flex mx-4 mt-4 justify-content-between align-items-center pb-3" style="border-bottom: 1px solid #f0f0f0;">
            <button class="btn btn-outline-success btn-sm" id="exportBtn">
                <i class="bi bi-cloud-download"></i> Export CSV
            </button> &nbsp;
            <div>
                <div id="bulkActionsDiv" style="display: none;">
                    <button id="bulkEnableBtn" class="btn btn-primary btn-sm">
                        <i class="bi bi-check-circle me-1"></i> Bulk Enable
                    </button> &nbsp;
                    <button id="bulkDisableBtn" class="btn btn-danger btn-sm">
                        <i class="bi bi-x-circle me-1"></i> Bulk Disable
                    </button>
                </div>
            </div>
        </div>


        <div class="card-body">                
            <div class="table-responsive ">
                <table id="acquiredLRTable" class="table table-hover mb-0">
                    <thead>
                        <tr class="border-bottom border-light">
                            <th class="text-center">
                                <div class="form-check">
                                    <input class="form-check-input ms-auto" type="checkbox" id="selectAllCheckbox">
                                </div>
                            </th>
                            <th class="text-uppercase fw-bold text-muted py-3" >Title</th>
                            <th class="text-uppercase fw-bold text-muted py-3" >Grade Level</th>
                            <th class="text-uppercase fw-bold text-muted py-3" >Subject</th>
                            <th class="text-uppercase fw-bold text-muted py-3">LR Type</th>
                            <th class="text-uppercase fw-bold text-muted text-center py-3" >Total LR</th>
                            <th class="text-uppercase fw-bold text-muted py-3" >Date Encoded</th>
                            <th class="text-uppercase fw-bold text-muted py-3" >Date Acquired</th>
                            <th class="text-uppercase fw-bold text-muted py-3 text-center">Action</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
            <!-- Empty State -->
            <div id="emptyState" class="text-center py-5" style="display: none;">
                <i class="bi bi-inbox" style="font-size: 3rem; color: #ccc;"></i>
                <p class="text-muted mt-3">No data available</p>
            </div>
        </div>
        </div>
    </div>
@endsection

@push('scripts')
    <!-- DataTables CSS -->
    <link rel="stylesheet" href="https://cdn.datatables.net/1.13.7/css/dataTables.bootstrap5.min.css">

    <!-- DataTables JS -->
    <script src="https://cdn.datatables.net/1.13.7/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.13.7/js/dataTables.bootstrap5.min.js"></script>

    <style>
        #acquiredLRTable {
            table-layout: fixed;
            width: 100%;
        }

        #acquiredLRTable td,
        #acquiredLRTable th {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            vertical-align: middle !important;
            
        }    
    </style>

    <script>
        $(document).ready(function () {
            const stationId = new URLSearchParams(window.location.search).get('station');
            
            // Initialize DataTable
            const table = $('#acquiredLRTable').DataTable({
                autoWidth: false,
                responsive: true,
                processing: true,
                serverSide: false,
                ajax: {
                    url: "{{ route('admin.sa-acquired-lr.index') }}",
                    data: { station: stationId },
                    dataType: 'json',
                    dataSrc: 'data'
                },
                columnDefs: [
                    { targets: 1, width: '180px' }, // Title
                    { targets: 2, width: '80px' },  // Grade Level
                    { targets: 3, width: '120px' }, // Subject
                    { targets: 4, width: '100px' }, // LR Type
                    { targets: 5, width: '70px' },  // Total LR
                    { targets: 6, width: '100px' }, // Date Encoded
                    { targets: 7, width: '100px' }, // Date Acquired
                    { targets: 8, width: '120px' }  // Action
                ],
                    columns: [
                    { 
                        data: 'acquisition_id',
                        render: function(data, type, row) {
                            const checked = row.is_edit ? 'checked' : '';
                            return `<div class="form-check ps-5">
                                <input class="form-check-input edit-checkbox" type="checkbox" data-id="${data}" ${checked}>
                            </div>`;
                        },
                        orderable: false,
                        searchable: false,
                        width: '60px'
                    },
                    { 
                        data: 'title_name',
                        render: function(data) {
                            return `<span class="fw-medium text-truncate" title="${data || '-'}">${data || '-'}</span>`;
                        },
                        width: '200px'
                    },
                    { 
                        data: 'grade_level',
                        render: function(data) {
                            return data || '-';
                        }
                    },
                    { 
                        data: 'subject_name',
                        render: function(data) {
                            return `<span class="fw-medium text-truncate" title="${data || '-'}">${data || '-'}</span>`;
                        }
                    },
                    { 
                        data: 'type_name',
                        render: function(data) {
                            return `<span class="badge bg-info text-dark">${data || '-'}</span>`;
                        }
                    },
                    { 
                        data: 'total_lr',
                        render: function(data) {
                            return `<span class="badge bg-secondary text-white">${data || 0}</span>`;
                        },
                        className: 'text-center'
                    },
                    { 
                        data: 'date_encoded',
                        render: function(data) {
                            if (!data) return '-';
                            return new Date(data).toLocaleDateString('en-PH', {
                                year: 'numeric',
                                month: 'short',
                                day: 'numeric'
                            });
                        }
                    },
                    { 
                        data: 'date_acquired',
                        render: function(data) {
                            if (!data) return '-';
                            return new Date(data).toLocaleDateString('en-PH', {
                                year: 'numeric',
                                month: 'short',
                                day: 'numeric'
                            });
                        }
                    },
                    {
                        data: 'acquisition_id',
                        render: function(data, type, row) {
                            const btnClass = row.is_edit ? 'btn-danger' : 'btn-success';
                            const btnText = row.is_edit ? 'Disable Edit' : 'Enable Edit';
                            const icon = row.is_edit ? 'bi-x-circle' : 'bi-check-circle';
                            
                            return `<button class="btn btn-sm ${btnClass} action-btn" data-id="${data}" data-is-edit="${row.is_edit}">
                                <i class="bi ${icon}"></i> ${btnText}
                            </button>`;
                        },
                        orderable: false,
                        searchable: false,
                        className: 'text-center'
                    }
                ],
                order: [[6, 'desc']],
                pageLength: 25,
                lengthMenu: [[10, 25, 50, 100, -1], [10, 25, 50, 100, 'All']],
                language: {
                    search: "Search:",
                    lengthMenu: "Show _MENU_ entries",
                    info: "Showing _START_ to _END_ of _TOTAL_ entries",
                    infoEmpty: "No entries found",
                    emptyTable: "No data available",
                    zeroRecords: "No matching records found",
                    processing: "Loading..."
                },
                dom: '<"row mx-auto px-auto"<"col-md-6"l><"col-md-6"f>>t<"row mt-3 mx-auto px-auto"<"col-md-6 text-muted"i><"col-md-6"p>>',
                responsive: true,
                initComplete: function() {
                    // Add custom styling to search input
                    $('input[type="search"]').addClass('form-control form-control-sm');
                    $('select').addClass('form-select form-select-sm');
                }
            });

            // Select All Checkbox Logic
            $('#selectAllCheckbox').on('change', function() {
                const isChecked = $(this).is(':checked');
                $('.edit-checkbox').prop('checked', isChecked);
                
                updateRowHighlight();
                updateBulkActions();
            });

            // Individual Checkbox Logic
            $(document).on('change', '.edit-checkbox', function() {
                updateRowHighlight();            
                updateBulkActions();
            });

            // Update row highlight
            function updateRowHighlight() {
                table.rows().nodes().to$().each(function() {
                    const $row = $(this);
                    const $checkbox = $row.find('.edit-checkbox');
                    if ($checkbox.is(':checked')) {
                        $row.addClass('table-active');
                    } else {
                        $row.removeClass('table-active');
                    }
                });
            }

            // Update select all checkbox state
            function updateSelectAllCheckbox() {
                const totalCheckboxes = $('.edit-checkbox').length;
                const checkedCheckboxes = $('.edit-checkbox:checked').length;
                
                if (totalCheckboxes === 0) {
                    $('#selectAllCheckbox').prop('checked', false).prop('indeterminate', false);
                } else if (checkedCheckboxes === totalCheckboxes) {
                    $('#selectAllCheckbox').prop('checked', true).prop('indeterminate', false);
                } else if (checkedCheckboxes > 0) {
                    $('#selectAllCheckbox').prop('checked', false).prop('indeterminate', true);
                } else {
                    $('#selectAllCheckbox').prop('checked', false).prop('indeterminate', false);
                }
            }

            // Re-initialize checkboxes after table reload
            table.on('draw', function() {
                updateRowHighlight();
                updateSelectAllCheckbox();
                updateBulkActions();
            });

            // Export to CSV Button
            $('#exportBtn').on('click', function () {
                const rows = [];
                const headers = ['Title', 'Grade Level', 'Subject', 'LR Type', 'Total LR Count', 'Date Encoded', 'Date Acquired', 'Edit'];
                
                rows.push(headers.join(','));

                table.rows({ search: 'applied' }).data().each(function (row) {
                    rows.push([
                        `"${(row.title_name || '-').replace(/"/g, '""')}"`,
                        `"${(row.grade_level || '-').replace(/"/g, '""')}"`,
                        `"${(row.subject_name || '-').replace(/"/g, '""')}"`,
                        `"${(row.type_name || '-').replace(/"/g, '""')}"`,
                        row.total_lr || 0,
                        row.date_encoded ? new Date(row.date_encoded).toLocaleDateString('en-PH') : '-',
                        row.date_acquired ? new Date(row.date_acquired).toLocaleDateString('en-PH') : '-',
                        row.is_edit ? 'Yes' : 'No'
                    ].join(','));
                });

                const csvContent = rows.join('\n');
                const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
                const link = document.createElement('a');
                const url = URL.createObjectURL(blob);
                
                link.setAttribute('href', url);
                link.setAttribute('download', `acquired-lr-${new Date().toISOString().split('T')[0]}.csv`);
                link.style.visibility = 'hidden';
                
                document.body.appendChild(link);
                link.click();
                document.body.removeChild(link);
                
                showSuccessMessage('CSV exported successfully!');
            });

            // Action Button Click
            $(document).on('click', '.action-btn', function () {
                const acquisitionId = $(this).data('id');
                const currentIsEdit = $(this).data('is-edit');
                const newIsEdit = currentIsEdit ? 0 : 1;  // Toggle
                
                const btn = $(this);
                const originalHtml = btn.html();
                btn.html('<span class="spinner-border spinner-border-sm"></span>').prop('disabled', true);

                $.ajax({
                    url: "{{ route('admin.sa-acquired-lr.update', '') }}" + '/' + acquisitionId,
                    type: 'PUT',
                    data: {
                        acquisition_id: acquisitionId,
                        is_edit: newIsEdit,
                        _token: "{{ csrf_token() }}"
                    },
                    success: function () {
                        const message = newIsEdit ? 'Edit enabled successfully!' : 'Edit disabled successfully!';
                        showSuccessMessage(message);
                        table.ajax.reload();
                    },
                    error: function (err) {
                        showErrorMessage('Error updating. Please try again.');
                        btn.html(originalHtml).prop('disabled', false);
                    }
                });
            });

            // Bulk Enable Button
            $('#bulkEnableBtn').on('click', function () {
                bulkSaveChanges(1); // 1 = enable
            });

            // Bulk Disable Button
            $('#bulkDisableBtn').on('click', function () {
                bulkSaveChanges(0); // 0 = disable
            });

            // Bulk Save Function
            function bulkSaveChanges(isEditValue) {
                const changes = [];
                
                // Get all selected checkboxes
                $('.edit-checkbox:checked').each(function () {
                    const acquisitionId = $(this).data('id');
                    changes.push({
                        acquisition_id: acquisitionId,
                        is_edit: isEditValue
                    });
                });

                if (changes.length === 0) {
                    showErrorMessage('Please select items first');
                    return;
                }

                // Show loading state
                const btn = isEditValue === 1 ? $('#bulkEnableBtn') : $('#bulkDisableBtn');
                const originalHtml = btn.html();
                btn.html('<span class="spinner-border spinner-border-sm me-2"></span>Saving...').prop('disabled', true);

                // Save all changes
                let completed = 0;
                let errors = 0;

                changes.forEach(change => {
                    $.ajax({
                        url: "{{ route('admin.sa-acquired-lr.update', '') }}" + '/' + change.acquisition_id,
                        type: 'PUT',
                        data: {
                            acquisition_id: change.acquisition_id,
                            is_edit: change.is_edit,
                            _token: "{{ csrf_token() }}"
                        },
                        success: function () {
                            completed++;
                            if (completed + errors === changes.length) {
                                btn.html(originalHtml).prop('disabled', false);
                                if (errors === 0) {
                                    const message = isEditValue === 1 ? `${changes.length} items enabled` : `${changes.length} items disabled`;
                                    showSuccessMessage(message);
                                    $('.edit-checkbox').prop('checked', false);
                                    $('#selectAllCheckbox').prop('checked', false);
                                    updateRowHighlight();
                                    table.ajax.reload();
                                } else {
                                    showErrorMessage(`Saved ${completed} of ${changes.length} items. Please try again.`);
                                }
                            }
                        },
                        error: function (err) {
                            errors++;
                            completed++;
                            if (completed + errors === changes.length) {
                                btn.html(originalHtml).prop('disabled', false);
                                showErrorMessage(`Error saving ${errors} items. Please try again.`);
                            }
                        }
                    });
                });
            }

            function updateBulkActions() {
                const checkedCount = $('.edit-checkbox:checked').length;

                $('#checkedCount').text(checkedCount);

                if (checkedCount > 1) {
                    $('#bulkActionsDiv').fadeIn();
                } else {
                    $('#bulkActionsDiv').fadeOut();
                }
            }

            // Helper functions for notifications
            function showSuccessMessage(message) {
                const alert = $(`<div class="alert alert-success alert-dismissible fade show" role="alert" style="position: fixed; top: 20px; right: 20px; z-index: 1050; min-width: 300px; box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.15);">
                    <i class="bi bi-check-circle me-2"></i>${message}
                    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                </div>`);
                $('body').append(alert);
                setTimeout(() => alert.remove(), 4000);
            }

            function showErrorMessage(message) {
                const alert = $(`<div class="alert alert-danger alert-dismissible fade show" role="alert" style="position: fixed; top: 20px; right: 20px; z-index: 1050; min-width: 300px; box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.15);">
                    <i class="bi bi-exclamation-circle me-2"></i>${message}
                    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                </div>`);
                $('body').append(alert);
                setTimeout(() => alert.remove(), 5000);
            }
        });
    </script>
@endpush