@extends('layouts.app')

@section('title', 'Kelola Iklan')

@push('css')
<style>
.admin-layout { display: flex; min-height: calc(100vh - 70px); }
.admin-sidebar { width: 250px; background: #0d1117; border-right: 1px solid #1e293b; padding: 1rem 0; position: fixed; top: 64px; left: 0; bottom: 0; overflow-y: auto; }
.admin-sidebar-header { padding: 1rem 1.25rem; display: flex; align-items: center; gap: 0.75rem; border-bottom: 1px solid #1e293b; margin-bottom: 0.5rem; color: #10b981; font-weight: 700; }
.admin-logo { width: 32px; height: 32px; background: #10b981; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: #0a0f1a; font-weight: 900; font-size: 14px; }
.admin-nav { display: flex; flex-direction: column; gap: 2px; padding: 0 0.5rem; }
.admin-nav-item { display: flex; align-items: center; gap: 0.75rem; padding: 0.625rem 0.75rem; color: #94a3b8; text-decoration: none; border-radius: 8px; font-size: 0.875rem; transition: all 0.2s; }
.admin-nav-item:hover { background: #1e293b; color: #e2e8f0; }
.admin-nav-item.active { background: rgba(16, 185, 129, 0.1); color: #10b981; font-weight: 600; }
.nav-icon { font-size: 16px; width: 20px; text-align: center; }
.admin-main { margin-left: 250px; flex: 1; padding: 1.5rem; }

.admin-card { background: #111827; border: 1px solid #1e293b; border-radius: 12px; padding: 1.5rem; margin-bottom: 1.5rem; }
.admin-card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.25rem; }
.admin-card-header h2 { color: #f1f5f9; font-size: 1.25rem; font-weight: 700; margin: 0; }
.btn-primary { background: #10b981; color: #fff; border: none; padding: 0.5rem 1.25rem; border-radius: 8px; font-size: 0.875rem; font-weight: 600; cursor: pointer; transition: background 0.2s; }
.btn-primary:hover { background: #059669; }
.btn-sm { padding: 0.3rem 0.75rem; font-size: 0.8rem; }
.btn-warning { background: #f59e0b; color: #fff; }
.btn-warning:hover { background: #d97706; }
.btn-danger { background: #ef4444; color: #fff; }
.btn-danger:hover { background: #dc2626; }

.admin-table { width: 100%; border-collapse: collapse; }
.admin-table th { text-align: left; padding: 0.75rem 1rem; color: #94a3b8; font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; border-bottom: 1px solid #1e293b; }
.admin-table td { padding: 0.75rem 1rem; color: #e2e8f0; font-size: 0.875rem; border-bottom: 1px solid #1e293b; }
.admin-table tr:last-child td { border-bottom: none; }
.admin-table tr:hover td { background: rgba(30, 41, 59, 0.5); }

.badge { display: inline-block; padding: 0.2rem 0.6rem; border-radius: 9999px; font-size: 0.75rem; font-weight: 600; }
.badge-purple { background: rgba(168, 85, 247, 0.15); color: #c084fc; }
.badge-blue { background: rgba(59, 130, 246, 0.15); color: #60a5fa; }
.badge-amber { background: rgba(245, 158, 11, 0.15); color: #fbbf24; }
.badge-gray { background: rgba(107, 114, 128, 0.15); color: #9ca3af; }
.badge-green { background: rgba(16, 185, 129, 0.15); color: #34d399; }
.badge-indigo { background: rgba(99, 102, 241, 0.15); color: #818cf8; }
.badge-red { background: rgba(239, 68, 68, 0.15); color: #f87171; }

.toggle-switch { position: relative; display: inline-block; width: 44px; height: 24px; }
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.toggle-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #374151; border-radius: 24px; transition: 0.3s; }
.toggle-slider:before { position: absolute; content: ""; height: 18px; width: 18px; left: 3px; bottom: 3px; background-color: #fff; border-radius: 50%; transition: 0.3s; }
.toggle-switch input:checked + .toggle-slider { background-color: #10b981; }
.toggle-switch input:checked + .toggle-slider:before { transform: translateX(20px); }

.modal-overlay { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.6); z-index: 1000; justify-content: center; align-items: center; }
.modal-overlay.show { display: flex; }
.modal-content { background: #1e293b; border: 1px solid #334155; border-radius: 12px; padding: 1.5rem; width: 100%; max-width: 560px; max-height: 90vh; overflow-y: auto; }
.modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.25rem; }
.modal-header h3 { color: #f1f5f9; font-size: 1.125rem; font-weight: 700; margin: 0; }
.modal-close { background: none; border: none; color: #94a3b8; font-size: 1.5rem; cursor: pointer; }
.modal-close:hover { color: #f1f5f9; }

.form-group { margin-bottom: 1rem; }
.form-group label { display: block; color: #94a3b8; font-size: 0.875rem; font-weight: 600; margin-bottom: 0.375rem; }
.form-control { width: 100%; padding: 0.5rem 0.75rem; background: #0f172a; border: 1px solid #334155; border-radius: 8px; color: #e2e8f0; font-size: 0.875rem; transition: border-color 0.2s; box-sizing: border-box; }
.form-control:focus { outline: none; border-color: #10b981; }
textarea.form-control { resize: vertical; min-height: 80px; }
select.form-control { appearance: none; cursor: pointer; }
.form-check { display: flex; align-items: center; gap: 0.5rem; }
.form-check input[type="checkbox"] { width: 18px; height: 18px; accent-color: #10b981; }
.form-check label { margin-bottom: 0; }
.actions-cell { display: flex; gap: 0.5rem; }
</style>
@endpush

@section('content')
<div class="admin-layout">
    <aside class="admin-sidebar">
        <div class="admin-sidebar-header">
            <span class="admin-logo">SP</span>
            <span>Admin Panel</span>
        </div>
        <nav class="admin-nav">
            <a href="/admin" class="admin-nav-item"><span class="nav-icon">&#9638;</span> Dashboard</a>
            <a href="/admin/streams" class="admin-nav-item"><span class="nav-icon">&#9654;</span> Streams</a>
            <a href="/admin/ads" class="admin-nav-item active"><span class="nav-icon">&#9672;</span> Iklan</a>
            <a href="/admin/settings" class="admin-nav-item"><span class="nav-icon">&#9881;</span> Pengaturan</a>
            <a href="/admin/worldcup/groups" class="admin-nav-item"><span class="nav-icon">&#9733;</span> Klasemen WC</a>
            <a href="/admin/worldcup/matches" class="admin-nav-item"><span class="nav-icon">&#9998;</span> Jadwal WC</a>
            <a href="/admin/seed" class="admin-nav-item" onclick="return confirm('Seed ulang data?')"><span class="nav-icon">&#8635;</span> Seed Data</a>
        </nav>
    </aside>
    <main class="admin-main">
        <div class="admin-card">
            <div class="admin-card-header">
                <h2>Kelola Iklan</h2>
                <button type="button" class="btn-primary" onclick="openAdModal()">+ Tambah Iklan</button>
            </div>
            <table class="admin-table">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>Nama</th>
                        <th>Posisi</th>
                        <th>Tipe</th>
                        <th>Aktif</th>
                        <th>Urutan</th>
                        <th>Aksi</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($ads as $ad)
                    <tr>
                        <td>{{ $ad->id }}</td>
                        <td>{{ $ad->name }}</td>
                        <td>
                            @php
                                $positionColors = [
                                    'header' => 'badge-purple',
                                    'sidebar' => 'badge-blue',
                                    'below_player' => 'badge-amber',
                                    'footer' => 'badge-gray',
                                    'between_matches' => 'badge-green',
                                    'sidebar_2' => 'badge-indigo',
                                    'popup' => 'badge-red',
                                ];
                                $positionClass = $positionColors[$ad->position] ?? 'badge-gray';
                            @endphp
                            <span class="badge {{ $positionClass }}">{{ $ad->position }}</span>
                        </td>
                        <td>
                            <span class="badge badge-blue">{{ $ad->type }}</span>
                        </td>
                        <td>
                            <label class="toggle-switch">
                                <input type="checkbox" {{ $ad->is_active ? 'checked' : '' }} onchange="toggleActive({{ $ad->id }}, this)">
                                <span class="toggle-slider"></span>
                            </label>
                        </td>
                        <td>{{ $ad->order }}</td>
                        <td>
                            <div class="actions-cell">
                                <button class="btn-primary btn-sm btn-warning" onclick="editAd({{ $ad->id }}, '{{ $ad->name }}', '{{ $ad->position }}', '{{ $ad->type }}', {{ Js::from($ad->content) }}, {{ Js::from($ad->adsense_code) }}, {{ $ad->is_active ? 'true' : 'false' }}, {{ $ad->order }})">Edit</button>
                                <button class="btn-primary btn-sm btn-danger" onclick="deleteAd({{ $ad->id }})">Hapus</button>
                            </div>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="7" style="text-align:center; color: #64748b;">Belum ada data iklan.</td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </main>
</div>

<!-- Modal Tambah/Edit Iklan -->
<div id="adModal" class="modal-overlay">
    <div class="modal-content">
        <div class="modal-header">
            <h3 id="adModalTitle">Tambah Iklan</h3>
            <button class="modal-close" onclick="closeAdModal()">&times;</button>
        </div>
        <form id="adForm" method="POST" action="/admin/ads">
            @csrf
            <input type="hidden" name="_method" value="PUT" id="adMethodField">
            <input type="hidden" name="id" id="adIdField" value="">
            <div class="form-group">
                <label for="adName">Nama</label>
                <input type="text" id="adName" name="name" class="form-control" required>
            </div>
            <div class="form-group">
                <label for="adPosition">Posisi</label>
                <select id="adPosition" name="position" class="form-control" required>
                    <option value="">-- Pilih Posisi --</option>
                    <option value="header">Header</option>
                    <option value="sidebar">Sidebar</option>
                    <option value="below_player">Below Player</option>
                    <option value="footer">Footer</option>
                    <option value="between_matches">Between Matches</option>
                    <option value="sidebar_2">Sidebar 2</option>
                    <option value="popup">Popup</option>
                </select>
            </div>
            <div class="form-group">
                <label for="adType">Tipe</label>
                <select id="adType" name="type" class="form-control" required>
                    <option value="">-- Pilih Tipe --</option>
                    <option value="adsense">AdSense</option>
                    <option value="custom_html">Custom HTML</option>
                    <option value="image">Image</option>
                </select>
            </div>
            <div class="form-group">
                <label for="adContent">Konten</label>
                <textarea id="adContent" name="content" class="form-control" rows="3"></textarea>
            </div>
            <div class="form-group">
                <label for="adAdsenseCode">Kode AdSense</label>
                <textarea id="adAdsenseCode" name="adsense_code" class="form-control" rows="3"></textarea>
            </div>
            <div class="form-group">
                <div class="form-check">
                    <input type="checkbox" id="adIsActive" name="is_active" value="1">
                    <label for="adIsActive">Aktif</label>
                </div>
            </div>
            <div class="form-group">
                <label for="adOrder">Urutan</label>
                <input type="number" id="adOrder" name="order" class="form-control" min="0" value="0">
            </div>
            <div style="text-align: right; margin-top: 1.25rem;">
                <button type="button" class="btn-primary btn-sm" style="background:#475569; margin-right:0.5rem;" onclick="closeAdModal()">Batal</button>
                <button type="submit" class="btn-primary">Simpan</button>
            </div>
        </form>
    </div>
</div>
@endsection

@push('js')
<script>
function openAdModal() {
    document.getElementById('adModalTitle').textContent = 'Tambah Iklan';
    document.getElementById('adForm').action = '/admin/ads';
    document.getElementById('adMethodField').value = 'POST';
    document.getElementById('adIdField').value = '';
    document.getElementById('adName').value = '';
    document.getElementById('adPosition').value = '';
    document.getElementById('adType').value = '';
    document.getElementById('adContent').value = '';
    document.getElementById('adAdsenseCode').value = '';
    document.getElementById('adIsActive').checked = false;
    document.getElementById('adOrder').value = 0;
    document.getElementById('adModal').classList.add('show');
}

function closeAdModal() {
    document.getElementById('adModal').classList.remove('show');
}

function editAd(id, name, position, type, content, adsenseCode, isActive, order) {
    document.getElementById('adModalTitle').textContent = 'Edit Iklan';
    document.getElementById('adForm').action = '/admin/ads/' + id;
    document.getElementById('adMethodField').value = 'PUT';
    document.getElementById('adIdField').value = id;
    document.getElementById('adName').value = name;
    document.getElementById('adPosition').value = position;
    document.getElementById('adType').value = type;
    document.getElementById('adContent').value = content || '';
    document.getElementById('adAdsenseCode').value = adsenseCode || '';
    document.getElementById('adIsActive').checked = isActive;
    document.getElementById('adOrder').value = order;
    document.getElementById('adModal').classList.add('show');
}

function toggleActive(id, checkbox) {
    const isActive = checkbox.checked ? 1 : 0;
    fetch(`/admin/ads/${id}/toggle`, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || '{{ csrf_token() }}'
        },
        body: JSON.stringify({ is_active: isActive })
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            // Toggle berhasil
        } else {
            checkbox.checked = !checkbox.checked;
            alert('Gagal mengubah status iklan.');
        }
    })
    .catch(() => {
        checkbox.checked = !checkbox.checked;
        alert('Terjadi kesalahan saat mengubah status.');
    });
}

function deleteAd(id) {
    if (!confirm('Apakah Anda yakin ingin menghapus iklan ini?')) return;
    fetch(`/admin/ads/${id}`, {
        method: 'DELETE',
        headers: {
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || '{{ csrf_token() }}'
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            window.location.reload();
        } else {
            alert('Gagal menghapus iklan.');
        }
    })
    .catch(() => {
        alert('Terjadi kesalahan saat menghapus iklan.');
    });
}

document.getElementById('adForm').addEventListener('submit', function(e) {
    e.preventDefault();
    const form = this;
    const formData = new FormData(form);
    const id = formData.get('id');
    const method = document.getElementById('adMethodField').value;
    const url = id ? `/admin/ads/${id}` : '/admin/ads';

    fetch(url, {
        method: 'POST',
        headers: {
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || '{{ csrf_token() }}'
        },
        body: formData
    })
    .then(response => {
        if (response.ok) {
            window.location.reload();
        } else {
            alert('Gagal menyimpan iklan.');
        }
    })
    .catch(() => {
        alert('Terjadi kesalahan saat menyimpan iklan.');
    });
});
</script>
@endpush