@extends('adminlte::page')

@section('title', 'Tambah Gedung Asrama')

@section('content_header')
    <div class="row mb-2 align-items-center">
        <div class="col-sm-6">
            <h1 class="m-0 text-dark font-weight-bold" style="font-size: 1.8rem;">Tambah Gedung Asrama</h1>
            <p class="text-muted text-sm mb-0 mt-1">Lengkapi form di bawah ini untuk menambah gedung asrama baru.</p>
        </div>
        <div class="col-sm-6">
            <ol class="breadcrumb float-sm-right bg-transparent p-0 m-0 text-sm">
                <li class="breadcrumb-item"><a href="{{ route('dashboard') }}" class="text-primary">Dashboard</a></li>
                <li class="breadcrumb-item"><a href="{{ route('pesantren.asrama.index') }}" class="text-primary">Data Asrama</a></li>
                <li class="breadcrumb-item active text-muted">Tambah Gedung</li>
            </ol>
        </div>
    </div>
@stop

@section('content')
<div class="row">
    {{-- Mengubah menjadi col-12 agar full layar persis seperti Manajemen User --}}
    <div class="col-12">
        <div class="card shadow-sm border-0" style="border-radius: 0.5rem;">
            
            <div class="card-header bg-white border-bottom-0 pt-4 pb-3 px-4 d-flex align-items-center">
                <h3 class="card-title font-weight-bold mb-0" style="color: #0d6efd; font-size: 1.1rem;">
                    <i class="fas fa-building mr-2"></i> Form Input Gedung
                </h3>
            </div>

            <form action="{{ route('pesantren.asrama.store') }}" method="POST">
                @csrf
                <div class="card-body px-4 pt-0">
                    
                    <div class="row">
                        {{-- Nama Gedung (50% Lebar pada Layar Besar) --}}
                        <div class="col-md-6 mb-4">
                            <label class="form-label font-weight-bold text-dark text-sm mb-2">Nama Gedung <span class="text-danger">*</span></label>
                            <input type="text" name="nama_gedung" class="form-control text-sm modern-input @error('nama_gedung') is-invalid @enderror" placeholder="Contoh: Gedung Umar bin Khattab" value="{{ old('nama_gedung') }}" required>
                            @error('nama_gedung')
                                <div class="invalid-feedback text-xs mt-1">{{ $message }}</div>
                            @enderror
                        </div>

                        {{-- Jenis Asrama (50% Lebar pada Layar Besar) --}}
                        <div class="col-md-6 mb-4">
                            <label class="form-label font-weight-bold text-dark text-sm mb-2">Jenis Asrama <span class="text-danger">*</span></label>
                            <select name="jenis" class="form-control text-sm modern-input @error('jenis') is-invalid @enderror" required>
                                <option value="" disabled {{ old('jenis') == '' ? 'selected' : '' }}>-- Pilih Jenis --</option>
                                <option value="putra" {{ old('jenis') == 'putra' ? 'selected' : '' }}>Asrama Putra</option>
                                <option value="putri" {{ old('jenis') == 'putri' ? 'selected' : '' }}>Asrama Putri</option>
                            </select>
                            @error('jenis')
                                <div class="invalid-feedback text-xs mt-1">{{ $message }}</div>
                            @enderror
                        </div>

                        {{-- Kepala Asrama (50% Lebar pada Layar Besar) --}}
                        <div class="col-md-6 mb-4">
                            <label class="form-label font-weight-bold text-dark text-sm mb-2">Kepala Asrama <span class="text-muted font-weight-normal">(Opsional)</span></label>
                            <div class="select2-modern-wrapper">
                                <select name="kepala_asrama_id" class="form-control text-sm select2 @error('kepala_asrama_id') is-invalid @enderror" style="width: 100%;">
                                    <option value="">-- Pilih Pengurus --</option>
                                    @foreach($users as $user)
                                        <option value="{{ $user->id }}" {{ old('kepala_asrama_id') == $user->id ? 'selected' : '' }}>{{ $user->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                            @error('kepala_asrama_id')
                                <div class="invalid-feedback d-block text-xs mt-1">{{ $message }}</div>
                            @enderror
                        </div>

                        {{-- Deskripsi / Lokasi (100% Lebar) --}}
                        <div class="col-md-12 mb-3">
                            <label class="form-label font-weight-bold text-dark text-sm mb-2">Deskripsi / Lokasi</label>
                            <textarea name="deskripsi" class="form-control text-sm modern-input @error('deskripsi') is-invalid @enderror" rows="4" placeholder="Contoh: Terletak di sebelah utara masjid agung, lantai 2 khusus kelas menengah.">{{ old('deskripsi') }}</textarea>
                            @error('deskripsi')
                                <div class="invalid-feedback text-xs mt-1">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>

                </div>
                
                <div class="card-footer bg-white border-top-0 px-4 py-4 d-flex justify-content-end align-items-center">
                    <a href="{{ route('pesantren.asrama.index') }}" class="btn btn-outline-secondary btn-sm px-4 rounded-pill font-weight-bold mr-3" style="border-color: #dee2e6; color: #6c757d;">
                        Batal
                    </a>
                    <button type="submit" class="btn btn-primary btn-sm px-4 rounded-pill font-weight-bold shadow-sm" style="background-color: #0d6efd; border-color: #0d6efd;">
                        <i class="fas fa-save mr-1"></i> Simpan Data
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
@stop

@section('plugins.Select2', true)

@section('css')
<style>
    /* Styling khusus menyerupai tangkapan layar "Smart Cend" */
    
    /* Input Form Modern */
    .modern-input {
        border-radius: 0.375rem;
        border: 1px solid #dee2e6;
        padding: 0.5rem 0.75rem;
        transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    }
    .modern-input:focus {
        border-color: #86b7fe;
        box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
    }
    
    /* Select2 Modern Override */
    .select2-modern-wrapper .select2-container--bootstrap4 .select2-selection--single {
        height: calc(2.25rem + 2px) !important;
        border-radius: 0.375rem !important;
        border: 1px solid #dee2e6 !important;
    }
    .select2-modern-wrapper .select2-container--bootstrap4 .select2-selection--single:focus,
    .select2-modern-wrapper .select2-container--bootstrap4.select2-container--focus .select2-selection--single {
        border-color: #86b7fe !important;
        box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25) !important;
    }
    .select2-modern-wrapper .select2-selection__rendered {
        font-size: 0.875rem !important;
        line-height: 2 !important;
    }
    
    /* Form Labels */
    .form-label {
        letter-spacing: 0.3px;
    }
    
    /* Buttons interaction */
    .btn-outline-secondary:hover {
        background-color: #f8f9fa;
        color: #495057 !important;
    }
    .btn-primary:hover {
        background-color: #0b5ed7 !important;
        border-color: #0a58ca !important;
    }
</style>
@stop

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