@extends('layouts.admin.app')
@section('title', 'Offers')
@push('style')
<style>
    .offer-index .filter-bar {
        display: grid;
        grid-template-columns: 2fr 1fr 1fr;
        gap: 16px;
        margin: 20px 0;
    }
    .offer-index .filter-bar select,
    .offer-index .filter-bar input {
        width: 100%;
        background: #111;
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 12px;
        padding: 12px 14px;
        color: #fff;
        font-size: 13px;
    }
    .offer-index .stat-row {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 16px;
        margin-top: 18px;
    }
    .offer-index .stat-card {
        background: #111;
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 14px;
        padding: 16px 18px;
    }
    .offer-index .stat-card .label { color: #888; font-size: 12px; font-weight: 600; }
    .offer-index .stat-card .value { color: #fff; font-size: 22px; font-weight: 700; margin-top: 6px; }
    .offer-index .stat-card.pending .value { color: #EAB308; }
    .offer-index .stat-card.approved .value { color: #B0F26D; }
    .offer-index .stat-card.rejected .value { color: #EF4444; }
    .offer-index .section-head {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 16px;
    }
    .offer-index .section-head h3 { color: #fff; font-size: 18px; font-weight: 600; margin: 0; }
    .offer-index table { width: 100%; border-collapse: collapse; }
    .offer-index thead th {
        text-align: left;
        color: #888;
        font-size: 12px;
        font-weight: 600;
        padding: 12px 14px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        white-space: nowrap;
    }
    .offer-index tbody td {
        color: #ddd;
        font-size: 13px;
        padding: 14px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        vertical-align: middle;
    }
    .offer-index .offer-cell { display: flex; align-items: center; gap: 12px; }
    .offer-index .offer-thumb {
        width: 72px;
        height: 56px;
        border-radius: 8px;
        object-fit: cover;
        background: #222;
        flex: none;
    }
    .offer-index .offer-thumb-empty {
        display: flex;
        align-items: center;
        justify-content: center;
        color: #777;
        font-size: 11px;
        width: 72px;
        height: 56px;
        border-radius: 8px;
        background: #222;
        flex: none;
    }
    .offer-index .offer-title { color: #fff; font-weight: 600; }
    .offer-index .muted { color: #888; font-size: 12px; }
    .offer-index .price-now { color: #fff; font-weight: 600; }
    .offer-index .price-was { color: #777; text-decoration: line-through; font-size: 12px; }
    .offer-index .badge {
        display: inline-block;
        padding: 4px 10px;
        border-radius: 999px;
        font-size: 11px;
        font-weight: 600;
        white-space: nowrap;
    }
    .offer-index .badge-expired { background: rgba(234, 179, 8, 0.15); color: #EAB308; }
    /* The open menu has to escape the row, or the table clips it. */
    .offer-index .table-wrap { overflow: visible; }
    .offer-index td .dropdown_table { float: none; display: inline-block; }
    .offer-index td .dropdown_table .drop-btn { width: 130px; }
    .offer-index td .dropdown_table .dropdown-menu { z-index: 20; }
    /* A decided offer's pill is inert — no menu, no pointer affordance. */
    .offer-index .dropdown_table.is-locked .drop-btn { cursor: default; opacity: 0.75; }
    .offer-index .dropdown_table.is-locked .lock-icon { display: flex; align-items: center; }
    .offer-index .reject-reason { max-width: 180px; margin-top: 6px; }
    .offer-index .empty-row { text-align: center; color: #888; padding: 32px; }
    .offer-index .pagination-wrap { margin-top: 18px; }
    .offer-index .pagination-wrap a, .offer-index .pagination-wrap span { color: #fff; }
    /* Approve + reject modals (shared shell) */
    .offer-modal-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.7);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 1080;
        padding: 20px;
    }
    .offer-modal {
        width: 100%;
        max-width: 440px;
        background: #0f0f0f;
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 16px;
        overflow: hidden;
    }
    .offer-modal-head {
        display: flex;
        align-items: flex-start;
        gap: 12px;
        padding: 20px 20px 0;
    }
    .offer-modal-icon {
        width: 38px;
        height: 38px;
        flex: none;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .offer-modal-icon.approve { background: rgba(176, 242, 109, 0.12); color: #B0F26D; }
    .offer-modal-icon.reject { background: rgba(239, 68, 68, 0.12); color: #EF4444; }
    .offer-modal-head h4 { color: #fff; font-size: 17px; font-weight: 600; margin: 0; }
    .offer-modal-sub { color: #888; font-size: 12px; margin: 4px 0 0; }
    .offer-modal-close {
        margin-left: auto;
        background: none;
        border: none;
        color: #888;
        cursor: pointer;
        padding: 2px;
        line-height: 0;
    }
    .offer-modal-close:hover { color: #fff; }
    .offer-modal-body { padding: 18px 20px 4px; }
    .offer-modal-label {
        display: block;
        color: #ddd;
        font-size: 12px;
        font-weight: 600;
        margin-bottom: 8px;
    }
    .offer-modal-input {
        width: 100%;
        background: #111;
        border: 1px solid rgba(255, 255, 255, 0.12);
        border-radius: 12px;
        padding: 12px 14px;
        color: #fff;
        font-size: 14px;
    }
    .offer-modal-input:focus { outline: none; border-color: #B0F26D; }
    .offer-modal-textarea { resize: vertical; min-height: 78px; font-family: inherit; line-height: 1.5; }
    .offer-modal-label.spaced { margin-top: 18px; }
    .offer-modal-help { color: #777; font-size: 11px; margin: 8px 0 0; line-height: 1.5; }
    .offer-modal-count { float: right; }
    .offer-modal-error { color: #EF4444; font-size: 12px; margin: 8px 0 0; }
    .offer-modal-foot {
        display: flex;
        justify-content: flex-end;
        gap: 10px;
        padding: 18px 20px 20px;
    }
    .offer-modal-btn {
        border: none;
        border-radius: 12px;
        padding: 10px 18px;
        font-size: 13px;
        font-weight: 600;
        cursor: pointer;
    }
    .offer-modal-btn.secondary { background: #222; color: #ddd; }
    .offer-modal-btn.approve { background: #22c55e; color: #fff; }
    .offer-modal-btn.reject { background: #EF4444; color: #fff; }
    .offer-modal-btn[disabled] { opacity: 0.6; cursor: not-allowed; }
    @media (max-width: 900px) {
        .offer-index .filter-bar { grid-template-columns: 1fr; }
        .offer-index .stat-row { grid-template-columns: 1fr; }
    }
</style>
@endpush

@section('content')
<div class="offer-index content_area users_list">
    @include('admin.layouts.alert')

    <div class="breadcrumb">
        <a href="{{ route('admin.dashboard.index') }}">Dashboard</a>
        <span>›</span>
        <span class="active">Offers</span>
    </div>

    <div class="stat-row">
        <div class="stat-card pending">
            <div class="label">Pending Review</div>
            <div class="value">{{ $counts[\App\Models\Offer::STATUS_PENDING] ?? 0 }}</div>
        </div>
        <div class="stat-card approved">
            <div class="label">Approved</div>
            <div class="value">{{ $counts[\App\Models\Offer::STATUS_APPROVED] ?? 0 }}</div>
        </div>
        <div class="stat-card rejected">
            <div class="label">Rejected</div>
            <div class="value">{{ $counts[\App\Models\Offer::STATUS_REJECTED] ?? 0 }}</div>
        </div>
    </div>

    <form method="GET" action="{{ route('admin.offers.index') }}" class="filter-bar">
        <input type="text" name="search" value="{{ request('search') }}" placeholder="Search by title, brand or tagline...">
        <select name="category" onchange="this.form.submit()">
            <option value="">All Categories</option>
            @foreach ($categories as $category)
                <option value="{{ $category->id }}" @selected(request('category') == $category->id)>{{ $category->name }}</option>
            @endforeach
        </select>
        <select name="status" onchange="this.form.submit()">
            <option value="">All Status</option>
            @foreach (\App\Models\Offer::STATUS_LABELS as $value => $label)
                <option value="{{ $value }}" @selected(request('status') === (string) $value)>{{ $label }}</option>
            @endforeach
        </select>
    </form>

    <div class="section-head">
        <h3>All Offers</h3>
    </div>

    <div class="table-wrap">
        <table>
            <thead>
                <tr>
                    <th>Offer</th>
                    <th>Submitted By</th>
                    <th>Category</th>
                    <th>Price</th>
                    <th>Points</th>
                    <th>Valid Until</th>
                    <th>Status</th>
                    <th>Submitted</th>
                </tr>
            </thead>
            <tbody>
                @forelse ($offers as $offer)
                    <tr>
                        <td>
                            <div class="offer-cell">
                                @if ($offer->imageUrl())
                                    <img src="{{ $offer->imageUrl() }}" alt="" class="offer-thumb">
                                @else
                                    <div class="offer-thumb-empty">No image</div>
                                @endif
                                <div>
                                    <div class="offer-title">{{ $offer->title }}</div>
                                    <div class="muted">{{ $offer->brand_name }}{{ $offer->discount_value ? ' · ' . $offer->discount_value : '' }}</div>
                                </div>
                            </div>
                        </td>
                        <td>
                            <div>{{ $offer->submittedByName() }}</div>
                            <div class="muted">{{ $offer->league->name ?? 'No league' }}</div>
                        </td>
                        <td>{{ $offer->category->name ?? '—' }}</td>
                        <td>
                            <div class="price-now">{{ $offer->currency }} {{ number_format((float) $offer->offer_price, 2) }}</div>
                            @if ((float) $offer->original_price > (float) $offer->offer_price)
                                <div class="price-was">{{ $offer->currency }} {{ number_format((float) $offer->original_price, 2) }}</div>
                            @endif
                        </td>
                        <td class="points-cell" data-id="{{ $offer->id }}">{{ (int) $offer->reward_points }}</td>
                        <td class="valid-until-cell" data-id="{{ $offer->id }}">
                            @if ($offer->valid_until)
                                {{ $offer->valid_until->format('d M Y') }}
                                @if ($offer->isExpired())
                                    <div><span class="badge badge-expired">Expired</span></div>
                                @endif
                            @else
                                —
                            @endif
                        </td>
                        <td>
                            @include('admin.offers.partials._approval-dropdown', ['offer' => $offer])
                            @if ((int) $offer->status === \App\Models\Offer::STATUS_REJECTED && $offer->rejection_reason)
                                <div class="muted reject-reason">{{ $offer->rejection_reason }}</div>
                            @endif
                        </td>
                        <td>{{ $offer->created_at?->format('d M Y, H:i') }}</td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="8" class="empty-row">No offers found.</td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>

    <div class="pagination-wrap">
        {{ $offers->links() }}
    </div>

    @include('admin.offers.partials._modal-approve')
    @include('admin.offers.partials._modal-reject')
</div>
@endsection

@php
    // Cast to object so json_encode keeps the 0/1/2 keys instead of
    // collapsing the sequential array into a positional JS array.
    $statusClassMap = (object) [
        \App\Models\Offer::STATUS_PENDING => 'pending',
        \App\Models\Offer::STATUS_APPROVED => 'approved',
        \App\Models\Offer::STATUS_REJECTED => 'rejected',
    ];
@endphp

@push('script')
<script>
    (function () {
        const UPDATE_URL = @json(route('admin.offers.update-status'));
        const CSRF = @json(csrf_token());
        const APPROVED = {{ \App\Models\Offer::STATUS_APPROVED }};
        const REJECTED = {{ \App\Models\Offer::STATUS_REJECTED }};
        const CLASS_BY_STATUS = @json($statusClassMap);
        const MAX_POINTS = 2147483647;
        const MAX_REASON = 255;
        const TODAY_NZ = @json($todayNz);

        const approveModal = document.getElementById('offerApproveModal');
        const approveSubtitle = document.getElementById('offerApproveSubtitle');
        const approvePoints = document.getElementById('offerApprovePoints');
        const approveValidUntil = document.getElementById('offerApproveValidUntil');
        const approveError = document.getElementById('offerApproveError');
        const approveConfirm = document.getElementById('offerApproveConfirm');

        const rejectModal = document.getElementById('offerRejectModal');
        const rejectSubtitle = document.getElementById('offerRejectSubtitle');
        const rejectReason = document.getElementById('offerRejectReason');
        const rejectCount = document.getElementById('offerRejectCount');
        const rejectError = document.getElementById('offerRejectError');
        const rejectConfirm = document.getElementById('offerRejectConfirm');

        // The dropdown awaiting whichever modal is open.
        let pendingDropdown = null;

        function toast(type, text) {
            Toastify({
                text: text,
                duration: 3000,
                gravity: 'top',
                position: 'right',
                close: true,
                stopOnFocus: true,
                style: { background: type === 'success' ? '#28a745' : '#dc3545' },
            }).showToast();
        }

        function closeAll(except) {
            document.querySelectorAll('.offer-index .dropdown_table.active').forEach(function (dd) {
                if (dd !== except) dd.classList.remove('active');
            });
        }

        function showError(el, message) {
            el.textContent = message;
            el.hidden = false;
        }

        // Repaint only after the server confirms, so a failed save can't leave
        // the admin looking at a status that was never stored.
        function paint(dd, body) {
            const btn = dd.querySelector('.drop-btn');
            const status = body.offer_status;

            Object.keys(CLASS_BY_STATUS).forEach(function (key) {
                btn.classList.remove(CLASS_BY_STATUS[key]);
            });
            btn.classList.add(CLASS_BY_STATUS[status]);
            btn.dataset.current = status;
            btn.querySelector('.selectedText').textContent = body.status_label;
            dd.querySelectorAll('.option').forEach(function (o) {
                o.classList.toggle('selected', Number(o.dataset.value) === status);
            });

            btn.dataset.rewardPoints = body.reward_points;
            btn.dataset.validUntil = body.valid_until || '';

            const id = btn.dataset.id;

            const pointsCell = document.querySelector('.offer-index .points-cell[data-id="' + id + '"]');
            if (pointsCell) pointsCell.textContent = body.reward_points;

            const dateCell = document.querySelector('.offer-index .valid-until-cell[data-id="' + id + '"]');
            if (dateCell) {
                dateCell.textContent = body.valid_until_label || '—';
                if (body.is_expired) {
                    dateCell.insertAdjacentHTML('beforeend', '<div><span class="badge badge-expired">Expired</span></div>');
                }
            }
        }

        function openModal(modal, dd) {
            const btn = dd.querySelector('.drop-btn');
            pendingDropdown = dd;
            const subtitle = modal === approveModal ? approveSubtitle : rejectSubtitle;
            subtitle.textContent = btn.dataset.title + ' · ' + btn.dataset.brand;
            modal.hidden = false;
        }

        function closeModal(modal) {
            modal.hidden = true;
            pendingDropdown = null;
        }

        function openApproveModal(dd) {
            const btn = dd.querySelector('.drop-btn');
            approvePoints.value = btn.dataset.rewardPoints || '0';
            approveValidUntil.value = btn.dataset.validUntil || TODAY_NZ;
            approveError.hidden = true;
            approveConfirm.disabled = false;
            openModal(approveModal, dd);
            approvePoints.focus();
            approvePoints.select();
        }

        function openRejectModal(dd) {
            rejectReason.value = '';
            rejectCount.textContent = '0';
            rejectError.hidden = true;
            rejectConfirm.disabled = false;
            openModal(rejectModal, dd);
            rejectReason.focus();
        }

        function submit(dd, status, extra) {
            const btn = dd.querySelector('.drop-btn');
            const payload = Object.assign({ id: btn.dataset.id, status: status }, extra || {});

            return fetch(UPDATE_URL, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'Accept': 'application/json',
                    'X-CSRF-TOKEN': CSRF,
                    'X-Requested-With': 'XMLHttpRequest',
                },
                body: JSON.stringify(payload),
            })
                .then(function (res) {
                    return res.json().then(function (body) { return { ok: res.ok, body: body }; });
                })
                .then(function (result) {
                    if (!result.ok || !result.body.status) {
                        throw new Error(result.body.message || 'Unable to update offer status.');
                    }
                    paint(dd, result.body);
                    toast('success', result.body.message);
                    // Reload so the counters and any active status filter stay honest.
                    setTimeout(function () { window.location.reload(); }, 900);
                    return true;
                });
        }

        function save(option) {
            const dd = option.closest('.dropdown_table');
            const btn = dd.querySelector('.drop-btn');
            const id = btn.dataset.id;
            const status = Number(option.dataset.value);

            dd.classList.remove('active');

            if (!id || Number.isNaN(status) || status === Number(btn.dataset.current)) {
                return;
            }

            // Approving and rejecting both carry details with them, so each goes
            // through its modal. Returning to Pending carries nothing.
            if (status === APPROVED) { openApproveModal(dd); return; }
            if (status === REJECTED) { openRejectModal(dd); return; }

            submit(dd, status).catch(function (err) {
                toast('error', err.message || 'Unable to update offer status.');
            });
        }

        approveConfirm.addEventListener('click', function () {
            if (!pendingDropdown) return;

            const raw = approvePoints.value.trim();
            const points = Number(raw);

            if (raw === '' || !Number.isInteger(points) || points < 0 || points > MAX_POINTS) {
                showError(approveError, 'Enter reward points as a whole number of 0 or more.');
                approvePoints.focus();
                return;
            }

            const date = approveValidUntil.value;
            if (date !== '' && Number.isNaN(Date.parse(date))) {
                showError(approveError, 'Enter a valid date, or leave it empty for no expiry.');
                approveValidUntil.focus();
                return;
            }

            const dd = pendingDropdown;
            approveError.hidden = true;
            approveConfirm.disabled = true;

            // An empty date is sent as null on purpose — it clears any expiry.
            submit(dd, APPROVED, { reward_points: points, valid_until: date === '' ? null : date })
                .then(function () { closeModal(approveModal); })
                .catch(function (err) {
                    approveConfirm.disabled = false;
                    showError(approveError, err.message || 'Unable to approve this offer.');
                });
        });

        rejectConfirm.addEventListener('click', function () {
            if (!pendingDropdown) return;

            const reason = rejectReason.value.trim();

            if (reason.length > MAX_REASON) {
                showError(rejectError, 'Keep the reason to ' + MAX_REASON + ' characters or fewer.');
                rejectReason.focus();
                return;
            }

            const dd = pendingDropdown;
            rejectError.hidden = true;
            rejectConfirm.disabled = true;

            submit(dd, REJECTED, { rejection_reason: reason })
                .then(function () { closeModal(rejectModal); })
                .catch(function (err) {
                    rejectConfirm.disabled = false;
                    showError(rejectError, err.message || 'Unable to reject this offer.');
                });
        });

        rejectReason.addEventListener('input', function () {
            rejectCount.textContent = rejectReason.value.length;
        });

        // Cancel, close, backdrop click and Escape all leave the pill untouched,
        // since nothing was sent.
        [
            ['offerApproveCancel', approveModal],
            ['offerApproveClose', approveModal],
            ['offerRejectCancel', rejectModal],
            ['offerRejectClose', rejectModal],
        ].forEach(function (pair) {
            document.getElementById(pair[0]).addEventListener('click', function () {
                closeModal(pair[1]);
            });
        });

        [approveModal, rejectModal].forEach(function (modal) {
            modal.addEventListener('click', function (e) {
                if (e.target === modal) closeModal(modal);
            });
        });

        document.addEventListener('keydown', function (e) {
            const open = !approveModal.hidden ? approveModal : (!rejectModal.hidden ? rejectModal : null);
            if (!open) return;

            if (e.key === 'Escape') { closeModal(open); return; }

            // Enter submits from the single-line fields; the reason textarea keeps
            // Enter for new lines.
            if (e.key === 'Enter' && (document.activeElement === approvePoints || document.activeElement === approveValidUntil)) {
                e.preventDefault();
                approveConfirm.click();
            }
        });

        document.addEventListener('click', function (e) {
            const option = e.target.closest('.offer-index .dropdown_table .option');
            if (option) {
                e.preventDefault();
                e.stopPropagation();
                save(option);
                return;
            }

            const btn = e.target.closest('.offer-index .dropdown_table .drop-btn');
            if (btn) {
                e.preventDefault();
                e.stopPropagation();
                const dd = btn.closest('.dropdown_table');
                // A decided offer has no menu to open; its pill is display only.
                if (dd.classList.contains('is-locked')) { closeAll(null); return; }
                closeAll(dd);
                dd.classList.toggle('active');
                return;
            }

            closeAll(null);
        });
    })();
</script>
@endpush