@extends('layouts.app')

@section('title', 'Batches Management')

@section('content')
<div class="card">
    <div class="card-header d-flex justify-content-between align-items-center">
        <h5 class="mb-0">Batches Management</h5>
        <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#createBatchModal">
            <i class="fas fa-plus"></i> Add New Batch
        </button>
    </div>
    <div class="card-body">
        @if(session('success'))
            <div class="alert alert-success alert-dismissible fade show" role="alert">
                {{ session('success') }}
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            </div>
        @endif

        @if(session('error'))
            <div class="alert alert-danger alert-dismissible fade show" role="alert">
                {{ session('error') }}
                <button typ e="button" class="btn-close" data-bs-dismiss="alert"></button>
            </div>
        @endif

        <div class="table-responsive">
            <table class="table table-bordered table-striped" id="batchesTable">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>Name</th>
                        <th>Program</th>
                        <th>Academic Year</th>
                        <th>Start Date</th>
                        <th>End Date</th>
                        <th>Status</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                    <!-- Data will be loaded by DataTables -->
                </tbody>
            </table>
        </div>
    </div>
</div>

<!-- Create Batch Modal -->
<div class="modal fade" id="createBatchModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Create New Batch</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form id="createBatchForm">
                @csrf
                <div class="modal-body">
                    <div class="mb-3">
                        <label for="name" class="form-label">Batch Name *</label>
                        <input type="text" class="form-control" id="name" name="name" required>
                        <div class="invalid-feedback" id="nameError"></div>
                    </div>
                    <div class="mb-3">
                        <label for="program" class="form-label">Program</label>
                        <input type="text" class="form-control" id="program" name="program">
                        <div class="invalid-feedback" id="programError"></div>
                    </div>
                    <div class="mb-3">
                        <label for="academic_year" class="form-label">Academic Year</label>
                        <input type="number" class="form-control" id="academic_year" name="academic_year" min="1901" max="2155">
                        <div class="invalid-feedback" id="academic_yearError"></div>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="start_date" class="form-label">Start Date</label>
                                <input type="date" class="form-control" id="start_date" name="start_date">
                                <div class="invalid-feedback" id="start_dateError"></div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="end_date" class="form-label">End Date</label>
                                <input type="date" class="form-control" id="end_date" name="end_date">
                                <div class="invalid-feedback" id="end_dateError"></div>
                            </div>
                        </div>
                    </div>
                    <div class="mb-3">
                        <label for="status" class="form-label">Status *</label>
                        <select class="form-control" id="status" name="status" required>
                            <option value="active">Active</option>
                            <option value="completed">Completed</option>
                            <option value="archived">Archived</option>
                        </select>
                        <div class="invalid-feedback" id="statusError"></div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-primary">Create Batch</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- View Batch Modal -->
<div class="modal fade" id="viewBatchModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Batch Details</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-md-6">
                        <table class="table table-bordered">
                            <tr>
                                <th width="40%">Batch Name:</th>
                                <td id="view_name"></td>
                            </tr>
                            <tr>
                                <th>Program:</th>
                                <td id="view_program"></td>
                            </tr>
                            <tr>
                                <th>Academic Year:</th>
                                <td id="view_academic_year"></td>
                            </tr>
                            <tr>
                                <th>Status:</th>
                                <td id="view_status"></td>
                            </tr>
                        </table>
                    </div>
                    <div class="col-md-6">
                        <table class="table table-bordered">
                            <tr>
                                <th width="40%">Start Date:</th>
                                <td id="view_start_date"></td>
                            </tr>
                            <tr>
                                <th>End Date:</th>
                                <td id="view_end_date"></td>
                            </tr>
                            <tr>
                                <th>Student Count:</th>
                                <td id="view_student_count"></td>
                            </tr>
                            <tr>
                                <th>Created At:</th>
                                <td id="view_created_at"></td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

<!-- Edit Batch Modal -->
<div class="modal fade" id="editBatchModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Edit Batch</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form id="editBatchForm">
                @csrf
                @method('PUT')
                <div class="modal-body">
                    <input type="hidden" id="edit_batch_id" name="id">
                    <div class="mb-3">
                        <label for="edit_name" class="form-label">Batch Name *</label>
                        <input type="text" class="form-control" id="edit_name" name="name" required>
                        <div class="invalid-feedback" id="edit_nameError"></div>
                    </div>
                    <div class="mb-3">
                        <label for="edit_program" class="form-label">Program</label>
                        <input type="text" class="form-control" id="edit_program" name="program">
                        <div class="invalid-feedback" id="edit_programError"></div>
                    </div>
                    <div class="mb-3">
                        <label for="edit_academic_year" class="form-label">Academic Year</label>
                        <input type="number" class="form-control" id="edit_academic_year" name="academic_year" min="1901" max="2155">
                        <div class="invalid-feedback" id="edit_academic_yearError"></div>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="edit_start_date" class="form-label">Start Date</label>
                                <input type="date" class="form-control" id="edit_start_date" name="start_date">
                                <div class="invalid-feedback" id="edit_start_dateError"></div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="edit_end_date" class="form-label">End Date</label>
                                <input type="date" class="form-control" id="edit_end_date" name="end_date">
                                <div class="invalid-feedback" id="edit_end_dateError"></div>
                            </div>
                        </div>
                    </div>
                    <div class="mb-3">
                        <label for="edit_status" class="form-label">Status *</label>
                        <select class="form-control" id="edit_status" name="status" required>
                            <option value="active">Active</option>
                            <option value="completed">Completed</option>
                            <option value="archived">Archived</option>
                        </select>
                        <div class="invalid-feedback" id="edit_statusError"></div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-primary">Update Batch</button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@push('styles')
<link href="https://cdn.datatables.net/1.13.6/css/dataTables.bootstrap5.min.css" rel="stylesheet">
<link href="https://cdn.datatables.net/buttons/2.4.1/css/buttons.bootstrap5.min.css" rel="stylesheet">
@endpush

@push('scripts')
<script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.13.6/js/dataTables.bootstrap5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.4.1/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.4.1/js/buttons.bootstrap5.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
<script src="https://cdn.datatables.net/buttons/2.4.1/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.4.1/js/buttons.print.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<script>
$(document).ready(function() {
    // Initialize DataTable with export buttons
    var table = $('#batchesTable').DataTable({
        processing: true,
        serverSide: true,
        ajax: "{{ route('batches.getBatches') }}",
        columns: [
            { data: 'id', name: 'id' },
            { data: 'name', name: 'name' },
            { data: 'program', name: 'program' },
            { data: 'academic_year', name: 'academic_year' },
            { data: 'start_date', name: 'start_date' },
            { data: 'end_date', name: 'end_date' },
            { data: 'status', name: 'status', orderable: false, searchable: false },
            { 
                data: 'actions', 
                name: 'actions', 
                orderable: false, 
                searchable: false,
                width: '120px'
            }
        ],
        order: [[0, 'desc']],
        dom: 'Bfrtip',
        buttons: [
            {
                extend: 'copy',
                className: 'btn btn-secondary btn-sm',
                text: '<i class="fas fa-copy"></i> Copy'
            },
            {
                extend: 'excel',
                className: 'btn btn-success btn-sm',
                text: '<i class="fas fa-file-excel"></i> Excel'
            },
            {
                extend: 'pdf',
                className: 'btn btn-danger btn-sm',
                text: '<i class="fas fa-file-pdf"></i> PDF'
            },
            {
                extend: 'print',
                className: 'btn btn-info btn-sm',
                text: '<i class="fas fa-print"></i> Print'
            }
        ],
        language: {
            search: "Search:",
            lengthMenu: "Show _MENU_ entries",
            info: "Showing _START_ to _END_ of _TOTAL_ entries",
            infoEmpty: "Showing 0 to 0 of 0 entries",
            infoFiltered: "(filtered from _MAX_ total entries)",
            zeroRecords: "No matching records found",
            paginate: {
                first: "First",
                last: "Last",
                next: "Next",
                previous: "Previous"
            }
        },
        responsive: true
    });

    // Create Batch Form Submission
    $('#createBatchForm').on('submit', function(e) {
        e.preventDefault();
        clearErrors();
        
        $.ajax({
            url: "{{ route('batches.store') }}",
            method: 'POST',
            data: $(this).serialize(),
            success: function(response) {
                if (response.success) {
                    // Force close the modal
                    var modal = document.getElementById('createBatchModal');
                    var bsModal = bootstrap.Modal.getInstance(modal);
                    bsModal.hide();
                    
                    // Remove backdrop if any
                    $('.modal-backdrop').remove();
                    $('body').removeClass('modal-open');
                    
                    table.ajax.reload();
                    
                    Swal.fire({
                        icon: 'success',
                        title: 'Success!',
                        text: response.message,
                        timer: 2000,
                        showConfirmButton: false
                    });
                }
            },
            error: function(xhr) {
                if (xhr.status === 422) {
                    displayErrors(xhr.responseJSON.errors);
                } else {
                    Swal.fire({
                        icon: 'error',
                        title: 'Error!',
                        text: xhr.responseJSON?.message || 'Something went wrong!'
                    });
                }
            }
        });
    });

    // View Batch Details
    $(document).on('click', '.view-batch', function() {
        var batchId = $(this).data('id');
        
        $.ajax({
            url: "{{ url('batches') }}/" + batchId + "/show-ajax",
            method: 'GET',
            success: function(response) {
                if (response.success) {
                    var batch = response.data;
                    $('#view_name').text(batch.name);
                    $('#view_program').text(batch.program || 'N/A');
                    $('#view_academic_year').text(batch.academic_year || 'N/A');
                    $('#view_start_date').text(batch.start_date);
                    $('#view_end_date').text(batch.end_date);
                    $('#view_created_at').text(batch.created_at);
                    $('#view_student_count').text(batch.student_count || '0'); // Fixed: Added student count display
                    
                    // Set status with badge
                    var statusBadge = '';
                    if (batch.status === 'active') {
                        statusBadge = '<span class="badge bg-success">Active</span>';
                    } else if (batch.status === 'completed') {
                        statusBadge = '<span class="badge bg-primary">Completed</span>';
                    } else {
                        statusBadge = '<span class="badge bg-secondary">Archived</span>';
                    }
                    $('#view_status').html(statusBadge);
                    
                    $('#viewBatchModal').modal('show');
                }
            },
            error: function(xhr, status, error) {
                Swal.fire({
                    icon: 'error',
                    title: 'Error!',
                    text: 'Failed to load batch details: ' + (xhr.responseJSON?.message || error)
                });
            }
        });
    });

    // Edit Batch - Show Modal
    $(document).on('click', '.edit-batch', function() {
        var batchId = $(this).data('id');
        
        $.ajax({
            url: "{{ url('batches') }}/" + batchId + "/edit",
            method: 'GET',
            success: function(response) {
                if (response.success) {
                    var batch = response.data;
                    $('#edit_batch_id').val(batch.id);
                    $('#edit_name').val(batch.name);
                    $('#edit_program').val(batch.program);
                    $('#edit_academic_year').val(batch.academic_year);
                    $('#edit_start_date').val(batch.start_date);
                    $('#edit_end_date').val(batch.end_date);
                    $('#edit_status').val(batch.status);
                    $('#editBatchModal').modal('show');
                    clearErrors('edit_');
                }
            },
            error: function(xhr, status, error) {
                Swal.fire({
                    icon: 'error',
                    title: 'Error!',
                    text: 'Failed to load batch data: ' + (xhr.responseJSON?.message || error)
                });
            }
        });
    });

    // Edit Batch Form Submission
    $('#editBatchForm').on('submit', function(e) {
        e.preventDefault();
        var batchId = $('#edit_batch_id').val();
        clearErrors('edit_');
        
        var submitBtn = $(this).find('button[type="submit"]');
        var originalText = submitBtn.html();
        submitBtn.prop('disabled', true).html('<i class="fas fa-spinner fa-spin"></i> Updating...');
        
        $.ajax({
            url: "{{ url('batches') }}/" + batchId,
            method: 'PUT',
            data: $(this).serialize(),
            success: function(response) {
                if (response.success) {
                    // Close modal using jQuery
                    $('#editBatchModal').modal('hide');
                    
                    // Reload table
                    table.ajax.reload(null, false);
                    
                    // Show success message
                    Swal.fire({
                        icon: 'success',
                        title: 'Success!',
                        text: response.message,
                        timer: 2000,
                        showConfirmButton: false
                    });
                }
                submitBtn.prop('disabled', false).html(originalText);
            },
            error: function(xhr) {
                submitBtn.prop('disabled', false).html(originalText);
                if (xhr.status === 422) {
                    displayErrors(xhr.responseJSON.errors, 'edit_');
                } else {
                    Swal.fire({
                        icon: 'error',
                        title: 'Error!',
                        text: xhr.responseJSON?.message || 'Something went wrong!'
                    });
                }
            }
        });
    });

    // Delete Batch
    $(document).on('click', '.delete-batch', function() {
        var batchId = $(this).data('id');
        
        Swal.fire({
            title: 'Are you sure?',
            text: "You won't be able to revert this!",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#d33',
            cancelButtonColor: '#3085d6',
            confirmButtonText: 'Yes, delete it!',
            cancelButtonText: 'Cancel'
        }).then((result) => {
            if (result.isConfirmed) {
                $.ajax({
                    url: "{{ url('batches') }}/" + batchId,
                    method: 'DELETE',
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    success: function(response) {
                        if (response.success) {
                            table.ajax.reload(null, false);
                            Swal.fire({
                                icon: 'success',
                                title: 'Deleted!',
                                text: response.message,
                                timer: 2000,
                                showConfirmButton: false
                            });
                        }
                    },
                    error: function(xhr, status, error) {
                        Swal.fire({
                            icon: 'error',
                            title: 'Error!',
                            text: 'Failed to delete batch: ' + (xhr.responseJSON?.message || error)
                        });
                    }
                });
            }
        });
    });

    // Helper function to display validation errors
    function displayErrors(errors, prefix = '') {
        $.each(errors, function(field, messages) {
            var fieldId = prefix + field;
            var $field = $('#' + fieldId);
            var $error = $('#' + fieldId + 'Error');
            
            if ($field.length) {
                $field.addClass('is-invalid');
                if ($error.length) {
                    $error.text(messages[0]);
                }
            }
        });
    }

    // Helper function to clear validation errors
    function clearErrors(prefix = '') {
        $('.is-invalid').removeClass('is-invalid');
        $('.invalid-feedback').text('');
    }

    // Clear form and reset button when modal is hidden
    $('#createBatchModal').on('hidden.bs.modal', function () {
        $('#createBatchForm')[0].reset();
        clearErrors();
        // Reset submit button
        $('#createBatchForm').find('button[type="submit"]').prop('disabled', false).html('Create Batch');
    });

    $('#editBatchModal').on('hidden.bs.modal', function () {
        clearErrors('edit_');
        // Reset submit button
        $('#editBatchForm').find('button[type="submit"]').prop('disabled', false).html('Update Batch');
    });
});
</script>
@endpush