@extends('adminlte::page')

@section('title', 'Edit Data Ustadz | Smart Pesantren')

@section('content_header')
    <div class="row mb-2 align-items-center pt-3 pb-2">
        <div class="col-sm-6">
            <h1 class="m-0 text-dark" style="font-family: 'Poppins', sans-serif; font-weight: 700;">
                <i class="fas fa-user-edit text-purple mr-2"></i> Edit Data Pengajar
            </h1>
            <p class="text-muted small mb-0 mt-1">Perbarui profil dan akses login Ustadz</p>
        </div>
        <div class="col-sm-6">
            <ol class="breadcrumb float-sm-right bg-transparent p-0 mb-0">
                <li class="breadcrumb-item"><a href="{{ route('dashboard') }}" class="text-muted">Home</a></li>
                <li class="breadcrumb-item"><a href="{{ route('pesantren.ustadz.index') }}" class="text-muted">Data Ustadz</a></li>
                <li class="breadcrumb-item active text-purple font-weight-bold">Edit</li>
            </ol>
        </div>
    </div>
@stop

@section('content')
<div class="container-fluid pb-5 px-0">
    
    <form action="{{ route('pesantren.ustadz.update', $ustadz->id) }}" method="POST" id="formEditUstadz">
        @csrf
        @method('PUT') {{-- Wajib untuk proses Update di Laravel --}}
        
        {{-- CARD UTAMA FULL WIDTH --}}
        <div class="card border-0 shadow-sm rounded-lg overflow-hidden">
            
            {{-- Header Gradasi Ungu Modern --}}
            <div class="card-header border-0 bg-gradient-purple text-white py-3 px-4">
                <div class="d-flex justify-content-between align-items-center">
                    <h5 class="card-title font-weight-bold mb-0 d-flex align-items-center text-white">
                        <i class="fas fa-edit mr-2 opacity-75"></i> Formulir Edit Data
                    </h5>
                    {{-- Tombol Back Kecil di Header --}}
                    <a href="{{ route('pesantren.ustadz.index') }}" class="btn btn-sm btn-white-glass text-white font-weight-bold" title="Batal Edit">
                        <i class="fas fa-times"></i>
                    </a>
                </div>
            </div>

            <div class="card-body bg-white p-4 p-md-5">
                
                {{-- Alert Pesan Error dari Server --}}
                @if(session('error'))
                    <div class="alert bg-light-danger border-0 text-danger rounded-lg mb-4 p-3 d-flex align-items-center fade show">
                        <i class="fas fa-exclamation-circle fa-2x mr-3"></i>
                        <div>
                            <h6 class="font-weight-bold mb-0">Gagal Memperbarui Data!</h6>
                            <small>{{ session('error') }}</small>
                        </div>
                    </div>
                @endif

                {{-- Alert Info Perubahan Akun --}}
                <div class="alert bg-light-warning border-0 shadow-none text-dark mb-5 rounded-lg d-flex align-items-center p-4" style="background-color: #FFF4DE;">
                    <div class="icon-circle bg-white text-warning shadow-sm mr-4 flex-shrink-0" style="width: 50px; height: 50px;">
                        <i class="fas fa-exclamation-triangle fa-lg"></i>
                    </div>
                    <div>
                        <h6 class="font-weight-bold text-warning-dark mb-1" style="color: #B77900; font-size: 1.1rem;">Perhatian Perubahan Akun!</h6>
                        <span class="text-muted d-block text-sm" style="line-height: 1.5;">
                            Jika Anda mengubah alamat Email di bawah ini, maka email untuk <b>Login Ustadz</b> tersebut juga akan ikut berubah secara otomatis. Pastikan memberitahu Ustadz yang bersangkutan.
                        </span>
                    </div>
                </div>

                <div class="row">
                    {{-- KOLOM KIRI: DATA AKUN (50%) --}}
                    <div class="col-lg-6 border-right pr-lg-5 mb-4 mb-lg-0">
                        <div class="d-flex align-items-center mb-4 pb-2 border-bottom-light">
                            <span class="bg-light-purple text-purple rounded-circle d-flex align-items-center justify-content-center mr-3 font-weight-bold shadow-sm" style="width: 40px; height: 40px; font-size: 1.1rem;">1</span>
                            <h5 class="text-dark font-weight-bold mb-0">Identitas & Akun</h5>
                        </div>

                        <div class="form-group mb-4">
                            <label class="small font-weight-bold text-uppercase text-muted ls-1 mb-2">Nama Lengkap & Gelar <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>
                                {{-- Value diambil dari relasi User atau tabel ustadz --}}
                                <input type="text" name="nama_lengkap" class="form-control bg-light border-0 @error('nama_lengkap') is-invalid @enderror" 
                                       placeholder="Contoh: KH. Ahmad Dahlan, Lc." 
                                       value="{{ old('nama_lengkap', optional($ustadz->user)->name ?? $ustadz->nama_lengkap) }}" required autocomplete="off">
                            </div>
                            @error('nama_lengkap') <small class="text-danger font-weight-bold mt-1 d-block">{{ $message }}</small> @enderror
                        </div>

                        <div class="form-group mb-4">
                            <label class="small font-weight-bold text-uppercase text-muted ls-1 mb-2">Email Aktif (Untuk Login) <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-envelope text-muted"></i></span>
                                </div>
                                <input type="email" name="email" class="form-control bg-light border-0 @error('email') is-invalid @enderror" 
                                       placeholder="contoh: ahmad@pesantren.com" 
                                       value="{{ old('email', optional($ustadz->user)->email) }}" required autocomplete="off">
                            </div>
                            @error('email') <small class="text-danger font-weight-bold mt-1 d-block">{{ $message }}</small> @enderror
                        </div>
                    </div>

                    {{-- KOLOM KANAN: DATA KEPEGAWAIAN (50%) --}}
                    <div class="col-lg-6 pl-lg-5">
                        <div class="d-flex align-items-center mb-4 pb-2 border-bottom-light">
                            <span class="bg-light-purple text-purple rounded-circle d-flex align-items-center justify-content-center mr-3 font-weight-bold shadow-sm" style="width: 40px; height: 40px; font-size: 1.1rem;">2</span>
                            <h5 class="text-dark font-weight-bold mb-0">Data Kepegawaian</h5>
                        </div>

                        <div class="form-group mb-4">
                            <label class="small font-weight-bold text-uppercase text-muted ls-1 mb-2">NIP / Nomor Induk <span class="text-muted text-capitalize font-weight-normal">(Opsional)</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-card text-muted"></i></span>
                                </div>
                                <input type="text" name="nip_ustadz" class="form-control bg-light border-0 @error('nip_ustadz') is-invalid @enderror" 
                                       placeholder="Kosongkan jika tidak ada" 
                                       value="{{ old('nip_ustadz', $ustadz->nip_ustadz) }}" autocomplete="off">
                            </div>
                            @error('nip_ustadz') <small class="text-danger font-weight-bold mt-1 d-block">{{ $message }}</small> @enderror
                        </div>

                        <div class="form-group mb-4">
                            <label class="small font-weight-bold text-uppercase text-muted ls-1 mb-2">Bidang Keahlian / Mapel <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-open text-muted"></i></span>
                                </div>
                                <input type="text" name="bidang_keahlian" class="form-control bg-light border-0 @error('bidang_keahlian') is-invalid @enderror" 
                                       placeholder="Pilih atau ketik spesialisasi..." 
                                       value="{{ old('bidang_keahlian', $ustadz->bidang_keahlian) }}" required list="keahlian_list" autocomplete="off">
                                <datalist id="keahlian_list">
                                    <option value="Tahfidz Al-Qur'an">
                                    <option value="Fiqih & Ushul Fiqih">
                                    <option value="Bahasa Arab (Nahwu Shorof)">
                                    <option value="Aqidah Akhlak">
                                    <option value="Tafsir Hadits">
                                    <option value="Sejarah Kebudayaan Islam (SKI)">
                                </datalist>
                            </div>
                            @error('bidang_keahlian') <small class="text-danger font-weight-bold mt-1 d-block">{{ $message }}</small> @enderror
                        </div>
                    </div>
                </div>
            </div>

            {{-- Footer Form --}}
            <div class="card-footer bg-light border-top py-4 px-4 px-md-5">
                <div class="d-flex flex-column flex-md-row justify-content-between align-items-md-center">
                    {{-- Tombol Batal/Kembali --}}
                    <a href="{{ route('pesantren.ustadz.index') }}" class="btn btn-white text-muted font-weight-bold rounded-pill px-4 shadow-sm hover-lift mb-3 mb-md-0">
                        <i class="fas fa-arrow-left mr-2"></i> Batal & Kembali
                    </a>
                    
                    <div class="d-flex">
                        {{-- Tombol Reset --}}
                        <button type="reset" class="btn btn-outline-secondary rounded-pill px-4 mr-2 font-weight-bold transition-hover text-sm" title="Kembalikan ke data awal sebelum diedit">
                            <i class="fas fa-undo mr-1"></i> Reset Perubahan
                        </button>
                        
                        {{-- Tombol Submit --}}
                        <button type="submit" class="btn btn-purple shadow-sm rounded-pill px-5 font-weight-bold transition-hover" id="btnSimpan">
                            <i class="fas fa-save mr-2"></i> Simpan Perubahan
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>
@stop

@section('css')
<style>
    /* --- APEX MODERN PURPLE THEME --- */
    :root {
        --purple: #7367F0;
        --purple-dark: #5E50EE;
        --purple-soft: #F4F1FD;
        --border-radius: 16px;
        --bg-canvas: #F5F8FA;
    }
    
    body { font-family: 'Poppins', sans-serif; background-color: var(--bg-canvas) !important; }
    .content-wrapper { background-color: var(--bg-canvas) !important; }

    /* Colors */
    .text-purple { color: var(--purple) !important; }
    .bg-light-purple { background-color: var(--purple-soft) !important; }
    .bg-light-danger { background-color: #FFE2E5 !important; }
    
    .bg-gradient-purple { 
        background: linear-gradient(118deg, #7367F0, rgba(115, 103, 240, 0.85)); 
    }

    /* Cards & Layout */
    .rounded-lg { border-radius: var(--border-radius) !important; }
    .icon-circle { display: flex; align-items: center; justify-content: center; border-radius: 50%; }
    .border-bottom-light { border-bottom: 2px dashed #f0f2f5; }

    /* Form Inputs Modern */
    .form-control {
        height: 52px;
        font-size: 0.95rem;
        border-radius: 0 10px 10px 0;
        background-color: #f1f5f9 !important;
        color: #334155;
        transition: all 0.3s;
    }
    .form-control:focus {
        background-color: #fff !important;
        box-shadow: 0 0 0 0.2rem rgba(115, 103, 240, 0.15);
        border: 1px solid var(--purple) !important;
    }
    .input-group-text {
        background-color: #f1f5f9 !important;
        border-radius: 10px 0 0 10px;
        min-width: 50px;
        justify-content: center;
        border: 1px solid transparent;
        transition: all 0.3s;
    }
    .form-control:focus + .input-group-prepend .input-group-text,
    .input-group:focus-within .input-group-text {
        background-color: #fff !important;
        border: 1px solid var(--purple) !important;
        border-right: none !important;
    }

    /* Buttons */
    .btn-purple { 
        background-color: var(--purple); 
        color: white; 
        border: none; 
    }
    .btn-purple:hover:not(:disabled) { 
        background-color: var(--purple-dark); 
        color: white; 
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(115, 103, 240, 0.4);
    }
    .btn-purple:disabled {
        background-color: #a59ef5;
        cursor: not-allowed;
    }
    .btn-white {
        background-color: #fff;
        border: 1px solid #e2e8f0;
    }
    .btn-white-glass {
        background: rgba(255, 255, 255, 0.2);
        border: 1px solid rgba(255, 255, 255, 0.3);
        border-radius: 50%;
        width: 32px; height: 32px;
        display: flex; align-items: center; justify-content: center;
        transition: all 0.2s;
    }
    .btn-white-glass:hover { background: rgba(255, 255, 255, 0.4); color: white !important;}
    
    .hover-lift:hover { transform: translateY(-2px); transition: all 0.2s; }
    .transition-hover { transition: all 0.3s ease; }
    .ls-1 { letter-spacing: 0.8px; }

    /* Responsive Border */
    @media (max-width: 992px) {
        .border-right { border-right: none !important; border-bottom: 2px dashed #f0f2f5; padding-bottom: 2.5rem; margin-bottom: 2.5rem !important; }
        .pl-lg-5 { padding-left: 15px !important; }
    }
</style>
@stop

@section('js')
<script>
    $(document).ready(function() {
        // Auto Capitalize Name (Tiap awal kata jadi huruf besar)
        $('input[name="nama_lengkap"]').on('blur input', function() {
            var words = $(this).val().toLowerCase().split(' ');
            for (var i = 0; i < words.length; i++) {
                if(words[i]) {
                    words[i] = words[i].charAt(0).toUpperCase() + words[i].slice(1);
                }
            }
            $(this).val(words.join(' '));
        });

        // Email otomatis huruf kecil semua tanpa spasi
        $('input[name="email"]').on('input', function() {
            $(this).val($(this).val().toLowerCase().replace(/\s+/g, ''));
        });

        // Loading Animasi saat di Submit (Mencegah Double Click)
        $('#formEditUstadz').on('submit', function(e) {
            if (this.checkValidity()) {
                let btn = $('#btnSimpan');
                
                if(btn.prop('disabled')) {
                    e.preventDefault();
                    return false;
                }
                
                btn.prop('disabled', true);
                btn.html('<i class="fas fa-circle-notch fa-spin mr-2"></i> Sedang Menyimpan...');
            }
        });
    });
</script>
@stop