@extends('agency.layouts.app')

@section('title', 'Sertifikalar')

@section('content')
<div class="container-fluid py-4">
    <!-- Header Section -->
    <div class="row mb-5">
        <div class="col-12">
            <div class="d-flex align-items-center gap-3 mb-2">
                <a href="{{ route('agency.settings') }}" class="btn btn-outline-secondary btn-sm px-3 py-2" style="border-radius: 12px; border-color: #e2e8f0; font-weight: 600;">
                    <i class="fas fa-arrow-left me-1"></i> Ayarlara Dön
                </a>
                <div class="settings-icon-wrapper ms-2">
                    <i class="fas fa-certificate" style="color:#0891b2"></i>
                </div>
                <div>
                    <h1 class="h3 fw-800 text-dark mb-0">Sertifikalar</h1>
                    <p class="text-muted mb-0">Acentenizin belgelerini (TÜRSAB, işletme belgesi, ISO vb.) başlıklarıyla yükleyip yönetin.</p>
                </div>
            </div>
            <div class="header-divider mt-4"></div>
        </div>
    </div>

    @if(session('success'))
        <div class="alert alert-success" style="border-radius:12px">{{ session('success') }}</div>
    @endif
    @if($errors->any())
        <div class="alert alert-danger" style="border-radius:12px">{{ $errors->first() }}</div>
    @endif

    <div class="row g-4">
        <!-- Upload Form -->
        <div class="col-lg-4">
            <div class="settings-card shadow-sm" style="background: white; border-radius: 20px; border: 1px solid rgba(0,0,0,0.03);">
                <div class="card-body p-4">
                    <h4 class="fw-bold text-dark mb-3"><i class="fas fa-cloud-arrow-up me-2" style="color:#0891b2"></i>Yeni Sertifika</h4>
                    <form action="{{ route('agency.settings.certificates.store') }}" method="POST" enctype="multipart/form-data">
                        @csrf
                        <div class="mb-3">
                            <label class="form-label small fw-bold text-secondary">Başlık</label>
                            <input type="text" name="title" class="form-control" value="{{ old('title') }}" required maxlength="255"
                                   placeholder="Örn: TÜRSAB İşletme Belgesi" style="border-radius:10px">
                        </div>
                        <div class="mb-3">
                            <label class="form-label small fw-bold text-secondary">Belge</label>
                            <input type="file" name="file" class="form-control" required
                                   accept=".pdf,.jpg,.jpeg,.png,.webp,.doc,.docx,.xls,.xlsx" style="border-radius:10px">
                            <div class="form-text" style="font-size:.72rem">PDF · Görsel · Office — en fazla 10 MB</div>
                        </div>
                        <div class="mb-3 form-check form-switch ps-0 d-flex align-items-center gap-2" style="min-height:auto;">
                            <input type="checkbox" name="show_on_website" value="1" id="certShowOnWeb" class="form-check-input ms-0"
                                   style="width:2.4em; height:1.3em; cursor:pointer;" {{ old('show_on_website') ? 'checked' : '' }}>
                            <label for="certShowOnWeb" class="form-check-label small fw-bold text-secondary" style="cursor:pointer;">
                                Web sitesinde göster
                            </label>
                        </div>
                        <button type="submit" class="btn btn-primary w-100 fw-bold py-2" style="border-radius:10px; background:linear-gradient(135deg,#0891b2,#0e7490); border:none;">
                            <i class="fas fa-upload me-1"></i> Yükle
                        </button>
                    </form>
                </div>
            </div>
        </div>

        <!-- List -->
        <div class="col-lg-8">
            <div class="settings-card shadow-sm h-100" style="background: white; border-radius: 20px; border: 1px solid rgba(0,0,0,0.03);">
                <div class="card-body p-4">
                    <h4 class="fw-bold text-dark mb-4">Yüklü Sertifikalar <span class="badge bg-light text-muted border ms-1">{{ $certificates->count() }}</span></h4>
                    <div class="table-responsive">
                        <table class="table align-middle table-hover">
                            <thead class="table-light">
                                <tr style="font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700;">
                                    <th>Başlık</th>
                                    <th>Dosya</th>
                                    <th style="width:90px;">Boyut</th>
                                    <th style="width:160px;">Yükleyen</th>
                                    <th style="width:120px;" class="text-center">Sitede Göster</th>
                                    <th style="width:110px;" class="text-end">İşlemler</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($certificates as $cert)
                                    @php
                                        $icon = $cert->is_pdf ? 'fa-file-pdf text-danger'
                                            : ($cert->is_image ? 'fa-file-image text-success' : 'fa-file-lines text-secondary');
                                    @endphp
                                    <tr>
                                        <td class="fw-bold text-dark">{{ $cert->title }}</td>
                                        <td>
                                            <span class="d-inline-flex align-items-center gap-2 text-muted" style="font-size:.85rem; max-width:260px;">
                                                <i class="fas {{ $icon }}" style="font-size:1.05rem"></i>
                                                <span class="text-truncate" title="{{ $cert->file_name }}">{{ $cert->file_name }}</span>
                                            </span>
                                        </td>
                                        <td class="text-muted small">{{ $cert->formatted_size }}</td>
                                        <td>
                                            <span class="small fw-600 text-dark">{{ $cert->creator->full_name ?? '—' }}</span>
                                            <div class="text-muted" style="font-size:.68rem">{{ $cert->created_at->format('d.m.Y H:i') }}</div>
                                        </td>
                                        <td class="text-center">
                                            <div class="form-check form-switch d-inline-flex align-items-center justify-content-center m-0 p-0" style="min-height:auto;">
                                                <input type="checkbox" class="form-check-input cert-visibility-toggle m-0"
                                                       style="width:2.4em; height:1.3em; cursor:pointer;"
                                                       {{ $cert->show_on_website ? 'checked' : '' }}
                                                       data-url="{{ route('agency.settings.certificates.visibility', $cert) }}"
                                                       title="{{ $cert->show_on_website ? 'Web sitesinde gösteriliyor' : 'Web sitesinde gizli' }}">
                                            </div>
                                        </td>
                                        <td class="text-end">
                                            <div class="d-inline-flex gap-1">
                                                <a href="{{ $cert->file_url }}" target="_blank" class="btn btn-sm btn-light border-0" style="border-radius:8px" title="Görüntüle / İndir">
                                                    <i class="fas fa-eye text-primary"></i>
                                                </a>
                                                <form action="{{ route('agency.settings.certificates.destroy', $cert) }}" method="POST"
                                                      onsubmit="return confirm('“{{ addslashes($cert->title) }}” sertifikası silinsin mi?')">
                                                    @csrf
                                                    @method('DELETE')
                                                    <button type="submit" class="btn btn-sm btn-light border-0" style="border-radius:8px" title="Sil">
                                                        <i class="fas fa-trash text-danger"></i>
                                                    </button>
                                                </form>
                                            </div>
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="6" class="text-center py-5 text-muted">
                                            <i class="fas fa-certificate mb-2 d-block" style="font-size:2rem; opacity:.3"></i>
                                            Henüz sertifika yüklenmemiş. Soldaki formdan başlık girip belge yükleyin.
                                        </td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script>
// Sitede göster/gizle — sayfa yenilenmeden kaydedilir
document.querySelectorAll('.cert-visibility-toggle').forEach(function (sw) {
    sw.addEventListener('change', function () {
        const wanted = sw.checked;
        sw.disabled = true;
        fetch(sw.dataset.url, {
            method: 'PATCH',
            headers: {
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
                'X-Requested-With': 'XMLHttpRequest',
                'Accept': 'application/json'
            }
        })
        .then(r => { if (!r.ok) throw new Error(); return r.json(); })
        .then(d => {
            sw.checked = !!d.show_on_website;
            sw.title = d.show_on_website ? 'Web sitesinde gösteriliyor' : 'Web sitesinde gizli';
            if (window.Swal) Swal.fire({ toast: true, position: 'top-end', timer: 2200, showConfirmButton: false, icon: 'success', title: d.message });
        })
        .catch(() => {
            sw.checked = !wanted; // geri al
            if (window.Swal) Swal.fire({ toast: true, position: 'top-end', timer: 2400, showConfirmButton: false, icon: 'error', title: 'Görünürlük güncellenemedi.' });
        })
        .finally(() => { sw.disabled = false; });
    });
});
</script>
@endpush
@endsection