{{-- resources/views/siswa/dashboard.blade.php --}}
@extends('siswa.layouts.app')
@section('title', 'Portal Akademik Siswa')

@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.active { font-weight: bold; background-color: #0d6efd !important; color: #ffffff !important; }
    .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); }
    .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; }
    .form-control:disabled, .form-select:disabled, input[readonly] { background-color: #e9ecef !important; opacity: 1; font-weight: 600; color: #6c757d; cursor: not-allowed; }
</style>
@endpush

@section('content')
@php
    $detailId = null;
    $istilahGender = '';
    $siswaGenderAlias = ($siswa->jenis_kelamin == 'L') ? 'Putra' : 'Putri';
    
    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 && $taAktif && $semAktif) {
        $waliKelas = \App\Models\WaliKelas::with('guru')->where('kelas_id', $siswa->kelas_id)->where('kelas_detail_id', $detailId)->where('tahun_ajaran_id', $taAktif->id)->where('semester_id', $semAktif->id)->first();
    }
@endphp

<div class="container-fluid py-2">
    @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">
                    
                    @if($activeMenu == 'edit')
                    <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"><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>
                    @endif
                </div>
            </div>
        </div>
        
        <div class="profile-info-header">
            <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="Siswa Aktif"></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>
                    <span class="badge bg-success bg-opacity-10 text-success border border-success">Kelas {{ $istilahGender ?: $siswaGenderAlias }}</span>
                @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>
            </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>

        <ul class="nav nav-pills main-profile-nav d-flex flex-nowrap overflow-auto">
            <li class="nav-item"><a href="{{ route('siswa.dashboard', ['tab' => 'edit']) }}" class="nav-link {{ $activeMenu == 'edit' ? 'active' : '' }}"><i class="bi bi-person-lines-fill me-2"></i> Biodata</a></li>
            <li class="nav-item"><a href="{{ route('siswa.dashboard', ['tab' => 'jadwal']) }}" class="nav-link {{ $activeMenu == 'jadwal' ? 'active' : '' }}"><i class="bi bi-calendar-event me-2"></i> Jadwal</a></li>
            <li class="nav-item"><a href="{{ route('siswa.dashboard', ['tab' => 'absensi']) }}" 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('siswa.dashboard', ['tab' => 'nilai']) }}" class="nav-link {{ $activeMenu == 'nilai' ? 'active' : '' }}"><i class="bi bi-journal-text me-2"></i> Nilai</a></li>
            <li class="nav-item"><a href="{{ route('siswa.dashboard', ['tab' => 'keuangan']) }}" class="nav-link {{ $activeMenu == 'keuangan' ? 'active' : '' }}"><i class="bi bi-wallet2 me-2"></i> Keuangan</a></li>
            <li class="nav-item"><a href="{{ route('siswa.dashboard', ['tab' => 'testimoni']) }}" 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 action="{{ route('siswa.update-profil') }}" 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" role="tablist">
                        <li class="nav-item flex-fill text-center"><button class="nav-link active w-100 py-2" data-bs-toggle="tab" data-bs-target="#identitas" type="button"><i class="bi bi-person-vcard"></i> Identitas & Akun</button></li>
                        <li class="nav-item flex-fill text-center"><button class="nav-link w-100 py-2" data-bs-toggle="tab" data-bs-target="#alamat" type="button"><i class="bi bi-geo-alt"></i> Domisili</button></li>
                        <li class="nav-item flex-fill text-center"><button class="nav-link w-100 py-2" data-bs-toggle="tab" data-bs-target="#ortu" type="button"><i class="bi bi-people"></i> Orang Tua</button></li>
                        <li class="nav-item flex-fill text-center"><button class="nav-link w-100 py-2" data-bs-toggle="tab" data-bs-target="#sosial" type="button"><i class="bi bi-shield-check"></i> Kesejahteraan</button></li>
                        <li class="nav-item flex-fill text-center"><button class="nav-link w-100 py-2" data-bs-toggle="tab" data-bs-target="#dokumen" type="button"><i class="bi bi-file-earmark-text"></i> Dokumen</button></li>
                    </ul>
                </div>

                <div class="card shadow-sm border-0 mb-4">
                    <div class="card-body p-4">
                        <div class="tab-content">
                            @include('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"><button type="submit" class="btn btn-success fw-bold px-4 shadow-sm"><i class="bi bi-save me-1"></i> Perbarui Profil</button></div>
                </div>
            </form>

        @elseif($activeMenu == 'jadwal')
            @include('siswa.jadwal')
        @elseif($activeMenu == 'absensi')
            @include('siswa.absensi')
        @elseif($activeMenu == 'nilai')
            @include('siswa.nilai')
        @elseif($activeMenu == 'keuangan')
            @include('siswa.keuangan')
        @elseif($activeMenu == 'testimoni')
            @include('siswa.testimoni')
        @endif
    </div>
</div>

<div class="modal fade" id="cropModal" tabindex="-1" data-bs-backdrop="static">
    <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('siswa.views-scripts')