@extends('admin.layouts.app')

@section('title', 'Edit Sertifikat')

@section('page-title', 'EDIT SERTIFIKAT ANGGOTA')

@section('styles')
<style>
    .form-section {
        background: white;
        border-radius: 8px;
        padding: 2rem;
        margin-bottom: 1.5rem;
        box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    }
    
    .section-title {
        display: flex;
        align-items: center;
        padding-bottom: 1rem;
        margin-bottom: 1.5rem;
        border-bottom: 2px solid #e0e0e0;
    }
    
    .section-title i {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: linear-gradient(135deg, #1976d2 0%, #42a5f5 100%);
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 1rem;
    }
    
    .form-label {
        font-weight: 500;
        color: #424242;
        font-size: 0.875rem;
        margin-bottom: 0.5rem;
        display: flex;
        align-items: center;
    }
    
    .form-label i {
        margin-right: 8px;
        color: #1976d2;
    }
    
    .form-label .required {
        color: #f44336;
        margin-left: 4px;
    }

    /* Mode toggle */
    .mode-toggle-wrap {
        display: flex;
        gap: 0;
        border-radius: 10px;
        overflow: hidden;
        border: 2px solid #1976d2;
        margin-bottom: 1.5rem;
    }
    .mode-btn {
        flex: 1;
        padding: 0.6rem 1rem;
        border: none;
        background: white;
        color: #1976d2;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.2s;
        font-size: 0.9rem;
    }
    .mode-btn.active {
        background: linear-gradient(135deg, #1976d2 0%, #42a5f5 100%);
        color: white;
    }
    .mode-btn:hover:not(.active) {
        background: #e3f2fd;
    }
    .mode-section {
        display: none;
    }
    .mode-section.active {
        display: block;
    }
</style>
@endsection

@section('content')
    @if(session('error'))
        <div class="alert alert-danger alert-dismissible fade show" role="alert">
            <i class="fas fa-exclamation-circle me-2"></i>{{ session('error') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    @endif

    @if($errors->any())
        <div class="alert alert-danger alert-dismissible fade show" role="alert">
            <i class="fas fa-exclamation-circle me-2"></i>
            <strong>Terdapat kesalahan:</strong>
            <ul class="mb-0 mt-2">
                @foreach($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    @endif

    <div class="row justify-content-center">
        <div class="col-lg-10">
            <form action="{{ route('admin.sertifikat.update', $sertifikat->id) }}" method="POST" enctype="multipart/form-data">
                @csrf
                @method('PUT')
                
                <!-- Data Anggota & Kegiatan -->
                <div class="form-section">
                    <div class="section-title">
                        <i class="fas fa-user-check"></i>
                        <h5>Anggota & Kegiatan</h5>
                    </div>
                    
                    <div class="mb-3">
                        <label for="anggota_id" class="form-label">
                            <i class="fas fa-user"></i>
                            Nama Anggota<span class="required">*</span>
                        </label>
                        <select class="form-select select2 @error('anggota_id') is-invalid @enderror" 
                                id="anggota_id" name="anggota_id" required>
                            <option value="">Pilih Anggota</option>
                            @foreach($anggotas as $anggota)
                                <option value="{{ $anggota->id }}" {{ (old('anggota_id', $sertifikat->anggota_id) == $anggota->id) ? 'selected' : '' }}>
                                    {{ $anggota->nama }} - {{ $anggota->email }}
                                </option>
                            @endforeach
                        </select>
                        @error('anggota_id')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                                        @php
                        $currentMode = old('mode', $sertifikat->riwayat_kegiatan_id ? 'cari' : 'manual');
                    @endphp

                    <input type="hidden" name="mode" id="modeInput" value="{{ $currentMode }}">

                    <div class="mode-toggle-wrap">
                        <button type="button" class="mode-btn" id="btnModeCari" onclick="setMode('cari')">
                            <i class="fas fa-search me-1"></i>Cari Kegiatan Sistem
                        </button>
                        <button type="button" class="mode-btn" id="btnModeManual" onclick="setMode('manual')">
                            <i class="fas fa-pencil-alt me-1"></i>Input Manual
                        </button>
                    </div>

                    <div class="mode-section" id="sectionCari">
                        <div class="mb-3">
                            <label for="kegiatan_search" class="form-label">
                                <i class="fas fa-calendar-alt"></i>
                                Cari Kegiatan<span class="required">*</span>
                            </label>
                            <select class="form-select select2 @error('riwayat_kegiatan_id') is-invalid @enderror" 
                                    id="kegiatan_search" name="riwayat_kegiatan_id">
                                @if($sertifikat->riwayat_kegiatan_id && $sertifikat->riwayatKegiatan)
                                    <option value="{{ $sertifikat->riwayat_kegiatan_id }}" selected>
                                        {{ $sertifikat->riwayatKegiatan->judul }} ({{ $sertifikat->riwayatKegiatan->tanggal_kegiatan_formatted }})
                                    </option>
                                @else
                                    <option value="" selected>Ketik untuk mencari kegiatan...</option>
                                @endif
                            </select>
                            @error('riwayat_kegiatan_id')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                            <small class="text-muted">Ketik minimal 2 karakter untuk mencari kegiatan lain</small>
                        </div>

                        <div id="kegiatan_info" class="alert alert-info mb-3 {{ ($sertifikat->riwayat_kegiatan_id && $currentMode === 'cari') ? '' : 'd-none' }}">
                            <h6><i class="fas fa-info-circle me-2"></i>Informasi Kegiatan:</h6>
                            <div id="kegiatan_details">
                                @if($sertifikat->riwayat_kegiatan_id && $sertifikat->riwayatKegiatan)
                                <div class="row">
                                    <div class="col-md-6">
                                        <p class="mb-1"><strong>Tanggal:</strong> {{ $sertifikat->riwayatKegiatan->tanggal_kegiatan_formatted }}</p>
                                        <p class="mb-1"><strong>Lokasi:</strong> {{ $sertifikat->riwayatKegiatan->lokasi }}</p>
                                    </div>
                                    <div class="col-md-6">
                                        <p class="mb-1"><strong>Jenis:</strong> <span class="badge bg-info">{{ $sertifikat->riwayatKegiatan->jenis_kegiatan }}</span></p>
                                        <p class="mb-1"><strong>Penyelenggara:</strong> {{ $sertifikat->riwayatKegiatan->penyelenggara }}</p>
                                    </div>
                                </div>
                                @endif
                            </div>
                        </div>
                    </div>

                    <div class="mode-section" id="sectionManual">
                        <div class="mb-3">
                            <label for="nama_kegiatan" class="form-label">
                                <i class="fas fa-keyboard"></i>
                                Nama Kegiatan<span class="required">*</span>
                            </label>
                            <input type="text"
                                   class="form-control @error('nama_kegiatan') is-invalid @enderror"
                                   id="nama_kegiatan"
                                   name="nama_kegiatan"
                                   value="{{ old('nama_kegiatan', $sertifikat->nama_kegiatan) }}"
                                   placeholder="Contoh: Workshop Laravel 2025">
                            @error('nama_kegiatan')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                            <small class="text-muted">Masukkan nama kegiatan secara manual (untuk kegiatan di luar sistem)</small>
                        </div>
                    </div>
                </div>

                <!-- Informasi Sertifikat -->
                <div class="form-section">
                    <div class="section-title">
                        <i class="fas fa-certificate"></i>
                        <h5>Informasi Sertifikat</h5>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label for="nomor_sertifikat" class="form-label">
                                <i class="fas fa-hashtag"></i>
                                Nomor Sertifikat
                            </label>
                            <input type="text" class="form-control @error('nomor_sertifikat') is-invalid @enderror" 
                                   id="nomor_sertifikat" name="nomor_sertifikat" 
                                   value="{{ old('nomor_sertifikat', $sertifikat->nomor_sertifikat) }}"
                                   placeholder="Masukkan nomor sertifikat (opsional)">
                            @error('nomor_sertifikat')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="col-md-6 mb-3">
                            <label for="tanggal_terbit" class="form-label">
                                <i class="fas fa-calendar-check"></i>
                                Tanggal Terbit<span class="required">*</span>
                            </label>
                            <input type="date" class="form-control @error('tanggal_terbit') is-invalid @enderror" 
                                   id="tanggal_terbit" name="tanggal_terbit" 
                                   value="{{ old('tanggal_terbit', $sertifikat->tanggal_terbit->format('Y-m-d')) }}" required>
                            @error('tanggal_terbit')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>

                    <div class="mb-3">
                        <label for="penyelenggara" class="form-label">
                            <i class="fas fa-building"></i>
                            Penyelenggara<span class="required">*</span>
                        </label>
                        <input type="text" class="form-control @error('penyelenggara') is-invalid @enderror" 
                               id="penyelenggara" name="penyelenggara" 
                               value="{{ old('penyelenggara', $sertifikat->penyelenggara) }}"
                               placeholder="Masukkan nama penyelenggara" required>
                        @error('penyelenggara')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="mb-3">
                        <label for="keterangan" class="form-label">
                            <i class="fas fa-sticky-note"></i>
                            Keterangan
                        </label>
                        <textarea class="form-control @error('keterangan') is-invalid @enderror" 
                                  id="keterangan" name="keterangan" rows="3" 
                                  placeholder="Keterangan tambahan (opsional)">{{ old('keterangan', $sertifikat->keterangan) }}</textarea>
                        @error('keterangan')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                </div>

                <!-- Link Berkas -->
                <div class="form-section">
                    <div class="section-title">
                        <i class="fas fa-link"></i>
                        <h5>Link Berkas Sertifikat</h5>
                    </div>
                    
                    <div class="mb-3">
                        <label for="file_sertifikat" class="form-label">
                            <i class="fas fa-link"></i>
                            Link Berkas
                        </label>
                        <input type="url" class="form-control @error('file_sertifikat') is-invalid @enderror" 
                               id="file_sertifikat" name="file_sertifikat" value="{{ old('file_sertifikat', $sertifikat->file_sertifikat) }}"
                               placeholder="https://contoh.com/berkas-sertifikat.pdf">
                        <small class="text-muted">Masukkan URL/link berkas sertifikat (opsional)</small>
                        @if($sertifikat->file_sertifikat)
                            <div class="mt-2">
                                <small class="text-muted">Link saat ini: {{ $sertifikat->file_sertifikat }}</small>
                                <a href="{{ route('admin.sertifikat.download', $sertifikat->id) }}" 
                                   class="btn btn-sm btn-primary ms-2" target="_blank">
                                    <i class="fas fa-external-link-alt"></i> Buka Link
                                </a>
                            </div>
                        @endif
                        @error('file_sertifikat')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                </div>

                <!-- Action Buttons -->
                <div style="display: flex; justify-content: space-between; align-items: center; padding: 1.5rem; background: #fafafa; border-radius: 8px;">
                    <a href="{{ route('admin.sertifikat.index') }}" class="btn btn-secondary">
                        <i class="fas fa-arrow-left me-2"></i>Kembali
                    </a>
                    <button type="submit" class="btn btn-primary">
                        <i class="fas fa-save me-2"></i>Update Sertifikat
                    </button>
                </div>
            </form>
        </div>
    </div>
@endsection

@section('scripts')
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<script>
    function setMode(mode) {
        $('#modeInput').val(mode);

        if (mode === 'cari') {
            $('#btnModeCari').addClass('active');
            $('#btnModeManual').removeClass('active');
            $('#sectionCari').addClass('active');
            $('#sectionManual').removeClass('active');
            // Atur required
            $('#nama_kegiatan').removeAttr('required');
            $('#kegiatan_search').attr('required', true);
        } else {
            $('#btnModeManual').addClass('active');
            $('#btnModeCari').removeClass('active');
            $('#sectionManual').addClass('active');
            $('#sectionCari').removeClass('active');
            // Atur required
            $('#kegiatan_search').removeAttr('required');
            $('#nama_kegiatan').attr('required', true);
        }
    }

    $(document).ready(function() {
        var initMode = $('#modeInput').val();
        setMode(initMode);
        // Initialize Select2 for anggota
        $('#anggota_id').select2({
            theme: 'bootstrap-5',
            placeholder: 'Pilih Anggota',
            allowClear: true
        });

        // Initialize Select2 for kegiatan with AJAX
        $('#kegiatan_search').select2({
            theme: 'bootstrap-5',
            placeholder: 'Ketik untuk mencari kegiatan...',
            allowClear: true,
            minimumInputLength: 2,
            ajax: {
                url: '{{ route("sertifikat.search-kegiatan") }}',
                dataType: 'json',
                delay: 250,
                data: function(params) {
                    return {
                        q: params.term
                    };
                },
                processResults: function(data) {
                    return {
                        results: data.map(function(item) {
                            return {
                                id: item.id,
                                text: item.judul + ' (' + item.tanggal_kegiatan_formatted + ')',
                                data: item
                            };
                        })
                    };
                },
                cache: true
            }
        });

        // When kegiatan selected, show details
        $('#kegiatan_search').on('select2:select', function(e) {
            var data = e.params.data.data;
            var details = `
                <div class="row">
                    <div class="col-md-6">
                        <p class="mb-1"><strong>Tanggal:</strong> ${data.tanggal_kegiatan_formatted}</p>
                        <p class="mb-1"><strong>Lokasi:</strong> ${data.lokasi}</p>
                    </div>
                    <div class="col-md-6">
                        <p class="mb-1"><strong>Jenis:</strong> <span class="badge bg-info">${data.jenis_kegiatan}</span></p>
                        <p class="mb-1"><strong>Penyelenggara:</strong> ${data.penyelenggara}</p>
                    </div>
                </div>
            `;
            $('#kegiatan_details').html(details);
            $('#kegiatan_info').removeClass('d-none');
        });
    });
</script>
@endsection