@extends('adminlte::page')

@section('title', 'Jadwal Pelajaran | Smart Pesantren')

@section('content_header')
    <div class="d-flex justify-content-between align-items-center mb-3">
        <div>
            <h1 class="text-dark font-weight-bold" style="font-family: 'Poppins', sans-serif; font-size: 1.6rem;">Manajemen Jadwal</h1>
            <p class="text-muted small mb-0">Atur jadwal pelajaran diniyah harian di sini.</p>
        </div>
        <div class="d-flex align-items-center">
            <span class="text-muted small mr-2 d-none d-md-block">
                <a href="{{ route('pesantren.dashboard') }}" class="text-muted">Home</a> / Jadwal
            </span>
            <a href="{{ route('pesantren.jadwal.create') }}" class="btn btn-primary rounded-pill px-4 font-weight-bold shadow-sm">
                <i class="fas fa-plus mr-2"></i> Buat Jadwal
            </a>
        </div>
    </div>
@stop

@section('content')
<div class="container-fluid p-0">

    {{-- FLASH MESSAGE --}}
    @if(session('success'))
        <div class="alert alert-success border-0 shadow-sm rounded-pill alert-dismissible fade show mb-4" role="alert">
            <i class="fas fa-check-circle mr-2"></i> {{ session('success') }}
            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
    @endif

    {{-- MAIN CARD --}}
    <div class="card border-0 shadow-sm" style="border-radius: 15px;">
        
        {{-- HEADER FILTER & SEARCH --}}
        <div class="card-header bg-white py-3 border-bottom-0">
            <div class="row align-items-center">
                {{-- NAVIGASI HARI (Filter Utama) --}}
                <div class="col-md-9">
                    <ul class="nav nav-pills bg-light rounded-pill p-1 d-inline-flex" id="dayTabs">
                        @foreach(['Senin', 'Selasa', 'Rabu', 'Kamis', 'Jumat', 'Sabtu', 'Ahad'] as $h)
                            <li class="nav-item">
                                <a href="{{ route('pesantren.jadwal.index', ['hari' => $h]) }}" 
                                   class="nav-link rounded-pill px-4 {{ $hari == $h ? 'active shadow-sm font-weight-bold' : 'text-muted' }}"
                                   style="transition: all 0.3s; font-size: 0.9rem;">
                                   {{ $h }}
                                </a>
                            </li>
                        @endforeach
                    </ul>
                </div>

                {{-- SEARCH / FILTER TAMBAHAN (Opsional, Pemanis UI) --}}
                <div class="col-md-3 text-right">
                    <div class="input-group">
                        <input type="text" class="form-control border-0 bg-light rounded-pill-left" placeholder="Cari Mapel/Ustadz..." style="border-top-right-radius: 0; border-bottom-right-radius: 0;">
                        <div class="input-group-append">
                            <span class="input-group-text bg-light border-0 rounded-pill-right text-muted">
                                <i class="fas fa-search"></i>
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {{-- BODY TABLE --}}
        <div class="card-body p-0">
            
            @if($jadwals->isEmpty())
                <div class="text-center py-5">
                    <div class="bg-light rounded-circle d-inline-flex align-items-center justify-content-center mb-3" style="width: 80px; height: 80px;">
                        <i class="far fa-calendar-times fa-3x text-muted opacity-25"></i>
                    </div>
                    <h6 class="text-dark font-weight-bold">Tidak ada jadwal hari {{ $hari }}</h6>
                    <p class="text-muted small mb-3">Silakan pilih hari lain atau buat baru.</p>
                </div>
            @else
                <div class="table-responsive">
                    <table class="table table-hover align-middle mb-0" style="border-collapse: separate; border-spacing: 0;">
                        <thead class="bg-light">
                            <tr class="text-uppercase text-muted small font-weight-bold" style="letter-spacing: 0.5px;">
                                <th class="border-0 pl-4 py-3" width="5%">No</th>
                                <th class="border-0 py-3" width="15%">Waktu</th>
                                <th class="border-0 py-3" width="25%">Mata Pelajaran</th>
                                <th class="border-0 py-3" width="15%">Kelas</th>
                                <th class="border-0 py-3" width="25%">Pengajar</th>
                                <th class="border-0 py-3 text-center" width="10%">Status</th>
                                <th class="border-0 py-3 text-center" width="5%">Aksi</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($jadwals as $index => $jadwal)
                            <tr class="border-bottom-light">
                                <td class="pl-4 text-muted font-weight-bold">{{ $loop->iteration }}</td>
                                
                                {{-- WAKTU --}}
                                <td>
                                    <span class="badge badge-light-primary text-primary px-3 py-2 rounded-pill font-weight-bold" style="font-size: 0.85rem;">
                                        {{ \Carbon\Carbon::parse($jadwal->jam_mulai)->format('H:i') }} - {{ \Carbon\Carbon::parse($jadwal->jam_selesai)->format('H:i') }}
                                    </span>
                                </td>

                                {{-- MAPEL --}}
                                <td>
                                    <div class="d-flex align-items-center">
                                        <div class="bg-light-info rounded p-2 mr-3 text-info">
                                            <i class="fas fa-book"></i>
                                        </div>
                                        <div>
                                            <span class="d-block font-weight-bold text-dark">{{ $jadwal->mapel->nama_kitab ?? $jadwal->mapel->nama_mapel }}</span>
                                            <span class="d-block text-muted small">Tingkat: {{ $jadwal->mapel->tingkat ?? '-' }}</span>
                                        </div>
                                    </div>
                                </td>

                                {{-- KELAS --}}
                                <td>
                                    <span class="font-weight-bold text-dark">{{ $jadwal->halaqah->nama_halaqah }}</span>
                                </td>

                                {{-- USTADZ --}}
                                <td>
                                    <div class="d-flex align-items-center">
                                        <div class="bg-light-secondary rounded-circle mr-2 d-flex align-items-center justify-content-center text-secondary" style="width:30px; height:30px; font-size: 0.8rem;">
                                            {{ substr($jadwal->ustadz->user->name ?? 'U', 0, 1) }}
                                        </div>
                                        <span class="text-dark font-weight-500">{{ $jadwal->ustadz->user->name ?? 'User Dihapus' }}</span>
                                    </div>
                                </td>

                                {{-- STATUS (Aktif) --}}
                                <td class="text-center">
                                    <span class="badge badge-light-success text-success px-2 py-1 rounded">Aktif</span>
                                </td>

                                {{-- AKSI (Titik Tiga) --}}
                                <td class="text-center">
                                    <div class="dropdown">
                                        <button class="btn btn-sm btn-light rounded-circle shadow-none" type="button" data-toggle="dropdown">
                                            <i class="fas fa-ellipsis-h text-muted"></i>
                                        </button>
                                        <div class="dropdown-menu dropdown-menu-right border-0 shadow-lg rounded-lg">
                                            <form action="{{ route('pesantren.jadwal.destroy', $jadwal->id) }}" method="POST" onsubmit="return confirm('Hapus jadwal ini?');">
                                                @csrf @method('DELETE')
                                                <button type="submit" class="dropdown-item text-danger">
                                                    <i class="fas fa-trash-alt mr-2"></i> Hapus Jadwal
                                                </button>
                                            </form>
                                        </div>
                                    </div>
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            @endif
        </div>
        
        {{-- FOOTER PAGINATION (Placeholder jika nanti pakai paginate) --}}
        <div class="card-footer bg-white border-top-0 py-3">
            <div class="d-flex justify-content-between align-items-center">
                <small class="text-muted">Menampilkan {{ $jadwals->count() }} data jadwal.</small>
            </div>
        </div>

    </div>
</div>
@stop

@section('css')
<style>
    /* Styling Navigasi Tabs (Pills) mirip UI referensi */
    .nav-pills .nav-link.active {
        background-color: #007bff; /* Biru Utama */
        color: #fff !important;
        box-shadow: 0 4px 6px rgba(0, 123, 255, 0.2);
    }
    .nav-pills .nav-link:not(.active) {
        background-color: transparent;
        color: #6c757d;
    }
    .nav-pills .nav-link:not(.active):hover {
        background-color: #e9ecef;
        color: #333;
    }

    /* Warna Badge Soft */
    .badge-light-primary { background-color: #e3f2fd; }
    .badge-light-success { background-color: #d1e7dd; color: #0f5132 !important; }
    .badge-light-info { background-color: #e0f7fa; }
    
    /* Tabel Styling */
    .table thead th { 
        border-bottom: 1px solid #f0f0f0; 
        font-size: 0.75rem; 
        letter-spacing: 0.8px;
    }
    .table td { 
        vertical-align: middle; 
        padding: 15px 25px; 
        border-bottom: 1px solid #f8f9fa;
    }
    .border-bottom-light { border-bottom: 1px solid #f8f9fa; }
    
    /* Input Search Style */
    .rounded-pill-left { border-top-left-radius: 50rem; border-bottom-left-radius: 50rem; }
    .rounded-pill-right { border-top-right-radius: 50rem; border-bottom-right-radius: 50rem; }
    .form-control:focus { box-shadow: none; background-color: #fff; }
</style>
@stop