@extends('layouts.panel')

@section('title', 'سفارش‌های خرید - منیجینو ابزار برای مدیریت خرید و فروش مواد شیمیایی ابزار برای مدیریت خرید و فروش مواد شیمیایی')
@section('meta_description', 'مدیریت سفارش‌های خرید، وضعیت‌ها و پیوست‌ها در منیجینو ابزار برای مدیریت خرید و فروش مواد شیمیایی ابزار برای مدیریت خرید و فروش مواد شیمیایی')

@section('content')
<div class="space-y-6">
    <!-- Header -->
    <div class="flex items-center justify-between">
        <div>
            <h1 class="text-2xl font-bold text-slate-200">سفارش‌های خرید</h1>
            <p class="text-slate-400 mt-1">مدیریت سفارش‌های خرید سیستم</p>
        </div>
        
        @can('purchase_orders.create')
        <a href="{{ route('purchase_orders.create') }}" class="btn-primary">
            <span class="text-lg">➕</span>
            ایجاد سفارش خرید جدید
        </a>
        @endcan
    </div>

    <!-- Filters -->
    <div class="glass p-6 rounded-xl">
        <form method="GET" action="{{ route('purchase_orders.index') }}" class="space-y-4">
            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                <div>
                    <label for="status" class="block text-sm font-medium text-slate-300 mb-2">وضعیت</label>
                    <select name="status" id="status" class="form-select">
                        <option value="">همه وضعیت‌ها</option>
                        <option value="draft" {{ request('status') === 'draft' ? 'selected' : '' }}>پیش‌نویس</option>
                        <option value="sent" {{ request('status') === 'sent' ? 'selected' : '' }}>ارسال شده</option>
                        <option value="confirmed" {{ request('status') === 'confirmed' ? 'selected' : '' }}>تأیید شده</option>
                        <option value="partially_received" {{ request('status') === 'partially_received' ? 'selected' : '' }}>نیمه دریافت شده</option>
                        <option value="received" {{ request('status') === 'received' ? 'selected' : '' }}>دریافت شده</option>
                        <option value="closed" {{ request('status') === 'closed' ? 'selected' : '' }}>بسته شده</option>
                        <option value="canceled" {{ request('status') === 'canceled' ? 'selected' : '' }}>لغو شده</option>
                    </select>
                </div>
                
                <div>
                    <label for="supplier" class="block text-sm font-medium text-slate-300 mb-2">تامین کننده</label>
                    <select name="supplier" id="supplier" class="form-select">
                        <option value="">همه تامین کنندگان</option>
                        @foreach($suppliers as $supplier)
                        <option value="{{ $supplier->id }}" {{ request('supplier') == $supplier->id ? 'selected' : '' }}>
                            {{ $supplier->name }}
                        </option>
                        @endforeach
                    </select>
                </div>
                
                <div>
                    <label for="q" class="block text-sm font-medium text-slate-300 mb-2">جستجو</label>
                    <input type="text" name="q" id="q" value="{{ request('q') }}" 
                           placeholder="شماره PO یا نام تامین کننده..." 
                           class="form-input">
                </div>
            </div>
            
            <div class="flex items-center gap-3">
                <button type="submit" class="btn-primary">
                    <span class="text-lg">🔍</span>
                    اعمال فیلتر
                </button>
                
                @if(request()->hasAny(['status', 'supplier', 'q']))
                <a href="{{ route('purchase_orders.index') }}" class="btn-secondary">
                    <span class="text-lg">🔄</span>
                    پاک کردن فیلترها
                </a>
                @endif
            </div>
        </form>
    </div>

    <!-- Purchase Orders Table -->
    <div class="glass rounded-xl overflow-hidden">
        <div class="overflow-x-auto">
            <table class="min-w-full divide-y divide-slate-700">
                <thead class="bg-slate-800/50">
                    <tr>
                        <th class="px-6 py-3 text-right text-xs font-medium text-slate-300 uppercase tracking-wider">
                            شماره PO
                        </th>
                        <th class="px-6 py-3 text-right text-xs font-medium text-slate-300 uppercase tracking-wider">
                            تامین کننده
                        </th>
                        <th class="px-6 py-3 text-right text-xs font-medium text-slate-300 uppercase tracking-wider">
                            وضعیت
                        </th>
                        <th class="px-6 py-3 text-right text-xs font-medium text-slate-300 uppercase tracking-wider">
                            مبلغ کل
                        </th>
                        <th class="px-6 py-3 text-right text-xs font-medium text-slate-300 uppercase tracking-wider">
                            تاریخ صدور
                        </th>
                        <th class="px-6 py-3 text-right text-xs font-medium text-slate-300 uppercase tracking-wider">
                            عملیات
                        </th>
                    </tr>
                </thead>
                <tbody class="bg-slate-800/30 divide-y divide-slate-700">
                    @forelse($purchaseOrders as $po)
                    <tr class="hover:bg-slate-700/30 transition-colors">
                        <td class="px-6 py-4 whitespace-nowrap">
                            <div class="text-sm font-medium text-slate-200">{{ $po->po_number }}</div>
                            @if($po->purchaseRequest)
                            <div class="text-xs text-slate-400">از PR #{{ $po->purchaseRequest->id }}</div>
                            @endif
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap">
                            <div class="text-sm text-slate-200">{{ $po->supplier->name }}</div>
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap">
                            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium {{ $po->status_color }} text-white">
                                {{ $po->status_label }}
                            </span>
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap">
                            <div class="text-sm text-slate-200">
                                {{ number_format($po->total ?: 0) }} {{ $po->currency }}
                            </div>
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap">
                            <div class="text-sm text-slate-200">
                                {{ $po->issue_date ? $po->issue_date->format('Y/m/d') : 'تعیین نشده' }}
                            </div>
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                            <div class="flex items-center gap-2">
                                @can('view', $po)
                                <a href="{{ route('purchase_orders.show', $po) }}" class="btn-icon btn-info" title="مشاهده">
                                    <span class="text-lg">👁️</span>
                                </a>
                                @endcan
                                
                                @can('update', $po)
                                <a href="{{ route('purchase_orders.edit', $po) }}" class="btn-icon btn-warning" title="ویرایش">
                                    <span class="text-lg">✏️</span>
                                </a>
                                @endcan
                                
                                @can('delete', $po)
                                <form method="POST" action="{{ route('purchase_orders.destroy', $po) }}" class="inline" 
                                      onsubmit="return confirm('آیا از حذف این سفارش خرید اطمینان دارید؟')">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" class="btn-icon btn-danger" title="حذف">
                                        <span class="text-lg">🗑️</span>
                                    </button>
                                </form>
                                @endcan
                            </div>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="6" class="px-6 py-12 text-center">
                            <div class="text-slate-400">
                                <span class="text-4xl block mb-2">📋</span>
                                <p class="text-lg">هیچ سفارش خریدی یافت نشد</p>
                                <p class="text-sm mt-1">برای شروع، یک سفارش خرید جدید ایجاد کنید یا از یک درخواست خرید تأیید شده، سفارش تولید کنید.</p>
                            </div>
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>

    <!-- Pagination -->
    @if($purchaseOrders->hasPages())
    <div class="flex items-center justify-center">
        {{ $purchaseOrders->links() }}
    </div>
    @endif
</div>

<style>
.btn-primary {
    @apply inline-flex items-center gap-2 px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-lg transition-colors;
}

.btn-secondary {
    @apply inline-flex items-center gap-2 px-4 py-2 bg-slate-600 hover:bg-slate-700 text-white font-medium rounded-lg transition-colors;
}

.btn-icon {
    @apply inline-flex items-center justify-center w-8 h-8 rounded-lg transition-colors;
}

.btn-info {
    @apply bg-blue-500 hover:bg-blue-600 text-white;
}

.btn-warning {
    @apply bg-yellow-500 hover:bg-yellow-600 text-white;
}

.btn-danger {
    @apply bg-red-500 hover:bg-red-600 text-white;
}

.form-select, .form-input {
    @apply w-full px-3 py-2 bg-slate-700 border border-slate-600 rounded-lg text-slate-200 placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent;
}
</style>
@endsection