@extends('portofolio::layout.user')
@section('content')

<main id="main" class="main">

  <div class="pagetitle">
    <h1>E-Portofolio Penghargaan</h1>
    <nav>
      <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="/user/dashboard">Home</a></li>
        <li class="breadcrumb-item"><a href="{{ route('eporto.riwayat-hidup-view') }}">Riwayat Hidup</a></li>
        <li class="breadcrumb-item active">Penghargaan</li>
      </ol>
    </nav>
  </div>

  <section class="section">
    <div class="row">
      <div class="col-lg-12">

        <div class="card">
          <div class="card-body pt-3">

            @if ($errors->any())
            <div class="alert alert-danger alert-dismissible fade show" role="alert">
              <strong>⚠️ Perhatian!</strong> Ada kesalahan dalam input data:
              <ul class="mt-2 mb-0">
                @foreach ($errors->all() as $error)
                <li>{{ $error }}</li>
                @endforeach
              </ul>
              <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            </div>
            @endif

            @if (session('success'))
            <div class="alert alert-success alert-dismissible fade show" role="alert">
              <strong>✅ Berhasil!</strong> {{ session('success') }}
              <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            </div>
            @endif

            <h5 class="card-title">Data Penghargaan</h5>

            {{-- TAB HEADER --}}
            <ul class="nav nav-tabs nav-tabs-bordered" id="penghargaantab" role="tablist">
              <li class="nav-item">
                <button class="nav-link active" data-bs-toggle="tab" data-bs-target="#daftar-penghargaan">
                  Daftar Penghargaan
                </button>
              </li>
              <li class="nav-item">
                <button class="nav-link" data-bs-toggle="tab" data-bs-target="#form-penghargaan">
                  Tambah Penghargaan
                </button>
              </li>
            </ul>

            {{-- TAB CONTENT --}}
            <div class="tab-content pt-2">

              {{-- DAFTAR PENGHARGAAN --}}
              <div class="tab-pane fade show active" id="daftar-penghargaan">
                <h5 class="card-title mt-3">Daftar Penghargaan Anda</h5>

                @if ($penghargaans->isEmpty())
                <div class="alert alert-info">
                  <i class="bi bi-info-circle me-2"></i> Belum ada data penghargaan.
                  <a href="#form-penghargaan" class="alert-link" data-bs-toggle="tab" data-bs-target="#form-penghargaan">
                    Tambah penghargaan baru
                  </a>
                </div>
                @else
                <div class="table-responsive">
                  <table class="table table-striped table-hover">
                    <thead class="table-primary">
                      <tr>
                        <th style="width: 5%">No</th>
                        <th style="width: 15%">Tahun</th>
                        <th style="width: 20%">Bentuk Penghargaan</th>
                        <th style="width: 25%">Pemberi Penghargaan</th>
                        <th style="width: 20%">Aksi</th>
                      </tr>
                    </thead>
                    <tbody>
                      @forelse ($penghargaans as $penghargaan)
                      <tr>
                        <td>{{ $loop->iteration }}</td>
                        <td>{{ $penghargaan->tahun ?? '-' }}</td>
                        <td><span class="badge bg-info">{{ ucfirst($penghargaan->bentuk_penghargaan ?? '-') }}</span></td>
                        <td>{{ $penghargaan->pemberi_penghargaan ?? '-' }}</td>
                        <td>
                          <button type="button"
                            class="btn btn-warning btn-sm btn-edit-penghargaan"
                            data-id="{{ $penghargaan->id }}"
                            data-tahun="{{ $penghargaan->tahun }}"
                            data-bentuk="{{ $penghargaan->bentuk_penghargaan }}"
                            data-pemberi="{{ $penghargaan->pemberi_penghargaan }}"
                            data-bs-toggle="modal"
                            data-bs-target="#editPenghargaanModal">
                            <i class="bi bi-pencil"></i> Edit
                          </button>
                          <button type="button"
                            class="btn btn-danger btn-sm btn-delete-penghargaan"
                            data-id="{{ $penghargaan->id }}"
                            data-bs-toggle="modal"
                            data-bs-target="#deletePenghargaanModal">
                            <i class="bi bi-trash"></i> Hapus
                          </button>
                        </td>
                      </tr>
                      @empty
                      @endforelse
                    </tbody>
                  </table>
                </div>
                @endif
              </div>

              {{-- FORM TAMBAH PENGHARGAAN --}}
              <div class="tab-pane fade" id="form-penghargaan">
                <h5 class="card-title mt-3">Form Tambah Penghargaan</h5>

                <form action="{{ route('eporto.penghargaan-add') }}" method="POST" class="row g-3">
                  @csrf

                  {{-- Tahun --}}
                  <div class="col-md-6">
                    <label for="tahun" class="form-label">Tahun <span class="text-danger">*</span></label>
                    <input type="number"
                      class="form-control @error('tahun') is-invalid @enderror"
                      id="tahun"
                      name="tahun"
                      min="2000"
                      max="{{ now()->year }}"
                      value="{{ old('tahun') }}"
                      required>
                    @error('tahun')
                    <div class="invalid-feedback d-block">{{ $message }}</div>
                    @enderror
                  </div>

                  {{-- Bentuk Penghargaan --}}
                  <div class="col-md-6">
                    <label for="bentuk_penghargaan" class="form-label">Bentuk Penghargaan <span class="text-danger">*</span></label>
                    <select class="form-select @error('bentuk_penghargaan') is-invalid @enderror"
                      id="bentuk_penghargaan"
                      name="bentuk_penghargaan"
                      required>
                      <option value="">-- Pilih Bentuk --</option>
                      <option value="piagam" {{ old('bentuk_penghargaan') === 'piagam' ? 'selected' : '' }}>Piagam</option>
                      <option value="sertifikat" {{ old('bentuk_penghargaan') === 'sertifikat' ? 'selected' : '' }}>Sertifikat</option>
                      <option value="lainnya" {{ old('bentuk_penghargaan') === 'lainnya' ? 'selected' : '' }}>Lainnya</option>
                    </select>
                    @error('bentuk_penghargaan')
                    <div class="invalid-feedback d-block">{{ $message }}</div>
                    @enderror
                  </div>

                  {{-- Pemberi Penghargaan --}}
                  <div class="col-12">
                    <label for="pemberi_penghargaan" class="form-label">Pemberi Penghargaan</label>
                    <input type="text"
                      class="form-control @error('pemberi_penghargaan') is-invalid @enderror"
                      id="pemberi_penghargaan"
                      name="pemberi_penghargaan"
                      placeholder="Contoh: Universitas Trunodjoyo Madura"
                      value="{{ old('pemberi_penghargaan') }}">
                    @error('pemberi_penghargaan')
                    <div class="invalid-feedback d-block">{{ $message }}</div>
                    @enderror
                  </div>

                  {{-- Submit Button --}}
                  <div class="col-12">
                    <button type="submit" class="btn btn-primary">
                      <i class="bi bi-plus-circle me-1"></i> Tambah Penghargaan
                    </button>
                    <a href="#daftar-penghargaan" class="btn btn-secondary ms-2" data-bs-toggle="tab" data-bs-target="#daftar-penghargaan">
                      <i class="bi bi-arrow-left me-1"></i> Kembali
                    </a>
                  </div>
                </form>
              </div>

            </div>

          </div>
        </div>

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

</main>

{{-- Modal Edit Penghargaan --}}
<div class="modal fade" id="editPenghargaanModal" tabindex="-1">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <form id="editPenghargaanForm" method="POST">
        @csrf
        @method('PUT')

        <div class="modal-header">
          <h5 class="modal-title">Edit Penghargaan</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
        </div>

        <div class="modal-body">
          <div class="mb-3">
            <label for="edit_tahun" class="form-label">Tahun <span class="text-danger">*</span></label>
            <input type="number" class="form-control" id="edit_tahun" name="tahun" min="2000" required>
          </div>

          <div class="mb-3">
            <label for="edit_bentuk" class="form-label">Bentuk Penghargaan <span class="text-danger">*</span></label>
            <select class="form-select" id="edit_bentuk" name="bentuk_penghargaan" required>
              <option value="piagam">Piagam</option>
              <option value="sertifikat">Sertifikat</option>
              <option value="lainnya">Lainnya</option>
            </select>
          </div>

          <div class="mb-3">
            <label for="edit_pemberi" class="form-label">Pemberi Penghargaan</label>
            <input type="text" class="form-control" id="edit_pemberi" name="pemberi_penghargaan">
          </div>
        </div>

        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
          <button type="submit" class="btn btn-primary">Simpan Perubahan</button>
        </div>
      </form>
    </div>
  </div>
</div>

{{-- Modal Delete Penghargaan --}}
<div class="modal fade" id="deletePenghargaanModal" tabindex="-1">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <form id="deletePenghargaanForm" method="POST">
        @csrf
        @method('DELETE')

        <div class="modal-header">
          <h5 class="modal-title">Konfirmasi Hapus</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
        </div>

        <div class="modal-body">
          <p>Apakah Anda yakin ingin menghapus penghargaan ini?</p>
          <p class="text-muted small">Data yang dihapus tidak dapat dipulihkan.</p>
        </div>

        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
          <button type="submit" class="btn btn-danger">Ya, Hapus</button>
        </div>
      </form>
    </div>
  </div>
</div>

<script>
  document.querySelectorAll('.btn-edit-penghargaan').forEach(btn => {
    btn.addEventListener('click', function() {
      const id = this.dataset.id;
      document.getElementById('edit_tahun').value = this.dataset.tahun || '';
      document.getElementById('edit_bentuk').value = this.dataset.bentuk || '';
      document.getElementById('edit_pemberi').value = this.dataset.pemberi || '';
      document.getElementById('editPenghargaanForm').action = `/penghargaan-edit/${id}`;
    });
  });

  document.querySelectorAll('.btn-delete-penghargaan').forEach(btn => {
    btn.addEventListener('click', function() {
      const id = this.dataset.id;
      document.getElementById('deletePenghargaanForm').action = `/penghargaan-delete/${id}`;
    });
  });
</script>

@endsection

<script>
  (function() {
    document.querySelectorAll('form').forEach(form => {
      const fileInputs = Array.from(form.querySelectorAll('input[type=file]'));
      if (fileInputs.length === 0) return;
      form.addEventListener('submit', function(e) {
        const validateAll = form.hasAttribute('data-validate-files') || fileInputs.some(fi => fi.required);
        if (!validateAll) return;
        const anySelected = fileInputs.some(fi => fi.files && fi.files.length > 0);
        if (!anySelected) {
          e.preventDefault();
          const container = form.closest('.card-body') || form;
          const existing = container.querySelector('.upload-warning');
          if (existing) existing.remove();
          const alert = document.createElement('div');
          alert.className = 'alert alert-warning upload-warning';
          alert.role = 'alert';
          alert.innerHTML = '<strong>⚠️ Perhatian!</strong> Silakan pilih file terlebih dahulu sebelum mengunggah.';
          container.insertBefore(alert, container.firstChild);
          setTimeout(() => {
            try {
              alert.remove();
            } catch (_) {}
          }, 5000);
          fileInputs[0].focus();
        }
      });
    });
  })();

  (function() {
    document.querySelectorAll('.btn-delete-penghargaan, .btn-delete-seminar, .btn-delete-organisasi, .btn-delete-kerja, .btn-delete-pelatihan').forEach(btn => {
      if (btn.getAttribute('data-bs-toggle')) return;
      btn.addEventListener('click', function(e) {
        if (!confirm('Yakin ingin menghapus item ini?')) e.preventDefault();
      });
    });
  })();
</script>