@extends('layouts.app')

@section('title', 'Reset Session')
@section('content')
<div class="main-content">
    <div class="container-fluid">
        <!-- Page Header -->
        <div class="page-header">
            <div class="row align-items-end">
                <div class="col-lg-8">
                    <div class="page-header-title">
                        <i class="ik ik-refresh-cw bg-blue"></i>
                        <div class="d-inline">
                            <h5>Reset Session</h5>
                            <span>Kelola kunci login siswa yang nyangkut "sudah login di perangkat lain".</span>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4">
                    <nav class="breadcrumb-container" aria-label="breadcrumb">
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item">
                                <a href="{{ route('dashboard') }}"><i class="ik ik-home"></i></a>
                            </li>
                            <li class="breadcrumb-item active" aria-current="page">Reset Session</li>
                        </ol>
                    </nav>
                </div>
            </div>
        </div>

        <!-- Alert Container -->
        <div id="alert-container" class="alert-container"></div>

        <div class="card">
            <!-- Header: cuma 1 input cari cepat -->
            <div class="row">
                <div class="col-md-12">
                    <div class="card-header d-flex justify-content-between">
                        <h3>Daftar Session Siswa</h3>
                        <div class="d-flex gap-2">
                            <!-- Bulk Reset -->
                            <button type="button" class="btn btn-danger" id="resetSelectedBtn" style="display: none;">
                                <i class="ik ik-zap-off"></i> Reset Terpilih
                            </button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Alerts -->
            @if(session('success'))
                <div class="alert alert-success mx-3">{{ session('success') }}</div>
            @endif
            @if(session('error'))
                <div class="alert alert-danger mx-3">{{ session('error') }}</div>
            @endif

            <!-- Tabel Reset Session -->
            <div class="row">
                <div class="col-md-12">
                    <div class="card">
                        <div class="card-body">
                            <table id="data_table" class="table table-hover table-striped table-bordered nowrap dataTable">
                                <thead>
                                    <tr>
                                        <th><input type="checkbox" id="selectAll"></th>
                                        <th>No</th>
                                        <th>No Induk</th>
                                        <th>Nama</th>
                                        <th>Telpon</th>
                                        <th>Status</th>
                                        <th>DeviceID</th>
                                        <th>Token</th>
                                        <th>Aksi</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($siswa as $item)
                                        @php $locked = !is_null($item->deviceid) || !is_null($item->token); @endphp
                                        <tr>
                                            <td><input type="checkbox" class="select-item" value="{{ $item->id }}"></td>
                                            <td></td> <!-- Kolom nomor akan diisi oleh DataTables -->
                                            <td>{{ $item->no_induk ?: '-' }}</td>
                                            <td>
                                                <div class="fw-semibold">{{ $item->nama }}</div>
                                                <div class="small text-muted">NISN: {{ $item->nisn ?: '-' }} · ID: {{ $item->id }}</div>
                                            </td>
                                            <td>{{ $item->telpon ?: '-' }}</td>
                                            <td>
                                                @if($locked)
                                                    <span class="badge badge-danger">TERKUNCI</span>
                                                @else
                                                    <span class="badge badge-secondary">bebas (null)</span>
                                                @endif
                                            </td>
                                            <td style="max-width:220px">{{ $item->deviceid ?: '-' }}</td>
                                            <td style="max-width:220px">
                                                @if($item->token)
                                                    <span title="{{ $item->token }}">{{ \Illuminate\Support\Str::limit($item->token, 32) }}</span>
                                                @else
                                                    -
                                                @endif
                                            </td>
                                            <td>
                                                <form method="POST" action="{{ route('admin.sessions.resetOne', $item->id) }}"
                                                    onsubmit="return confirm('Reset session {{ $item->nama }}?')">
                                                    @csrf
                                                    <button class="btn btn-sm btn-outline-danger">
                                                        <i class="ik ik-refresh-cw"></i> Reset
                                                    </button>
                                                </form>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div> <!-- /card -->
    </div>
</div>

<!-- Modal Konfirmasi Reset Massal -->
<div class="modal fade" id="resetConfirmModal" tabindex="-1" role="dialog"
    aria-labelledby="resetConfirmModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="resetConfirmModalLabel">Konfirmasi Reset Session</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Tutup">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                Apakah Anda yakin ingin mereset session untuk siswa yang dipilih?
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Batal</button>
                <button type="button" id="confirmResetBtn" class="btn btn-danger">Reset</button>
            </div>
        </div>
    </div>
</div>
@endsection

@section('script')
<script>
    $(document).ready(function() {
        // Inisialisasi DataTable
        if ($.fn.DataTable.isDataTable('#data_table')) {
            $('#data_table').DataTable().destroy();
        }
        
        var table = $('#data_table').DataTable({
            destroy: true,
            dom: "<'row'<'col-sm-12 col-md-6'l><'col-sm-12 col-md-6'f>>" +
                "<'row'<'col-sm-12'tr>>" +
                "<'row'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7'p>>",
            language: {
                lengthMenu: "Tampilkan _MENU_ entri",
                search: "Cari:",
                info: "Menampilkan _START_ hingga _END_ dari _TOTAL_ entri",
                infoEmpty: "Menampilkan 0 hingga 0 dari 0 entri",
                infoFiltered: "(disaring dari _MAX_ total entri)",
                paginate: {
                    first: "Pertama",
                    last: "Terakhir",
                    next: "Selanjutnya",
                    previous: "Sebelumnya"
                },
                zeroRecords: "Tidak ditemukan data yang sesuai"
            },
            paging: true,
            searching: true,
            ordering: true,
            columnDefs: [
                { orderable: false, targets: [0, 1, 5, 8] },
                { searchable: false, targets: [0, 1, 5, 8] }
            ],
            order: [[3, 'asc']], // Default sorting by nama
            createdRow: function(row, data, dataIndex) {
                // Update nomor urut
                $('td', row).eq(1).html(dataIndex + 1);
            }
        });
        
        $('#data_table_filter input').addClass('form-control form-control-sm');
        $('#data_table_length select').addClass('form-control form-control-sm');

        // Toggle tombol reset terpilih berdasarkan checkbox
        function toggleResetButton() {
            var checkedCount = $('.select-item:checked').length;
            if (checkedCount > 0) {
                $('#resetSelectedBtn').show();
            } else {
                $('#resetSelectedBtn').hide();
            }
        }

        // Select all checkbox
        $('#selectAll').on('click', function() {
            $('.select-item').prop('checked', $(this).prop('checked'));
            toggleResetButton();
        });

        // Individual checkbox
        $('#data_table').on('click', '.select-item', function() {
            if (!$(this).prop('checked')) {
                $('#selectAll').prop('checked', false);
            }
            toggleResetButton();
        });

        // Reset session terpilih
        $('#resetSelectedBtn').on('click', function() {
            var selectedIds = [];
            $('.select-item:checked').each(function() {
                selectedIds.push($(this).val());
            });

            if (selectedIds.length === 0) {
                alert('Pilih minimal satu data.');
                return;
            }

            $('#resetConfirmModal').modal('show');
            
            // Handler konfirmasi reset
            $('#confirmResetBtn').off('click').on('click', function() {
                $.ajax({
                    url: '{{ route("admin.sessions.resetBulk") }}',
                    method: 'POST',
                    data: {
                        ids: selectedIds,
                        _token: '{{ csrf_token() }}'
                    },
                    success: function(response) {
                        if (response.success) {
                            alert('Session berhasil direset!');
                            location.reload();
                        } else {
                            alert(response.message || 'Gagal mereset session.');
                        }
                    },
                    error: function() {
                        alert('Terjadi kesalahan server.');
                    },
                    complete: function() {
                        $('#resetConfirmModal').modal('hide');
                    }
                });
            });
        });
    });
</script>

<style>
    div.dataTables_wrapper div.dataTables_paginate {
        margin-top: 12px;
        margin-bottom: 8px;
    }

    .dataTables_wrapper .dataTables_paginate .paginate_button {
        background-color: #fdfdfd !important;
        color: #212529 !important;
        margin-top: 15px;
        padding-bottom: 10px;
        cursor: pointer;
        transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
    }

    .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    }
    
    .pagination .page-item {
    padding: 0px  !important;
        
    }
    
    .dataTables_wrapper .dataTables_paginate .paginate_button.current {
        background-color: #e2e6ea !important;
        border-color: #dae0e5 !important;
        color: #212529 !important;
    }

    .alert-container {
        position: fixed;
        top: 20px;
        right: 20px;
        z-index: 1050;
        max-width: 350px;
    }

    .custom-alert {
        box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
        font-size: 14px;
        padding: 10px 15px;
    }

    #data_table th:first-child,
    #data_table td:first-child {
        width: 40px !important;
        text-align: center !important;
        padding: 5px !important;
    }

    #data_table th:nth-child(2),
    #data_table td:nth-child(2) {
        width: 40px !important;
        text-align: center !important;
    }

    #data_table th:nth-child(6),
    #data_table td:nth-child(6) {
        width: 80px !important;
        text-align: center !important;
    }

    #data_table th:last-child,
    #data_table td:last-child {
        width: 100px !important;
        text-align: center !important;
    }
    
     /* Perbaikan khusus untuk kolom Token */
    #data_table td:nth-child(8) {
        max-width: 200px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* Tooltip untuk token lengkap */
    #data_table td:nth-child(8) span {
        cursor: pointer;
        display: inline-block;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* Style untuk tooltip */
    .tooltip {
        position: absolute;
        z-index: 1070;
        display: block;
        margin: 0;
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
        font-style: normal;
        font-weight: 400;
        line-height: 1.5;
        text-align: left;
        text-decoration: none;
        text-shadow: none;
        text-transform: none;
        letter-spacing: normal;
        word-break: normal;
        word-spacing: normal;
        white-space: normal;
        line-break: auto;
        font-size: 0.875rem;
        word-wrap: break-word;
        opacity: 0;
    }

    .tooltip.show {
        opacity: 0.9;
    }

    .tooltip .tooltip-inner {
        max-width: 200px;
        padding: 0.25rem 0.5rem;
        color: #fff;
        text-align: center;
        background-color: #000;
        border-radius: 0.25rem;
    }
    
    .badge-danger {
        background-color: #ff6978 !important;
        color: #fff;
    }
    
    .badge-secondary {
        background-color: #6c757d !important;
        color: #fff !important;
    }
</style>
@endsection