@extends('layout.admin')
@section('content')
<main id="main" class="main">

    <div class="pagetitle">
      <h1>Edit Profil</h1>
      <nav>
        <ol class="breadcrumb">
          <li class="breadcrumb-item"><a href="/dashboard">Home</a></li>
          <li class="breadcrumb-item">Profil</li>
          <li class="breadcrumb-item active">Edit Profil</li>
        </ol>
      </nav>
    </div><!-- End Page Title -->

    <section class="section profile">
      <div class="row justify-content-center">
        <div class="col-xl-9">

          <style>
            .premium-form-card {
              border: none;
              border-radius: 16px;
              box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
              border-top: 4px solid #6366f1;
              background: #ffffff;
            }
            .form-label-premium {
              font-weight: 600;
              font-size: 12px;
              color: #344054;
              margin-bottom: 6px;
              display: block;
              text-transform: uppercase;
              letter-spacing: 0.5px;
            }
            .form-control-premium {
              border: 1px solid #d0d5dd;
              border-radius: 10px;
              padding: 10px 16px;
              font-size: 14px;
              color: #1d2939;
              background-color: #ffffff;
              transition: border-color 0.2s, box-shadow 0.2s;
            }
            .form-control-premium:focus {
              outline: none;
              border-color: #6366f1;
              box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.15);
              background-color: #ffffff;
            }
            .btn-pill {
              border-radius: 50px;
              font-weight: 600;
              font-size: 13px;
              padding: 10px 28px;
              transition: all 0.2s;
            }
            .btn-pill:hover {
              transform: translateY(-1px);
            }
            .profile-avatar-container {
              width: 130px;
              height: 130px;
              border-radius: 50%;
              overflow: hidden;
              border: 3px solid #6366f1;
              box-shadow: 0 4px 12px rgba(99, 102, 241, 0.15);
            }
            .profile-avatar-container img {
              width: 100%;
              height: 100%;
              object-fit: cover;
            }
          </style>

          <div class="card premium-form-card">
            <div class="card-body p-5">
              <h5 class="card-title text-center mb-4 text-dark font-weight-bold">Ubah Data Profil</h5>

              <!-- Profile Edit Form -->
              <form method="POST" action="{{ route('profile-edit-admin', $admin->id) }}" enctype="multipart/form-data" class="row g-4">
                @csrf
                
                <!-- Profile Image Section -->
                <div class="col-12 d-flex flex-column align-items-center mb-4">
                  <div class="profile-avatar-container mb-3">
                    @if ($admin->foto) 
                      <img src="{{ asset('Data/profile_pict_admin/' . $admin->foto) }}" alt="Profile">
                    @else
                      <img src="{{ asset('assets/img/profile-img.jpg') }}" alt="Profile">
                    @endif
                  </div>
                  <div class="w-100 text-center" style="max-width: 320px;">
                    <label for="foto" class="form-label-premium text-center">Ganti Foto Profil</label>
                    <input type="file" class="form-control form-control-premium" id="foto" name="foto"> 
                  </div>
                </div>

                <div class="col-md-12">
                  <label for="nama" class="form-label-premium">Nama Admin</label>
                  <input type="text" class="form-control form-control-premium w-100" id="nama" name="nama" value="{{ $admin->nama ?? '-' }}" required placeholder="Masukkan Nama Lengkap">
                </div>

                <div class="col-md-12">
                  <label for="no_hp" class="form-label-premium">Nomor Telepon</label>
                  <input name="no_hp" type="text" class="form-control form-control-premium w-100" id="no_hp" value="{{ $admin->no_hp ?? '-' }}" placeholder="Contoh: 0812XXXXXXXX">
                </div>

                <div class="col-md-12">
                  <label for="alamat" class="form-label-premium">Alamat Lengkap</label>
                  <input type="text" class="form-control form-control-premium w-100" id="alamat" name="alamat" value="{{ $admin->alamat ?? '-' }}" placeholder="Masukkan Alamat Lengkap">
                </div>

                <!-- Modal -->
                <div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
                  <div class="modal-dialog modal-dialog-centered" role="document">
                      <div class="modal-content border-0 shadow">
                      <div class="modal-header bg-primary text-white">
                          <h5 class="modal-title font-weight-bold" id="exampleModalLongTitle"><i class="bi bi-question-circle me-2"></i>Konfirmasi</h5>
                          <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
                      </div>
                      <div class="modal-body text-dark py-4">
                          Apakah Anda yakin ingin menyimpan perubahan pada data profil ini?
                      </div>
                      <div class="modal-footer bg-light">
                          <button type="button" class="btn btn-secondary btn-pill" data-bs-dismiss="modal">Batal</button>
                          <button type="submit" class="btn btn-primary btn-pill">Ya, Simpan</button>
                      </div>
                      </div>
                  </div>
                </div>

                <div class="col-12 d-flex justify-content-end mt-5">
                  <button type="button" class="btn btn-primary btn-pill shadow-sm" data-bs-toggle="modal" data-bs-target="#exampleModalLong">Simpan Perubahan</button>
                </div>
              </form><!-- End Profile Edit Form -->

            </div>
          </div>

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

  </main><!-- End #main -->
@endsection