@extends('layouts.app')

@section('title', 'Event')

@section('content')
    <h4 class="fw-bold py-3 mb-4">
        <span class="text-muted fw-light">Admin /</span> Event
    </h4>

    @if(session('success'))
        <div class="alert alert-success alert-dismissible" role="alert">
            {{ session('success') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    @endif

    @if(session('error'))
        <div class="alert alert-danger alert-dismissible" role="alert">
            {{ session('error') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    @endif

    <div class="card">
        <div class="card-header d-flex justify-content-between align-items-center flex-wrap gap-3">
            <h5 class="mb-0">Daftar Event</h5>
            <div class="d-flex gap-2">
                <a href="{{ route('admin.dashboard') }}" class="btn btn-outline-secondary">
                    <i class="bx bx-arrow-back me-1"></i> Dashboard
                </a>
                <a href="{{ route('admin.events.create') }}" class="btn btn-primary">
                    <i class="bx bx-plus me-1"></i> Event Baru
                </a>
            </div>
        </div>

        <div class="card-body">
            <div class="table-responsive text-nowrap">
                <table class="table table-hover" id="events-table" style="width: 100%">
                    <thead>
                        <tr>
                            <th>Nama</th>
                            @if(auth()->user()->role === 'super_admin')
                            <th>Organisasi</th>
                            @endif
                            <th>Status</th>
                            <th>Tanggal</th>
                            <th>Aksi</th>
                        </tr>
                    </thead>
                    <tbody class="table-border-bottom-0">
                        @foreach ($events as $event)
                            <tr>
                                <td>
                                    <strong>{{ $event->name }}</strong>
                                </td>
                                @if(auth()->user()->role === 'super_admin')
                                <td>{{ $event->organization?->name ?? '-' }}</td>
                                @endif
                                <td>
                                    @php
                                        $badge = match($event->status) {
                                            'draft'     => 'secondary',
                                            'published' => 'info',
                                            'active'    => 'success',
                                            'closed'    => 'warning',
                                            'archived'  => 'dark',
                                            default     => 'secondary',
                                        };
                                        $statusLabel = match($event->status) {
                                            'draft'     => 'Draft',
                                            'published' => 'Dipublikasikan',
                                            'active'    => 'Aktif',
                                            'closed'    => 'Ditutup',
                                            'archived'  => 'Diarsip',
                                            default     => $event->status,
                                        };
                                    @endphp
                                    <span class="badge bg-label-{{ $badge }}">{{ $statusLabel }}</span>
                                    @if($event->isLocked())
                                        <i class="bx bx-lock text-muted ms-1" title="Data terkunci"></i>
                                    @endif
                                </td>
                                <td>
                                    <small>Mulai: {{ $event->starts_at?->format('d M Y H:i') ?? '-' }}</small><br>
                                    <small>Selesai: {{ $event->ends_at?->format('d M Y H:i') ?? '-' }}</small>
                                </td>
                                <td>
                                    <div class="d-flex gap-1 flex-wrap">
                                        {{-- QR Code --}}
                                        <button type="button" class="btn btn-sm btn-icon btn-outline-primary show-qr-btn"
                                                data-event-id="{{ $event->id }}"
                                                data-event-name="{{ $event->name }}"
                                                data-short-code="{{ $event->short_code }}"
                                                data-short-url="{{ $event->short_code ? route('frontend.voting.short', $event->short_code) : route('frontend.voting.short', $event->id) }}"
                                                title="QR Code & Link Pendek">
                                            <i class="bx bx-qr-scan"></i>
                                        </button>
                                        {{-- Hasil --}}
                                        <a href="{{ route('admin.results.show', $event) }}" class="btn btn-sm btn-icon btn-outline-info" title="Lihat Hasil">
                                            <i class="bx bx-bar-chart-alt-2"></i>
                                        </a>
                                        {{-- Status Transition --}}
                                        @php
                                            $nextTransitions = \App\Models\Event::VALID_TRANSITIONS[$event->status] ?? [];
                                        @endphp
                                        @foreach($nextTransitions as $nextStatus)
                                            @php
                                                $transLabel = match($nextStatus) {
                                                    'published' => ['label' => 'Publikasikan', 'color' => 'btn-outline-info', 'icon' => 'bx-send'],
                                                    'active'    => ['label' => 'Aktifkan', 'color' => 'btn-success', 'icon' => 'bx-play'],
                                                    'closed'    => ['label' => 'Tutup', 'color' => 'btn-warning', 'icon' => 'bx-stop'],
                                                    'archived'  => ['label' => 'Arsip', 'color' => 'btn-dark', 'icon' => 'bx-archive-in'],
                                                    'draft'     => ['label' => 'Kembali ke Draft', 'color' => 'btn-outline-secondary', 'icon' => 'bx-undo'],
                                                    default     => ['label' => $nextStatus, 'color' => 'btn-outline-secondary', 'icon' => 'bx-chevron-right'],
                                                };
                                            @endphp
                                            <button type="button"
                                                    class="btn btn-sm {{ $transLabel['color'] }} transition-status-btn"
                                                    data-event-id="{{ $event->id }}"
                                                    data-new-status="{{ $nextStatus }}"
                                                    data-label="{{ $transLabel['label'] }}"
                                                    title="{{ $transLabel['label'] }}"
                                                    onclick="confirmTransition(this)">
                                                <i class="bx {{ $transLabel['icon'] }} me-1"></i>{{ $transLabel['label'] }}
                                            </button>
                                        @endforeach
                                        {{-- Edit (hanya jika tidak fully locked) --}}
                                        @if(!$event->areSettingsLocked())
                                        <a href="{{ route('admin.events.edit', $event) }}" class="btn btn-sm btn-icon btn-outline-warning" title="Edit">
                                            <i class="bx bx-edit-alt"></i>
                                        </a>
                                        @endif
                                        {{-- Hapus (hanya jika belum mulai) --}}
                                        @if(!$event->areSettingsLocked())
                                        <form action="{{ route('admin.events.destroy', $event) }}" method="POST" class="d-inline">
                                            @csrf
                                            @method('DELETE')
                                            <button type="submit" class="btn btn-sm btn-icon btn-outline-danger" onclick="return confirm('Apakah Anda yakin ingin menghapus event ini?')" title="Hapus">
                                                <i class="bx bx-trash"></i>
                                            </button>
                                        </form>
                                        @endif
                                    </div>
                                </td>

                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <!-- QR Code Modal -->
    <div class="modal fade" id="qrModal" tabindex="-1" aria-hidden="true">
      <input type="hidden" id="qrEventId">
      <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="qrModalTitle">QR Code Pemilihan</h5>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body text-center">
            <h6 class="fw-bold mb-3" id="qrEventName"></h6>
            <div class="d-flex justify-content-center mb-4">
              <div id="qrcode" class="p-2 border rounded bg-white"></div>
            </div>
            <div class="mb-3 text-start">
              <label class="form-label d-block text-muted small">Link Pendek Pemilihan</label>
              <div class="input-group">
                <input type="text" id="shortUrlInput" class="form-control text-center bg-light font-monospace" readonly>
                <button class="btn btn-outline-primary" type="button" id="copyLinkBtn">
                  <i class="bx bx-copy"></i> Salin
                </button>
              </div>
            </div>

            <div class="mb-3 text-start border-top pt-3">
              <label class="form-label d-block text-muted small">Kustomisasi Kode Link (Opsional)</label>
              <div class="input-group">
                <span class="input-group-text font-monospace" id="shortUrlPrefix">{{ url('/v') }}/</span>
                <input type="text" id="customShortCodeInput" class="form-control font-monospace" placeholder="kode-pilihan">
                <button class="btn btn-primary" type="button" id="saveShortCodeBtn">
                  <i class="bx bx-save"></i> Simpan
                </button>
              </div>
              <div class="invalid-feedback d-block fw-semibold mt-1 text-danger" id="shortCodeError"></div>
            </div>
          </div>
          <div class="modal-footer justify-content-center">
            <button type="button" class="btn btn-primary" id="downloadQrBtn">
              <i class="bx bx-download me-1"></i> Unduh Gambar QR
            </button>
            <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Tutup</button>
          </div>
        </div>
      </div>
    </div>
@endsection

@section('page-script')
<script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
<script>
    // Status transition confirmation & AJAX
    function confirmTransition(btn) {
        const eventId  = btn.dataset.eventId;
        const status   = btn.dataset.newStatus;
        const label    = btn.dataset.label;

        const messages = {
            'published': 'Data kandidat dan peserta akan terkunci setelah dipublikasikan. Lanjutkan?',
            'active':    'Voting akan segera dibuka. Seluruh konfigurasi event akan terkunci. Lanjutkan?',
            'closed':    'Voting akan ditutup. Peserta tidak dapat lagi memilih. Lanjutkan?',
            'archived':  'Event akan diarsip dan menjadi read-only. Lanjutkan?',
            'draft':     'Event akan dikembalikan ke status draft. Data kandidat dan peserta dapat diubah kembali. Lanjutkan?',
        };

        const msg = messages[status] || `Ubah status ke "${label}"?`;
        if (!confirm(msg)) return;

        const $btn = $(btn);
        const origHtml = $btn.html();
        $btn.prop('disabled', true).html('<i class="bx bx-loader-alt bx-spin"></i>');

        $.ajax({
            url: `/admin/events/${eventId}/status`,
            method: 'POST',
            data: { status: status, _token: '{{ csrf_token() }}' },
            success: function(res) {
                if (res.success) {
                    location.reload();
                } else {
                    alert(res.message || 'Gagal mengubah status.');
                    $btn.prop('disabled', false).html(origHtml);
                }
            },
            error: function(xhr) {
                const msg = xhr.responseJSON?.message || 'Terjadi kesalahan sistem.';
                alert(msg);
                $btn.prop('disabled', false).html(origHtml);
            }
        });
    }

    $(document).ready(function() {
        $('#events-table').DataTable({
            "order": [[ 0, "asc" ]],
            "columnDefs": [
                { "orderable": false, "targets": -1 }
            ]
        });

        // Track active QR trigger button to update its data attributes
        let activeQrBtn = null;

        // Handle QR Modal rendering
        $(document).on('click', '.show-qr-btn', function() {
            activeQrBtn = $(this);
            const eventId = activeQrBtn.data('event-id');
            const eventName = activeQrBtn.data('event-name');
            const shortCode = activeQrBtn.data('short-code') || '';
            const shortUrl = activeQrBtn.data('short-url');

            $('#qrEventId').val(eventId);
            $('#qrEventName').text(eventName);
            $('#shortUrlInput').val(shortUrl);
            $('#customShortCodeInput').val(shortCode);
            $('#shortCodeError').text('');

            // Reset qrcode container
            $('#qrcode').html('');

            // Generate QR Code
            new QRCode(document.getElementById("qrcode"), {
                text: shortUrl,
                width: 200,
                height: 200,
                colorDark : "#000000",
                colorLight : "#ffffff",
                correctLevel : QRCode.CorrectLevel.H
            });

            // Show modal
            $('#qrModal').modal('show');
        });

        // Save Custom Short Code
        $('#saveShortCodeBtn').on('click', function() {
            const eventId = $('#qrEventId').val();
            const shortCode = $('#customShortCodeInput').val();
            const $btn = $(this);
            const originalHtml = $btn.html();

            $('#shortCodeError').text('');
            $btn.prop('disabled', true);
            $btn.html('<i class="bx bx-loader-alt bx-spin"></i>');

            $.ajax({
                url: `/admin/events/${eventId}/short-code`,
                type: 'POST',
                data: {
                    short_code: shortCode,
                    _token: '{{ csrf_token() }}'
                },
                success: function(response) {
                    $btn.prop('disabled', false);
                    $btn.html(originalHtml);

                    if (response.success) {
                        // Update input field
                        $('#shortUrlInput').val(response.short_url);

                        // Update QR Code
                        $('#qrcode').html('');
                        new QRCode(document.getElementById("qrcode"), {
                            text: response.short_url,
                            width: 200,
                            height: 200,
                            colorDark : "#000000",
                            colorLight : "#ffffff",
                            correctLevel : QRCode.CorrectLevel.H
                        });

                        // Update trigger button dataset attributes so state persists
                        if (activeQrBtn) {
                            activeQrBtn.data('short-code', shortCode);
                            activeQrBtn.data('short-url', response.short_url);
                        }

                        // Show temporary success feedback
                        $btn.html('<i class="bx bx-check"></i>').addClass('btn-success').removeClass('btn-primary');
                        setTimeout(function() {
                            $btn.html(originalHtml).removeClass('btn-success').addClass('btn-primary');
                        }, 2000);
                    }
                },
                error: function(xhr) {
                    $btn.prop('disabled', false);
                    $btn.html(originalHtml);

                    if (xhr.status === 422) {
                        const errors = xhr.responseJSON.errors;
                        if (errors && errors.short_code) {
                            $('#shortCodeError').text(errors.short_code[0]);
                        } else {
                            $('#shortCodeError').text('Gagal memperbarui link pendek.');
                        }
                    } else {
                        $('#shortCodeError').text('Terjadi kesalahan sistem.');
                    }
                }
            });
        });

        // Copy Link Button
        $('#copyLinkBtn').on('click', function() {
            const copyText = document.getElementById("shortUrlInput");
            copyText.select();
            copyText.setSelectionRange(0, 99999); /* For mobile devices */
            navigator.clipboard.writeText(copyText.value);

            // Display short toast/notification
            const $btn = $(this);
            const originalHtml = $btn.html();
            $btn.html('<i class="bx bx-check"></i> Tersalin').addClass('btn-success').removeClass('btn-outline-primary');
            setTimeout(function() {
                $btn.html(originalHtml).removeClass('btn-success').addClass('btn-outline-primary');
            }, 2000);
        });

        // Download QR Code
        $('#downloadQrBtn').on('click', function() {
            const img = document.querySelector('#qrcode img');
            if (img) {
                const eventName = $('#qrEventName').text().toLowerCase().replace(/[^a-z0-9]/g, '-').replace(/-+/g, '-');
                const link = document.createElement('a');
                link.href = img.src;
                link.download = `qrcode-pemilihan-${eventName}.png`;
                document.body.appendChild(link);
                link.click();
                document.body.removeChild(link);
            } else {
                // If qrcode renders as canvas instead
                const canvas = document.querySelector('#qrcode canvas');
                if (canvas) {
                    const eventName = $('#qrEventName').text().toLowerCase().replace(/[^a-z0-9]/g, '-').replace(/-+/g, '-');
                    const link = document.createElement('a');
                    link.href = canvas.toDataURL("image/png");
                    link.download = `qrcode-pemilihan-${eventName}.png`;
                    document.body.appendChild(link);
                    link.click();
                    document.body.removeChild(link);
                }
            }
        });
    });
</script>
@endsection