@extends('root')
@section('title', 'Daftar Banding Klien')

@section('content')
<div class="container-fluid">
    <div class="card bg-info-subtle shadow-none position-relative overflow-hidden mb-4">
        <div class="card-body px-4 py-3">
            <div class="row align-items-center">
                <div class="col-9">
                    <h4 class="fw-semibold mb-8">Daftar Banding Klien</h4>
                    <nav aria-label="breadcrumb">
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item"><a class="text-muted" href="/admin/dashboard">Dashboard</a></li>
                            <li class="breadcrumb-item" aria-current="page">Banding</li>
                        </ol>
                    </nav>
                </div>
            </div>
        </div>
    </div>

    <div class="card w-100 position-relative overflow-hidden">
        <div class="card-body p-4">
            <div class="table-responsive rounded-2 mb-4">
                <table id="appealsTable" class="table border text-nowrap customize-table mb-0 align-middle">
                    <thead class="text-dark fs-4">
                        <tr>
                            <th><h6 class="fs-4 fw-semibold mb-0">Tanggal</h6></th>
                            <th><h6 class="fs-4 fw-semibold mb-0">Klien</h6></th>
                            <th><h6 class="fs-4 fw-semibold mb-0">Alasan</h6></th>
                            <th><h6 class="fs-4 fw-semibold mb-0">Bukti</h6></th>
                            <th><h6 class="fs-4 fw-semibold mb-0">Status</h6></th>
                            <th><h6 class="fs-4 fw-semibold mb-0">Aksi</h6></th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
        </div>
    </div>
</div>

{{-- Modal Review --}}
<div class="modal fade" id="reviewModal" tabindex="-1" aria-labelledby="reviewModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="reviewModalLabel">Review Pengajuan Banding</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form id="reviewForm" onsubmit="submitReview(event)">
                <div class="modal-body">
                    <input type="hidden" id="appeal_id" name="id">
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label class="form-label fw-semibold">Nama Klien</label>
                            <p id="client_name" class="text-muted">-</p>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label fw-semibold">Email & Telepon</label>
                            <p id="client_contact" class="text-muted">-</p>
                        </div>
                    </div>
                    <div class="mb-3">
                        <label class="form-label fw-semibold">Alasan Banding</label>
                        <div class="p-3 bg-light rounded" id="client_reason"></div>
                    </div>
                    <div class="mb-3" id="evidence_container">
                        <label class="form-label fw-semibold">Bukti Pendukung</label>
                        <div id="client_evidence"></div>
                    </div>
                    <hr>
                    <div class="mb-3">
                        <label class="form-label fw-semibold">Keputusan Admin</label>
                        <select class="form-select" name="status" id="status" required>
                            <option value="">Pilih Keputusan...</option>
                            <option value="approved">Setujui (Aktifkan Kembali Akun)</option>
                            <option value="rejected">Tolak (Tetap Nonaktif)</option>
                        </select>
                    </div>
                    <div class="mb-3">
                        <label class="form-label fw-semibold">Catatan Admin</label>
                        <textarea class="form-control" name="admin_note" id="admin_note" rows="3" placeholder="Berikan alasan keputusan..." required></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-light" data-bs-dismiss="modal">Batal</button>
                    <button type="submit" class="btn btn-primary">Simpan Keputusan</button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
    var table;
    $(document).ready(function() {
        table = $('#appealsTable').DataTable({
            processing: true,
            serverSide: true,
            ajax: "{{ route('admin.appeals.data') }}",
            columns: [
                { data: 'created_at', name: 'created_at' },
                { data: 'client.name', name: 'client.name' }, // Accessing relationship column
                { data: 'reason', name: 'reason', render: function(data) {
                    return data.length > 50 ? data.substr(0, 50) + '...' : data;
                }},
                { data: 'evidence_path', name: 'evidence_path', render: function(data) {
                    return data ? '<a href="/storage/'+data+'" target="_blank" class="btn btn-xs btn-info">Lihat</a>' : '-';
                }},
                { data: 'status', name: 'status' },
                { data: 'action', name: 'action', orderable: false, searchable: false },
            ]
        });
    });

    function reviewAppeal(id) {
        $.get("{{ url('admin/appeals') }}/" + id, function(data) {
            $('#appeal_id').val(data.id);
            $('#client_name').text(data.client.name);
            $('#client_contact').html(data.client.email + '<br>' + data.client.phone);
            $('#client_reason').text(data.reason);
            
            if (data.evidence_path) {
                $('#client_evidence').html('<a href="/storage/'+data.evidence_path+'" target="_blank" class="btn btn-sm btn-outline-primary"><i class="ti ti-file-description me-1"></i>Lihat Bukti</a>');
            } else {
                $('#client_evidence').text('Tidak ada bukti dilampirkan');
            }

            $('#reviewModal').modal('show');
        });
    }

    function submitReview(e) {
        e.preventDefault();
        var id = $('#appeal_id').val();
        var formData = {
            status: $('#status').val(),
            admin_note: $('#admin_note').val(),
            _token: $('meta[name="csrf-token"]').attr('content'),
            _method: 'PUT'
        };

        $.ajax({
            url: "{{ url('admin/appeals') }}/" + id,
            type: "POST", // Method spoofing used above
            data: formData,
            success: function(response) {
                $('#reviewModal').modal('hide');
                table.ajax.reload();
                toastr.success(response.message);
            },
            error: function(xhr) {
                toastr.error('Gagal memperbarui status.');
            }
        });
    }
</script>
@endpush