@extends('layouts.adminlte')

@section('title', 'LOGIN RESET REQUEST')
@section('page_title', 'LOGIN RESET REQUEST')

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

@section('content')
<div class="card">
    <div class="card-header d-flex justify-content-between align-items-center">
        <h3 class="card-title m-0">Permintaan Reset Login Mobile</h3>
        <div class="d-flex gap-2">
            <select class="form-select form-select-sm" id="statusFilter" style="width: 180px;">
                <option value="">Semua Status</option>
                <option value="pending">Pending</option>
                <option value="approved">Approved</option>
                <option value="rejected">Rejected</option>
                <option value="done">Done</option>
            </select>
            <button class="btn btn-outline-primary btn-sm" id="btnReload">Reload</button>
        </div>
    </div>
    <div class="card-body">
        <table id="resetReqTable" class="table table-striped table-hover w-100">
            <thead>
                <tr>
                    <th>No.</th>
                    <th>Request No</th>
                    <th>Identitas</th>
                    <th>Alasan</th>
                    <th>Status</th>
                    <th>Diproses</th>
                    <th>Waktu</th>
                    <th>Aksi</th>
                </tr>
            </thead>
            <tbody></tbody>
        </table>
    </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 csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content');
    if (csrfToken) $.ajaxSetup({ headers: { 'X-CSRF-TOKEN': csrfToken } });

    let rows = [];
    const table = $('#resetReqTable').DataTable({
        data: [],
        columns: [
            { data: null, render: (d,t,r,m) => m.row + 1, orderable: false, searchable: false },
            { data: 'request_no' },
            { data: null, render: r => `
                <div><b>${r.full_name || '-'}</b></div>
                <div>${r.employee_code || '-'} | Finger: ${r.finger_id || '-'}</div>
                <div>Email: ${r.email || '-'} | HP: ${r.phone || '-'}</div>
            `},
            { data: 'reason', render: v => v || '-' },
            { data: 'status', render: v => `<span class="badge text-bg-secondary">${v || '-'}</span>` },
            { data: null, render: r => `${r.processed_by_name || '-'}<br><small>${r.admin_notes || ''}</small>` },
            { data: 'created_at', render: v => v || '-' },
            { data: null, orderable: false, render: r => {
                if ((r.status || '') !== 'pending') return '<span class="text-muted">-</span>';
                return `
                    <button class="btn btn-xs btn-outline-success btn-action" data-id="${r.id}" data-status="approved">Approve</button>
                    <button class="btn btn-xs btn-outline-danger btn-action" data-id="${r.id}" data-status="rejected">Reject</button>
                    <button class="btn btn-xs btn-outline-primary btn-action" data-id="${r.id}" data-status="done">Done</button>
                `;
            }},
        ]
    });

    function loadData() {
        const status = ($('#statusFilter').val() || '').toString();
        const url = `{{ route('attendance_review.login_reset_requests.data') }}${status ? ('?status=' + encodeURIComponent(status)) : ''}`;
        return $.getJSON(url).done(resp => {
            rows = resp.data || [];
            table.clear().rows.add(rows).draw();
        });
    }

    $('#btnReload, #statusFilter').on('click change', loadData);

    $('#resetReqTable').on('click', '.btn-action', function(){
        const id = Number($(this).data('id'));
        const status = ($(this).data('status') || '').toString();
        Swal.fire({
            title: `Ubah status ke ${status}?`,
            input: 'text',
            inputLabel: 'Catatan admin (opsional)',
            showCancelButton: true,
            confirmButtonText: 'Simpan'
        }).then(res => {
            if (!res.isConfirmed) return;
            $.ajax({
                url: `{{ url('/attendance-review/login-reset-requests') }}/${id}/status`,
                method: 'POST',
                data: {
                    _method: 'PUT',
                    status: status,
                    admin_notes: res.value || ''
                }
            })
            .done(resp => {
                loadData();
                Swal.fire('Success', resp.message || 'Status updated', 'success');
            })
            .fail(xhr => Swal.fire('Error', xhr.responseJSON?.message || 'Update failed', 'error'));
        });
    });

    loadData();
});
</script>
@endpush