@extends('adminlte::page')

@section('title', 'Tambah Santri Baru | Smart Cendekia')

{{-- Aktifkan 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;">
                Tambah Santri
            </h1>
            <p class="text-muted small mb-0">Formulir pendaftaran santri baru (Internal atau Eksternal).</p>
        </div>
        <ol class="breadcrumb bg-transparent p-0 mt-1">
            <li class="breadcrumb-item"><a href="{{ route('dashboard') }}">Dashboard</a></li>
            <li class="breadcrumb-item"><a href="{{ route('pesantren.santri.index') }}">Santri</a></li>
            <li class="breadcrumb-item active">Tambah</li>
        </ol>
    </div>
@stop

@section('content')
<div class="container-fluid pb-4">
    
    {{-- Alert Error Validation --}}
    @if ($errors->any())
        <div class="alert alert-danger alert-dismissible fade show border-0 shadow-sm mb-4" style="border-radius: 10px;" role="alert">
            <div class="d-flex align-items-center">
                <i class="fas fa-exclamation-triangle mr-2 text-lg"></i>
                <span class="font-weight-bold">Terjadi Kesalahan Input!</span>
            </div>
            <ul class="mb-0 mt-2 pl-4 text-sm">
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
    @endif

    <form action="{{ route('pesantren.santri.store') }}" method="POST">
        @csrf
        
        <div class="row">
            {{-- KOLOM KIRI: SUMBER DATA & BIODATA --}}
            <div class="col-lg-8">
                
                {{-- CARD 1: PILIH SUMBER DATA --}}
                <div class="card border-0 shadow-sm mb-4" style="border-radius: 15px;">
                    <div class="card-header bg-white py-3 border-bottom-0" style="border-radius: 15px 15px 0 0;">
                        <h3 class="card-title font-weight-bold text-purple">
                            <i class="fas fa-users-cog mr-2"></i> Sumber Data Santri
                        </h3>
                    </div>
                    <div class="card-body pt-0">
                        <div class="form-group mb-0">
                            <label class="font-weight-bold text-muted text-xs text-uppercase mb-2">Pilih Asal Santri <span class="text-danger">*</span></label>
                            <div class="row no-gutters btn-group-toggle" data-toggle="buttons">
                                <div class="col-md-6 pr-md-2 mb-2 mb-md-0">
                                    <label class="btn btn-outline-purple btn-block p-3 active shadow-sm" style="border-radius: 10px; height: 100%;">
                                        <input type="radio" name="tipe_santri" value="internal" id="option_internal" checked> 
                                        <div class="d-flex align-items-center">
                                            <div class="bg-light-purple p-2 rounded-circle mr-3">
                                                <i class="fas fa-school fa-2x text-purple"></i>
                                            </div>
                                            <div class="text-left">
                                                <span class="font-weight-bold d-block">INTERNAL</span>
                                                <small class="text-muted">Siswa Sekolah Formal</small>
                                            </div>
                                        </div>
                                    </label>
                                </div>
                                <div class="col-md-6 pl-md-2">
                                    <label class="btn btn-outline-success btn-block p-3 shadow-sm" style="border-radius: 10px; height: 100%;">
                                        <input type="radio" name="tipe_santri" value="eksternal" id="option_eksternal"> 
                                        <div class="d-flex align-items-center">
                                            <div class="bg-light-success p-2 rounded-circle mr-3">
                                                <i class="fas fa-globe fa-2x text-success"></i>
                                            </div>
                                            <div class="text-left">
                                                <span class="font-weight-bold d-block">EKSTERNAL</span>
                                                <small class="text-muted">Santri Luar / Diniyah</small>
                                            </div>
                                        </div>
                                    </label>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- CARD 2: FORMULIR DATA --}}
                <div class="card border-0 shadow-sm mb-4" style="border-radius: 15px;">
                    <div class="card-header bg-white py-3 border-bottom-0" style="border-radius: 15px 15px 0 0;">
                        <h3 class="card-title font-weight-bold text-dark">
                            <i class="fas fa-id-card mr-2 text-muted"></i> Biodata Santri
                        </h3>
                    </div>
                    <div class="card-body pt-0">
                        
                        {{-- INFO BOX --}}
                        <div class="alert alert-light-info border-0 rounded-lg d-flex align-items-center p-3 mb-4" id="info_text">
                            <i class="fas fa-info-circle text-info mr-3 fa-lg"></i>
                            <span class="text-dark small">Data akan diambil otomatis dari database <b>Siswa Sekolah</b>.</span>
                        </div>

                        {{-- A. FORM INTERNAL --}}
                        <div id="form_internal">
                            <div class="form-group">
                                <label class="font-weight-bold text-muted text-xs text-uppercase">Cari Siswa <span class="text-danger">*</span></label>
                                <select name="siswa_id" class="form-control select2" style="width: 100%;">
                                    <option value="">-- Ketik Nama Siswa / NIS --</option>
                                    @foreach($siswas as $s)
                                        <option value="{{ $s->id }}" {{ old('siswa_id') == $s->id ? 'selected' : '' }}>
                                            {{ $s->nama_lengkap }} ({{ $s->nis }}) - Kelas {{ $s->kelas->nama_kelas ?? 'Belum Ada' }}
                                        </option>
                                    @endforeach
                                </select>
                                <small class="text-muted mt-1 d-block">Menampilkan siswa aktif yang belum terdaftar di pesantren.</small>
                            </div>
                        </div>

                        {{-- B. FORM EKSTERNAL --}}
                        <div id="form_eksternal" style="display: none;">
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label class="font-weight-bold text-muted text-xs text-uppercase">Nama Lengkap <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 text-muted"></i></span>
                                            </div>
                                            <input type="text" name="nama_manual" class="form-control bg-light border-0 shadow-sm" 
                                                   placeholder="Contoh: Ahmad Zaky" value="{{ old('nama_manual') }}" style="border-radius: 0 10px 10px 0;">
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label class="font-weight-bold text-muted text-xs text-uppercase">NIS Pesantren (Unik) <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-id-badge text-muted"></i></span>
                                            </div>
                                            <input type="text" name="nis_manual" class="form-control bg-light border-0 shadow-sm" 
                                                   placeholder="Contoh: P-2024001" value="{{ old('nis_manual') }}" style="border-radius: 0 10px 10px 0;">
                                        </div>
                                        <small class="text-muted">Digunakan sebagai <b>Username Login</b>.</small>
                                    </div>
                                </div>
                            </div>
                            
                            <hr class="border-light">
                            <h6 class="font-weight-bold text-muted text-xs text-uppercase mb-3">Data Wali (Manual)</h6>

                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label class="font-weight-bold text-muted text-xs text-uppercase">Nama Wali</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>
                                            <input type="text" name="nama_wali" class="form-control bg-light border-0 shadow-sm" 
                                                   placeholder="Nama Ayah/Ibu" value="{{ old('nama_wali') }}" style="border-radius: 0 10px 10px 0;">
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label class="font-weight-bold text-muted text-xs text-uppercase">No. HP Wali (WA)</label>
                                        <div class="input-group">
                                            <div class="input-group-prepend">
                                                <span class="input-group-text bg-light border-0"><i class="fab fa-whatsapp text-success"></i></span>
                                            </div>
                                            <input type="number" name="no_hp_wali" class="form-control bg-light border-0 shadow-sm" 
                                                   placeholder="0812..." value="{{ old('no_hp_wali') }}" style="border-radius: 0 10px 10px 0;">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

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

            {{-- KOLOM KANAN: PENGATURAN ASRAMA & AKSI --}}
            <div class="col-lg-4">
                
                {{-- CARD KEPESANTRENAN --}}
                <div class="card border-0 shadow-sm mb-4" style="border-radius: 15px;">
                    <div class="card-header bg-white py-3 border-bottom-0" style="border-radius: 15px 15px 0 0;">
                        <h3 class="card-title font-weight-bold text-dark">
                            <i class="fas fa-mosque mr-2 text-warning"></i> Keasramaan
                        </h3>
                    </div>
                    <div class="card-body pt-0">
                        
                        {{-- Status Mukim --}}
                        <div class="form-group">
                            <label class="font-weight-bold text-muted text-xs text-uppercase">Status Tempat Tinggal <span class="text-danger">*</span></label>
                            <select name="status_mukim" id="status_mukim" class="form-control bg-light border-0 shadow-sm" style="border-radius: 10px; height: 45px;">
                                <option value="mukim" {{ old('status_mukim') == 'mukim' ? 'selected' : '' }}>Mukim (Tinggal di Asrama)</option>
                                <option value="kalong" {{ old('status_mukim') == 'kalong' ? 'selected' : '' }}>Kalong (Pulang Pergi)</option>
                            </select>
                        </div>

                        {{-- [TAMBAHAN BARU] KELAS DINIYAH / HALAQAH --}}
                        <div class="form-group">
                            <label class="font-weight-bold text-muted text-xs text-uppercase"><i class="fas fa-quran mr-1 text-success"></i> Kelas / Halaqah</label>
                            <select name="halaqah_id" class="form-control select2" style="width: 100%;">
                                <option value="">-- Pilih Kelas Diniyah --</option>
                                @foreach($halaqahs as $halaqah)
                                    <option value="{{ $halaqah->id }}" {{ old('halaqah_id') == $halaqah->id ? 'selected' : '' }}>
                                        {{ $halaqah->nama_halaqah }} 
                                        {{ $halaqah->ustadz ? '('.$halaqah->ustadz->user->name.')' : '' }}
                                    </option>
                                @endforeach
                            </select>
                            <small class="text-muted">Kelas pengajian/mengaji santri.</small>
                        </div>

                        {{-- Kamar Asrama (Dynamic) --}}
                        <div class="form-group" id="wrapper_kamar">
                            <div class="bg-light-warning p-3 rounded border border-warning-soft">
                                <label class="font-weight-bold text-muted text-xs text-uppercase mb-2"><i class="fas fa-door-open mr-1 text-warning"></i> Pilih Kamar <span class="text-danger">*</span></label>
                                <select name="kamar_id" class="form-control select2" style="width: 100%;">
                                    <option value="">-- Pilih Kamar Tersedia --</option>
                                    @foreach($kamars as $kamar)
                                        <option value="{{ $kamar->id }}" {{ old('kamar_id') == $kamar->id ? 'selected' : '' }}>
                                            {{ $kamar->asrama->nama_gedung ?? 'Gedung A' }} - 
                                            {{ $kamar->nama_kamar }} 
                                            (Sisa: {{ $kamar->sisaKapasitas() }} bed)
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                        </div>

                    </div>
                </div>

                {{-- CARD AKSI --}}
                <div class="card border-0 shadow-sm" style="border-radius: 15px;">
                    <div class="card-body">
                        <button type="submit" class="btn btn-purple btn-block shadow-sm rounded-pill font-weight-bold py-2 mb-3 hover-lift">
                            <i class="fas fa-save mr-2"></i> Simpan Santri
                        </button>
                        <a href="{{ route('pesantren.santri.index') }}" class="btn btn-light btn-block rounded-pill text-muted font-weight-bold border hover-lift">
                            <i class="fas fa-arrow-left mr-2"></i> Batal
                        </a>
                    </div>
                </div>

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

@push('css')
<style>
    /* Theme Colors */
    .text-purple { color: #6f42c1 !important; }
    .bg-light-purple { background-color: #f3eefc; }
    .bg-light-success { background-color: #e8f5e9; }
    .bg-light-info { background-color: #e3f2fd; }
    .bg-light-warning { background-color: #fffbeb; }
    .border-warning-soft { border-color: #fcd34d !important; }

    /* Custom Radio Buttons */
    .btn-outline-purple {
        color: #6f42c1;
        border: 2px solid #f3eefc;
        background-color: #ffffff;
        transition: all 0.3s;
    }
    .btn-outline-purple:hover, .btn-outline-purple.active {
        background-color: #f3eefc;
        border-color: #6f42c1;
        color: #6f42c1;
    }

    .btn-outline-success {
        border: 2px solid #e8f5e9;
        color: #28a745;
        background-color: #ffffff;
    }
    .btn-outline-success:hover, .btn-outline-success.active {
        background-color: #e8f5e9;
        border-color: #28a745;
        color: #28a745;
    }

    /* Main Button */
    .btn-purple { 
        background-color: #6f42c1; 
        color: white; 
        border: none;
        transition: all 0.3s;
    }
    .btn-purple:hover { 
        background-color: #5a32a3; 
        color: white; 
        box-shadow: 0 4px 12px rgba(111, 66, 193, 0.3);
    }

    /* Form Styles */
    .form-control.bg-light:focus {
        background-color: #ffffff !important;
        border: 1px solid #6f42c1 !important;
        box-shadow: 0 0 0 0.2rem rgba(111, 66, 193, 0.15) !important;
    }
    .input-group-text { border-radius: 10px 0 0 10px; }
    
    .hover-lift { transition: transform 0.2s; }
    .hover-lift:hover { transform: translateY(-2px); }

    /* Select2 Height Fix */
    .select2-container .select2-selection--single { height: 45px !important; border-radius: 10px !important; border: none !important; background-color: #f8f9fa !important; padding-top: 8px !important; }
    .select2-container--default .select2-selection--single .select2-selection__arrow { top: 10px !important; }
    /* Select2 in Wrapper with custom bg */
    #wrapper_kamar .select2-container .select2-selection--single { background-color: #ffffff !important; border: 1px solid #fcd34d !important; }
</style>
@endpush

@push('js')
<script>
    $(document).ready(function() {
        // 1. Inisialisasi Select2
        $('.select2').select2({ theme: 'bootstrap4' });

        // 2. Definisi Variabel
        const formInternal = $('#form_internal');
        const formEksternal = $('#form_eksternal');
        const infoText = $('#info_text');
        const statusMukim = $('#status_mukim');
        const wrapperKamar = $('#wrapper_kamar');

        // 3. Logic Toggle Tipe Santri
        $('input[name="tipe_santri"]').change(function() {
            if (this.value === 'internal') {
                formInternal.stop(true, true).slideDown(300);
                formEksternal.stop(true, true).slideUp(300);
                infoText.removeClass('alert-light-success').addClass('alert-light-info')
                        .html('<i class="fas fa-info-circle text-info mr-3 fa-lg"></i><span class="text-dark small">Data akan diambil otomatis dari database <b>Siswa Sekolah</b>.</span>');
            } else {
                formInternal.stop(true, true).slideUp(300);
                formEksternal.stop(true, true).slideDown(300);
                infoText.removeClass('alert-light-info').addClass('alert-light-success')
                        .html('<i class="fas fa-check-circle text-success mr-3 fa-lg"></i><span class="text-dark small">Silakan isi biodata lengkap untuk <b>Santri Luar</b>. Akun login dibuat otomatis.</span>');
            }
        });

        // 4. Logic Toggle Status Mukim
        statusMukim.change(function() {
            if (this.value === 'kalong') {
                wrapperKamar.stop(true, true).slideUp(300);
            } else {
                wrapperKamar.stop(true, true).slideDown(300);
            }
        });

        // 5. Cek Kondisi Awal (Saat Redirect Back)
        if ($('input[name="tipe_santri"]:checked').val() == 'eksternal') {
            formInternal.hide();
            formEksternal.show();
            infoText.removeClass('alert-light-info').addClass('alert-light-success')
                    .html('<i class="fas fa-check-circle text-success mr-3 fa-lg"></i><span class="text-dark small">Silakan isi biodata lengkap untuk <b>Santri Luar</b>. Akun login dibuat otomatis.</span>');
        }
        
        if (statusMukim.val() == 'kalong') {
            wrapperKamar.hide();
        }
    });
</script>
@endpush