@extends('layouts.adminlte')

@section('title', 'SHUTDOWN CHECKER LOGS')
@section('page_title', 'SHUTDOWN CHECKER LOGS')

@push('styles')
    <link rel="stylesheet" href="{{ asset('vendor/datatables/css/dataTables.bootstrap5.min.css') }}" />
@endpush

@section('content')
    <div class="d-flex justify-content-between align-items-center mb-3">
        <div>
            <h2 class="mb-1">SHUTDOWN CHECKER LOGS</h2>
            <div class="text-muted">Stamp lokasi event mobile yang aktif dari config <code>shutdown_check.php</code>.</div>
        </div>
        <div class="d-flex gap-2">
            <a href="{{ route('attendance_mobile_notification_settings.index') }}" class="btn btn-outline-primary btn-sm">Setting Mobile</a>
            <a href="{{ route('attendance_mobile_client_logs.index') }}" class="btn btn-outline-secondary btn-sm">Log Mobile</a>
        </div>
    </div>

    <div class="card">
        <div class="card-body">
            <div class="row g-2 align-items-end mb-3">
                <div class="col-md-2">
                    <label class="form-label">Dari</label>
                    <input type="date" class="form-control" id="filterDateFrom" value="{{ now()->subDays(7)->format('Y-m-d') }}">
                </div>
                <div class="col-md-2">
                    <label class="form-label">Sampai</label>
                    <input type="date" class="form-control" id="filterDateTo" value="{{ now()->format('Y-m-d') }}">
                </div>
                <div class="col-md-2">
                    <label class="form-label">Status</label>
                    <input type="text" class="form-control" id="filterStatus" placeholder="captured">
                </div>
                <div class="col-md-4">
                    <label class="form-label">Cari</label>
                    <input type="text" class="form-control" id="filterSearch" placeholder="employee / finger / nama / device / day / time">
                </div>
                <div class="col-md-2 text-end">
                    <button type="button" class="btn btn-primary btn-sm" id="btnApplyFilter">Tampilkan</button>
                    <a href="{{ route('attendance_mobile_shutdown_checker.export_excel') }}" class="btn btn-success btn-sm" id="btnExportExcel">Export Excel</a>
                    <button type="button" class="btn btn-outline-danger btn-sm" id="btnTruncate">Truncate Table</button>
                </div>
            </div>

            <div class="table-responsive">
                <table class="table table-striped table-hover w-100" id="shutdownCheckerTable">
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>Tanggal</th>
                            <th>Captured</th>
                            <th>Employee</th>
                            <th>Nama</th>
                            <th>Day</th>
                            <th>Time</th>
                            <th>Lat</th>
                            <th>Lng</th>
                            <th>Accuracy</th>
                            <th>Status</th>
                            <th>Aksi</th>
                        </tr>
                    </thead>
                </table>
            </div>
        </div>
    </div>

<div class="modal fade" id="detailModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-scrollable">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Detail Shutdown Checker</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Tutup"></button>
            </div>
            <div class="modal-body">
                <pre class="small bg-light p-3 rounded border" id="detailPayload">-</pre>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script src="{{ asset('vendor/datatables/js/jquery.dataTables.min.js') }}"></script>
<script src="{{ asset('vendor/datatables/js/dataTables.bootstrap5.min.js') }}"></script>
<script>
    $(function () {
        const table = $('#shutdownCheckerTable').DataTable({
            processing: true,
            serverSide: true,
            searching: true,
            lengthMenu: [[10, 25, 50, 100], [10, 25, 50, 100]],
            ajax: {
                url: @json(route('attendance_mobile_shutdown_checker.data')),
                data: function (d) {
                    d.date_from = $('#filterDateFrom').val();
                    d.date_to = $('#filterDateTo').val();
                    d.status = $('#filterStatus').val();
                    d.q = $('#filterSearch').val();
                }
            },
            columns: [
                { data: 'id', name: 'id' },
                { data: 'stamp_for_date', name: 'stamp_for_date' },
                { data: 'captured_at', name: 'captured_at' },
                { data: 'employee_code', name: 'employee_code', render: function (data, type, row) {
                    const finger = row.finger_id ? '<div class="text-muted small">' + row.finger_id + '</div>' : '';
                    return (data || '-') + finger;
                }},
                { data: 'full_name', name: 'full_name' },
                { data: 'scheduled_day', name: 'scheduled_day', render: function (data, type, row) {
                    return (data || '-') + '<div class="text-muted small">' + (row.triggered_at || '-') + '</div>';
                }},
                { data: 'scheduled_time', name: 'scheduled_time' },
                { data: 'latitude', name: 'latitude' },
                { data: 'longitude', name: 'longitude' },
                { data: 'accuracy_meter', name: 'accuracy_meter' },
                { data: 'status', name: 'status' },
                { data: null, orderable: false, searchable: false, render: function (data, type, row) {
                    return '<button type="button" class="btn btn-outline-primary btn-sm btn-detail">Detail</button>';
                }},
            ],
            order: [[2, 'desc']],
        });

        $('#btnApplyFilter').on('click', function () {
            table.ajax.reload();
        });

        $('#filterSearch, #filterStatus').on('keypress', function (e) {
            if (e.which === 13) table.ajax.reload();
        });

        $('#btnExportExcel').on('click', function (e) {
            e.preventDefault();
            const params = new URLSearchParams({
                date_from: $('#filterDateFrom').val() || '',
                date_to: $('#filterDateTo').val() || '',
                status: $('#filterStatus').val() || '',
                q: $('#filterSearch').val() || '',
            });
            window.location.href = @json(route('attendance_mobile_shutdown_checker.export_excel')) + '?' + params.toString();
        });

        $('#btnTruncate').on('click', function () {
            if (!confirm('Kosongkan seluruh tabel shutdown checker?')) return;
            $.post(@json(route('attendance_mobile_shutdown_checker.truncate')), {
                _token: @json(csrf_token())
            }).done(function (resp) {
                alert(resp.message || 'Tabel berhasil dikosongkan.');
                table.ajax.reload();
            }).fail(function (xhr) {
                alert(xhr.responseJSON?.message || 'Gagal truncate tabel.');
            });
        });

        $('#shutdownCheckerTable').on('click', '.btn-detail', function () {
            const row = table.row($(this).closest('tr')).data();
            $('#detailPayload').text(JSON.stringify(row, null, 2));
            const modal = new bootstrap.Modal(document.getElementById('detailModal'));
            modal.show();
        });
    });
</script>
@endpush