@extends('layouts.panel')

@section('title', app(\App\Services\TitleService::class)->generate())

@push('styles')
<style>
    #purchase-history-container .glass { padding: 12px !important; }
    #purchase-history-container table { width: 100%; border-collapse: separate; border-spacing: 0; }
    #purchase-history-container thead tr { background: rgba(148,163,184,0.08); }
    #purchase-history-container th { color: #cbd5e1; font-weight: 600; font-size: 12px; padding: 10px 14px; border-bottom: 1px solid rgba(148,163,184,0.12); white-space: nowrap; }
    #purchase-history-container td { color: #cbd5e1; font-size: 12px; padding: 12px 14px; vertical-align: middle; }
    #purchase-history-container tbody tr:hover { background: rgba(255,255,255,0.04); }
    
    /* Table footer styles */
    .table-footer {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 16px;
        margin-top: 10px;
        border-top: 1px solid rgba(148, 163, 184, 0.1);
        border-radius: 10px;
    }
    
    .range-info {
        color: #9ca3af;
        font-size: 14px;
    }
    
    .pagination {
        display: flex;
        gap: 8px;
    }
    
    .page-btn {
        padding: 8px 12px;
        border: 1px solid rgba(148, 163, 184, 0.2);
        background: rgba(255, 255, 255, 0.05);
        color: #e5e7eb;
        border-radius: 6px;
        cursor: pointer;
        transition: all 0.2s;
        font-size: 14px;
    }
    
    .page-btn:hover {
        background: rgba(255, 255, 255, 0.1);
        border-color: rgba(148, 163, 184, 0.3);
    }
    
    .page-btn.active {
        background: #3b82f6;
        border-color: #3b82f6;
        color: white;
        font-weight: 600;
    }
</style>
@endpush

@section('content')
<div id="content-container">
    <main id="main-content" class="mx-auto w-full px-4 py-8">
        <header class="flex flex-col sm:flex-row justify-between items-start sm:items-center border-b pb-4 mb-6 border-slate-700">
            <h1 id="page-title" class="text-2xl font-bold text-slate-100">لیست خریدهای ثبت‌شده</h1>
            <div class="mt-4 sm:mt-0">
                <a href="{{ route('admin.purchase-requests.create') }}" class="px-6 py-3 bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-700 hover:to-indigo-700 text-white font-medium rounded-xl transition-all duration-200 transform hover:scale-105 shadow-lg hover:shadow-xl glow">افزودن درخواست خرید</a>
            </div>
        </header>

        <div class="mt-8 pt-6 border-t border-slate-700">
            <div class="flex flex-col sm:flex-row justify-between items-center gap-4 mb-4 p-4 glass rounded-xl">
                <div class="relative w-full sm:w-72">
                    <span class="pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-slate-400">
                        <svg xmlns="http://www.w3.org/2000/svg" class="size-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><circle cx="11" cy="11" r="7"/><path d="M20 20l-3-3"/></svg>
                    </span>
                    <input type="text" id="history-search" placeholder="جستجو در محصول یا تامین‌کننده..." class="w-full rounded-xl border-0 bg-white/5 pl-11 pr-3 text-slate-100 placeholder:text-slate-400 focus:outline-none focus:ring-2 focus:ring-blue-600/50" />
                </div>
                <div class="flex items-center gap-3 text-sm flex-wrap">
                    <div class="flex items-center gap-2">
                        <label for="items-per-page" class="text-slate-400">نمایش:</label>
                        <select id="items-per-page" class="rounded-md text-sm">
                            <option value="10">۱۰</option>
                            <option value="25">۲۵</option>
                            <option value="50">۵۰</option>
                            <option value="100">۱۰۰</option>
                            <option value="all">همه</option>
                        </select>
                        <span class="text-slate-400">مورد</span>
                    </div>
                </div>
            </div>
            <div id="purchase-history-container" class="space-y-4"></div>
            <footer class="table-footer">
                <div id="rangeInfo" class="range-info"></div>
                <nav id="pagination" class="pagination"></nav>
            </footer>
        </div>
    </main>
</div>
@endsection

@push('scripts')
<script>
    const purchaseHistory = [];
    const state = {
        purchaseHistory: purchaseHistory,
        historyCurrentPage: 1,
        historyItemsPerPage: 10,
        historySearchQuery: '',
        historyTotalItems: 0,
        historyTotalPages: 1,
        historyPerPageServer: 10
    };

    const purchaseHistoryContainer = document.getElementById('purchase-history-container');
    const historySearchInput = document.getElementById('history-search');
    const itemsPerPageSelect = document.getElementById('items-per-page');
    const rangeInfo = document.getElementById('rangeInfo');
    const pagination = document.getElementById('pagination');

    function formatNumber(num) {
        return new Intl.NumberFormat('fa-IR').format(num);
    }

    function renderPurchaseHistory() {
        const query = state.historySearchQuery.toLowerCase();
        let filtered = (state.purchaseHistory || []).filter(item =>
            ((item.product || '').toLowerCase().includes(query) || (item.supplier || '').toLowerCase().includes(query))
        );
        
        const totalPages = state.historyTotalPages || 1;
        // Use server-paginated rows as-is to avoid double slicing
        const rows = filtered;

        purchaseHistoryContainer.innerHTML = '';
        if (rows.length) {
            let html = `<div class=\"glass rounded-2xl overflow-x-auto\"><table class=\"min-w-full text-sm\"><thead><tr>
                <th class=\"text-right\">تاریخ</th>
                <th class=\"text-right\">محصول</th>
                <th class=\"text-right\">مقدار</th>
                <th class=\"text-right\">تامین‌کننده</th>
                <th class=\"text-right\">بازاریابــــ</th>
                <th class=\"text-right\">فی مبلغ</th>
                <th class=\"text-right\">نوع خرید</th>
                <th class=\"text-right\">وضعیت</th>
                <th class=\"text-right\">عملیات</th>
            </tr></thead><tbody class=\"divide-y divide-white/10\">`;
            rows.forEach(item => {
                const dateFa = item.inquiry_date ? new Date(item.inquiry_date).toLocaleDateString('fa-IR') : (item.created_at ? new Date(item.created_at).toLocaleDateString('fa-IR') : (item.date || ''));
                const productName = item.product || '';
                const qty = item.quantity || 0;
                const supplier = item.supplier || '';
                // Display destination-based value: warehouse -> "انبار", sales -> sales_user_name
                let payer = '';
                const destination = item.destination || 'warehouse';
                if (destination === 'warehouse') {
                    payer = 'انبار';
                } else if (destination === 'sales') {
                    payer = item.salesUserName || item.sales_user_name || 'واحد فروش';
                } else {
                    payer = item.payer || ''; // fallback to old payer field
                }
                const total = item.totalPrice || 0;
                const typeText = (item.purchaseType === 'official' || item.purchaseType === 'رسمی') ? 'رسمی' : 'غیررسمی';
                const typeClass = (typeText === 'رسمی') ? 'bg-blue-500/30 text-blue-300' : 'bg-yellow-500/30 text-yellow-300';
                const last = Array.isArray(item.history_status) ? (item.history_status[item.history_status.length - 1] || null) : null;
                const lastStatus = last ? last.status : (item.history_status || null);
                const statusHtml = (function(){
                    if (lastStatus === 'completed') {
                        return `<span class=\"px-3 py-1 text-xs text-white bg-green-600 rounded-md\">خرید انجام شده</span>`;
                    }
                    if (lastStatus === 'failed') {
                        return `<span class=\"px-3 py-1 text-xs text-white bg-red-600 rounded-md\">خرید انجام نشد</span>`;
                    }
                    return `<button class=\"open-status-modal btn-action btn-warning\" data-id=\"${item.id}\">آخرین وضعیت</button>`;
                })();
                html += `<tr>
                    <td class="px-4 py-4">${dateFa}</td>
                    <td class="px-4 py-4">${productName}</td>
                    <td class="px-4 py-4">${formatNumber(qty)}</td>
                    <td class="px-4 py-4">${supplier}</td>
                    <td class="px-4 py-4">${payer}</td>
                    <td class="px-4 py-4">${formatNumber(total)} ت</td>
                    <td class="px-4 py-4"><span class="px-2 py-1 text-xs rounded-full ${typeClass}">${typeText}</span></td>
                    <td class=\"px-4 py-4\">${statusHtml}</td>
                    <td class=\"px-4 py-4\">\n                        <div class=\"actions\">\n                            <a href=\"{{ url('/admin/purchase-requests') }}\/${item.id}\" class=\"btn-action\">مشاهده</a>\n                            <a href=\"{{ url('/admin/purchase-requests') }}\/${item.id}\/edit\" class=\"btn-action btn-edit\">ویرایش</a>\n                            <button class=\"btn-action btn-delete ph-delete-btn\" data-id=\"${item.id}\">حذف</button>\n                        </div>\n                    </td>
                </tr>`;
            });
            html += `</tbody></table></div>`;
            purchaseHistoryContainer.innerHTML = html;
        } else {
            purchaseHistoryContainer.innerHTML = `<div class="glass p-4 rounded-xl"><p class="text-slate-400">هیچ خریدی با این مشخصات یافت نشد.</p></div>`;
        }
        renderPaginationControls(totalPages, state.historyTotalItems || filtered.length);
    }

    function renderPaginationControls(totalPages, totalItems) {
        const current = state.historyCurrentPage;
        const perPage = state.historyPerPageServer || (state.historyItemsPerPage === 'all' ? totalItems : parseInt(state.historyItemsPerPage, 10));
        
        // Update range info
        const startItem = totalItems === 0 ? 0 : ((current - 1) * perPage + 1);
        const endItem = Math.min(current * perPage, totalItems);
        rangeInfo.textContent = `نمایش ${startItem} تا ${endItem} از ${totalItems}`;
        
        // Clear pagination
        pagination.innerHTML = '';
        
        if (totalPages <= 1) return;
        
        // Create page buttons
        for (let i = 1; i <= totalPages; i++) {
            const pageBtn = document.createElement('button');
            pageBtn.textContent = i;
            pageBtn.className = `page-btn ${i === current ? 'active' : ''}`;
            pageBtn.dataset.page = i;
            pagination.appendChild(pageBtn);
        }
    }

    function fetchAndRenderHistory() {
        const params = new URLSearchParams();
        params.set('q', state.historySearchQuery || '');
        const per = state.historyItemsPerPage === 'all' ? 1000 : parseInt(state.historyItemsPerPage, 10);
        params.set('per_page', String(per));
        params.set('page', String(state.historyCurrentPage));
        fetch(`{{ url('/admin/purchase-requests') }}?${params.toString()}`, { headers: { 'X-Requested-With': 'XMLHttpRequest' }})
            .then(r => r.ok ? r.json() : Promise.reject())
            .then(data => {
                let rows = data?.data || [];
                // Hide draft/temporary PRs created by instant draft-offer (no supplier/payer and zero total)
                rows = rows.filter((item) => {
                    const noTotal = !item.total_amount || Number(item.total_amount) === 0;
                    const noSupplier = !item.latest_supplier && !item.supplier;
                    const noPayer = !item.payer;
                    return !(noTotal && noSupplier && noPayer);
                });
                // Store server pagination metadata
                state.historyTotalItems = Number(data?.total ?? rows.length) || 0;
                state.historyTotalPages = Number(data?.last_page ?? 1) || 1;
                state.historyCurrentPage = Number(data?.current_page ?? state.historyCurrentPage) || state.historyCurrentPage;
                state.historyPerPageServer = Number(data?.per_page ?? per) || per;
                state.purchaseHistory = rows.map((item) => {
                    // Prefer nested relation name, then fallback fields from item
                    const nestedItem = item.items && item.items[0] ? item.items[0] : null;
                    const productName =
                        (nestedItem && nestedItem.product && (nestedItem.product.name || nestedItem.product.title)) ||
                        (nestedItem && (nestedItem.product_name || nestedItem.productTitle)) ||
                        item.product_name ||
                        item.selected_product_name ||
                        item.product ||
                        '';
                    const hs = item.history_status;
                    const last = Array.isArray(hs) && hs.length ? hs[hs.length - 1] : null;
                    const lastStatus = (last && last.status) ? last.status : (typeof hs === 'string' ? hs : null);
                    return {
                        id: item.id,
                        created_at: item.created_at,
                        inquiry_date: item.inquiry_date,
                        product: productName,
                        quantity: (item.items && item.items[0] ? (item.items[0].quantity || 0) : (item.quantity || 0)),
                        supplier: item.latest_supplier || item.supplier || '',
                        salesUserName: item.sales_user_name || '',
                        totalPrice: item.unit_price || item.total_amount || 0,
                        purchaseType: item.purchase_type || 'official',
                        destination: item.destination || 'warehouse',
                        history_status: lastStatus
                    };
                });
                renderPurchaseHistory();
            })
            .catch(() => {
                purchaseHistoryContainer.innerHTML = `<div class="glass p-4 rounded-xl"><p class="text-slate-400">خطا در بارگذاری داده‌ها.</p></div>`;
            });
    }

    document.addEventListener('DOMContentLoaded', () => {
        fetchAndRenderHistory();
        
        // Add pagination click handler
        pagination.addEventListener('click', function(e) {
            const btn = e.target.closest('.page-btn');
            if (!btn) return;
            const page = parseInt(btn.dataset.page, 10);
            if (!isNaN(page)) {
                state.historyCurrentPage = page;
                fetchAndRenderHistory();
            }
        });
    });

    historySearchInput.addEventListener('input', (e) => { 
        state.historySearchQuery = e.target.value; 
        state.historyCurrentPage = 1; 
        fetchAndRenderHistory(); 
    });
    
    itemsPerPageSelect.addEventListener('change', (e) => { 
        state.historyItemsPerPage = e.target.value; 
        state.historyCurrentPage = 1; 
        fetchAndRenderHistory(); 
    });

    // ---- Status Modal (Last Status) helpers ----
    function ensureHistoryStatusModal() {
        if (document.getElementById('historyStatusModal')) return;
        const modal = document.createElement('div');
        modal.id = 'historyStatusModal';
        modal.className = 'fixed inset-0 z-50 hidden items-center justify-center bg-black/50 backdrop-blur-sm';
        modal.innerHTML = `
            <div class="glass border rounded-2xl p-6 w-full max-w-md text-slate-100">
                <h3 class="text-lg font-bold mb-4">آخرین وضعیت خرید</h3>
                <div class="space-y-3">
                    <button id="hs-completed" class="w-full px-4 py-2 rounded-md bg-green-600 hover:bg-green-700">خرید انجام شد</button>
                    <div class="space-y-2">
                        <button id="hs-failed-toggle" class="w-full px-4 py-2 rounded-md bg-red-600 hover:bg-red-700">خرید انجام نشد</button>
                        <textarea id="hs-reason" class="w-full rounded-md bg-white/10 border border-white/20 p-3 hidden" rows="3" placeholder="علت را وارد کنید..."></textarea>
                        <button id="hs-submit-failed" class="w-full px-4 py-2 rounded-md bg-red-600 hover:bg-red-700 hidden">ثبت علت</button>
                    </div>
                    <button id="hs-cancel" class="w-full px-4 py-2 rounded-md bg-slate-600 hover:bg-slate-700">بستن</button>
                </div>
            </div>`;
        document.body.appendChild(modal);
    }

    async function apiPostJson(url, payload) {
        const res = await fetch(url, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'Accept': 'application/json',
                'X-Requested-With': 'XMLHttpRequest',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
            },
            body: JSON.stringify(payload || {})
        });
        if (!res.ok) {
            let msg = `خطا (${res.status})`;
            try {
                const ct = res.headers.get('content-type') || '';
                if (res.status === 422 && ct.includes('application/json')) {
                    const data = await res.json();
                    const errors = data && data.errors ? data.errors : {};
                    const errorMessages = Object.values(errors).flat().join('\n') || (data.message || msg);
                    throw new Error(errorMessages);
                }
                if (ct.includes('application/json')) {
                    const data = await res.json();
                    throw new Error(data.message || msg);
                } else {
                    const text = await res.text();
                    throw new Error(text || msg);
                }
            } catch (e) { throw e instanceof Error ? e : new Error(msg); }
        }
        return res.json();
    }

    function openHistoryStatusModal(id) {
        ensureHistoryStatusModal();
        const modal = document.getElementById('historyStatusModal');
        const btnCompleted = document.getElementById('hs-completed');
        const btnFailedToggle = document.getElementById('hs-failed-toggle');
        const btnSubmitFailed = document.getElementById('hs-submit-failed');
        const reasonEl = document.getElementById('hs-reason');
        const btnCancel = document.getElementById('hs-cancel');
        // reset
        reasonEl.classList.add('hidden');
        btnSubmitFailed.classList.add('hidden');
        reasonEl.value = '';

        modal.classList.remove('hidden');
        modal.classList.add('flex');
        const close = () => { modal.classList.add('hidden'); modal.classList.remove('flex'); };
        btnCancel.onclick = close;
        modal.onclick = (e) => { if (e.target.id === 'historyStatusModal') close(); };

        btnCompleted.onclick = () => {
            apiPostJson(`{{ url('/admin/purchase-requests') }}/${id}/update-status`, { status: 'completed' })
                .then(() => {
                    close();
                    // Update status cell to green
                    const row = document.querySelector(`a[href='{{ url('/admin/purchase-requests') }}/${id}']`)?.closest('tr');
                    const statusCell = row ? row.querySelector('td:nth-child(8)') : null; // status column index here is 8
                    if (statusCell) statusCell.innerHTML = `<span class=\"px-3 py-1 text-xs text-white bg-green-600 rounded-md\">خرید انجام شده</span>`;
                    if (window.customAlert) window.customAlert.success('ثبت شد', 'وضعیت خرید به انجام شده تغییر کرد');
                })
                .catch(err => { if (window.customAlert) window.customAlert.error('خطا', err.message || 'ثبت وضعیت انجام نشد'); });
        };

        btnFailedToggle.onclick = () => { reasonEl.classList.toggle('hidden'); btnSubmitFailed.classList.toggle('hidden'); };
        btnSubmitFailed.onclick = () => {
            const reason = reasonEl.value.trim();
            apiPostJson(`{{ url('/admin/purchase-requests') }}/${id}/update-status`, { status: 'failed', failure_reason: reason })
                .then(() => {
                    close();
                    // Update status cell to red
                    const row = document.querySelector(`a[href='{{ url('/admin/purchase-requests') }}/${id}']`)?.closest('tr');
                    const statusCell = row ? row.querySelector('td:nth-child(8)') : null;
                    if (statusCell) statusCell.innerHTML = `<span class=\"px-3 py-1 text-xs text-white bg-red-600 rounded-md\">خرید انجام نشد</span>`;
                    if (window.customAlert) window.customAlert.warning('ثبت شد', 'وضعیت به خرید انجام نشد ثبت شد');
                })
                .catch(err => { if (window.customAlert) window.customAlert.error('خطا', err.message || 'ثبت وضعیت انجام نشد'); });
        };
    }

    // Click handler for opening status modal
    document.addEventListener('click', (e) => {
        const btn = e.target.closest('.open-status-modal');
        if (btn && btn.dataset.id) {
            openHistoryStatusModal(btn.dataset.id);
        }
    });

    document.addEventListener('click', (e) => {
        if (e.target.classList.contains('ph-delete-btn')) {
            const delBtn = e.target;
            const id = delBtn.dataset.id;
            if (!id) return;
            if (window.showDeleteModal) {
                window.showDeleteModal(
                    'حذف خرید',
                    'آیا از حذف این خرید مطمئن هستید؟',
                    () => {
                        const formData = new FormData();
                        formData.set('_method', 'DELETE');
                        fetch(`{{ url('/admin/purchase-requests') }}/${id}`, {
                            method: 'POST',
                            headers: { 'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'), 'X-Requested-With': 'XMLHttpRequest' },
                            body: formData
                        })
                        .then(r => { if (!r.ok) throw new Error('خطا در حذف'); return r.json().catch(() => ({})); })
                        .then(() => { 
                            fetchAndRenderHistory(); 
                            if (window.customAlert) {
                                window.customAlert.success('حذف موفق', 'خرید با موفقیت حذف شد');
                            }
                        })
                        .catch(() => { 
                            if (window.customAlert) {
                                window.customAlert.error('خطا', 'خطا در حذف خرید');
                            }
                        });
                    },
                    () => {}
                );
            }
        }
    });
</script>
@endpush