@extends('adminlte::page')

@section('title', 'Edit Santri | Smart Cendekia')

{{-- Aktifkan Plugin --}}
@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;">
                Edit Santri
            </h1>
            <p class="text-muted small mb-0">Perbarui biodata dan status mukim santri.</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">Edit</li>
        </ol>
    </div>
@stop

@section('content')
<div class="container-fluid pb-4">
    <form action="{{ route('pesantren.santri.update', $santri->id) }}" method="POST">
        @csrf
        @method('PUT')

        <div class="row">
            
            {{-- KOLOM KIRI: DATA UTAMA (BIODATA) --}}
            <div class="col-lg-8">
                
                {{-- CARD BIODATA --}}
                <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-id-card mr-2"></i> Biodata & Identitas
                        </h3>
                    </div>
                    <div class="card-body pt-0">
                        
                        {{-- STATUS BANNER --}}
                        <div class="alert {{ $santri->siswa_id ? 'alert-light-purple' : 'alert-light-success' }} border-0 rounded-lg mb-4 p-3 d-flex align-items-center shadow-sm">
                            <div class="bg-white p-2 rounded-circle shadow-sm mr-3 {{ $santri->siswa_id ? 'text-purple' : 'text-success' }}">
                                <i class="fas {{ $santri->siswa_id ? 'fa-school' : 'fa-globe' }} fa-lg"></i>
                            </div>
                            <div>
                                <h6 class="font-weight-bold {{ $santri->siswa_id ? 'text-purple' : 'text-success' }} mb-0">
                                    {{ $santri->siswa_id ? 'SANTRI INTERNAL (SEKOLAH)' : 'SANTRI EKSTERNAL (LUAR)' }}
                                </h6>
                                <small class="text-muted">
                                    {{ $santri->siswa_id ? 'Data Nama & NIS terintegrasi sekolah. Readonly.' : 'Data dikelola manual oleh admin pesantren.' }}
                                </small>
                            </div>
                        </div>

                        {{-- INPUTS --}}
                        <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" 
                                               value="{{ old('nama_manual', $santri->nama_lengkap) }}" 
                                               {{ $santri->siswa_id ? 'readonly' : '' }} 
                                               required style="border-radius: 0 10px 10px 0;">
                                    </div>
                                    @error('nama_manual') <small class="text-danger">{{ $message }}</small> @enderror
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="font-weight-bold text-muted text-xs text-uppercase">NIS Pesantren <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" 
                                               value="{{ old('nis_manual', $santri->nis) }}" 
                                               {{ $santri->siswa_id ? 'readonly' : '' }} 
                                               required style="border-radius: 0 10px 10px 0;">
                                    </div>
                                    @error('nis_manual') <small class="text-danger">{{ $message }}</small> @enderror
                                </div>
                            </div>
                        </div>

                        {{-- KHUSUS EKSTERNAL: WALI --}}
                        @if(!$santri->siswa_id)
                            <div class="row mt-2">
                                <div class="col-md-12">
                                    <h6 class="font-weight-bold text-muted text-xs text-uppercase mb-3 mt-2 border-bottom pb-2">Kontak Wali (Manual)</h6>
                                </div>
                                <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" 
                                                   value="{{ old('nama_wali', $santri->nama_wali_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">WhatsApp Wali</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" 
                                                   value="{{ old('no_hp_wali', $santri->no_hp_wali_manual) }}" style="border-radius: 0 10px 10px 0;">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endif

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

            {{-- KOLOM KANAN: PENGATURAN & 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</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', $santri->status_mukim) == 'mukim' ? 'selected' : '' }}>Mukim (Asrama)</option>
                                <option value="kalong" {{ old('status_mukim', $santri->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', $santri->halaqah_id) == $halaqah->id ? 'selected' : '' }}>
                                        {{ $halaqah->nama_halaqah }} 
                                        {{ $halaqah->ustadz ? '('.$halaqah->ustadz->user->name.')' : '' }}
                                    </option>
                                @endforeach
                            </select>
                        </div>

                        {{-- Kamar Asrama (Dynamic) --}}
                        <div class="form-group" id="wrapper_kamar" style="{{ $santri->status_mukim == 'kalong' ? 'display:none' : '' }}">
                            <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-closed mr-1 text-warning"></i> Kamar Asrama</label>
                                <select name="kamar_id" class="form-control select2" style="width: 100%;">
                                    <option value="">-- Pilih Kamar --</option>
                                    @foreach($kamars as $kamar)
                                        <option value="{{ $kamar->id }}" {{ old('kamar_id', $santri->kamar_id) == $kamar->id ? 'selected' : '' }}>
                                            {{ $kamar->asrama->nama_gedung ?? '' }} - {{ $kamar->nama_kamar }} (Sisa: {{ $kamar->sisaKapasitas() }})
                                        </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 Perubahan
                        </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>

                {{-- INFO META --}}
                <div class="text-center mt-3">
                    <small class="text-muted">
                        Dibuat: {{ $santri->created_at->format('d M Y') }} <br>
                        Terakhir Update: {{ $santri->updated_at->diffForHumans() }}
                    </small>
                </div>

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

@push('css')
<style>
    /* Theme Colors & Utilities */
    .text-purple { color: #6f42c1 !important; }
    .bg-light-purple { background-color: #f3eefc; }
    .bg-light-warning { background-color: #fffbeb; }
    .border-warning-soft { border-color: #fcd34d !important; }
    .alert-light-purple { background-color: #f3eefc; border: 1px solid #d6bcfa; }
    .alert-light-success { background-color: #ecfdf5; border: 1px solid #a7f3d0; }

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

    /* Inputs */
    .form-control.bg-light:focus { 
        background-color: #ffffff !important; border-color: #6f42c1; box-shadow: 0 0 0 0.2rem rgba(111, 66, 193, 0.15); 
    }
    .input-group-text { border-radius: 10px 0 0 10px; }

    /* Select2 */
    .select2-container .select2-selection--single {
        background-color: #ffffff !important; border: 1px solid #e5e7eb !important;
        border-radius: 10px !important; height: 40px !important; padding-top: 5px !important;
    }
    .select2-container--default .select2-selection--single .select2-selection__arrow { top: 7px !important; }
</style>
@endpush

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

        // Tampilkan/Sembunyikan Pilihan Kamar
        const wrapperKamar = $('#wrapper_kamar');
        $('#status_mukim').change(function() {
            if($(this).val() == 'kalong') {
                wrapperKamar.stop(true, true).slideUp(300);
            } else {
                wrapperKamar.stop(true, true).slideDown(300);
            }
        });
    });
</script>
@endpush