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

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

    <div class="pagetitle">
        <h1>E-Portofolio Pelatihan</h1>
        <nav>
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="/user/dashboard">Home</a></li>
                <li class="breadcrumb-item active">Pelatihan</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 Pelatihan / Workshop / Sertifikasi</h5>

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

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

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

                                @if ($pelatihans->isEmpty())
                                <div class="alert alert-info">
                                    <i class="bi bi-info-circle me-2"></i> Belum ada data pelatihan.
                                    <a href="#form-pelatihan" class="alert-link" data-bs-toggle="tab" data-bs-target="#form-pelatihan">
                                        Tambah pelatihan 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: 25%">Nama Pelatihan</th>
                                                <th style="width: 20%">Penyelenggara</th>
                                                <th style="width: 15%">Jangka Waktu</th>
                                                <th style="width: 20%">Aksi</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @forelse ($pelatihans as $pelatihan)
                                            <tr>
                                                <td>{{ $loop->iteration }}</td>
                                                <td>{{ $pelatihan->nama_pelatihan ?? '-' }}</td>
                                                <td>{{ $pelatihan->penyelenggara ?? '-' }}</td>
                                                <td>{{ $pelatihan->jangka_waktu ?? '-' }}</td>
                                                <td>
                                                    <button type="button"
                                                        class="btn btn-warning btn-sm btn-edit-pelatihan"
                                                        data-id="{{ $pelatihan->id }}"
                                                        data-nama="{{ $pelatihan->nama_pelatihan }}"
                                                        data-penyelenggara="{{ $pelatihan->penyelenggara }}"
                                                        data-jangka="{{ $pelatihan->jangka_waktu }}"
                                                        data-bs-toggle="modal"
                                                        data-bs-target="#editPelatihanModal">
                                                        <i class="bi bi-pencil"></i> Edit
                                                    </button>
                                                    <button type="button"
                                                        class="btn btn-danger btn-sm btn-delete-pelatihan"
                                                        data-id="{{ $pelatihan->id }}"
                                                        data-nama="{{ $pelatihan->nama_pelatihan }}"
                                                        data-bs-toggle="modal"
                                                        data-bs-target="#deletePelatihanModal">
                                                        <i class="bi bi-trash"></i> Hapus
                                                    </button>
                                                </td>
                                            </tr>
                                            @empty
                                            <tr>
                                                <td colspan="5" class="text-center">Tidak ada data</td>
                                            </tr>
                                            @endforelse
                                        </tbody>
                                    </table>
                                </div>
                                @endif
                            </div>

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

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

                                    {{-- Nama Pelatihan --}}
                                    <div class="col-12">
                                        <label for="nama_pelatihan" class="form-label">Nama Pelatihan <span class="text-danger">*</span></label>
                                        <input type="text"
                                            class="form-control @error('nama_pelatihan') is-invalid @enderror"
                                            id="nama_pelatihan"
                                            name="nama_pelatihan"
                                            placeholder="Contoh: Workshop Web Development Singapura 2022"
                                            value="{{ old('nama_pelatihan') }}"
                                            required>
                                        <small class="form-text text-muted d-block mt-2">
                                            <strong>Petunjuk:</strong> Sebutkan nama pelatihan, workshop, atau sertifikasi. Cantumkan lokasi (dalam/luar negeri) dan uraian materinya.
                                        </small>
                                        @error('nama_pelatihan')
                                        <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: Universitas Trunodjoyo Madura, Dicoding, dsb"
                                            value="{{ old('penyelenggara') }}">
                                        @error('penyelenggara')
                                        <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 >= now()->year - 10; $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 >= now()->year - 10; $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>

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

                        </div>

                    </div>
                </div>

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

</main>

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

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

                <div class="modal-body">
                    <div class="mb-3">
                        <label for="edit_nama_pelatihan" class="form-label">Nama Pelatihan <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" id="edit_nama_pelatihan" name="nama_pelatihan" 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 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 >= now()->year - 10; $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 >= now()->year - 10; $y--)
                                            <option value="{{ $y }}">{{ $y }}</option>
                                            @endfor
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </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 Pelatihan --}}
<div class="modal fade" id="deletePelatihanModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <form id="deletePelatihanForm" 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 pelatihan berikut?</p>
                    <p><strong id="deletePelatihanName"></strong></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>
    // Handle Edit Modal
    document.querySelectorAll('.btn-edit-pelatihan').forEach(btn => {
        btn.addEventListener('click', function() {
            const id = this.dataset.id;
            const nama = this.dataset.nama;
            const penyelenggara = this.dataset.penyelenggara;
            const jangka = this.dataset.jangka;

            document.getElementById('edit_nama_pelatihan').value = nama || '';
            document.getElementById('edit_penyelenggara').value = penyelenggara || '';

            // 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('editPelatihanForm').action = `/pelatihan-edit/${id}`;
        });
    });

    // Handle Delete Modal
    document.querySelectorAll('.btn-delete-pelatihan').forEach(btn => {
        btn.addEventListener('click', function() {
            const id = this.dataset.id;
            const nama = this.dataset.nama;

            document.getElementById('deletePelatihanName').textContent = nama;
            document.getElementById('deletePelatihanForm').action = `/pelatihan-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-pelatihan, .btn-delete-penghargaan, .btn-delete-seminar, .btn-delete-organisasi, .btn-delete-kerja').forEach(btn => {
            if (btn.getAttribute('data-bs-toggle')) return;
            btn.addEventListener('click', function(e) {
                if (!confirm('Yakin ingin menghapus item ini?')) e.preventDefault();
            });
        });
    })();
</script>