@extends('adminlte::page')

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

{{-- Aktifkan Plugin Select2 --}}
@section('plugins.Select2', true)

@section('content_header')
    <div class="d-flex justify-content-between align-items-center">
        <div>
            <h1 class="text-dark font-weight-bold" style="font-family: 'Poppins', sans-serif;">Jadwal Pelajaran Baru</h1>
            <ol class="breadcrumb bg-transparent p-0 mt-1">
                <li class="breadcrumb-item"><a href="{{ route('pesantren.dashboard') }}">Dashboard</a></li>
                <li class="breadcrumb-item"><a href="{{ route('pesantren.jadwal.index') }}">Jadwal Diniyah</a></li>
                <li class="breadcrumb-item active">Tambah Baru</li>
            </ol>
        </div>
    </div>
@stop

@section('content')
<form action="{{ route('pesantren.jadwal.store') }}" method="POST">
    @csrf

    {{-- 1. ERROR HANDLING (PENTING: Agar tahu kenapa data tidak tersimpan) --}}
    @if ($errors->any())
        <div class="alert alert-danger border-0 shadow-sm mb-4" style="border-radius: 15px;">
            <div class="d-flex align-items-center">
                <i class="fas fa-exclamation-triangle fa-2x mr-3"></i>
                <div>
                    <h5 class="font-weight-bold mb-1">Gagal Menyimpan!</h5>
                    <ul class="mb-0 pl-3 small">
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            </div>
        </div>
    @endif

    {{-- Alert Error dari Controller (Misal: Jadwal Bentrok) --}}
    @if (session('error'))
        <div class="alert alert-danger border-0 shadow-sm mb-4" style="border-radius: 15px;">
            <div class="d-flex align-items-center">
                <i class="fas fa-ban fa-2x mr-3"></i>
                <div>
                    <h5 class="font-weight-bold mb-1">Terjadi Kesalahan</h5>
                    <p class="mb-0 small">{{ session('error') }}</p>
                </div>
            </div>
        </div>
    @endif

    <div class="row">
        
        {{-- KOLOM KIRI: FORM INPUT UTAMA --}}
        <div class="col-md-8">
            
            <div class="card border-0 shadow-sm mb-4" style="border-radius: 15px;">
                <div class="card-header bg-white py-3">
                    <h3 class="card-title font-weight-bold text-primary">
                        <i class="far fa-clock mr-2"></i> Waktu & Pelaksanaan
                    </h3>
                </div>
                <div class="card-body">
                    
                    {{-- 1. PILIH HARI --}}
                    <div class="form-group mb-4">
                        <label>Hari Pelaksanaan <span class="text-danger">*</span></label>
                        <div class="input-group">
                            <div class="input-group-prepend">
                                <span class="input-group-text bg-light border-0"><i class="fas fa-calendar-day text-muted"></i></span>
                            </div>
                            <select name="hari" class="form-control select2 bg-light border-0" data-placeholder="Pilih Hari...">
                                <option value=""></option>
                                @foreach($hari_list as $h)
                                    <option value="{{ $h }}" {{ old('hari') == $h ? 'selected' : '' }}>{{ $h }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>

                    {{-- 2. JAM MULAI & SELESAI --}}
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>Jam Mulai <span class="text-danger">*</span></label>
                                <div class="input-group">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text bg-light border-0"><i class="far fa-play-circle text-success"></i></span>
                                    </div>
                                    <input type="time" name="jam_mulai" value="{{ old('jam_mulai') }}" class="form-control bg-light border-0" required>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>Jam Selesai <span class="text-danger">*</span></label>
                                <div class="input-group">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text bg-light border-0"><i class="far fa-stop-circle text-danger"></i></span>
                                    </div>
                                    <input type="time" name="jam_selesai" value="{{ old('jam_selesai') }}" class="form-control bg-light border-0" required>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>

            <div class="card border-0 shadow-sm" style="border-radius: 15px;">
                <div class="card-header bg-white py-3">
                    <h3 class="card-title font-weight-bold text-info">
                        <i class="fas fa-graduation-cap mr-2"></i> Detail Akademik
                    </h3>
                </div>
                <div class="card-body">

                    {{-- 3. KELAS / HALAQAH --}}
                    <div class="form-group">
                        <label>Kelas / Halaqah <span class="text-danger">*</span></label>
                        <div class="input-group">
                            <div class="input-group-prepend">
                                <span class="input-group-text bg-light border-0"><i class="fas fa-chalkboard text-muted"></i></span>
                            </div>
                            <select name="halaqah_id" class="form-control select2 bg-light border-0" data-placeholder="Pilih Kelas...">
                                <option value=""></option>
                                @foreach($halaqahs as $h)
                                    <option value="{{ $h->id }}" {{ old('halaqah_id') == $h->id ? 'selected' : '' }}>
                                        {{ $h->nama_halaqah }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                    </div>

                    {{-- 4. MAPEL & USTADZ --}}
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>Mata Pelajaran (Kitab) <span class="text-danger">*</span></label>
                                <div class="input-group">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text bg-light border-0"><i class="fas fa-book text-muted"></i></span>
                                    </div>
                                    <select name="mapel_id" class="form-control select2 bg-light border-0" data-placeholder="Cari Kitab...">
                                        <option value=""></option>
                                        @foreach($mapels as $m)
                                            <option value="{{ $m->id }}" {{ old('mapel_id') == $m->id ? 'selected' : '' }}>
                                                {{-- Menggunakan nama_kitab sesuai database --}}
                                                {{ $m->nama_kitab ?? $m->nama_mapel }} ({{ $m->tingkat }})
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>Ustadz Pengajar <span class="text-danger">*</span></label>
                                <div class="input-group">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text bg-light border-0"><i class="fas fa-user-tie text-muted"></i></span>
                                    </div>
                                    <select name="ustadz_id" class="form-control select2 bg-light border-0" data-placeholder="Pilih Ustadz...">
                                        <option value=""></option>
                                        @foreach($ustadzs as $u)
                                            <option value="{{ $u->id }}" {{ old('ustadz_id') == $u->id ? 'selected' : '' }}>
                                                {{ $u->user->name ?? 'Tanpa Nama' }} ({{ $u->bidang_keahlian ?? '-' }})
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>

        {{-- KOLOM KANAN: TOMBOL AKSI & INFO --}}
        <div class="col-md-4">
            
            {{-- CARD AKSI --}}
            <div class="card border-0 shadow-sm mb-3" style="border-radius: 15px;">
                <div class="card-body">
                    <button type="submit" class="btn btn-primary btn-block shadow rounded-pill font-weight-bold py-2 mb-2">
                        <i class="fas fa-save mr-2"></i> Simpan Jadwal
                    </button>
                    <a href="{{ route('pesantren.jadwal.index') }}" class="btn btn-outline-secondary btn-block rounded-pill">
                        <i class="fas fa-arrow-left mr-1"></i> Batal / Kembali
                    </a>
                </div>
            </div>

            {{-- CARD INFO --}}
            <div class="card bg-light-info border-0 shadow-none mb-3" style="border-radius: 15px; background-color: #e3f2fd;">
                <div class="card-body">
                    <h5 class="text-primary font-weight-bold mb-3"><i class="fas fa-info-circle mr-2"></i> Panduan Jadwal</h5>
                    <ul class="pl-3 small text-muted mb-0" style="line-height: 1.6;">
                        <li><strong>Hari & Jam:</strong> Tentukan waktu pelaksanaan KBM dengan tepat.</li>
                        <li><strong>Bentrok Jadwal:</strong> Sistem akan otomatis menolak jika Ustadz mengajar di tempat lain pada jam yang sama.</li>
                        <li><strong>Mapel:</strong> Pastikan Kitab/Mapel sesuai dengan jenjang Halaqah.</li>
                    </ul>
                </div>
            </div>

        </div>
    </div>
</form>
@stop

@section('css')
<style>
    /* 1. Styling Input Modern (Clean & Light) */
    .form-control.bg-light { 
        background-color: #f8f9fa !important; 
        transition: all 0.3s ease; 
        height: 45px; /* Sedikit lebih tinggi agar nyaman */
        border: 1px solid transparent;
    }
    
    .form-control.bg-light:focus { 
        background-color: #fff !important; 
        border-color: #cce5ff;
        box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1); 
    }

    /* 2. Styling Ikon Input Group */
    .input-group-text.bg-light {
        background-color: #f8f9fa !important;
        border: none;
        padding-left: 15px;
        padding-right: 15px;
        color: #6c757d;
    }
    
    /* 3. Styling Select2 agar menyatu dengan desain bg-light */
    .select2-container .select2-selection--single { 
        height: 45px !important; 
        border: none !important; 
        background-color: #f8f9fa !important; 
        padding-top: 8px;
        padding-left: 0;
    }
    
    .select2-container--default .select2-selection--single .select2-selection__arrow {
        height: 44px;
    }

    /* 4. Shadow & Border Radius global */
    .shadow-sm {
        box-shadow: 0 .125rem .25rem rgba(0,0,0,.075)!important;
    }
</style>
@stop

@section('js')
<script>
    $(document).ready(function() {
        // Inisialisasi Select2
        $('.select2').select2({
            theme: 'bootstrap4',
            width: '100%',
            allowClear: true
        });
    });
</script>
@stop