{{-- resources/views/admin/alokasi-waktu/index.blade.php --}}
@extends('admin.layouts.app')
@section('title', 'Data Alokasi Waktu')
@section('content')
<div class="container-fluid py-4">
    <div class="mb-4">
        <h4 class="mb-1 fw-bold">Manajemen Alokasi Waktu</h4>
        <p class="text-muted mb-0" style="font-size: 14px;">Pilih jenjang pendidikan di bawah ini untuk mengelola daftar durasi jam pelajarannya.</p>
    </div>

    @include('admin.alokasi-waktu.layout-menu')

    <div class="row g-4">
        <div class="col-md-3">
            <div class="card shadow-sm border-0 sticky-top" style="top: 20px;">
                <div class="card-header bg-white border-bottom py-3">
                    <h6 class="mb-0 fw-bold text-primary"><i class="bi bi-layers me-2"></i>Pilih Jenjang</h6>
                </div>
                <div class="card-body p-2">
                    @if(isset($jenjangs) && $jenjangs->count() > 0)
                        <ul class="nav nav-pills flex-column">
                            @foreach($jenjangs as $jm)
                                <li class="nav-item mb-1">
                                    <a class="nav-link px-3 py-2 {{ $jm->id == $currentJenjang->id ? 'active fw-bold shadow-sm' : 'text-dark hover-bg-light' }}" 
                                       href="{{ route('admin.alokasi-waktu.jenjang', $jm->id) }}"
                                       style="border-radius: 6px; font-size: 14px;">
                                        <i class="bi bi-clock-history me-2"></i> Waktu {{ $jm->nama_jenjang }}
                                    </a>
                                </li>
                            @endforeach
                        </ul>
                    @else
                        <p class="text-muted small text-center mb-0 py-3">Belum ada jenjang pendidikan.</p>
                    @endif
                </div>
            </div>
        </div>

        <div class="col-md-9">
            <div class="d-flex justify-content-between align-items-center mb-3">
                <h5 class="fw-bold text-primary mb-0 border-start border-4 border-primary ps-2">Daftar Waktu: {{ $currentJenjang->nama_jenjang }}</h5>
                <button type="button" class="btn btn-primary btn-sm shadow-sm" data-bs-toggle="modal" data-bs-target="#modalTambah">
                    <i class="bi bi-plus-circle me-1"></i> Tambah Alokasi
                </button>
            </div>

            <div class="nav-wrapper position-relative mb-2">
                <ul class="nav nav-pills p-1 bg-white border rounded-3 shadow-sm d-flex flex-nowrap overflow-auto" role="tablist" style="scrollbar-width: none;">
                    <li class="nav-item" role="presentation">
                        <button class="nav-link active px-3 py-1 btn-filter-hari fw-bold shadow-sm" data-hari="semua" style="border-radius: 6px; font-size: 13px;">Semua Hari</button>
                    </li>
                    @foreach($haris as $h)
                    <li class="nav-item" role="presentation">
                        <button class="nav-link px-3 py-1 btn-filter-hari text-dark" data-hari="{{ $h->id }}" style="border-radius: 6px; font-size: 13px;">{{ $h->nama_hari }}</button>
                    </li>
                    @endforeach
                </ul>
            </div>

            <div class="nav-wrapper position-relative mb-3">
                <ul class="nav nav-pills p-1 bg-light border rounded-3 d-flex flex-nowrap overflow-auto" role="tablist" style="scrollbar-width: none;">
                    <li class="nav-item" role="presentation">
                        <button class="nav-link active px-3 py-1 btn-filter-kategori fw-bold shadow-sm bg-secondary text-white" data-kategori="semua" style="border-radius: 6px; font-size: 12px;">Semua Sesi</button>
                    </li>
                    @foreach($kategoris as $k)
                    <li class="nav-item" role="presentation">
                        <button class="nav-link px-3 py-1 btn-filter-kategori text-secondary" data-kategori="{{ $k->id }}" style="border-radius: 6px; font-size: 12px;">{{ $k->nama_kategori }}</button>
                    </li>
                    @endforeach
                </ul>
            </div>

            <div class="card shadow-sm border-0">
                <div class="card-body p-0">
                    <div class="table-responsive">
                        <table class="table table-hover table-bordered align-middle mb-0" style="font-size: 14px;">
                            <thead class="table-light">
                                <tr style="font-size: 13px;">
                                    <th class="text-center" width="5%">NO</th>
                                    <th width="15%">HARI</th>
                                    <th width="15%">KATEGORI</th>
                                    <th width="20%">DURASI WAKTU</th>
                                    <th width="20%">STATUS PENGGUNAAN</th>
                                    <th>KETERANGAN</th>
                                    <th class="text-center" width="10%">AKSI</th>
                                </tr>
                            </thead>
                            <tbody>
                                @php $nomor = 1; @endphp
                                @forelse($alokasiWaktus as $waktu)
                                <tr class="row-alokasi" data-hari-id="{{ $waktu->hari_id }}" data-kategori-id="{{ $waktu->kategori_id }}">
                                    <td class="text-center text-muted row-nomor">{{ $nomor++ }}</td>
                                    <td class="text-dark fw-medium">{{ $waktu->hari->nama_hari ?? 'Error/Deleted' }}</td>
                                    <td><span class="badge bg-secondary">{{ $waktu->kategori->nama_kategori ?? '-' }}</span></td>
                                    <td class="text-success fw-bold">
                                        @if($waktu->durasi)
                                            {{ \Carbon\Carbon::parse($waktu->durasi->jam_mulai)->format('H:i') }} - 
                                            {{ \Carbon\Carbon::parse($waktu->durasi->jam_selesai)->format('H:i') }}
                                        @endif
                                    </td>
                                    <td>
                                        @if($waktu->is_mapel == 1)
                                            <span class="badge bg-primary bg-opacity-10 text-primary border border-primary"><i class="bi bi-book"></i> Mapel</span>
                                        @else
                                            <span class="badge bg-danger bg-opacity-10 text-danger border border-danger">
                                                <i class="bi bi-cup-hot"></i> {{ $waktu->status_custom ?? 'Lainya' }}
                                            </span>
                                        @endif
                                    </td>
                                    <td class="text-muted">{{ $waktu->keterangan ?? '-' }}</td>
                                    <td class="text-center">
                                        <button type="button" class="btn btn-sm btn-outline-primary" data-bs-toggle="modal" data-bs-target="#modalEdit{{ $waktu->id }}">
                                            <i class="bi bi-pencil-square"></i>
                                        </button>
                                        <form action="{{ route('admin.alokasi-waktu.destroy', $waktu->id) }}" method="POST" id="form-delete-{{ $waktu->id }}" class="d-inline">
                                            @csrf @method('DELETE')
                                            <button type="button" class="btn btn-sm btn-outline-danger" onclick="confirmDelete({{ $waktu->id }}, 'Alokasi Waktu Ini')">
                                                <i class="bi bi-trash"></i>
                                            </button>
                                        </form>
                                    </td>
                                </tr>
                                @empty
                                <tr><td colspan="7" class="text-center py-5 text-muted row-kosong">Belum ada alokasi waktu.</td></tr>
                                @endforelse
                                <tr id="row_not_found" style="display: none;"><td colspan="7" class="text-center py-4 text-muted fst-italic">Data tidak ditemukan pada filter ini.</td></tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="modalTambah" tabindex="-1">
    <div class="modal-dialog modal-xl">
        <form action="{{ route('admin.alokasi-waktu.store') }}" method="POST">
            @csrf
            <input type="hidden" name="jenjang_id" value="{{ $currentJenjang->id }}">
            <div class="modal-content border-0 shadow">
                <div class="modal-header bg-light">
                    <h5 class="modal-title fw-bold">Tambah Alokasi ({{ $currentJenjang->nama_jenjang }})</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body bg-white p-4">
                    <div class="row g-4 mb-4">
                        <div class="col-md-3">
                            <label class="form-label fw-bold">1. Pilih Hari</label>
                            <div class="table-responsive border rounded" style="max-height: 250px; overflow-y: auto;">
                                <table class="table table-sm table-hover mb-0">
                                    <thead class="table-light position-sticky top-0">
                                        <tr><th width="30%" class="text-center">Pilih</th><th>Nama Hari</th></tr>
                                    </thead>
                                    <tbody>
                                        @foreach($haris as $h)
                                        <tr>
                                            <td class="text-center"><input class="form-check-input" type="checkbox" name="hari_id[]" value="{{ $h->id }}"></td>
                                            <td>{{ $h->nama_hari }}</td>
                                        </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>

                        <div class="col-md-4">
                            <label class="form-label fw-bold">2. Pilih Kategori</label>
                            <div class="table-responsive border rounded" style="max-height: 250px; overflow-y: auto;">
                                <table class="table table-sm table-hover mb-0">
                                    <thead class="table-light position-sticky top-0">
                                        <tr><th width="30%" class="text-center">Pilih</th><th>Kategori</th></tr>
                                    </thead>
                                    <tbody>
                                        @foreach($kategoris as $k)
                                        <tr>
                                            <td class="text-center"><input class="form-check-input" type="checkbox" name="kategori_id[]" value="{{ $k->id }}"></td>
                                            <td>{{ $k->nama_kategori }}</td>
                                        </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>

                        <div class="col-md-5">
                            <label class="form-label fw-bold">3. Pilih Durasi Waktu</label>
                            <div class="table-responsive border rounded" style="max-height: 250px; overflow-y: auto;">
                                <table class="table table-sm table-hover mb-0">
                                    <thead class="table-light position-sticky top-0">
                                        <tr><th width="20%" class="text-center">Pilih</th><th>Jam Mulai</th><th>Jam Selesai</th></tr>
                                    </thead>
                                    <tbody>
                                        @foreach($durasis as $d)
                                        <tr>
                                            <td class="text-center"><input class="form-check-input" type="checkbox" name="durasi_id[]" value="{{ $d->id }}"></td>
                                            <td>{{ \Carbon\Carbon::parse($d->jam_mulai)->format('H:i') }}</td>
                                            <td>{{ \Carbon\Carbon::parse($d->jam_selesai)->format('H:i') }}</td>
                                        </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>

                    <hr class="my-4">

                    <div class="row g-4">
                        <div class="col-md-4">
                            <label class="form-label fw-bold">4. Status Penggunaan</label>
                            <select name="is_mapel" class="form-select select-penggunaan" data-target="status_tambahan_tambah" required>
                                <option value="" disabled selected>-- Pilih Status --</option>
                                <option value="1">Diisi Mata Pelajaran</option>
                                <option value="0">Diisi Lainya</option>
                            </select>
                        </div>
                        
                        <div class="col-md-4" id="status_tambahan_tambah" style="display: none;">
                            <label class="form-label fw-bold text-danger">Tulis Status Lainya</label>
                            <input type="text" name="status_custom" class="form-control input-status" placeholder="Cth: Istirahat, Upacara, Senam">
                        </div>

                        <div class="col-md-4">
                            <label class="form-label fw-bold">5. Keterangan Tambahan</label>
                            <input type="text" name="keterangan" class="form-control" placeholder="Cth: Di Lapangan Utama">
                            <small class="text-muted" style="font-size: 11px;">Opsional.</small>
                        </div>
                    </div>

                </div>
                <div class="modal-footer bg-light">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
                    <button type="submit" class="btn btn-primary"><i class="bi bi-save me-1"></i> Simpan Alokasi Massal</button>
                </div>
            </div>
        </form>
    </div>
</div>

@foreach($alokasiWaktus as $waktu)
<div class="modal fade" id="modalEdit{{ $waktu->id }}" tabindex="-1">
    <div class="modal-dialog modal-xl">
        <form action="{{ route('admin.alokasi-waktu.update', $waktu->id) }}" method="POST">
            @csrf @method('PUT')
            <div class="modal-content border-0 shadow">
                <div class="modal-header bg-light">
                    <h5 class="modal-title fw-bold">Edit Alokasi Tunggal</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body bg-white p-4">
                    <div class="row g-4 mb-4">
                        <div class="col-md-3">
                            <label class="form-label fw-bold">1. Pilih Hari</label>
                            <div class="table-responsive border rounded" style="max-height: 250px; overflow-y: auto;">
                                <table class="table table-sm table-hover mb-0">
                                    <thead class="table-light position-sticky top-0">
                                        <tr><th width="30%" class="text-center">Pilih</th><th>Nama Hari</th></tr>
                                    </thead>
                                    <tbody>
                                        @foreach($haris as $h)
                                        <tr>
                                            <td class="text-center">
                                                <input class="form-check-input" type="radio" name="hari_id" value="{{ $h->id }}" {{ $waktu->hari_id == $h->id ? 'checked' : '' }} required>
                                            </td>
                                            <td>{{ $h->nama_hari }}</td>
                                        </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>

                        <div class="col-md-4">
                            <label class="form-label fw-bold">2. Pilih Kategori</label>
                            <div class="table-responsive border rounded" style="max-height: 250px; overflow-y: auto;">
                                <table class="table table-sm table-hover mb-0">
                                    <thead class="table-light position-sticky top-0">
                                        <tr><th width="30%" class="text-center">Pilih</th><th>Kategori</th></tr>
                                    </thead>
                                    <tbody>
                                        @foreach($kategoris as $k)
                                        <tr>
                                            <td class="text-center">
                                                <input class="form-check-input" type="radio" name="kategori_id" value="{{ $k->id }}" {{ $waktu->kategori_id == $k->id ? 'checked' : '' }} required>
                                            </td>
                                            <td>{{ $k->nama_kategori }}</td>
                                        </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>

                        <div class="col-md-5">
                            <label class="form-label fw-bold">3. Pilih Durasi Waktu</label>
                            <div class="table-responsive border rounded" style="max-height: 250px; overflow-y: auto;">
                                <table class="table table-sm table-hover mb-0">
                                    <thead class="table-light position-sticky top-0">
                                        <tr><th width="20%" class="text-center">Pilih</th><th>Jam Mulai</th><th>Jam Selesai</th></tr>
                                    </thead>
                                    <tbody>
                                        @foreach($durasis as $d)
                                        <tr>
                                            <td class="text-center">
                                                <input class="form-check-input" type="radio" name="durasi_id" value="{{ $d->id }}" {{ $waktu->durasi_id == $d->id ? 'checked' : '' }} required>
                                            </td>
                                            <td>{{ \Carbon\Carbon::parse($d->jam_mulai)->format('H:i') }}</td>
                                            <td>{{ \Carbon\Carbon::parse($d->jam_selesai)->format('H:i') }}</td>
                                        </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>

                    <hr class="my-4">

                    <div class="row g-4">
                        <div class="col-md-4">
                            <label class="form-label fw-bold">4. Status Penggunaan</label>
                            <select name="is_mapel" class="form-select select-penggunaan" data-target="status_tambahan_edit_{{ $waktu->id }}" required>
                                <option value="1" {{ $waktu->is_mapel == 1 ? 'selected' : '' }}>Diisi Mata Pelajaran</option>
                                <option value="0" {{ $waktu->is_mapel == 0 ? 'selected' : '' }}>Diisi Lainya</option>
                            </select>
                        </div>
                        
                        <div class="col-md-4" id="status_tambahan_edit_{{ $waktu->id }}" style="display: {{ $waktu->is_mapel == 0 ? 'block' : 'none' }};">
                            <label class="form-label fw-bold text-danger">Tulis Status Lainya</label>
                            <input type="text" name="status_custom" class="form-control input-status" value="{{ $waktu->status_custom }}">
                        </div>

                        <div class="col-md-4">
                            <label class="form-label fw-bold">5. Keterangan Tambahan</label>
                            <input type="text" name="keterangan" class="form-control" value="{{ $waktu->keterangan }}">
                            <small class="text-muted" style="font-size: 11px;">Opsional.</small>
                        </div>
                    </div>
                </div>
                <div class="modal-footer bg-light">
                    <button type="submit" class="btn btn-primary"><i class="bi bi-save me-1"></i> Update Alokasi</button>
                </div>
            </div>
        </form>
    </div>
</div>
@endforeach

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
    function confirmDelete(id, nama) {
        Swal.fire({
            title: 'Hapus ' + nama + '?',
            text: "Data yang dihapus tidak dapat dikembalikan!",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#d33',
            cancelButtonColor: '#6c757d',
            confirmButtonText: 'Ya, Hapus!',
            cancelButtonText: 'Batal'
        }).then((result) => {
            if (result.isConfirmed) {
                document.getElementById('form-delete-' + id).submit();
            }
        });
    }

    document.addEventListener("DOMContentLoaded", function() {
        
        let currentHari = 'semua';
        let currentKategori = 'semua';
        const rows = document.querySelectorAll('.row-alokasi');
        const rowNotFound = document.getElementById('row_not_found');

        function applyFilter() {
            let visibleCount = 0;
            let counter = 1;

            rows.forEach(row => {
                const rowHari = row.getAttribute('data-hari-id');
                const rowKategori = row.getAttribute('data-kategori-id');
                
                const matchHari = (currentHari === 'semua' || rowHari === currentHari);
                const matchKategori = (currentKategori === 'semua' || rowKategori === currentKategori);

                if (matchHari && matchKategori) {
                    row.style.display = '';
                    row.querySelector('.row-nomor').innerText = counter++; 
                    visibleCount++;
                } else {
                    row.style.display = 'none';
                }
            });

            if(visibleCount === 0 && rows.length > 0) {
                rowNotFound.style.display = '';
            } else {
                rowNotFound.style.display = 'none';
            }
        }

        const btnFiltersHari = document.querySelectorAll('.btn-filter-hari');
        btnFiltersHari.forEach(btn => {
            btn.addEventListener('click', function() {
                btnFiltersHari.forEach(b => {
                    b.classList.remove('active', 'fw-bold', 'shadow-sm');
                    b.classList.add('text-dark');
                });
                this.classList.add('active', 'fw-bold', 'shadow-sm');
                this.classList.remove('text-dark');
                
                currentHari = this.getAttribute('data-hari');
                applyFilter();
            });
        });

        const btnFiltersKategori = document.querySelectorAll('.btn-filter-kategori');
        btnFiltersKategori.forEach(btn => {
            btn.addEventListener('click', function() {
                btnFiltersKategori.forEach(b => {
                    b.classList.remove('active', 'fw-bold', 'shadow-sm', 'bg-secondary', 'text-white');
                    b.classList.add('text-secondary');
                });
                this.classList.add('active', 'fw-bold', 'shadow-sm', 'bg-secondary', 'text-white');
                this.classList.remove('text-secondary');
                
                currentKategori = this.getAttribute('data-kategori');
                applyFilter();
            });
        });

        const selects = document.querySelectorAll('.select-penggunaan');
        selects.forEach(select => {
            select.addEventListener('change', function() {
                const targetId = this.getAttribute('data-target');
                const targetContainer = document.getElementById(targetId);
                const targetInput = targetContainer.querySelector('.input-status');

                if (this.value === '0') {
                    targetContainer.style.display = 'block';
                    targetInput.setAttribute('required', 'required');
                } else {
                    targetContainer.style.display = 'none';
                    targetInput.removeAttribute('required');
                    targetInput.value = ''; 
                }
            });
            
            if(select.value === '0') {
                const targetId = select.getAttribute('data-target');
                const targetContainer = document.getElementById(targetId);
                const targetInput = targetContainer.querySelector('.input-status');
                
                targetContainer.style.display = 'block';
                targetInput.setAttribute('required', 'required');
            }
        });

        @if(session('success'))
            Swal.fire({ icon: 'success', title: 'Berhasil!', text: '{!! session('success') !!}', showConfirmButton: false, timer: 2000 });
        @endif

        @if($errors->any())
            Swal.fire({ icon: 'error', title: 'Gagal Menyimpan!', html: '<ul class="text-start mb-0">@foreach($errors->all() as $error)<li>{{ $error }}</li>@endforeach</ul>' });
        @endif
    });
</script>
@endpush
@endsection