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

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

  <div class="pagetitle">
    <h1>E-Portofolio Seminar</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">Seminar</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 Seminar / Lokakarya / Simposium</h5>

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

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

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

                @if ($seminars->isEmpty())
                <div class="alert alert-info">
                  <i class="bi bi-info-circle me-2"></i> Belum ada data seminar.
                  <a href="#form-seminar" class="alert-link" data-bs-toggle="tab" data-bs-target="#form-seminar">
                    Tambah seminar 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: 25%">Judul</th>
                        <th style="width: 20%">Penyelenggara</th>
                        <th style="width: 15%">Status</th>
                        <th style="width: 20%">Aksi</th>
                      </tr>
                    </thead>
                    <tbody>
                      @forelse ($seminars as $seminar)
                      <tr>
                        <td>{{ $loop->iteration }}</td>
                        <td>{{ $seminar->tahun ?? '-' }}</td>
                        <td>{{ $seminar->judul ?? '-' }}</td>
                        <td>{{ $seminar->penyelenggara ?? '-' }}</td>
                        <td>
                          <span class="badge {{ $seminar->keikutsertaan === 'panitia' ? 'bg-success' : ($seminar->keikutsertaan === 'pembicara' ? 'bg-warning' : 'bg-secondary') }}">
                            {{ ucfirst($seminar->keikutsertaan ?? '-') }}
                          </span>
                        </td>
                        <td>
                          <button type="button"
                            class="btn btn-warning btn-sm btn-edit-seminar"
                            data-id="{{ $seminar->id }}"
                            data-tahun="{{ $seminar->tahun }}"
                            data-judul="{{ $seminar->judul }}"
                            data-penyelenggara="{{ $seminar->penyelenggara }}"
                            data-status="{{ $seminar->keikutsertaan }}"
                            data-bs-toggle="modal"
                            data-bs-target="#editSeminarModal">
                            <i class="bi bi-pencil"></i> Edit
                          </button>
                          <button type="button"
                            class="btn btn-danger btn-sm btn-delete-seminar"
                            data-id="{{ $seminar->id }}"
                            data-bs-toggle="modal"
                            data-bs-target="#deleteSeminarModal">
                            <i class="bi bi-trash"></i> Hapus
                          </button>
                        </td>
                      </tr>
                      @empty
                      @endforelse
                    </tbody>
                  </table>
                </div>
                @endif
              </div>

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

                <form action="{{ route('eporto.seminar-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>

                  {{-- Judul --}}
                  <div class="col-md-6"></div>

                  {{-- Judul --}}
                  <div class="col-12">
                    <label for="judul" class="form-label">Judul Seminar/Lokakarya/Simposium <span class="text-danger">*</span></label>
                    <input type="text"
                      class="form-control @error('judul') is-invalid @enderror"
                      id="judul"
                      name="judul"
                      placeholder="Contoh: Seminar Digital Transformation 2023"
                      value="{{ old('judul') }}"
                      required>
                    @error('judul')
                    <div class="invalid-feedback d-block">{{ $message }}</div>
                    @enderror
                  </div>

                  {{-- Penyelenggara --}}
                  <div class="col-12">
                    <label for="penyelenggara" class="form-label">Penyelenggara</label>
                    <input type="text"
                      class="form-control @error('penyelenggara') is-invalid @enderror"
                      id="penyelenggara"
                      name="penyelenggara"
                      placeholder="Contoh: Kementerian Pendidikan"
                      value="{{ old('penyelenggara') }}">
                    @error('penyelenggara')
                    <div class="invalid-feedback d-block">{{ $message }}</div>
                    @enderror
                  </div>

                  {{-- Status Keikutsertaan --}}
                  <div class="col-12">
                    <label for="keikutsertaan" class="form-label">Status Keikutsertaan <span class="text-danger">*</span></label>
                    <select class="form-select @error('keikutsertaan') is-invalid @enderror"
                      id="keikutsertaan"
                      name="keikutsertaan"
                      required>
                      <option value="">-- Pilih Status --</option>
                      <option value="peserta" {{ old('keikutsertaan') === 'peserta' ? 'selected' : '' }}>Peserta</option>
                      <option value="panitia" {{ old('keikutsertaan') === 'panitia' ? 'selected' : '' }}>Panitia</option>
                      <option value="pembicara" {{ old('keikutsertaan') === 'pembicara' ? 'selected' : '' }}>Pembicara</option>
                    </select>
                    @error('keikutsertaan')
                    <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 Seminar
                    </button>
                    <a href="#daftar-seminar" class="btn btn-secondary ms-2" data-bs-toggle="tab" data-bs-target="#daftar-seminar">
                      <i class="bi bi-arrow-left me-1"></i> Kembali
                    </a>
                  </div>
                </form>
              </div>

            </div>

          </div>
        </div>

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

</main>

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

        <div class="modal-header">
          <h5 class="modal-title">Edit Seminar</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_judul" class="form-label">Judul <span class="text-danger">*</span></label>
            <input type="text" class="form-control" id="edit_judul" name="judul" required>
          </div>

          <div class="mb-3">
            <label for="edit_penyelenggara" class="form-label">Penyelenggara</label>
            <input type="text" class="form-control" id="edit_penyelenggara" name="penyelenggara">
          </div>

          <div class="mb-3">
            <label for="edit_status" class="form-label">Status Keikutsertaan <span class="text-danger">*</span></label>
            <select class="form-select" id="edit_status" name="keikutsertaan" required>
              <option value="peserta">Peserta</option>
              <option value="panitia">Panitia</option>
              <option value="pembicara">Pembicara</option>
            </select>
          </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 Seminar --}}
<div class="modal fade" id="deleteSeminarModal" tabindex="-1">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <form id="deleteSeminarForm" 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 seminar 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-seminar').forEach(btn => {
    btn.addEventListener('click', function() {
      const id = this.dataset.id;
      document.getElementById('edit_tahun').value = this.dataset.tahun || '';
      document.getElementById('edit_judul').value = this.dataset.judul || '';
      document.getElementById('edit_penyelenggara').value = this.dataset.penyelenggara || '';
      document.getElementById('edit_status').value = this.dataset.status || '';
      document.getElementById('editSeminarForm').action = `/seminar-edit/${id}`;
    });
  });

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

@endsection

<script>
  // Generic file-upload validation: prevent submitting forms that have required file inputs but no selected files
  (function() {
    document.querySelectorAll('form').forEach(form => {
      // only attach when form contains at least one file input
      const fileInputs = Array.from(form.querySelectorAll('input[type=file]'));
      if (fileInputs.length === 0) return;

      form.addEventListener('submit', function(e) {
        // find required file inputs (or any file input if any file input has required attribute or form has data-validate-files)
        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();
          // Bootstrap alert fallback: insert temporary alert at top of form card
          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);
          // also focus first file input
          fileInputs[0].focus();
        }
      });
    });
  })();

  // Add simple confirmation fallback for delete buttons that may not open a modal
  (function() {
    document.querySelectorAll('.btn-delete-seminar, .btn-delete-penghargaan, .btn-delete-organisasi, .btn-delete-kerja, .btn-delete-pelatihan').forEach(btn => {
      if (btn.getAttribute('data-bs-toggle')) return; // already handled by modal
      btn.addEventListener('click', function(e) {
        if (!confirm('Yakin ingin menghapus item ini?')) e.preventDefault();
      });
    });
  })();
</script>