@extends('layouts.admin')

@section('title', 'Kelola Banner Informasi Global')

@section('content')
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<div class="container-fluid py-4">
    <div class="row">
        <div class="col-12 mb-4">
            <h4 class="fw-bold"><i class="fas fa-bullhorn me-2 text-primary"></i> MANAJEMEN SHARING INFORMASI</h4>
            <p class="text-muted small">Kelola gambar slider/banner yang tampil di dashboard <strong>seluruh warga</strong>.</p>
        </div>

        {{-- Form Upload --}}
        <div class="col-lg-4 mb-4">
            <div class="card border-0 shadow-sm" style="border-radius: 20px;">
                <div class="card-header bg-white py-3 border-0">
                    <h6 class="mb-0 fw-bold">Upload Banner Baru</h6>
                </div>
                <div class="card-body">
                    <form id="formBanner" action="{{ route('adminrw.infos.store') }}" method="POST" enctype="multipart/form-data">
                        @csrf
                        <div class="mb-3">
                            <label class="form-label small fw-bold text-uppercase text-muted">Judul Banner</label>
                            <input type="text" name="judul" class="form-control form-control-sm" placeholder="Contoh: Pengumuman Hari Libur" required>
                        </div>

                        <div class="mb-3">
                            <label class="form-label small fw-bold text-uppercase text-muted">Deskripsi Singkat</label>
                            <textarea name="isi" rows="3" class="form-control form-control-sm" placeholder="Jelaskan detail singkat pengumuman..."></textarea>
                        </div>

                        <div class="mb-3">
                            <label class="form-label small fw-bold text-uppercase text-muted">Urutan Tampil</label>
                            <input type="number" name="urutan" value="1" class="form-control form-control-sm" min="1">
                        </div>

                        <div class="mb-3">
                            <label class="form-label small fw-bold text-uppercase text-muted">File Gambar</label>
                            <input type="file" name="gambar" id="imgInput" class="form-control form-control-sm" accept="image/*" required>
                            <div class="form-text mt-2" style="font-size: 10px;">Rasio 16:9 (Max 2MB).</div>
                        </div>

                        {{-- Image Preview Area --}}
                        <div class="mb-3 d-none" id="previewArea">
                            <label class="form-label small fw-bold text-uppercase text-muted d-block text-primary"><i class="fas fa-eye me-1"></i> Preview Terpilih:</label>
                            <img src="#" id="imgPreview" class="img-fluid rounded-3 border shadow-sm" style="max-height: 150px; width: 100%; object-fit: cover;">
                        </div>

                        <button type="submit" class="btn btn-primary w-100 fw-bold py-2 shadow-sm" style="border-radius: 12px;">
                            <i class="fas fa-cloud-upload-alt me-2"></i> POSTING BANNER
                        </button>
                    </form>
                </div>
            </div>
        </div>

        {{-- List Banner Aktif --}}
        <div class="col-lg-8">
            <div class="card border-0 shadow-sm" style="border-radius: 20px;">
                <div class="card-header bg-white py-3 border-0 d-flex justify-content-between align-items-center">
                    <h6 class="mb-0 fw-bold">Daftar Banner Aktif</h6>
                    <span class="badge bg-primary text-white">{{ $infos->count() }} Banner</span>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-hover align-middle">
                            <thead class="bg-light text-uppercase" style="font-size: 11px;">
                                <tr>
                                    <th class="text-center" style="width: 50px;">Urutan</th>
                                    <th>Banner</th>
                                    <th>Info Pengumuman</th>
                                    <th class="text-center">Aksi</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($infos as $info)
                                <tr>
                                    <td class="text-center fw-bold text-primary">#{{ $info->urutan }}</td>
                                    <td style="width: 150px;">
                                        <img src="{{ asset('storage/' . $info->gambar) }}" class="rounded-3 shadow-sm border" style="width: 120px; height: 70px; object-fit: cover;">
                                    </td>
                                    <td>
                                        <div class="fw-bold mb-0">{{ $info->judul }}</div>
                                        <small class="text-muted d-block text-truncate" style="max-width: 250px;">{{ $info->isi }}</small>
                                    </td>
                                    <td class="text-center">
                                        <button type="button" class="btn btn-link text-danger p-0 border-0 btn-delete" 
                                                data-id="{{ $info->id }}" 
                                                data-judul="{{ $info->judul }}">
                                            <i class="fas fa-trash-alt"></i>
                                        </button>
                                        <form id="delete-form-{{ $info->id }}" action="{{ route('adminrw.infos.destroy', $info->id) }}" method="POST" class="d-none">
                                            @csrf @method('DELETE')
                                        </form>
                                    </td>
                                </tr>
                                @empty
                                <tr>
                                    <td colspan="4" class="text-center py-5 text-muted opacity-50">
                                        <i class="fas fa-image fa-3x mb-3"></i>
                                        <p class="mb-0">Belum ada banner yang aktif.</p>
                                    </td>
                                </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    // --- PREVIEW LOGIC ---
    const imgInput = document.getElementById('imgInput');
    const imgPreview = document.getElementById('imgPreview');
    const previewArea = document.getElementById('previewArea');

    imgInput.onchange = evt => {
        const [file] = imgInput.files
        if (file) {
            imgPreview.src = URL.createObjectURL(file)
            previewArea.classList.remove('d-none');
        }
    };

    // --- SWEETALERT NOTIFICATION ---
    @if(session('success'))
        Swal.fire({
            icon: 'success',
            title: 'Berhasil!',
            text: "{{ session('success') }}",
            timer: 3000,
            showConfirmButton: false
        });
        // Sembunyikan preview setelah sukses
        previewArea.classList.add('d-none');
    @endif

    @if(session('error'))
        Swal.fire({
            icon: 'error',
            title: 'Waduh!',
            text: "{{ session('error') }}"
        });
    @endif

    // --- DELETE CONFIRMATION ---
    document.querySelectorAll('.btn-delete').forEach(button => {
        button.addEventListener('click', function() {
            const id = this.dataset.id;
            const judul = this.dataset.judul;

            Swal.fire({
                title: 'Hapus Banner?',
                text: `Banner "${judul}" bakal ilang dari dashboard warga!`,
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#d33',
                cancelButtonColor: '#3085d6',
                confirmButtonText: 'Ya, Hapus!',
                cancelButtonText: 'Batal'
            }).then((result) => {
                if (result.isConfirmed) {
                    document.getElementById(`delete-form-${id}`).submit();
                }
            });
        });
    });
</script>
@endsection