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

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

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

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

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

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

                                @if ($organisasis->isEmpty())
                                <div class="alert alert-info">
                                    <i class="bi bi-info-circle me-2"></i> Belum ada data organisasi.
                                    <a href="#form-organisasi" class="alert-link" data-bs-toggle="tab" data-bs-target="#form-organisasi">
                                        Tambah organisasi 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%">Jangka Waktu</th>
                                                <th style="width: 18%">Jenis Organisasi</th>
                                                <th style="width: 22%">Nama Organisasi</th>
                                                <th style="width: 15%">Jabatan</th>
                                                <th style="width: 20%">Aksi</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @forelse ($organisasis as $organisasi)
                                            <tr>
                                                <td>{{ $loop->iteration }}</td>
                                                <td>{{ $organisasi->tahun ?? '-' }}</td>
                                                <td>{{ $organisasi->jenis ?? '-' }}</td>
                                                <td>{{ $organisasi->nama ?? '-' }}</td>
                                                <td>{{ $organisasi->jabatan ?? '-' }}</td>
                                                <td>
                                                    <button type="button"
                                                        class="btn btn-warning btn-sm btn-edit-organisasi"
                                                        data-id="{{ $organisasi->id }}"
                                                        data-jenis="{{ $organisasi->jenis }}"
                                                        data-nama="{{ $organisasi->nama }}"
                                                        data-jabatan="{{ $organisasi->jabatan }}"
                                                        data-jangka="{{ $organisasi->jangka_waktu }}"
                                                        data-bs-toggle="modal"
                                                        data-bs-target="#editOrganisasiModal">
                                                        <i class="bi bi-pencil"></i> Edit
                                                    </button>
                                                    <button type="button"
                                                        class="btn btn-danger btn-sm btn-delete-organisasi"
                                                        data-id="{{ $organisasi->id }}"
                                                        data-bs-toggle="modal"
                                                        data-bs-target="#deleteOrganisasiModal">
                                                        <i class="bi bi-trash"></i> Hapus
                                                    </button>
                                                </td>
                                            </tr>
                                            @empty
                                            @endforelse
                                        </tbody>
                                    </table>
                                </div>
                                @endif
                            </div>

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

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

                                    {{-- Jenis Organisasi --}}
                                    <div class="col-12">
                                        <label for="jenis" class="form-label">Jenis Organisasi <span class="text-danger">*</span></label>
                                        <input type="text"
                                            class="form-control @error('jenis') is-invalid @enderror"
                                            id="jenis"
                                            name="jenis"
                                            placeholder="Contoh: Asosiasi Profesi, Komunitas, Dewan Pengurus, dll"
                                            value="{{ old('jenis') }}"
                                            required>
                                        <small class="form-text text-muted d-block mt-2">
                                            <strong>Petunjuk:</strong> Sebutkan jenis organisasi profesional, seperti komunitas, perkumpulan atau organisasi profesi sejenisnya.
                                        </small>
                                        @error('jenis')
                                        <div class="invalid-feedback d-block">{{ $message }}</div>
                                        @enderror
                                    </div>

                                    {{-- Nama Organisasi --}}
                                    <div class="col-12">
                                        <label for="nama" class="form-label">Nama Organisasi <span class="text-danger">*</span></label>
                                        <input type="text"
                                            class="form-control @error('nama') is-invalid @enderror"
                                            id="nama"
                                            name="nama"
                                            placeholder="Contoh: Asosiasi Dosen Indonesia (ADI), Komunitas Programmer Surabaya, dll"
                                            value="{{ old('nama') }}"
                                            required>
                                        <small class="form-text text-muted d-block mt-2">
                                            <strong>Petunjuk:</strong> Sebutkan nama organisasi secara lengkap dan jelas.
                                        </small>
                                        @error('nama')
                                        <div class="invalid-feedback d-block">{{ $message }}</div>
                                        @enderror
                                    </div>

                                    {{-- Jangka Waktu --}}
                                    <div class="col-12">
                                        <label for="jangka_waktu" class="form-label">Jangka Waktu <span class="text-danger">*</span></label>
                                        <div class="row">
                                            <div class="col-md-6">
                                                <label class="form-label small">Mulai</label>
                                                <div class="row">
                                                    <div class="col-6">
                                                        <select class="form-select form-select-sm @error('bulan_mulai') is-invalid @enderror" id="bulan_mulai" name="bulan_mulai" required>
                                                            <option value="">Bulan</option>
                                                            @for ($m = 1; $m <= 12; $m++)
                                                                <option value="{{ str_pad($m, 2, '0', STR_PAD_LEFT) }}" {{ old('bulan_mulai') == str_pad($m, 2, '0', STR_PAD_LEFT) ? 'selected' : '' }}>
                                                                {{ str_pad($m, 2, '0', STR_PAD_LEFT) }}
                                                                </option>
                                                                @endfor
                                                        </select>
                                                    </div>
                                                    <div class="col-6">
                                                        <select class="form-select form-select-sm @error('tahun_mulai') is-invalid @enderror" id="tahun_mulai" name="tahun_mulai" required>
                                                            <option value="">Tahun</option>
                                                            @for ($y = now()->year; $y >= 2000; $y--)
                                                            <option value="{{ $y }}" {{ old('tahun_mulai') == $y ? 'selected' : '' }}>{{ $y }}</option>
                                                            @endfor
                                                        </select>
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="col-md-6">
                                                <label class="form-label small">Berakhir</label>
                                                <div class="row">
                                                    <div class="col-6">
                                                        <select class="form-select form-select-sm @error('bulan_akhir') is-invalid @enderror" id="bulan_akhir" name="bulan_akhir" required>
                                                            <option value="">Bulan</option>
                                                            @for ($m = 1; $m <= 12; $m++)
                                                                <option value="{{ str_pad($m, 2, '0', STR_PAD_LEFT) }}" {{ old('bulan_akhir') == str_pad($m, 2, '0', STR_PAD_LEFT) ? 'selected' : '' }}>
                                                                {{ str_pad($m, 2, '0', STR_PAD_LEFT) }}
                                                                </option>
                                                                @endfor
                                                        </select>
                                                    </div>
                                                    <div class="col-6">
                                                        <select class="form-select form-select-sm @error('tahun_akhir') is-invalid @enderror" id="tahun_akhir" name="tahun_akhir" required>
                                                            <option value="">Tahun</option>
                                                            @for ($y = now()->year; $y >= 2000; $y--)
                                                            <option value="{{ $y }}" {{ old('tahun_akhir') == $y ? 'selected' : '' }}>{{ $y }}</option>
                                                            @endfor
                                                        </select>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <small class="form-text text-muted d-block mt-2">Format: MM/YYYY - MM/YYYY (contoh: 03/2022 - 06/2022)</small>
                                        @error('bulan_mulai')
                                        <div class="invalid-feedback d-block">{{ $message }}</div>
                                        @enderror
                                    </div>

                                    {{-- Jabatan --}}
                                    <div class="col-12">
                                        <label for="jabatan" class="form-label">Jabatan <span class="text-danger">*</span></label>
                                        <input type="text"
                                            class="form-control @error('jabatan') is-invalid @enderror"
                                            id="jabatan"
                                            name="jabatan"
                                            placeholder="Contoh: Ketua, Wakil Ketua, Bendahara, dll"
                                            value="{{ old('jabatan') }}"
                                            required>
                                        @error('jabatan')
                                        <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 Organisasi
                                        </button>
                                        <a href="#daftar-organisasi" class="btn btn-secondary ms-2" data-bs-toggle="tab" data-bs-target="#daftar-organisasi">
                                            <i class="bi bi-arrow-left me-1"></i> Kembali
                                        </a>
                                    </div>
                                </form>
                            </div>

                        </div>

                    </div>
                </div>

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

</main>

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

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

                <div class="modal-body">
                    <div class="mb-3">
                        <label for="edit_jenis" class="form-label">Jenis Organisasi <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" id="edit_jenis" name="jenis" required>
                    </div>

                    <div class="mb-3">
                        <label for="edit_nama" class="form-label">Nama Organisasi <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" id="edit_nama" name="nama" required>
                    </div>

                    <div class="mb-3">
                        <label class="form-label">Jangka Waktu <span class="text-danger">*</span></label>
                        <div class="row">
                            <div class="col-md-6">
                                <label class="form-label small">Mulai</label>
                                <div class="row">
                                    <div class="col-6">
                                        <select class="form-select form-select-sm" id="edit_bulan_mulai" name="bulan_mulai" required>
                                            <option value="">Bulan</option>
                                            @for ($m = 1; $m <= 12; $m++)
                                                <option value="{{ str_pad($m, 2, '0', STR_PAD_LEFT) }}">
                                                {{ str_pad($m, 2, '0', STR_PAD_LEFT) }}
                                                </option>
                                                @endfor
                                        </select>
                                    </div>
                                    <div class="col-6">
                                        <select class="form-select form-select-sm" id="edit_tahun_mulai" name="tahun_mulai" required>
                                            <option value="">Tahun</option>
                                            @for ($y = now()->year; $y >= 2000; $y--)
                                            <option value="{{ $y }}">{{ $y }}</option>
                                            @endfor
                                        </select>
                                    </div>
                                </div>
                            </div>

                            <div class="col-md-6">
                                <label class="form-label small">Berakhir</label>
                                <div class="row">
                                    <div class="col-6">
                                        <select class="form-select form-select-sm" id="edit_bulan_akhir" name="bulan_akhir" required>
                                            <option value="">Bulan</option>
                                            @for ($m = 1; $m <= 12; $m++)
                                                <option value="{{ str_pad($m, 2, '0', STR_PAD_LEFT) }}">
                                                {{ str_pad($m, 2, '0', STR_PAD_LEFT) }}
                                                </option>
                                                @endfor
                                        </select>
                                    </div>
                                    <div class="col-6">
                                        <select class="form-select form-select-sm" id="edit_tahun_akhir" name="tahun_akhir" required>
                                            <option value="">Tahun</option>
                                            @for ($y = now()->year; $y >= 2000; $y--)
                                            <option value="{{ $y }}">{{ $y }}</option>
                                            @endfor
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="mb-3">
                        <label for="edit_jabatan" class="form-label">Jabatan <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" id="edit_jabatan" name="jabatan" required>
                    </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 Organisasi --}}
<div class="modal fade" id="deleteOrganisasiModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <form id="deleteOrganisasiForm" 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 organisasi 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-organisasi').forEach(btn => {
        btn.addEventListener('click', function() {
            const id = this.dataset.id;
            const jangka = this.dataset.jangka;

            document.getElementById('edit_jenis').value = this.dataset.jenis || '';
            document.getElementById('edit_nama').value = this.dataset.nama || '';
            document.getElementById('edit_jabatan').value = this.dataset.jabatan || '';

            // Parse jangka_waktu format MM/YYYY-MM/YYYY
            if (jangka) {
                const parts = jangka.split('-');
                if (parts.length === 2) {
                    const [bulanMulai, tahunMulai] = parts[0].trim().split('/');
                    const [bulanAkhir, tahunAkhir] = parts[1].trim().split('/');

                    document.getElementById('edit_bulan_mulai').value = bulanMulai || '';
                    document.getElementById('edit_tahun_mulai').value = tahunMulai || '';
                    document.getElementById('edit_bulan_akhir').value = bulanAkhir || '';
                    document.getElementById('edit_tahun_akhir').value = tahunAkhir || '';
                }
            }

            document.getElementById('editOrganisasiForm').action = `/organisasi-edit/${id}`;
        });
    });

    document.querySelectorAll('.btn-delete-organisasi').forEach(btn => {
        btn.addEventListener('click', function() {
            const id = this.dataset.id;
            document.getElementById('deleteOrganisasiForm').action = `/organisasi-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-organisasi, .btn-delete-penghargaan, .btn-delete-seminar, .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>