<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Pengajuan Surat</title>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto|Varela+Round">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
    <style>
        body {
            color: #566787;
            background: #f5f5f5;
            font-family: 'Varela Round', sans-serif;
            font-size: 13px;
        }

        /* Area Konten Utama */
        .content-area {
            padding: 20px;
            margin-left: 20px;
        }

        .table-responsive {
            margin: 30px 0;
        }

        .table-wrapper {
            background: #fff;
            padding: 20px 25px;
            border-radius: 8px;
            min-width: 1000px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, .1);
        }

        /* WARNA HEADER: Biru Sidebar */
        .table-title {
            padding-bottom: 15px;
            background: #3b5998;
            color: #fff;
            padding: 16px 30px;
            min-width: 100%;
            margin: -20px -25px 10px;
            border-radius: 8px 8px 0 0;
        }

        .table-title h2 {
            margin: 5px 0 0;
            font-size: 24px;
            font-weight: bold;
            color: #fff;
        }

        /* Tombol Custom Kecil (Tambah Pengajuan / Tambah Surat) */
        .btn-custom-small {
            padding: 5px 12px;
            font-size: 12px;
            font-weight: 500;
            border-radius: 6px;
            display: inline-flex;
            align-items: center;
            transition: all 0.3s;
            border: none;
            background-color: #28a745;
            color: white !important;
            text-decoration: none;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        .btn-custom-small i {
            font-size: 16px;
            margin-right: 6px;
        }

        .btn-custom-small:hover {
            background-color: #218838;
            transform: translateY(-1px);
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15);
        }

        table.table tr th,
        table.table tr td {
            border-color: #e9e9e9;
            padding: 15px 15px;
            vertical-align: middle;
        }

        /* Style Baris Tabel */
        table.table-striped tbody tr:nth-of-type(odd) {
            background-color: #fcfcfc;
        }

        table.table-striped.table-hover tbody tr:hover {
            background: #f5f5f5;
        }

        /* Tombol 'Lihat' Berkas */
        .btn-lihat {
            background-color: #3b5998;
            color: white !important;
            border-radius: 4px;
            padding: 5px 12px;
            font-size: 12px;
            display: inline-flex;
            align-items: center;
            text-decoration: none;
        }

        .btn-lihat i {
            font-size: 16px;
            margin-right: 5px;
        }

        /* Ikon Aksi */
        table.table td a.edit {
            color: #FFC107;
            margin-right: 10px;
        }

        table.table td a.delete {
            color: #F44336;
        }

        table.table td i {
            font-size: 19px;
        }

        /* Badge Status */
        .status-badge {
            padding: 5px 10px;
            border-radius: 20px;
            color: #fff;
            font-size: 11px;
            font-weight: bold;
            text-transform: capitalize;
            display: inline-block;
            min-width: 80px;
            text-align: center;
        }

        .status-disetujui {
            background: #28a745;
        }

        .status-menunggu {
            background: #ffc107;
            color: #000;
        }

        .status-ditolak {
            background: #dc3545;
        }

        /* Pagination Styling */
        .hint-text {
            font-size: 13px;
        }

        .pagination .page-link {
            color: #3b5998;
            font-size: 12px;
        }

        .pagination .page-item.active .page-link {
            background-color: #3b5998;
            border-color: #3b5998;
        }
    </style>

</head>


<body>
    <div class="d-flex">
        @include('sidebar')

        <div class="content flex-fill p-4">
            <div class="container-xl">

                <div class="table-responsive">
                    <div class="table-wrapper">

                        {{-- JUDUL --}}
                        <div class="table-title mb-3">
                            <div class="row align-items-center">
                                <div class="col-sm-6">
                                    <h2 class="mb-0">Data <b>Pengajuan Surat</b></h2>
                                </div>
                                <div class="col-sm-6 text-end">
                                    <a href="#" class="btn btn-success btn-sm btn-custom-small" data-bs-toggle="modal" data-bs-target="#addPengajuanModal">
                                        <i class="material-icons">add_circle</i>
                                        <span>Tambah Pengajuan</span>
                                    </a>
                                </div>
                            </div>
                        </div>

                        {{-- TABLE --}}
                        <table class="table table-striped table-hover align-middle">
                            <thead class="table-light">
                                <tr>
                                    <th width="50" class="text-center">No</th>
                                    <th>Nomor Surat</th>
                                    <th>Jenis Surat</th>
                                    <th>Tanggal Pengajuan</th>
                                    <th>Status</th>
                                    <th>Keterangan</th>
                                    <th class="text-center">Berkas</th>
                                    <th width="120" class="text-center">Aksi</th>
                                </tr>
                            </thead>

                            <tbody>
                                @forelse ($pengajuan as $item)
                                <tr>
                                    <td class="text-center" style="color: #000; font-weight: 600;">
                                        {{ ($pengajuan->currentPage() - 1) * $pengajuan->perPage() + $loop->iteration }}
                                    </td>

                                    <td style="color: #000;">{{ $item->nomor_surat ?? '-' }}</td>
                                    <td style="color: #000;">{{ $item->jenis_surat ?? '-' }}</td>
                                    <td style="color: #000;">{{ $item->tanggal_pengajuan ? \Carbon\Carbon::parse($item->tanggal_pengajuan)->format('d-m-Y') : '-' }}</td>

                                    <td>
                                        @switch($item->status)
                                        @case('menunggu') <span class="badge bg-warning text-dark">Menunggu</span> @break
                                        @case('disetujui') <span class="badge bg-success">Disetujui</span> @break
                                        @case('ditolak') <span class="badge bg-danger">Ditolak</span> @break
                                        @default <span class="badge bg-secondary">-</span>
                                        @endswitch
                                    </td>

                                    <td style="color: #000;">
                                        <small>{{ Str::limit($item->keterangan ?? '-', 30) }}</small>
                                    </td>

                                    <td class="text-center">
                                        @if ($item->berkas_persyaratan)
                                        <a href="{{ asset('berkas_pengajuan/' . $item->berkas_persyaratan) }}"
                                            target="_blank"
                                            class="btn btn-sm btn-primary d-inline-flex align-items-center"
                                            style="gap: 5px; color: #fff; font-weight: 500; padding: 5px 12px; border-radius: 4px; text-decoration: none;">
                                            <i class="material-icons" style="font-size:18px;">picture_as_pdf</i>
                                            <span>Lihat</span>
                                        </a>
                                        @else
                                        <span class="text-muted fst-italic small">Tidak ada</span>
                                        @endif
                                    </td>

                                    <td>
                                        <div class="d-flex gap-2 justify-content-center">
                                            <a href="javascript:void(0)"
                                                class="editPengajuanBtn btn btn-sm"
                                                data-pengajuan='@json($item)'
                                                title="Edit"
                                                style="display:flex;align-items:center;justify-content:center;background:#FFC107;color:#fff;border-radius:4px;width:36px;height:36px;text-decoration:none;">
                                                <i class="material-icons" style="font-size:18px;">edit</i>
                                            </a>

                                            <a href="javascript:void(0)"
                                                class="btn-delete btn btn-sm btn-danger"
                                                data-id="{{ $item->id }}"
                                                style="display:flex; align-items:center; justify-content:center; width:36px; height:36px;">
                                                <i class="material-icons">delete</i>
                                            </a>
                                        </div>
                                    </td>
                                </tr>
                                @empty
                                <tr>
                                    <td colspan="8" class="text-center text-muted py-4">Tidak ada data pengajuan surat</td>
                                </tr>
                                @endforelse
                            </tbody>
                        </table>
                        <div class="d-flex justify-content-between align-items-center mt-3">
                            <div class="hint-text">
                                Menampilkan
                                <b>{{ $pengajuan->firstItem() }}</b>
                                sampai
                                <b>{{ $pengajuan->lastItem() }}</b>
                                dari
                                <b>{{ $pengajuan->total() }}</b> data
                            </div>

                            <div class="pagination-container">
                                {{ $pengajuan->links() }}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div id="addPengajuanModal" class="modal fade" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <form action="{{ route('pengajuan.store') }}" method="POST" enctype="multipart/form-data">
                    @csrf
                    <div class="modal-header">
                        <h5 class="modal-title">Tambah Pengajuan</h5>
                    </div>
                    <div class="modal-body">
                        <input type="hidden" name="penduduk_id" value="{{ Auth::user()->id }}">
                        <div class="mb-3">
                            <label class="form-label">Nomor Surat <span class="text-danger">*</span></label>
                            <input type="text" name="nomor_surat" class="form-control" required>
                        </div>
                        <div class="form-group">
                            <label>Jenis Surat</label>
                            <select name="jenis_surat" class="form-control" required>
                                <option value="" disabled selected>-- Pilih Jenis Surat --</option>
                                <option value="SKTM">Surat Keterangan Tidak Mampu (SKTM)</option>
                                <option value="SKCK">Surat Keterangan Catatan Kepolisian (SKCK)</option>
                                <option value="Surat Izin Usaha">Surat Izin Usaha</option>
                                <option value="Keterangan Kematian">Surat Keterangan Kematian</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label>Tanggal Pengajuan <span class="text-danger">*</span></label>
                            <input
                                type="date"
                                name="tanggal_pengajuan"
                                class="form-control"
                                value="{{ date('Y-m-d') }}"
                                min="{{ date('Y-m-d') }}"
                                required>
                            <small class="text-muted">Pilih tanggal hari ini atau setelahnya.</small>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">Keterangan</label>
                            <textarea name="keterangan" class="form-control" rows="2"></textarea>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">Berkas (PDF)</label>
                            <input type="file" name="berkas_persyaratan" class="form-control" accept="application/pdf">
                        </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-success">Kirim</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <div id="editPengajuanModal" class="modal fade" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <form id="editPengajuanForm" method="POST" enctype="multipart/form-data">
                    @csrf
                    @method('PUT')

                    <div class="modal-header">
                        <h5 class="modal-title">Edit Pengajuan Surat</h5>
                    </div>

                    <div class="modal-body">
                        <input type="hidden" name="penduduk_id" value="{{ Auth::user()->id }}">

                        <div class="mb-3">
                            <label class="form-label">Nomor Surat</label>
                            <input type="text" name="nomor_surat" id="edit_nomor_surat" class="form-control" value="{{ $item->nomor_surat ?? '' }}">
                        </div>

                        <div class="form-group mb-3">
                            <label>Jenis Surat</label>
                            <select name="jenis_surat" id="edit_jenis_surat" class="form-control" required>
                                <option value="" disabled {{ !isset($item) ? 'selected' : '' }}>-- Pilih Jenis Surat --</option>
                                <option value="SKTM" {{ ($item->jenis_surat ?? '') == 'SKTM' ? 'selected' : '' }}>
                                    Surat Keterangan Tidak Mampu (SKTM)
                                </option>
                                <option value="SKCK" {{ ($item->jenis_surat ?? '') == 'SKCK' ? 'selected' : '' }}>
                                    Surat Keterangan Catatan Kepolisian (SKCK)
                                </option>
                                <option value="Surat Izin Usaha" {{ ($item->jenis_surat ?? '') == 'Surat Izin Usaha' ? 'selected' : '' }}>
                                    Surat Izin Usaha
                                </option>
                                <option value="Keterangan Kematian" {{ ($item->jenis_surat ?? '') == 'Keterangan Kematian' ? 'selected' : '' }}>
                                    Surat Keterangan Kematian
                                </option>
                            </select>
                        </div>

                        <div class="form-group">
                            <label>Tanggal Pengajuan <span class="text-danger">*</span></label>
                            <input
                                type="date"
                                name="tanggal_pengajuan"
                                class="form-control"
                                value="{{ date('Y-m-d') }}"
                                min="{{ date('Y-m-d') }}"
                                required>
                            <small class="text-muted">Pilih tanggal hari ini atau setelahnya.</small>
                        </div>

                        <div class="mb-3">
                            <label class="form-label">Status</label>
                            <select name="status" id="edit_status" class="form-control" required>
                                <option value="menunggu" {{ ($item->status ?? '') == 'menunggu' ? 'selected' : '' }}>Menunggu</option>
                                <option value="disetujui" {{ ($item->status ?? '') == 'disetujui' ? 'selected' : '' }}>Disetujui</option>
                                <option value="ditolak" {{ ($item->status ?? '') == 'ditolak' ? 'selected' : '' }}>Ditolak</option>
                            </select>
                        </div>

                        <div class="mb-3">
                            <label class="form-label">Keterangan</label>
                            <textarea name="keterangan" id="edit_keterangan" class="form-control" rows="3">{{ $item->keterangan ?? '' }}</textarea>
                        </div>

                        <div class="mb-3">
                            <label class="form-label">Ganti Berkas (PDF)</label>
                            <input type="file" name="berkas_persyaratan" class="form-control" accept="application/pdf">
                            <small class="text-muted">Kosongkan jika tidak ingin mengganti file</small>
                        </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-info text-white">Simpan Perubahan</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div id="deletePengajuanModal" class="modal fade" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <form id="deleteForm" method="POST" style="display: none;">
                    @csrf
                    @method('DELETE')
                </form>
            </div>
        </div>
    </div>

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>

    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

    <script>
        $(document).ready(function() {
            // --- SWEETALERT NOTIFIKASI ---
            @if(session('success'))
            Swal.fire({
                icon: 'success',
                title: 'Berhasil!',
                text: '{{ session("success") }}',
                timer: 2500,
                showConfirmButton: false
            });
            @endif

            @if(session('error'))
            Swal.fire({
                icon: 'error',
                title: 'Gagal!',
                text: '{{ session("error") }}',
                timer: 2500,
                showConfirmButton: false
            });
            @endif

            // --- LOGIKA EDIT PENGAJUAN ---
            $(document).ready(function() {
                $(document).on('click', '.editPengajuanBtn', function(e) {
                    e.preventDefault();

                    // Ambil data JSON dari atribut data-pengajuan di tombol
                    var data = $(this).data('pengajuan');

                    if (data) {
                        // Isi input modal berdasarkan ID (Sesuai HTML Modal kamu)
                        $('#edit_penduduk_id').val(data.penduduk_id);
                        $('#edit_nomor_surat').val(data.nomor_surat);
                        $('#edit_jenis_surat').val(data.jenis_surat);
                        $('#edit_tanggal_pengajuan').val(data.tanggal_pengajuan);
                        $('#edit_status').val(data.status);
                        $('#edit_keterangan').val(data.keterangan);

                        // Update Action Form (Gunakan ID editPengajuanForm)
                        $('#editPengajuanForm').attr('action', '/pengajuan/update/' + data.id);

                        // Munculkan Modal (Gunakan ID editPengajuanModal)
                        $('#editPengajuanModal').modal('show');
                    }
                });
            });
            // --- LOGIKA DELETE ---
            $(document).on('click', '.btn-delete', function(e) {
                e.preventDefault();
                var id = $(this).data('id');

                // SESUAIKAN DENGAN ROUTE: /pengajuan/{id}
                var url = '/pengajuan/' + id;

                Swal.fire({
                    title: 'Hapus Pengajuan?',
                    text: "Data yang dihapus tidak dapat dipulihkan!",
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#d33',
                    confirmButtonText: 'Ya, Hapus!',
                    cancelButtonText: 'Batal'
                }).then((result) => {
                    if (result.isConfirmed) {
                        // Berikan URL ke form tersembunyi lalu submit
                        $('#deleteForm').attr('action', url).submit();
                    }
                });
            });
        });
    </script>
    <script>
        $(document).ready(function() {
            // --- LOGIKA DELETE PENGAJUAN ---
            $(document).on('click', '.btn-delete-pengajuan', function() {
                // Ambil ID dari atribut data-id pada tombol
                var id = $(this).data('id');

                // Set URL action pada form modal hapus
                // Pastikan route-nya sesuai dengan yang ada di web.php (prefix pengajuan)
                $('#deleteForm').attr('action', '/pengajuan/' + id);

                // Munculkan modal (Opsional jika tidak pakai atribut data-bs-toggle)
                $('#deletePengajuanModal').modal('show');
            });
        });
    </script>
</body>



</html>