{{-- resources/views/admin/data-guru/views.blade.php --}}
@extends('admin.layouts.app')
@section('title', 'Profil Pendidik - ' . $guru->nama_lengkap)

@push('styles')
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.6.1/cropper.min.css">
<style>
    .profile-cover {
        height: 220px;
        /* Warna gradient hijau untuk identitas pendidik */
        background: linear-gradient(135deg, #198754 0%, #20c997 100%); 
        border-top-left-radius: 8px;
        border-top-right-radius: 8px;
        position: relative;
    }
    
    .profile-avatar-container {
        position: absolute;
        bottom: -50px;
        left: 40px;
    }
    
    .profile-avatar {
        width: 130px;
        height: 130px;
        border: 4px solid #ffffff;
        border-radius: 50%;
        background-color: #f8f9fa;
        object-fit: cover;
        box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    }
    
    .profile-info-header {
        margin-top: 60px;
        padding: 0 40px 20px 40px;
    }

    .main-profile-nav {
        border-top: 1px solid #e9ecef;
        padding: 0 20px;
        background: #fff;
        border-bottom-left-radius: 8px;
        border-bottom-right-radius: 8px;
    }
    .main-profile-nav .nav-link {
        color: #6c757d;
        font-weight: 600;
        padding: 1rem 1.5rem;
        border: none;
        border-bottom: 3px solid transparent;
        border-radius: 0;
        transition: all 0.2s ease;
    }
    .main-profile-nav .nav-link:hover {
        color: #198754;
    }
    .main-profile-nav .nav-link.active {
        color: #198754;
        background: transparent;
        border-bottom: 3px solid #198754;
    }

    .nav-pills-sub .nav-link {
        transition: all 0.3s ease;
        color: #495057;
        font-size: 14px;
        border-radius: 6px;
    }
    .nav-pills-sub .nav-link:hover {
        background-color: #f8f9fa;
    }
    .nav-pills-sub .nav-link.active {
        font-weight: bold;
        box-shadow: 0 .125rem .25rem rgba(0,0,0,.075) !important;
        background-color: #198754 !important; 
        color: #ffffff !important;
    }

    .cropper-container-wrapper {
        max-height: 450px;
        margin-bottom: 15px;
        background-color: #f8f9fa;
        overflow: hidden;
        border-radius: 8px;
    }
    #imageToCrop {
        display: block;
        max-width: 100%;
        max-height: 400px;
    }
    
    .btn-cam-overlay {
        width: 36px;
        height: 36px;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 3px solid #ffffff;
        transition: transform 0.2s;
    }
    .btn-cam-overlay:hover {
        transform: scale(1.1);
    }
</style>
@endpush

@section('content')
@php
    $activeMenu = $activeMenu ?? 'edit';
@endphp

<div class="container-fluid py-4">
    <div class="d-flex justify-content-between align-items-center mb-3">
        <h4 class="mb-0 fw-bold">Hub Profil Pendidik</h4>
        @php
            $backUrl = session('url_kembali_guru', route('admin.guru'));
        @endphp
        
        <a href="{{ $backUrl }}" class="btn btn-secondary btn-sm d-flex align-items-center gap-2 shadow-sm">
            <i class="bi bi-arrow-left"></i> Kembali ke Daftar Guru
        </a>
    </div>

    @if(session('success'))
        <div class="alert alert-success border-0 shadow-sm"><i class="bi bi-check-circle-fill me-2"></i>{{ session('success') }}</div>
    @endif
    @if($errors->any())
        <div class="alert alert-danger border-0 shadow-sm">
            <ul class="mb-0">
                @foreach($errors->all() as $err) <li>{{ $err }}</li> @endforeach
            </ul>
        </div>
    @endif

    <div class="card border-0 shadow-sm mb-4">
        <div class="profile-cover">
            <div class="profile-avatar-container">
                <div class="position-relative d-inline-block">
                    <img src="{{ $guru->foto ? asset('storage/guru/' . $guru->foto) : 'https://ui-avatars.com/api/?name='.urlencode($guru->nama_lengkap).'&background=random&size=150' }}" 
                         class="profile-avatar" id="preview-foto" alt="Foto {{ $guru->nama_lengkap }}">
        
                    <div class="dropdown position-absolute" style="bottom: 5px; right: 0;">
                        <button class="btn btn-success btn-cam-overlay rounded-circle shadow" type="button" data-bs-toggle="dropdown" aria-expanded="false" title="Ubah Foto Profil">
                            <i class="bi bi-camera-fill"></i>
                        </button>
                        <ul class="dropdown-menu shadow-sm fs-6 border-0">
                            <li>
                                <a class="dropdown-item py-2 fw-medium" href="#" onclick="document.getElementById('foto_file_trigger').click(); return false;">
                                    <i class="bi bi-folder2-open me-2 text-success"></i> Pilih dari Galeri
                                </a>
                            </li>
                            <li>
                                <a class="dropdown-item py-2 fw-medium" href="#" id="btnBukaKamera">
                                    <i class="bi bi-camera me-2 text-primary"></i> Buka Kamera
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="profile-info-header d-flex flex-wrap justify-content-between align-items-end gap-3">
            <div>
                <h3 class="fw-bold mb-1 d-flex align-items-center">
                    {{ $guru->nama_lengkap }} 
                    <i class="bi bi-patch-check-fill text-success ms-2" style="font-size: 1.1rem;" title="Pendidik Aktif"></i>
                </h3>
                <p class="text-muted mb-2" style="font-size: 14px;">
                    <i class="bi bi-upc-scan me-1"></i> NIP: <strong>{{ $guru->nip ?? '-' }}</strong> &nbsp;|&nbsp; 
                    <i class="bi bi-telephone-fill me-1"></i> HP: <strong>{{ $guru->hp ?? '-' }}</strong>
                </p>
                
                <div class="d-flex flex-wrap gap-2 mb-2">
                    <span class="badge bg-light text-dark border">
                        <i class="bi bi-person-badge me-1 text-primary"></i> 
                        {{ $guru->status_kepegawaian ?? 'Status Belum Diset' }}
                    </span>

                    @if(isset($guru->jenjangKelas) && $guru->jenjangKelas->isNotEmpty())
                        @foreach($guru->jenjangKelas as $jk)
                            <span class="badge bg-success bg-opacity-10 text-success border border-success">
                                <i class="bi bi-building me-1"></i> {{ $jk->nama_jenjang }}
                            </span>
                        @endforeach
                    @else
                        <span class="badge bg-light text-muted border">Belum Ada Penugasan Jenjang</span>
                    @endif
                    
                    <span class="badge {{ $guru->jenis_kelamin == 'L' ? 'bg-primary' : 'bg-danger' }} bg-opacity-10 text-{{ $guru->jenis_kelamin == 'L' ? 'primary' : 'danger' }} border border-{{ $guru->jenis_kelamin == 'L' ? 'primary' : 'danger' }}">
                        <i class="bi {{ $guru->jenis_kelamin == 'L' ? 'bi-gender-male' : 'bi-gender-female' }} me-1"></i> {{ $guru->jenis_kelamin == 'L' ? 'Laki-Laki' : 'Perempuan' }}
                    </span>
                </div>
            </div>
            
            <div class="mb-2 d-flex gap-2">
                <button class="btn btn-outline-primary btn-sm rounded-pill fw-bold px-3 shadow-sm">
                    <i class="bi bi-printer me-1"></i> Cetak Biodata
                </button>
            </div>
        </div>

        <ul class="nav nav-pills main-profile-nav d-flex flex-nowrap overflow-auto">
            <li class="nav-item">
                <a href="{{ route('admin.guru.edit', $guru->id) }}" class="nav-link {{ $activeMenu == 'edit' ? 'active' : '' }}">
                    <i class="bi bi-person-lines-fill me-2"></i> Biodata Pendidik
                </a>
            </li>
            <li class="nav-item">
                <a href="#" class="nav-link {{ $activeMenu == 'tugas' ? 'active' : '' }}">
                    <i class="bi bi-briefcase me-2"></i> Penugasan & Jabatan
                </a>
            </li>
            <li class="nav-item">
                <a href="#" class="nav-link {{ $activeMenu == 'jadwal' ? 'active' : '' }}">
                    <i class="bi bi-calendar-week me-2"></i> Jadwal Mengajar
                </a>
            </li>
            <li class="nav-item">
                <a href="#" class="nav-link {{ $activeMenu == 'absensi' ? 'active' : '' }}">
                    <i class="bi bi-clock-history me-2"></i> Log Presensi
                </a>
            </li>
            <li class="nav-item">
                <a href="#" class="nav-link {{ $activeMenu == 'dokumen' ? 'active' : '' }}">
                    <i class="bi bi-folder-check me-2"></i> Dokumen
                </a>
            </li>
        </ul>
    </div>

    <div class="main-content-area">
        @if($activeMenu == 'edit')
            <form id="formEditGuru" action="{{ route('admin.guru.update', $guru->id) }}" method="POST" enctype="multipart/form-data">
                @csrf
                @method('PUT')
                
                <input type="hidden" name="foto_base64" id="foto_base64">
                <input type="file" class="d-none" id="foto_file_trigger" accept="image/*">
                
                <div class="nav-wrapper position-relative mb-4">
                    <ul class="nav nav-pills nav-pills-sub p-1 bg-white border rounded-3 shadow-sm d-flex" id="guruSubTab" role="tablist">
                        <li class="nav-item flex-fill text-center" role="presentation">
                            <button class="nav-link active w-100 mb-0 px-0 py-2" id="tab-identitas" data-bs-toggle="tab" data-bs-target="#identitas" type="button" role="tab">
                                <i class="bi bi-person-vcard me-1"></i> 1. Identitas Personal
                            </button>
                        </li>
                        <li class="nav-item flex-fill text-center" role="presentation">
                            <button class="nav-link w-100 mb-0 px-0 py-2" id="tab-alamat" data-bs-toggle="tab" data-bs-target="#alamat" type="button" role="tab">
                                <i class="bi bi-geo-alt me-1"></i> 2. Data Domisili
                            </button>
                        </li>
                        <li class="nav-item flex-fill text-center" role="presentation">
                            <button class="nav-link w-100 mb-0 px-0 py-2" id="tab-kepegawaian" data-bs-toggle="tab" data-bs-target="#kepegawaian" type="button" role="tab">
                                <i class="bi bi-briefcase me-1"></i> 3. Status Kepegawaian
                            </button>
                        </li>
                    </ul>
                </div>

                <div class="card shadow-sm border-0">
                    <div class="card-body p-4 border-bottom">
                        <div class="tab-content">
                            @includeIf('admin.data-guru.edit-identitas')
                            @includeIf('admin.data-guru.edit-domisili')
                            @includeIf('admin.data-guru.edit-kepegawaian')
                            
                            <div class="alert alert-info border-0 mt-3">
                                <i class="bi bi-tools me-2"></i> Area Form Input (Akan dipisah ke file komponen include jika belum tersedia).
                            </div>
                        </div>
                    </div>
                    
                    <div class="card-footer bg-light p-3 text-end rounded-bottom">
                        <button type="submit" class="btn btn-success px-4 fw-bold shadow-sm">
                            <i class="bi bi-save me-1"></i> Simpan Semua Pembaruan
                        </button>
                    </div>
                </div>
            </form>
        @endif
    </div>
</div>

<!-- Modal Crop Photo -->
<div class="modal fade" id="cropModal" tabindex="-1" data-bs-backdrop="static" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content">
            <div class="modal-header bg-dark text-white border-bottom-0">
                <h5 class="modal-title fw-bold" id="cropModalTitle"><i class="bi bi-crop"></i> Sesuaikan Foto Profil</h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close" onclick="stopCamera()"></button>
            </div>
            <div class="modal-body bg-dark p-4 text-center">
                <div id="kamera-area" class="d-none">
                    <video id="videoElement" autoplay playsinline style="width: 100%; max-height: 400px; background: #000; border-radius: 8px;"></video>
                    <div class="mt-3">
                        <button type="button" class="btn btn-light rounded-circle p-3 shadow" id="btnCapture" style="width: 65px; height: 65px; border: 4px solid #dee2e6;">
                            <i class="bi bi-camera-fill fs-3 text-success"></i>
                        </button>
                    </div>
                </div>
                <div id="crop-area" class="d-none">
                    <div class="cropper-container-wrapper">
                        <img id="imageToCrop" alt="Source Image">
                    </div>
                </div>
            </div>
            <div class="modal-footer bg-dark border-top-0 d-flex justify-content-between">
                <button type="button" class="btn btn-outline-light" data-bs-dismiss="modal" onclick="stopCamera()">Batal</button>
                <button type="button" class="btn btn-success fw-bold px-4" id="btnSaveCrop" style="display: none;">
                    <i class="bi bi-check2-circle me-1"></i> Potong & Gunakan
                </button>
            </div>
        </div>
    </div>
</div>
@endsection

@include('admin.data-guru.views-scripts')