@extends('layouts.panel')

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

@push('styles')
<style>
    /* Table footer styles */
    .table-footer {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 16px 16px;
        margin-top: 4px;
        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;
    }
    
    .page-btn:disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }
    
    .page-btn-ellipsis {
        padding: 8px 12px;
        border: none;
        background: transparent;
        color: #9ca3af;
        cursor: default;
        pointer-events: none;
    }
    
    /* Page title font size */
    h1.text-xl.font-semibold.text-slate-200 {
        font-size: 1.2rem !important;
    }
</style>
@endpush

@section('content')
<div class="p-6">
    <div class="flex items-center justify-between mb-4">
        <h1 class="text-xl font-semibold text-slate-200">تاریخچه تغییرات قیمت محصولات</h1>
        <form id="reset-history-form" method="post" action="{{ route('admin.products.price-history.reset') }}">
            @csrf
            <button type="button" id="open-reset-modal" class="px-4 py-2 bg-red-600 text-white rounded hover:bg-red-700">ریست کردن اطلاعات</button>
        </form>
    </div>

    <form method="get" class="mb-4 flex gap-2">
        <input type="text" name="product" value="{{ request('product') }}" placeholder="نام محصول" class="px-3 py-2 rounded bg-slate-800 border border-slate-700 text-slate-200">
        <input type="text" name="supplier" value="{{ request('supplier') }}" placeholder="نام تامین‌کننده" class="px-3 py-2 rounded bg-slate-800 border border-slate-700 text-slate-200">
        <button class="px-4 py-2 bg-blue-600 text-white rounded">جستجو</button>
    </form>

    <div class="overflow-x-auto glass rounded-xl" style="max-width: 100%;">
        <table class="text-sm table-auto" style="min-width: 1400px;">
            <thead class="text-slate-300 border-b border-slate-700">
                <tr>
                    <th class="px-4 py-3 text-right whitespace-nowrap">محصول</th>
                    <th class="px-4 py-3 text-right whitespace-nowrap">تامین‌کننده</th>
                    <th class="px-4 py-3 text-right whitespace-nowrap">قیمت</th>
                    <th class="px-4 py-3 text-right whitespace-nowrap">قیمت کل</th>
                    <th class="px-4 py-3 text-right whitespace-nowrap">نوع</th>
                    <th class="px-4 py-3 text-right whitespace-nowrap">مرجع</th>
                    <th class="px-4 py-3 text-right whitespace-nowrap">تاریخ استعلام</th>
                    <th class="px-4 py-3 text-right whitespace-nowrap">برند</th>
                    <th class="px-4 py-3 text-right whitespace-nowrap">کشور</th>
                    <th class="px-4 py-3 text-right whitespace-nowrap">گرید</th>
                    <th class="px-4 py-3 text-right whitespace-nowrap">میزان درخواست</th>
                    
                </tr>
            </thead>
            <tbody class="divide-y divide-slate-800">
            @forelse($rows as $r)
                <tr class="hover:bg-white/5">
                    <td class="px-4 py-3 text-slate-200 whitespace-nowrap">{{ $r->product_name }}</td>
                    <td class="px-4 py-3 text-slate-300 whitespace-nowrap">{{ $r->supplier_name ?: '—' }}</td>
                    <td class="px-4 py-3 text-slate-300 whitespace-nowrap">{{ $r->base_price ? number_format($r->base_price) . ' تومان' : '—' }}</td>
                    <td class="px-4 py-3 text-slate-300">
                        @php
                            $ref = $r->quote_reference ?? '';
                            $prId = null;
                            if (preg_match('/PR#?(\d+)/i', $ref, $m)) {
                                $prId = (int) ($m[1] ?? 0);
                            } elseif (stripos($ref, 'PREVIOUS_BEFORE_PR#') === 0) {
                                $prId = (int) preg_replace('/^PREVIOUS_BEFORE_PR#(\d+).*/i', '$1', $ref);
                            }
                            $total = $prId && isset($prTotals[$prId]) ? $prTotals[$prId] : ($r->final_price ?? null);
                        @endphp
                        {{ $total ? number_format($total) . ' تومان' : '—' }}
                    </td>
                    <td class="px-4 py-3 text-slate-300 whitespace-nowrap">{{ $r->quote_type === 'official' ? 'رسمی' : 'غیر رسمی' }}</td>
                    <td class="px-4 py-3 text-slate-400 whitespace-nowrap">
                        @php
                            $ref = $r->quote_reference ?? '';
                            $refLabel = '—';
                            if ($ref && trim($ref) !== '') {
                                if (preg_match('/^PREVIOUS_BEFORE_PR#(\d+)/i', $ref, $mm)) {
                                    // Badge: previous price of this product
                                    $refLabel = '<span class="inline-block px-2 py-1 rounded border" style="background-color: rgba(88, 28, 135, 0.4); color: #D8B4FE; border-color: #5B21B6;">قیمت قبلی همین محصول</span>';
                                } elseif (preg_match('/PR#?(\d+)/i', $ref, $m)) {
                                    $id = e($m[1]);
                                    $url = url('/admin/purchase-requests/' . $id);
                                    // Badge: purchase requests section with link
                                    $refLabel = '<a href="' . $url . '" class="inline-block px-2 py-1 rounded border hover:opacity-90" style="background-color: rgba(30, 58, 138, 0.4); color: #93C5FD; border-color: #1E40AF;">بخش درخواست خرید #' . $id . '</a>';
                                } elseif (strcasecmp($ref, 'DIRECT_UPDATE') === 0) {
                                    // Badge: product updated
                                    $refLabel = '<span class="inline-block px-2 py-1 rounded border" style="background-color: rgba(120, 53, 15, 0.4); color: #FCD34D; border-color: #92400E;">محصول آپدیت شد</span>';
                                } elseif (strcasecmp($ref, 'تامین‌کننده مستقیم') === 0) {
                                    // Badge: direct supplier
                                    $refLabel = '<span class="inline-block px-2 py-1 rounded border" style="background-color: rgba(34, 197, 94, 0.4); color: #86EFAC; border-color: #16A34A;">تامین‌کننده مستقیم</span>';
                                } elseif (strcasecmp($ref, 'از استعلام قیمت - رسمی') === 0) {
                                    // Badge: price inquiry official
                                    $refLabel = '<span class="inline-block px-2 py-1 rounded border" style="background-color: rgba(30, 58, 138, 0.4); color: #93C5FD; border-color: #1E40AF;">از استعلام قیمت - رسمی</span>';
                                } elseif (strcasecmp($ref, 'از استعلام قیمت - غیررسمی') === 0) {
                                    // Badge: price inquiry unofficial
                                    $refLabel = '<span class="inline-block px-2 py-1 rounded border" style="background-color: rgba(251, 146, 60, 0.4); color: #FED7AA; border-color: #EA580C;">از استعلام قیمت - غیررسمی</span>';
                                } elseif (strcasecmp($ref, 'از استعلام قیمت') === 0) {
                                    // Badge: price inquiry (legacy)
                                    $refLabel = '<span class="inline-block px-2 py-1 rounded border" style="background-color: rgba(251, 146, 60, 0.4); color: #FED7AA; border-color: #EA580C;">از استعلام قیمت</span>';
                                } elseif (strcasecmp($ref, 'INITIAL') === 0) {
                                    $refLabel = 'قیمت اولیه محصول';
                                } else {
                                    $refLabel = e($ref);
                                }
                            }
                        @endphp
                        {!! $refLabel !!}
                    </td>
                    <td class="px-4 py-3 text-slate-400 whitespace-nowrap">@jdate($r->quoted_at, 'Y/m/d H:i')</td>
                    <td class="px-4 py-3 text-slate-400 whitespace-nowrap">{{ $r->brand ?: '—' }}</td>
                    <td class="px-4 py-3 text-slate-400 whitespace-nowrap">{{ $r->country ?: '—' }}</td>
                    <td class="px-4 py-3 text-slate-400 whitespace-nowrap">{{ $r->grade ?: '—' }}</td>
                    <td class="px-4 py-3 text-slate-400">
                        @php
                            $ref = $r->quote_reference ?? '';
                            $prId = null;
                            if (preg_match('/PR#?(\d+)/i', $ref, $m)) {
                                $prId = (int) ($m[1] ?? 0);
                            } elseif (stripos($ref, 'PREVIOUS_BEFORE_PR#') === 0) {
                                $prId = (int) preg_replace('/^PREVIOUS_BEFORE_PR#(\d+).*/i', '$1', $ref);
                            }
                            $amount = $prId && isset($prAmounts[$prId]) ? $prAmounts[$prId] : null;
                        @endphp
                        {{ $amount ?: '—' }}
                    </td>
                    
                </tr>
            @empty
                <tr>
                    <td colspan="11" class="px-4 py-6 text-center text-slate-500">رکوردی یافت نشد</td>
                </tr>
            @endforelse
            </tbody>
        </table>
    </div>

    {{-- Pagination Footer --}}
    <footer class="table-footer">
        <div id="rangeInfo" class="range-info">
            نمایش {{ $pagination->firstItem() ?? 0 }} تا {{ $pagination->lastItem() ?? 0 }} از {{ $pagination->total() }}
        </div>
        <nav id="pagination" class="pagination">
            @if($pagination->hasPages())
                @php
                    $currentPage = $pagination->currentPage();
                    $lastPage = $pagination->lastPage();
                    $windowSize = 2; // تعداد صفحات در هر طرف صفحه فعلی
                @endphp
                
                {{-- دکمه قبلی --}}
                @if($pagination->onFirstPage())
                    <button class="page-btn" disabled>قبلی</button>
                @else
                    <button class="page-btn" onclick="window.location.href='{{ $pagination->previousPageUrl() }}'">قبلی</button>
                @endif
                
                {{-- صفحه اول --}}
                @if($currentPage > $windowSize + 2)
                    <button class="page-btn {{ 1 == $currentPage ? 'active' : '' }}" 
                            data-page="1"
                            onclick="window.location.href='{{ $pagination->url(1) }}'">
                        1
                    </button>
                    @if($currentPage > $windowSize + 3)
                        <span class="page-btn-ellipsis">…</span>
                    @endif
                @endif
                
                {{-- صفحات اطراف صفحه فعلی --}}
                @for($page = max(1, $currentPage - $windowSize); $page <= min($lastPage, $currentPage + $windowSize); $page++)
                    <button class="page-btn {{ $page == $currentPage ? 'active' : '' }}" 
                            data-page="{{ $page }}"
                            onclick="window.location.href='{{ $pagination->url($page) }}'">
                        {{ $page }}
                    </button>
                @endfor
                
                {{-- صفحه آخر --}}
                @if($currentPage < $lastPage - $windowSize - 1)
                    @if($currentPage < $lastPage - $windowSize - 2)
                        <span class="page-btn-ellipsis">…</span>
                    @endif
                    <button class="page-btn {{ $lastPage == $currentPage ? 'active' : '' }}" 
                            data-page="{{ $lastPage }}"
                            onclick="window.location.href='{{ $pagination->url($lastPage) }}'">
                        {{ $lastPage }}
                    </button>
                @endif
                
                {{-- دکمه بعدی --}}
                @if($pagination->hasMorePages())
                    <button class="page-btn" onclick="window.location.href='{{ $pagination->nextPageUrl() }}'">بعدی</button>
                @else
                    <button class="page-btn" disabled>بعدی</button>
                @endif
            @endif
        </nav>
    </footer>

    {{-- Confirm Reset Modal (matches existing modal design) --}}
    <div id="resetConfirmModal" class="fixed inset-0 bg-black bg-opacity-50 hidden items-center justify-center z-50">
        <div class="bg-slate-800 rounded-lg p-6 max-w-md w-full mx-4">
            <div class="flex items-center justify-center mb-4">
                <div class="w-12 h-12 bg-red-500 rounded-full flex items-center justify-center">
                    <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01M12 5a7 7 0 100 14 7 7 0 000-14z" />
                    </svg>
                </div>
            </div>
            <h3 class="text-xl font-bold text-white text-center mb-2">تایید ریست</h3>
            <p class="text-slate-300 text-center mb-6" style="font-size: 12px;">همه رکوردهای تاریخچه قیمت حذف می‌شود. مطمئن هستید؟</p>
            <div class="flex justify-center gap-3">
                <button type="button" id="confirm-reset" class="px-6 py-2 bg-red-600 hover:bg-red-700 text-white rounded-lg transition duration-200">تایید</button>
                <button type="button" id="cancel-reset" class="px-6 py-2 bg-slate-600 hover:bg-slate-700 text-white rounded-lg transition duration-200">انصراف</button>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
    (function(){
        const openBtn = document.getElementById('open-reset-modal');
        const modal = document.getElementById('resetConfirmModal');
        const confirmBtn = document.getElementById('confirm-reset');
        const cancelBtn = document.getElementById('cancel-reset');
        const form = document.getElementById('reset-history-form');

        if (!openBtn || !modal || !confirmBtn || !cancelBtn || !form) return;

        const openModal = () => { modal.classList.remove('hidden'); modal.classList.add('flex'); };
        const closeModal = () => { modal.classList.add('hidden'); modal.classList.remove('flex'); };

        openBtn.addEventListener('click', function(e){
            e.preventDefault();
            openModal();
        });

        cancelBtn.addEventListener('click', function(){
            closeModal();
        });

        // Click on backdrop closes (match previous modal behavior)
        document.addEventListener('click', (e) => {
            if (modal && e.target === modal) {
                closeModal();
            }
        });

        confirmBtn.addEventListener('click', function(){
            closeModal();
            form.submit();
        });
    })();
</script>
@endpush