@extends('adminlte::page')

@section('title', 'Edit Gedung Asrama | Smart Pesantren')

@section('content_header')
    <div class="container-fluid pt-3">
        <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 Data Gedung
                </h1>
                <p class="text-muted small mb-0">
                    <i class="fas fa-edit mr-1"></i> Perbarui informasi fasilitas gedung asrama.
                </p>
            </div>
            <div>
                <a href="{{ route('pesantren.asrama.index') }}" class="btn btn-outline-secondary btn-sm rounded-pill px-3 font-weight-bold">
                    <i class="fas fa-arrow-left mr-1"></i> Kembali
                </a>
            </div>
        </div>
    </div>
@stop

@section('content')
<div class="container-fluid pb-5">
    <div class="row justify-content-center">
        <div class="col-lg-8 col-md-10">
            
            <div class="card border-0 shadow-lg rounded-lg overflow-hidden">
                {{-- Decorative Header Line --}}
                <div class="bg-warning" style="height: 6px;"></div>

                <div class="card-header bg-white py-4 px-5 border-bottom-0">
                    <div class="d-flex align-items-center">
                        <div class="icon-box bg-soft-warning text-warning rounded-circle d-flex align-items-center justify-content-center mr-3" style="width: 45px; height: 45px;">
                            <i class="fas fa-pencil-alt fa-lg"></i>
                        </div>
                        <div>
                            <h5 class="font-weight-bold text-dark mb-0">Formulir Perubahan Data</h5>
                            <small class="text-muted">Gedung: <strong>{{ $asrama->nama_gedung }}</strong></small>
                        </div>
                    </div>
                </div>

                <form action="{{ route('pesantren.asrama.update', $asrama->id) }}" method="POST">
                    @csrf
                    @method('PUT')
                    
                    <div class="card-body px-5 py-4">
                        
                        {{-- Nama Gedung --}}
                        <div class="form-group mb-4">
                            <label class="font-weight-bold text-dark small text-uppercase ls-1">
                                Nama Gedung <span class="text-danger">*</span>
                            </label>
                            <div class="input-group input-group-custom">
                                <div class="input-group-prepend">
                                    <span class="input-group-text bg-light border-0"><i class="fas fa-building text-muted"></i></span>
                                </div>
                                <input type="text" name="nama_gedung" class="form-control bg-light border-0 h-auto py-3" 
                                       value="{{ old('nama_gedung', $asrama->nama_gedung) }}" 
                                       placeholder="Contoh: Gedung Al-Fatih" required>
                            </div>
                        </div>

                        {{-- Jenis & Kepala Asrama (Row) --}}
                        <div class="row">
                            <div class="col-md-6 mb-4">
                                <div class="form-group">
                                    <label class="font-weight-bold text-dark small text-uppercase ls-1">
                                        Peruntukan <span class="text-danger">*</span>
                                    </label>
                                    <div class="d-flex mt-2">
                                        <div class="custom-control custom-radio mr-4">
                                            <input class="custom-control-input" type="radio" id="jenisPutra" name="jenis" value="putra" {{ $asrama->jenis == 'putra' ? 'checked' : '' }}>
                                            <label for="jenisPutra" class="custom-control-label font-weight-normal">
                                                <i class="fas fa-male text-primary mr-1"></i> Asrama Putra
                                            </label>
                                        </div>
                                        <div class="custom-control custom-radio">
                                            <input class="custom-control-input" type="radio" id="jenisPutri" name="jenis" value="putri" {{ $asrama->jenis == 'putri' ? 'checked' : '' }}>
                                            <label for="jenisPutri" class="custom-control-label font-weight-normal">
                                                <i class="fas fa-female text-danger mr-1"></i> Asrama Putri
                                            </label>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="col-md-6 mb-4">
                                <div class="form-group">
                                    <label class="font-weight-bold text-dark small text-uppercase ls-1">
                                        Kepala Asrama
                                    </label>
                                    <select name="kepala_asrama_id" class="form-control select2bs4" style="width: 100%;">
                                        <option value="">-- Pilih Musyrif/Musyrifah --</option>
                                        @foreach($users as $user)
                                            <option value="{{ $user->id }}" {{ $asrama->kepala_asrama_id == $user->id ? 'selected' : '' }}>
                                                {{ $user->name }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                        </div>

                        {{-- Deskripsi --}}
                        <div class="form-group mb-2">
                            <label class="font-weight-bold text-dark small text-uppercase ls-1">
                                Keterangan / Fasilitas
                            </label>
                            <textarea name="deskripsi" class="form-control bg-light border-0" rows="4" placeholder="Tuliskan deskripsi singkat atau daftar fasilitas gedung ini...">{{ old('deskripsi', $asrama->deskripsi) }}</textarea>
                        </div>

                    </div>

                    <div class="card-footer bg-white border-top-0 px-5 pb-5 pt-2 text-right">
                        <button type="submit" class="btn btn-warning font-weight-bold rounded-pill px-5 shadow-sm hover-scale text-white">
                            <i class="fas fa-save mr-2"></i> Perbarui Data
                        </button>
                    </div>
                </form>
            </div>

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

@section('plugins.Select2', true)

@section('css')
    <style>
        /* --- Modern Variables --- */
        :root {
            --warning: #ffc107;
            --soft-warning: rgba(255, 193, 7, 0.15);
            --border-radius: 0.75rem;
        }

        body { font-family: 'Poppins', sans-serif; background-color: #f4f6f9; }
        .ls-1 { letter-spacing: 0.5px; }
        .rounded-lg { border-radius: var(--border-radius) !important; }
        
        /* Soft Colors */
        .bg-soft-warning { background-color: var(--soft-warning) !important; color: #856404 !important; }

        /* Custom Input */
        .form-control:focus { box-shadow: none; border-color: var(--warning); background-color: #fff !important; }
        .input-group-custom .input-group-text { background-color: #f8f9fa; }
        
        /* Select2 Customization */
        .select2-container--bootstrap4 .select2-selection--single {
            height: calc(2.8rem + 2px) !important;
            border-radius: 0.5rem;
            border: 1px solid #ced4da;
            display: flex; align-items: center;
        }
        .select2-container--bootstrap4 .select2-selection--single .select2-selection__rendered { padding-left: 1rem; }

        /* Hover Scale */
        .hover-scale { transition: transform 0.2s; }
        .hover-scale:hover { transform: scale(1.02); }
    </style>
@stop

@section('js')
<script>
    $(document).ready(function() {
        $('.select2bs4').select2({
            theme: 'bootstrap4',
            placeholder: "Pilih opsi...",
            allowClear: true
        });
    });
</script>
@stop