@extends('root')
@section('title', 'Client Isolation Appeals')

@section('content')
<div class="container-fluid">
    @include('components.breadcrumb', [
        'title' => 'Tinjauan Banding Isolasi',
        'links' => [
            ['url' => route('dashboard'), 'label' => 'Dashboard'],
        ],
        'current' => 'Banding Isolasi'
    ])

    <div class="card card-body">
        <div class="table-responsive">
            <table class="table table-striped" id="appealsTable">
                <thead>
                    <tr>
                        <th>Tanggal</th>
                        <th>Client</th>
                        <th>Pesan Banding</th>
                        <th>Lampiran</th>
                        <th>Status</th>
                        <th>Opsi</th>
                    </tr>
                </thead>
                <tbody>
                    <!-- Data populated by JS -->
                </tbody>
            </table>
        </div>
    </div>

    <!-- Review Modal -->
    <div class="modal fade" id="reviewModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Tinjau Banding</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form id="reviewForm">
                    @csrf
                    <div class="modal-body">
                        <input type="hidden" id="appeal_id" name="appeal_id">
                        <div class="mb-3">
                            <label class="form-label">Keputusan</label>
                            <select class="form-select" name="decision" required>
                                <option value="approved">Setujui (Buka Isolasi)</option>
                                <option value="rejected">Tolak</option>
                            </select>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">Catatan Review</label>
                            <textarea class="form-control" name="review_note" rows="3" required></textarea>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
                        <button type="submit" class="btn btn-primary">Simpan Keputusan</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
$(document).ready(function() {
    var table = $('#appealsTable').DataTable({
        processing: true,
        serverSide: false,
        ajax: '{{ route("admin.isolation.appeals") }}',
        columns: [
            { 
                data: 'submitted_at',
                render: function(data) {
                    return new Date(data).toLocaleString('id-ID');
                }
            },
            { data: 'client.name', defaultContent: '-' },
            { 
                data: 'appeal_message',
                render: function(data) {
                    return data.length > 50 ? data.substr(0, 50) + '...' : data;
                }
            },
            {
                data: 'attachment_path',
                render: function(data) {
                    return data ? `<a href="/storage/${data}" target="_blank" class="btn btn-sm btn-outline-info">Lihat</a>` : '-';
                }
            },
            {
                data: 'status',
                render: function(data) {
                    if(data === 'pending') return '<span class="badge bg-warning text-dark">Pending</span>';
                    if(data === 'approved') return '<span class="badge bg-success">Disetujui</span>';
                    if(data === 'rejected') return '<span class="badge bg-danger">Ditolak</span>';
                    return data;
                }
            },
            {
                data: null,
                render: function(data, type, row) {
                    if (row.status !== 'pending') return '';
                    return `<button class="btn btn-primary btn-sm btn-review" data-id="${row.id}" data-message="${row.appeal_message}">Review</button>`;
                }
            }
        ]
    });

    $('#appealsTable').on('click', '.btn-review', function() {
        var id = $(this).data('id');
        $('#appeal_id').val(id);
        $('#reviewForm')[0].reset();
        $('#reviewModal').modal('show');
    });

    $('#reviewForm').on('submit', function(e) {
        e.preventDefault();
        var id = $('#appeal_id').val();
        var url = '{{ route("admin.isolation.appeals.review", ":id") }}'.replace(':id', id);
        
        $.ajax({
            url: url,
            method: 'POST',
            data: $(this).serialize(),
            success: function(response) {
                $('#reviewModal').modal('hide');
                table.ajax.reload();
                alert('Review berhasil disimpan');
            },
            error: function(xhr) {
                alert('Error: ' + (xhr.responseJSON.message || 'Terjadi kesalahan'));
            }
        });
    });
});
</script>
@endpush