@extends('layouts.main')

@section('css')
<style>
  @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

  body, .content, h1, h2, h3, h4, h5, h6, th, td, span, label {
    font-family: 'Inter', sans-serif !important;
  }

  /* Kustomisasi Card Utama */
  .card {
    border: none;
    box-shadow: 0 1rem 2rem rgba(15, 23, 42, 0.08);
    border-radius: 1.25rem;
    overflow: hidden;
    background: #ffffff;
  }
  .card-header {
    background-color: transparent;
    border-bottom: 1px solid rgba(226, 232, 240, 0.8);
    padding: 1.25rem 1.5rem;
  }

  /* Header Banner Gradasi Alternatif (Emerald & Teal Modern) */
  .page-header-wrapper {
    background: linear-gradient(135deg, #059669 0%, #0d9488 50%, #0284c7 100%);
    color: #ffffff;
    padding: 2rem;
    border-radius: 1.25rem;
    margin-bottom: 1.75rem;
    box-shadow: 0 12px 30px rgba(5, 150, 105, 0.25);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
  }

  /* Navigasi Tab Kapsul Alternatif */
  .nav-mine {
    display: flex;
    gap: 0.5rem;
    background: #f1f5f9;
    padding: 0.35rem;
    border-radius: 50rem;
  }
  .nav-mine .nav-item .nav-link {
    border-radius: 50rem !important;
    padding: 0.5rem 1.25rem;
    font-weight: 600;
    font-size: 0.85rem;
    color: #64748b;
    border: none;
    transition: all 0.25s ease-in-out;
  }
  .nav-mine .nav-item .nav-link:hover {
    color: #1e293b;
    background: rgba(226, 232, 240, 0.6);
  }
  .nav-mine .nav-item .nav-link.active {
    background: linear-gradient(135deg, #059669 0%, #047857 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(5, 150, 105, 0.3);
  }

  /* Styling Label Form Modern */
  .form-group label, .mb-3 label, label {
    font-weight: 600 !important;
    color: #334155 !important;
    font-size: 0.875rem;
    margin-bottom: 0.5rem;
  }

  /* Input, Select, dan Textarea Modern dengan Aksi Fokus Emerald */
  .form-control, .form-select {
    border: 1.5px solid #cbd5e1 !important;
    border-radius: 0.75rem !important;
    padding: 0.65rem 1rem !important;
    font-size: 0.9rem !important;
    color: #1e293b !important;
    background-color: #f8fafc !important;
    transition: all 0.25s ease-in-out;
  }

  .form-control:focus, .form-select:focus {
    border-color: #059669 !important;
    background-color: #ffffff !important;
    box-shadow: 0 0 0 4px rgba(5, 150, 105, 0.15) !important;
  }

  /* Kustomisasi Checkbox */
  .form-check-input {
    width: 1.15rem;
    height: 1.15rem;
    margin-top: 0.15rem;
    border: 1.5px solid #cbd5e1;
    border-radius: 0.35rem !important;
    cursor: pointer;
  }
  .form-check-input:checked {
    background-color: #059669;
    border-color: #059669;
  }
  .form-check-label {
    cursor: pointer;
    font-weight: 500 !important;
    color: #475569;
    margin-left: 0.35rem;
  }

  /* Tombol Simpan Bergradasi Nuansa Emerald/Teal */
  .btn-save-modern, button[type="submit"], .btn-primary {
    background: linear-gradient(135deg, #059669 0%, #047857 100%) !important;
    color: #ffffff !important;
    font-weight: 600;
    padding: 0.65rem 2rem !important;
    border-radius: 50rem !important;
    border: none !important;
    box-shadow: 0 4px 15px rgba(5, 150, 105, 0.3);
    transition: all 0.25s ease-in-out;
  }
  .btn-save-modern:hover, button[type="submit"]:hover, .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(5, 150, 105, 0.45);
    background: linear-gradient(135deg, #047857 0%, #065f46 100%) !important;
  }
</style>
@endsection

@section('content')

{{-- Header Banner Alternatif --}}
<div class="content-header pb-0">
  <div class="container-fluid">
    <div class="page-header-wrapper">
      <div>
        <h2 class="m-0 fw-bold text-white d-flex align-items-center gap-2" style="font-size: 1.75rem;">
          <i class="fas fa-id-badge text-warning"></i> Data Pendidik
        </h2>
        <p class="text-white-50 mb-0 mt-1" style="font-size: 0.95rem;">Kelola kredensial akun, perbarui foto profil, dan informasi identitas resmi Anda.</p>
      </div>
    </div>
  </div>
</div>

<section class="content pb-4">
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-4">
                @include('pages.profil._profile')
            </div>
            <!-- /.col -->
            <div class="col-md-8">
                <div class="card">
                    <div class="card-header p-3">
                        <ul class="nav nav-mine">
                            <li class="nav-item">
                              <a class="nav-link {{ Request::is('profil') ? 'active' : '' }}" href="{{ route('profil.index') }}">
                                <i class="fas fa-address-card me-1"></i> Edit Profil
                              </a>
                            </li>
                            <li class="nav-item">
                              <a class="nav-link {{ Request::is('profil/edit-foto') ? 'active' : '' }}" href="{{ route('profil.editfoto') }}">
                                <i class="fas fa-image me-1"></i> Edit Foto
                              </a>
                            </li>
                            <li class="nav-item">
                              <a class="nav-link {{ Request::is('profil/edit-akun') ? 'active' : '' }}" href="{{ route('profil.editakun') }}">
                                <i class="fas fa-lock me-1"></i> Edit Akun
                              </a>
                            </li>
                        </ul>
                    </div><!-- /.card-header -->
                    <div class="card-body px-4 pb-4">
                        <div class="tab-content">
                            <div class="tab-pane {{ Request::is('profil') ? 'active' : '' }}" id="profil">
                                @include('pages.profil.editprofil')
                            </div>
                            <div class="tab-pane {{ Request::is('profil/edit-foto') ? 'active' : '' }}" id="foto">
                                @yield('editfoto')
                            </div>
                            <div class="tab-pane {{ Request::is('profil/edit-akun') ? 'active' : '' }}" id="akun">
                                @yield('editakun')
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
@endsection

@section('js')
<script>
  function previewImage() {
      const image = document.querySelector('#gambar');
      const imgPreview = document.querySelector('.img-preview');

      imgPreview.style.display = 'inline';

      const oFReader = new FileReader();
      oFReader.readAsDataURL(image.files[0]);

      oFReader.onload = function(oFREvent) {
          imgPreview.src = oFREvent.target.result;
      }
  }
</script>
@endsection