@extends('layout.app')

@section('content')
<div class="page-header">
    <ol class="breadcrumb">
        <li class="breadcrumb-item">Home</li>
        <li class="breadcrumb-item active">Manajemen Periode</li>
    </ol>
</div>

<div class="row gutters">
    <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
        <div class="card shadow-sm border-0">
            <div class="card-body">
                <div class="mb-3 d-flex justify-content-between align-items-center flex-wrap">
                    <div>
                        <h5 class="mb-0 text-dark font-weight-bold">Daftar Periode Seleksi</h5>
                        <p class="text-muted small mb-0">Kelola periode aktif dan kuota penerima bantuan</p>
                    </div>
                    <div>
                        {{-- Tombol Pemicu Modal Tambah --}}
                        <button type="button" class="btn btn-success btn-sm px-3" data-toggle="modal" data-target="#modalTambah">
                            <i class="icon-plus"></i> Tambah Periode
                        </button>
                    </div>
                </div>

                {{-- Tabel Data Periode --}}
                <div class="table-responsive">
                    <table class="table table-bordered table-striped">
                        <thead class="bg-light">
                            <tr class="text-center">
                                <th width="50">No</th>
                                <th>Nama Periode</th>
                                <th>Kuota (KK)</th>
                                <th>Status</th>
                                <th>Aksi</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($periodes as $p)
                            <tr>
                                <td class="text-center">{{ $loop->iteration }}</td>
                                <td class="font-weight-bold text-dark">{{ $p->nama_periode }}</td>
                                <td class="text-center">{{ $p->kuota }}</td>
                                <td class="text-center">
                                    @if($p->is_aktif)
                                        <span class="badge badge-success px-3 py-2">
                                            <i class="icon-check-circle"></i> AKTIF
                                        </span>
                                    @else
                                        <span class="badge badge-secondary px-3 py-2">Tidak Aktif</span>
                                    @endif
                                </td>
                                <td>
                                    <div class="d-flex justify-content-center gap-2">
                                        {{-- Tombol Aktifkan (Hanya muncul jika tidak aktif) --}}
                                        @if(!$p->is_aktif)
                                        <form action="{{ route('periode.aktifkan', $p->id) }}" method="POST">
                                            @csrf
                                            <button type="submit" class="btn btn-info btn-sm" title="Aktifkan Periode Ini">
                                                <i class="icon-zap"></i>
                                            </button>
                                        </form>
                                        @endif

                                        {{-- Tombol Pemicu Modal Edit --}}
                                        <button type="button" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#modalEdit{{ $p->id }}" title="Edit Data">
                                            <i class="icon-edit"></i>
                                        </button>

                                        {{-- Form Hapus --}}
                                        <form action="{{ route('periode.destroy', $p->id) }}" method="POST" id="delete-form-{{ $p->id }}">
                                            @csrf
                                            @method('DELETE')
                                            <button type="button" class="btn btn-danger btn-sm btn-delete {{ $p->is_aktif ? 'disabled' : '' }}"
                                                data-id="{{ $p->id }}"
                                                title="Hapus Data"
                                                {{ $p->is_aktif ? 'disabled' : '' }}>
                                                <i class="icon-trash"></i>
                                            </button>
                                        </form>
                                    </div>
                                </td>
                            </tr>

                            {{-- MODAL EDIT PERIODE --}}
                            <div class="modal fade" id="modalEdit{{ $p->id }}" tabindex="-1" role="dialog" aria-hidden="true">
                                <div class="modal-dialog" role="document">
                                    <div class="modal-content border-0 shadow-lg">
                                        <div class="modal-header bg-primary text-white">
                                            <h5 class="modal-title">Edit Periode</h5>
                                            <button type="button" class="close text-white" data-dismiss="modal"><span>&times;</span></button>
                                        </div>
                                        <form action="{{ route('periode.update', $p->id) }}" method="POST">
                                            @csrf @method('PUT')
                                            <div class="modal-body">
                                                <div class="form-group">
                                                    <label class="font-weight-bold">Nama Periode</label>
                                                    <input type="text" name="nama_periode" class="form-control" value="{{ $p->nama_periode }}" required>
                                                </div>
                                                <div class="form-group">
                                                    <label class="font-weight-bold">Kuota Penerima (Jumlah KK)</label>
                                                    <input type="number" name="kuota" class="form-control" value="{{ $p->kuota }}" required min="1">
                                                </div>
                                            </div>
                                            <div class="modal-footer bg-light">
                                                <button type="button" class="btn btn-secondary btn-sm" data-dismiss="modal">Batal</button>
                                                <button type="submit" class="btn btn-primary btn-sm">Simpan Perubahan</button>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </div>

                            @empty
                            <tr>
                                <td colspan="5" class="text-center py-4 text-muted">Belum ada data periode.</td>
                            </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

{{-- MODAL TAMBAH PERIODE --}}
<div class="modal fade" id="modalTambah" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content border-0 shadow-lg">
            <div class="modal-header bg-success text-white">
                <h5 class="modal-title">Tambah Periode Baru</h5>
                <button type="button" class="close text-white" data-dismiss="modal"><span>&times;</span></button>
            </div>
            <form action="{{ route('periode.store') }}" method="POST">
                @csrf
                <div class="modal-body">
                    <div class="form-group">
                        <label class="font-weight-bold">Nama Periode</label>
                        <input type="text" name="nama_periode" class="form-control" placeholder="Misal: Januari 2026" required>
                    </div>
                    <div class="form-group">
                        <label class="font-weight-bold">Kuota Penerima (Jumlah KK)</label>
                        <input type="number" name="kuota" class="form-control" placeholder="Masukkan angka kuota" required min="1">
                    </div>
                </div>
                <div class="modal-footer bg-light">
                    <button type="button" class="btn btn-secondary btn-sm" data-dismiss="modal">Batal</button>
                    <button type="submit" class="btn btn-success btn-sm">Simpan Periode</button>
                </div>
            </form>
        </div>
    </div>
</div>

{{-- Script SweetAlert2 --}}
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Konfirmasi Hapus
        const deleteButtons = document.querySelectorAll('.btn-delete');
        deleteButtons.forEach(button => {
            button.addEventListener('click', function() {
                const periodeId = this.getAttribute('data-id');

                Swal.fire({
                    title: 'Hapus Periode?',
                    text: "Data ini akan dihapus secara permanen!",
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#d33',
                    cancelButtonColor: '#3085d6',
                    confirmButtonText: 'Ya, Hapus!',
                    cancelButtonText: 'Batal'
                }).then((result) => {
                    if (result.isConfirmed) {
                        document.getElementById(`delete-form-${periodeId}`).submit();
                    }
                });
            });
        });

        // Notifikasi Sukses/Error
        @if(session('success'))
            Swal.fire({ icon: 'success', title: 'Berhasil!', text: "{{ session('success') }}", timer: 2000, showConfirmButton: false });
        @endif
        @if(session('error'))
            Swal.fire({ icon: 'error', title: 'Gagal!', text: "{{ session('error') }}" });
        @endif
    });
</script>

<style>
    .gap-2 { gap: 0.5rem; }
    .btn-xs { padding: 0.25rem 0.5rem; font-size: 0.75rem; }
</style>
@endsection