{{-- resources/views/admin/siswa/views.blade.php --}}
@extends('admin.layouts.app')
@section('title', 'Profil Siswa - ' . $siswa->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;
        background: linear-gradient(135deg, #0d6efd 0%, #0dcaf0 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: #0d6efd;
    }
    .main-profile-nav .nav-link.active {
        color: #0d6efd;
        background: transparent;
        border-bottom: 3px solid #0d6efd;
    }

    .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: #0d6efd !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
    $taAktifTbl = \App\Models\TahunAjaran::where('status_akademik', 'aktif')->first();
    $semesterAktifTbl = \App\Models\Semester::where('is_active', true)->first();

    $detailId = null;
    $istilahGender = '';
    
    if($siswa->kelas && $siswa->kelas->details->isNotEmpty()) {
        foreach($siswa->kelas->details as $dtl) {
            if($dtl->gender) {
                $valDB = 'L';
                $lower = strtolower($dtl->gender->nama_gender);
                if (str_contains($lower, 'perempuan') || str_contains($lower, 'wanita') || str_contains($lower, 'putri') || str_contains($lower, 'banat') || $lower === 'p') {
                    $valDB = 'P';
                }
                
                if($valDB == $siswa->jenis_kelamin) {
                    $istilahGender = $dtl->gender->nama_gender;
                    $detailId = $dtl->id;
                    break;
                }
            }
        }
    }

    $waliKelas = null;
    if ($siswa->kelas_id && $taAktifTbl && $semesterAktifTbl) {
        $waliKelas = \App\Models\WaliKelas::with('guru')
            ->where('kelas_id', $siswa->kelas_id)
            ->where('kelas_detail_id', $detailId)
            ->where('tahun_ajaran_id', $taAktifTbl->id)
            ->where('semester_id', $semesterAktifTbl->id)
            ->first();
    }
@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 Siswa</h4>
        @php
            $backUrl = session('url_kembali_siswa', route('admin.siswa'));
        @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
        </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="{{ $siswa->foto ? asset('storage/siswa/' . $siswa->foto) : 'https://ui-avatars.com/api/?name='.urlencode($siswa->nama_lengkap).'&background=random&size=150' }}" 
                         class="profile-avatar" id="preview-foto" alt="Foto {{ $siswa->nama_lengkap }}">
        
                    <div class="dropdown position-absolute" style="bottom: 5px; right: 0;">
                        <button class="btn btn-primary 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-primary"></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-success"></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">
                    {{ $siswa->nama_lengkap }} 
                    <i class="bi bi-patch-check-fill text-primary ms-2" style="font-size: 1.1rem;" title="Terverifikasi"></i>
                </h3>
                <p class="text-muted mb-2" style="font-size: 14px;">
                    <i class="bi bi-upc-scan me-1"></i> NIS: <strong>{{ $siswa->nis ?? '-' }}</strong> &nbsp;|&nbsp; 
                    <i class="bi bi-person-vcard me-1"></i> NISN: <strong>{{ $siswa->nisn ?? '-' }}</strong>
                </p>
                
                <div class="d-flex flex-wrap gap-2 mb-2">
                    @if($siswa->kelas)
                        <span class="badge bg-light text-dark border">
                            <i class="bi bi-building me-1 text-primary"></i> 
                            {{ $siswa->kelas->tingkat->jenjang->nama_jenjang ?? '' }} - {{ $siswa->kelas->tingkat->nama_tingkat ?? '' }} {{ $siswa->kelas->nama_kelas }}
                        </span>
                        
                        @if($siswa->kelas->details->isEmpty())
                            <span class="badge bg-secondary bg-opacity-10 text-secondary border border-secondary">Kelas Campuran</span>
                        @else
                            <span class="badge bg-success bg-opacity-10 text-success border border-success">
                                Kelas {{ $istilahGender ?: ($siswa->jenis_kelamin == 'L' ? 'Laki-laki' : 'Perempuan') }}
                            </span>
                        @endif
                    @else
                        <span class="badge bg-light text-muted border">Belum Ada Kelas</span>
                    @endif

                    <span class="badge bg-light text-dark border"><i class="bi bi-calendar-check me-1 text-success"></i> TA: {{ $siswa->tahunAjaran->tahun_ajaran ?? '-' }}</span>
                    <span class="badge {{ $siswa->status_siswa == 'Aktif' ? 'bg-success' : 'bg-danger' }} bg-opacity-10 text-{{ $siswa->status_siswa == 'Aktif' ? 'success' : 'danger' }} border border-{{ $siswa->status_siswa == 'Aktif' ? 'success' : 'danger' }}">
                        <i class="bi bi-shield-check me-1"></i> Status: {{ $siswa->status_siswa ?? 'Aktif' }}
                    </span>
                </div>

                <div class="text-muted" style="font-size: 13px;">
                    <i class="bi bi-person-badge me-1"></i> Wali Kelas: 
                    @if($waliKelas && $waliKelas->guru)
                        <strong class="text-dark">{{ $waliKelas->guru->nama_lengkap }}</strong>
                    @else
                        <span class="text-danger fst-italic">Belum Diatur</span>
                    @endif
                </div>

            </div>
            
            <div class="mb-2 d-flex gap-2">
                @if($siswa->akun)
                    <form action="{{ route('admin.siswa.toggle-akun', $siswa->id) }}" method="POST" class="m-0">
                        @csrf
                        <button type="submit" class="btn {{ $siswa->akun->is_active ? 'btn-danger' : 'btn-success' }} btn-sm rounded-pill fw-bold px-3 shadow-sm" onclick="return confirm('Anda yakin ingin mengubah status akses login siswa ini?')">
                            <i class="bi {{ $siswa->akun->is_active ? 'bi-lock-fill' : 'bi-unlock-fill' }} me-1"></i> 
                            {{ $siswa->akun->is_active ? 'Blokir Akses Login' : 'Buka Akses Login' }}
                        </button>
                    </form>
                @else
                    <form action="{{ route('admin.siswa.generate-akun', $siswa->id) }}" method="POST" class="m-0">
                        @csrf
                        <button type="submit" class="btn btn-warning text-dark btn-sm rounded-pill fw-bold px-3 shadow-sm" onclick="return confirm('Siswa ini belum memiliki akun. Buat akun login sekarang (Password default: 12345678)?')">
                            <i class="bi bi-key-fill me-1"></i> Buat Akun Login
                        </button>
                    </form>
                @endif
                
                <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.siswa.edit', $siswa->id) }}" class="nav-link {{ $activeMenu == 'edit' ? 'active' : '' }}">
                    <i class="bi bi-person-lines-fill me-2"></i> Edit Profile
                </a>
            </li>
            <li class="nav-item">
                <a href="{{ route('admin.siswa.jadwal', $siswa->id) }}" class="nav-link {{ $activeMenu == 'jadwal' ? 'active' : '' }}">
                    <i class="bi bi-calendar-event me-2"></i> Jadwal Siswa
                </a>
            </li>
            <li class="nav-item">
                <a href="{{ route('admin.siswa.absensi', $siswa->id) }}" class="nav-link {{ $activeMenu == 'absensi' ? 'active' : '' }}">
                    <i class="bi bi-person-check-fill me-2"></i> Absensi
                </a>
            </li>
            <li class="nav-item">
                <a href="{{ route('admin.siswa.nilai', $siswa->id) }}" class="nav-link {{ $activeMenu == 'nilai' ? 'active' : '' }}">
                    <i class="bi bi-journal-text me-2"></i> Rekap Nilai
                </a>
            </li>
            <li class="nav-item">
                <a href="{{ route('admin.siswa.keuangan', $siswa->id) }}" class="nav-link {{ $activeMenu == 'keuangan' ? 'active' : '' }}">
                    <i class="bi bi-wallet2 me-2"></i> Histori Keuangan
                </a>
            </li>
            <li class="nav-item">
                <a href="{{ route('admin.siswa.testimoni', $siswa->id) }}" class="nav-link {{ $activeMenu == 'testimoni' ? 'active' : '' }}">
                    <i class="bi bi-chat-quote me-2"></i> Testimoni
                </a>
            </li>
        </ul>
    </div>

    <div class="main-content-area">
        @if($activeMenu == 'edit')
            <form id="formEditSiswa" action="{{ route('admin.siswa.update', $siswa->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="siswaSubTab" 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
                            </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. 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-ortu" data-bs-toggle="tab" data-bs-target="#ortu" type="button" role="tab">
                                <i class="bi bi-people me-1"></i> 3. Orang Tua
                            </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-sosial" data-bs-toggle="tab" data-bs-target="#sosial" type="button" role="tab">
                                <i class="bi bi-shield-check me-1"></i> 4. Kesejahteraan
                            </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-dokumen" data-bs-toggle="tab" data-bs-target="#dokumen" type="button" role="tab">
                                <i class="bi bi-file-earmark-text me-1"></i> 5. File Dokumen
                            </button>
                        </li>
                    </ul>
                </div>

                <div class="card shadow-sm border-0">
                    <div class="card-body p-4 border-bottom">
                        <div class="tab-content">
                            @include('admin.siswa.edit-identitas')
                            @include('admin.siswa.edit-domisili')
                            @include('admin.siswa.edit-ortu')
                            @include('admin.siswa.edit-kesejahteraan')
                            @include('admin.siswa.edit-dokumen')
                        </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>

        @elseif($activeMenu == 'jadwal')
            @include('admin.siswa.jadwal')

        @elseif($activeMenu == 'absensi')
            @include('admin.siswa.absensi')

        @elseif($activeMenu == 'nilai')
            @include('admin.siswa.nilai')

        @elseif($activeMenu == 'keuangan')
            @include('admin.siswa.keuangan')

        @elseif($activeMenu == 'testimoni')
            @include('admin.siswa.testimoni')

        @endif
    </div>
</div>

<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-primary"></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.siswa.views-scripts')