@extends('merchant.layout.app')

@section('title', 'Offers')
@php $page = 'offers'; @endphp

@section('content')

{{-- Page Header --}}
<div class="mb-6 flex flex-wrap items-center justify-between gap-3">
    <div>
        <h2 class="text-xl font-semibold text-gray-800 dark:text-white/90">Offers</h2>
        <p class="text-sm text-gray-500 dark:text-gray-400 mt-0.5">Manage your loyalty offers</p>
    </div>
    <button onclick="openAddModal()"
        class="inline-flex items-center gap-2 rounded-lg bg-brand-500 px-4 py-2.5 text-sm font-medium text-white hover:bg-brand-600 transition-colors">
        <svg width="16" height="16" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4"/>
        </svg>
        Add Offer
    </button>
</div>

{{-- Alerts --}}
<div id="alert-success" class="hidden mb-4 rounded-lg border border-green-200 bg-green-50 px-4 py-3 dark:border-green-800 dark:bg-green-900/20">
    <p id="alert-success-msg" class="text-sm text-green-600 dark:text-green-400"></p>
</div>
<div id="alert-error" class="hidden mb-4 rounded-lg border border-red-200 bg-red-50 px-4 py-3 dark:border-red-800 dark:bg-red-900/20">
    <p id="alert-error-msg" class="text-sm text-red-600 dark:text-red-400"></p>
</div>

{{-- Offers Table --}}
<div class="rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]">
    <div class="px-5 py-4 sm:px-6 sm:py-5 flex items-center justify-between">
        <h3 class="text-base font-medium text-gray-800 dark:text-white/90">All Offers</h3>
        <span id="offers-count" class="text-sm text-gray-500 dark:text-gray-400"></span>
    </div>
    <div class="border-t border-gray-100 dark:border-gray-800">
        {{-- Loading --}}
        <div id="table-loading" class="flex items-center justify-center py-16">
            <div class="h-8 w-8 animate-spin rounded-full border-4 border-brand-500 border-t-transparent"></div>
        </div>

        {{-- Empty state --}}
        <div id="table-empty" class="hidden flex flex-col items-center justify-center py-16 text-center">
            <svg class="mb-3 h-12 w-12 text-gray-300 dark:text-gray-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
            </svg>
            <p class="text-sm font-medium text-gray-500 dark:text-gray-400">No offers found</p>
            <p class="text-xs text-gray-400 dark:text-gray-500 mt-1">Click "Add Offer" to create your first offer.</p>
        </div>

        {{-- Table --}}
        <div id="table-wrap" class="hidden overflow-x-auto">
            <table class="min-w-full">
                <thead>
                    <tr class="border-b border-gray-100 dark:border-gray-800">
                        <th class="px-5 py-3 sm:px-6 text-left">
                            <p class="font-medium text-gray-500 text-xs dark:text-gray-400">Offer</p>
                        </th>
                        <th class="px-5 py-3 sm:px-6 text-left">
                            <p class="font-medium text-gray-500 text-xs dark:text-gray-400">Code</p>
                        </th>
                        <th class="px-5 py-3 sm:px-6 text-left">
                            <p class="font-medium text-gray-500 text-xs dark:text-gray-400">Discount</p>
                        </th>
                        <th class="px-5 py-3 sm:px-6 text-left">
                            <p class="font-medium text-gray-500 text-xs dark:text-gray-400">Validity</p>
                        </th>
                        <th class="px-5 py-3 sm:px-6 text-left">
                            <p class="font-medium text-gray-500 text-xs dark:text-gray-400">Status</p>
                        </th>
                        <th class="px-5 py-3 sm:px-6 text-left">
                            <p class="font-medium text-gray-500 text-xs dark:text-gray-400">Actions</p>
                        </th>
                    </tr>
                </thead>
                <tbody id="offers-tbody" class="divide-y divide-gray-100 dark:divide-gray-800">
                </tbody>
            </table>
        </div>
    </div>
</div>

{{-- ===== ADD OFFER MODAL ===== --}}
<div id="add-modal" class="fixed inset-0 z-99999 hidden items-center justify-center bg-black/50 p-4">
    <div class="w-full max-w-2xl max-h-[90vh] overflow-y-auto rounded-2xl bg-white dark:bg-gray-900 shadow-xl">
        <div class="flex items-center justify-between border-b border-gray-100 dark:border-gray-800 px-6 py-4">
            <h3 class="text-base font-semibold text-gray-800 dark:text-white/90">Add New Offer</h3>
            <button onclick="closeAddModal()" class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300">
                <svg width="20" height="20" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/>
                </svg>
            </button>
        </div>
        <form id="add-offer-form" class="p-6 space-y-4" novalidate>
            @include('merchant.partials.offer-form', ['mode' => 'add'])
            <div class="flex gap-3 pt-2">
                <button type="submit" id="add-submit-btn"
                    class="flex items-center gap-2 rounded-lg bg-brand-500 px-5 py-2.5 text-sm font-medium text-white hover:bg-brand-600 disabled:opacity-60">
                    <span id="add-submit-text">Create Offer</span>
                    <svg id="add-submit-spinner" class="hidden h-4 w-4 animate-spin" fill="none" viewBox="0 0 24 24">
                        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                        <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
                    </svg>
                </button>
                <button type="button" onclick="closeAddModal()"
                    class="rounded-lg border border-gray-300 px-5 py-2.5 text-sm font-medium text-gray-700 hover:bg-gray-50 dark:border-gray-700 dark:text-gray-400">
                    Cancel
                </button>
            </div>
        </form>
    </div>
</div>

{{-- ===== EDIT OFFER MODAL ===== --}}
<div id="edit-modal" class="fixed inset-0 z-99999 hidden items-center justify-center bg-black/50 p-4">
    <div class="w-full max-w-2xl max-h-[90vh] overflow-y-auto rounded-2xl bg-white dark:bg-gray-900 shadow-xl">
        <div class="flex items-center justify-between border-b border-gray-100 dark:border-gray-800 px-6 py-4">
            <h3 class="text-base font-semibold text-gray-800 dark:text-white/90">Edit Offer</h3>
            <button onclick="closeEditModal()" class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300">
                <svg width="20" height="20" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/>
                </svg>
            </button>
        </div>
        <form id="edit-offer-form" class="p-6 space-y-4" novalidate>
            <input type="hidden" id="edit-offer-id">
            @include('merchant.partials.offer-form', ['mode' => 'edit'])
            <div class="flex gap-3 pt-2">
                <button type="submit" id="edit-submit-btn"
                    class="flex items-center gap-2 rounded-lg bg-brand-500 px-5 py-2.5 text-sm font-medium text-white hover:bg-brand-600 disabled:opacity-60">
                    <span id="edit-submit-text">Save Changes</span>
                    <svg id="edit-submit-spinner" class="hidden h-4 w-4 animate-spin" fill="none" viewBox="0 0 24 24">
                        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                        <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
                    </svg>
                </button>
                <button type="button" onclick="closeEditModal()"
                    class="rounded-lg border border-gray-300 px-5 py-2.5 text-sm font-medium text-gray-700 hover:bg-gray-50 dark:border-gray-700 dark:text-gray-400">
                    Cancel
                </button>
            </div>
        </form>
    </div>
</div>

{{-- ===== DELETE CONFIRM MODAL ===== --}}
<div id="delete-modal" class="fixed inset-0 z-99999 hidden items-center justify-center bg-black/50 p-4">
    <div class="w-full max-w-sm rounded-2xl bg-white dark:bg-gray-900 shadow-xl p-6">
        <h3 class="text-base font-semibold text-gray-800 dark:text-white/90 mb-2">Delete Offer</h3>
        <p class="text-sm text-gray-500 dark:text-gray-400 mb-6">Are you sure you want to delete this offer? This action cannot be undone.</p>
        <input type="hidden" id="delete-offer-id">
        <div class="flex gap-3">
            <button onclick="confirmDelete()"
                class="flex-1 rounded-lg bg-red-500 px-4 py-2.5 text-sm font-medium text-white hover:bg-red-600">
                Delete
            </button>
            <button onclick="closeDeleteModal()"
                class="flex-1 rounded-lg border border-gray-300 px-4 py-2.5 text-sm font-medium text-gray-700 hover:bg-gray-50 dark:border-gray-700 dark:text-gray-400">
                Cancel
            </button>
        </div>
    </div>
</div>

@endsection

@push('scripts')
<script>
const token       = localStorage.getItem('merchant_token') || sessionStorage.getItem('merchant_token');
const imageBase   = 'http://localhost:8888/loyaltiya-backend/public/merchant/offers/images/';
let offersCache   = [];

// ── Alerts ──
function showSuccess(msg) {
    const el = document.getElementById('alert-success');
    el.classList.remove('hidden');
    document.getElementById('alert-success-msg').textContent = msg;
    document.getElementById('alert-error').classList.add('hidden');
    setTimeout(() => el.classList.add('hidden'), 4000);
}
function showError(msg) {
    const el = document.getElementById('alert-error');
    el.classList.remove('hidden');
    document.getElementById('alert-error-msg').textContent = msg;
    document.getElementById('alert-success').classList.add('hidden');
}

// ── Load Offers ──
async function loadOffers() {
    document.getElementById('table-loading').classList.remove('hidden');
    document.getElementById('table-wrap').classList.add('hidden');
    document.getElementById('table-empty').classList.add('hidden');

    try {
        const res  = await fetch('{{ url("/merchant/get_offers") }}', {
            headers: { 'Accept': 'application/json', 'Authorization': 'Bearer ' + token }
        });
        const data = await res.json();

        document.getElementById('table-loading').classList.add('hidden');

        if (data.success === 1 && data.data.offers.length > 0) {
            offersCache = data.data.offers;
            renderTable(offersCache);
            document.getElementById('offers-count').textContent = offersCache.length + ' offer(s)';
        } else {
            document.getElementById('table-empty').classList.remove('hidden');
        }
    } catch (err) {
        document.getElementById('table-loading').classList.add('hidden');
        showError('Failed to load offers.');
    }
}

function renderTable(offers) {
    const tbody = document.getElementById('offers-tbody');
    tbody.innerHTML = '';
    offers.forEach(function (o) {
        const img = o.offer_image
            ? `<img src="${imageBase}${o.offer_image}" class="h-10 w-10 rounded-lg object-cover" />`
            : `<div class="h-10 w-10 rounded-lg bg-gray-100 dark:bg-gray-800 flex items-center justify-center"><svg class="h-5 w-5 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg></div>`;

        const validity = (o.start_date || o.end_date)
            ? `${o.start_date ?? '—'} to ${o.end_date ?? '—'}`
            : '<span class="text-gray-400">No expiry</span>';

        const statusClass = o.status === 'active'
            ? 'bg-success-50 text-success-700 dark:bg-success-500/15 dark:text-success-500'
            : 'bg-gray-100 text-gray-600 dark:bg-gray-800 dark:text-gray-400';

        tbody.innerHTML += `
            <tr>
                <td class="px-5 py-4 sm:px-6">
                    <div class="flex items-center gap-3">
                        ${img}
                        <div>
                            <p class="font-medium text-gray-800 text-sm dark:text-white/90">${o.offer_title}</p>
                            <p class="text-xs text-gray-500 dark:text-gray-400 mt-0.5 max-w-[180px] truncate">${o.offer_details ?? ''}</p>
                        </div>
                    </div>
                </td>
                <td class="px-5 py-4 sm:px-6">
                    <span class="rounded-md bg-gray-100 dark:bg-gray-800 px-2 py-1 text-xs font-mono text-gray-700 dark:text-gray-300">${o.offer_code}</span>
                </td>
                <td class="px-5 py-4 sm:px-6">
                    <p class="text-sm text-gray-500 dark:text-gray-400">${o.discount_value ? o.discount_value + '%' : '—'}</p>
                </td>
                <td class="px-5 py-4 sm:px-6">
                    <p class="text-xs text-gray-500 dark:text-gray-400">${validity}</p>
                </td>
                <td class="px-5 py-4 sm:px-6">
                    <span class="rounded-full px-2 py-0.5 text-xs font-medium ${statusClass}">${o.status ?? 'active'}</span>
                </td>
                <td class="px-5 py-4 sm:px-6">
                    <div class="flex items-center gap-2">
                        <button onclick="openEditModal(${o.offer_id})"
                            class="inline-flex items-center gap-1 rounded-lg border border-gray-200 bg-white px-3 py-1.5 text-xs font-medium text-gray-700 hover:bg-gray-50 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300">
                            <svg width="12" height="12" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/>
                            </svg>
                            Edit
                        </button>
                        <button onclick="openDeleteModal(${o.offer_id})"
                            class="inline-flex items-center gap-1 rounded-lg border border-red-200 bg-red-50 px-3 py-1.5 text-xs font-medium text-red-600 hover:bg-red-100 dark:border-red-800 dark:bg-red-900/20 dark:text-red-400">
                            <svg width="12" height="12" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/>
                            </svg>
                            Delete
                        </button>
                    </div>
                </td>
            </tr>`;
    });
    document.getElementById('table-wrap').classList.remove('hidden');
}

// ── Add Modal ──
function openAddModal() {
    document.getElementById('add-offer-form').reset();
    document.getElementById('add-modal').classList.remove('hidden');
    document.getElementById('add-modal').classList.add('flex');
}
function closeAddModal() {
    document.getElementById('add-modal').classList.add('hidden');
    document.getElementById('add-modal').classList.remove('flex');
}

// ── Edit Modal ──
function openEditModal(offerId) {
    const offer = offersCache.find(o => o.offer_id === offerId);
    if (!offer) return;

    document.getElementById('edit-offer-id').value    = offer.offer_id;
    document.getElementById('edit-offer_title').value  = offer.offer_title ?? '';
    document.getElementById('edit-offer_code').value   = offer.offer_code ?? '';
    document.getElementById('edit-offer_details').value= offer.offer_details ?? '';
    document.getElementById('edit-discount_value').value= offer.discount_value ?? '';
    document.getElementById('edit-min_purchase_amount').value = offer.min_purchase_amount ?? '';
    document.getElementById('edit-start_date').value   = offer.start_date ?? '';
    document.getElementById('edit-end_date').value     = offer.end_date ?? '';
    document.getElementById('edit-offer_rules').value  = offer.offer_rules ?? '';
    document.getElementById('edit-status').value       = offer.status ?? 'active';

    document.getElementById('edit-modal').classList.remove('hidden');
    document.getElementById('edit-modal').classList.add('flex');
}
function closeEditModal() {
    document.getElementById('edit-modal').classList.add('hidden');
    document.getElementById('edit-modal').classList.remove('flex');
}

// ── Delete Modal ──
function openDeleteModal(offerId) {
    document.getElementById('delete-offer-id').value = offerId;
    document.getElementById('delete-modal').classList.remove('hidden');
    document.getElementById('delete-modal').classList.add('flex');
}
function closeDeleteModal() {
    document.getElementById('delete-modal').classList.add('hidden');
    document.getElementById('delete-modal').classList.remove('flex');
}

async function confirmDelete() {
    const offerId = document.getElementById('delete-offer-id').value;
    try {
        const res  = await fetch('{{ url("/merchant/merchant_delete_offer") }}', {
            method: 'GET',
            headers: { 'Accept': 'application/json', 'Authorization': 'Bearer ' + token,
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content') },
        });

        // API uses GET with query param — rebuild as needed
        const res2 = await fetch(`{{ url("/merchant/merchant_delete_offer") }}?offer_id=${offerId}`, {
            headers: { 'Accept': 'application/json', 'Authorization': 'Bearer ' + token }
        });
        const data = await res2.json();

        closeDeleteModal();
        if (data.success === 1) {
            showSuccess('Offer deleted successfully.');
            loadOffers();
        } else {
            showError(data.message || 'Failed to delete offer.');
        }
    } catch (err) {
        closeDeleteModal();
        showError('Something went wrong.');
    }
}

// ── Add Form Submit ──
document.getElementById('add-offer-form').addEventListener('submit', async function (e) {
    e.preventDefault();
    const btn = document.getElementById('add-submit-btn');
    const txt = document.getElementById('add-submit-text');
    const spn = document.getElementById('add-submit-spinner');
    btn.disabled = true; spn.classList.remove('hidden'); txt.textContent = 'Creating...';

    const formData = new FormData(this);

    try {
        const res  = await fetch('{{ url("/merchant/merchant_create_offer") }}', {
            method: 'POST',
            headers: { 'Accept': 'application/json', 'Authorization': 'Bearer ' + token,
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content') },
            body: formData,
        });
        const data = await res.json();
        if (data.success === 1) {
            closeAddModal();
            showSuccess('Offer created successfully!');
            loadOffers();
        } else {
            showError(data.message || 'Failed to create offer.');
        }
    } catch (err) {
        showError('Something went wrong.');
    } finally {
        btn.disabled = false; spn.classList.add('hidden'); txt.textContent = 'Create Offer';
    }
});

// ── Edit Form Submit ──
document.getElementById('edit-offer-form').addEventListener('submit', async function (e) {
    e.preventDefault();
    const btn = document.getElementById('edit-submit-btn');
    const txt = document.getElementById('edit-submit-text');
    const spn = document.getElementById('edit-submit-spinner');
    btn.disabled = true; spn.classList.remove('hidden'); txt.textContent = 'Saving...';

    const formData = new FormData(this);
    formData.append('offer_id', document.getElementById('edit-offer-id').value);

    try {
        const res  = await fetch('{{ url("/merchant/merchant_edit_offer") }}', {
            method: 'POST',
            headers: { 'Accept': 'application/json', 'Authorization': 'Bearer ' + token,
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content') },
            body: formData,
        });
        const data = await res.json();
        if (data.success === 1) {
            closeEditModal();
            showSuccess('Offer updated successfully!');
            loadOffers();
        } else {
            showError(data.message || 'Failed to update offer.');
        }
    } catch (err) {
        showError('Something went wrong.');
    } finally {
        btn.disabled = false; spn.classList.add('hidden'); txt.textContent = 'Save Changes';
    }
});

// Close modals on backdrop click
['add-modal', 'edit-modal', 'delete-modal'].forEach(function(id) {
    document.getElementById(id).addEventListener('click', function(e) {
        if (e.target === this) {
            this.classList.add('hidden');
            this.classList.remove('flex');
        }
    });
});

// ── Init ──
document.addEventListener('DOMContentLoaded', loadOffers);
</script>
@endpush