{{-- resources/views/public/guru/edit.blade.php --}}
@extends('layouts.app')

@section('title', 'Edit Profil - ' . ($setting->web_name ?? 'Sekolah'))

@section('content')

{{-- HERO SECTION: PROFIL ALA MEDIA SOSIAL --}}
@include('public.guru._hero')

<section class="section light-background" style="padding-top: 20px; padding-bottom: 60px;">
    <div class="container" data-aos="fade-up">
        
        <div class="mb-4">
            <h4 class="fw-bold text-dark mb-1"><i class="fas fa-user-edit text-primary me-2"></i>Edit Profil Saya</h4>
            <p class="text-muted mb-0">Perbarui data personal, kepegawaian, kontak, dan unggah dokumen Anda di bawah ini.</p>
        </div>

        @if(session('success'))
            <div class="alert alert-success alert-dismissible fade show shadow-sm" role="alert">
                <i class="fa fa-check-circle me-2"></i> {{ session('success') }}
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        @endif

        <form method="POST" action="{{ route('guru.profile.update') }}" enctype="multipart/form-data">
            @csrf
            @method('PUT')

            <div class="card border-0 shadow-sm rounded-4 overflow-hidden">
                <div class="card-header bg-white pt-4 pb-0 border-bottom-0">
                    <ul class="nav nav-tabs card-header-tabs nav-line-tabs" id="guruTabs" role="tablist" style="border-bottom: 2px solid #dee2e6;">
                        <li class="nav-item" role="presentation">
                            <button class="nav-link active fw-bold px-4 py-3" id="profil-tab" data-bs-toggle="tab" data-bs-target="#profil" type="button" role="tab" style="color: #495057;">
                                <i class="fas fa-user me-2 text-primary"></i> Profil Utama
                            </button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link fw-bold px-4 py-3" id="status-tab" data-bs-toggle="tab" data-bs-target="#status" type="button" role="tab" style="color: #495057;">
                                <i class="fas fa-briefcase me-2 text-primary"></i> Status & Kepegawaian
                            </button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link fw-bold px-4 py-3" id="alamat-tab" data-bs-toggle="tab" data-bs-target="#alamat" type="button" role="tab" style="color: #495057;">
                                <i class="fas fa-map-marker-alt me-2 text-primary"></i> Alamat & Kontak
                            </button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link fw-bold px-4 py-3" id="keluarga-tab" data-bs-toggle="tab" data-bs-target="#keluarga" type="button" role="tab" style="color: #495057;">
                                <i class="fas fa-users me-2 text-primary"></i> Keluarga
                            </button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link fw-bold px-4 py-3" id="keuangan-tab" data-bs-toggle="tab" data-bs-target="#keuangan" type="button" role="tab" style="color: #495057;">
                                <i class="fas fa-file-invoice-dollar me-2 text-primary"></i> Keuangan
                            </button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link fw-bold px-4 py-3" id="dokumen-tab" data-bs-toggle="tab" data-bs-target="#dokumen" type="button" role="tab" style="color: #495057;">
                                <i class="fas fa-folder-open me-2 text-primary"></i> Dokumen
                            </button>
                        </li>
                    </ul>
                </div>

                <div class="card-body p-4 bg-white">
                    <div class="tab-content" id="guruTabsContent">
                        <div class="tab-pane fade show active" id="profil" role="tabpanel">
                            @include('admin.kepegawaian.guru._form', ['guru' => $guru])
                        </div>
                        <div class="tab-pane fade" id="status" role="tabpanel">
                            @include('admin.kepegawaian.guru._tab_status_kepegawaian', ['guru' => $guru])
                        </div>
                        <div class="tab-pane fade" id="alamat" role="tabpanel">
                            @include('admin.kepegawaian.guru._tab_alamat', ['guru' => $guru])
                        </div>
                        <div class="tab-pane fade" id="keluarga" role="tabpanel">
                            @include('admin.kepegawaian.guru._tab_keluarga', ['guru' => $guru])
                        </div>
                        <div class="tab-pane fade" id="keuangan" role="tabpanel">
                            @include('admin.kepegawaian.guru._tab_keuangan', ['guru' => $guru])
                        </div>
                        <div class="tab-pane fade" id="dokumen" role="tabpanel">
                            @include('admin.kepegawaian.guru._tab_dokumen', ['guru' => $guru])
                        </div>
                    </div>
                </div>

                <div class="card-footer bg-light p-4 text-end">
                    <button type="submit" class="btn btn-primary btn-lg rounded-pill px-5 shadow-sm fw-bold">
                        <i class="fas fa-save me-2"></i> Simpan Perubahan Profil
                    </button>
                </div>

            </div>
        </form>
    </div>
</section>

@endsection

@push('scripts')
<style>
    #header { background-color: #263351 !important; }
    #header.header-scrolled { background-color: rgba(38, 51, 81, 0.95) !important; }
    
    .avatar-wrapper img {
        background-color: #fff;
    }
    
    .nav-line-tabs .nav-link.active {
        background-color: transparent !important;
        border: none !important;
        border-bottom: 3px solid #0d6efd !important;
        color: #0d6efd !important;
    }
    .nav-line-tabs .nav-link {
        border: none !important;
    }
    .nav-line-tabs .nav-link:hover {
        border: none !important;
        color: #0d6efd !important;
    }
</style>

<script>
$(function () {
    var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
    var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
        return new bootstrap.Tooltip(tooltipTriggerEl)
    });

    $('#togglePasswordBtn').on('click', function() {
        const input = $('#password');
        const icon = $('#togglePasswordIcon');
        const type = input.attr('type') === 'password' ? 'text' : 'password';
        input.attr('type', type);
        icon.toggleClass('fa-eye fa-eye-slash');
    });

    $('#toggleConfirmPasswordBtn').on('click', function() {
        const input = $('#password_confirmation');
        const icon = $('#toggleConfirmPasswordIcon');
        const type = input.attr('type') === 'password' ? 'text' : 'password';
        input.attr('type', type);
        icon.toggleClass('fa-eye fa-eye-slash');
    });

    $('#img_input').change(function(){
        let reader = new FileReader();
        reader.onload = (e) => { 
            $('#img_preview').attr('src', e.target.result); 
        }
        if(this.files[0]){
            reader.readAsDataURL(this.files[0]);
        }
    });

});
</script>
@endpush