@extends('layouts.panel')

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

@section('content')
<div class="mx-auto w-full px-4 py-8">
    <!-- Header Section -->
    <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 class="text-2xl font-bold text-slate-100">درخواست‌های خرید من</h1>
        <div class="flex items-center gap-3 mt-4 sm:mt-0">
            @can('create', App\Models\SalesPurchaseRequest::class)
            <a href="{{ route('sales.purchase_requests.create') }}" 
               class="px-6 py-2 bg-green-600 text-white font-medium rounded-xl shadow-lg hover:bg-green-700 transition duration-300 ease-in-out">
                درخواست خرید جدید
            </a>
            @endcan
        </div>
    </header>

    <!-- Data Table Component -->
    <x-data-table-default 
        title=""
        searchPlaceholder="جستجو در نام محصول، برند، بسته‌بندی، گرید و توضیحات..."
        :statusOptions="$statusOptions"
        :itemsPerPageOptions="[5, 10, 25, 50]"
        :currentPage="$purchaseRequests->currentPage()"
        :totalItems="$purchaseRequests->total()"
        :itemsPerPage="request('pageSize', 10)"
        currentStatus="{{ request('status', 'all') }}"
        searchQuery="{{ request('search', '') }}"
        sortColumn="created_at"
        sortDirection="desc"
    >
        <!-- Table Header -->
        <x-slot name="thead">
            <tr>
                <th data-key="id" class="sortable">شناسه</th>
                <th data-key="product_name" class="sortable">نام محصول</th>
                <th data-key="product_type" class="sortable">نوع محصول</th>
                <th data-key="quantity" class="sortable">حجم درخواست</th>
                <th data-key="brand" class="sortable">برند</th>
                <th data-key="packaging" class="sortable">بسته‌بندی</th>
                <th data-key="grade" class="sortable">گرید</th>
                <th data-key="deadline" class="sortable">مهلت زمانی</th>
                <th data-key="status" class="sortable">وضعیت</th>
                <th data-key="created_at" class="sortable">تاریخ ایجاد</th>
                <th>عملیات</th>
            </tr>
        </x-slot>

        <!-- Table Body -->
        <x-slot name="tbody">
            @forelse($purchaseRequests as $request)
                <tr class="hover:bg-white/5 transition duration-150 ease-in-out">
                    <!-- شناسه -->
                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-slate-300">
                        #{{ $request->id }}
                    </td>
                    
                    <!-- نام محصول -->
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-slate-200">
                        {{ $request->product_name }}
                    </td>
                    
                    <!-- نوع محصول -->
                    <td class="px-6 py-4 whitespace-nowrap">
                        <span class="px-3 py-1 rounded-full text-xs font-medium 
                            @if($request->product_type === 'رسمی') bg-blue-500/20 text-blue-400 border border-blue-500/30
                            @else bg-orange-500/20 text-orange-400 border border-orange-500/30
                            @endif">
                            {{ $request->product_type_label }}
                        </span>
                    </td>
                    
                    <!-- حجم درخواست -->
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-slate-400">
                        {{ $request->quantity_with_unit }}
                    </td>
                    
                    <!-- برند -->
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-slate-400">
                        {{ $request->brand ?: '-' }}
                    </td>
                    
                    <!-- بسته‌بندی -->
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-slate-400">
                        {{ $request->packaging ?: '-' }}
                    </td>
                    
                    <!-- گرید -->
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-slate-400">
                        {{ $request->grade ?: '-' }}
                    </td>
                    
                    <!-- مهلت زمانی -->
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-slate-400">
                        {{ $request->deadline ?: '-' }}
                    </td>
                    
                    <!-- وضعیت -->
                    <td class="px-6 py-4 whitespace-nowrap">
                        <span class="px-3 py-1 rounded-full text-xs font-medium 
                            @if($request->status === 'approved' || $request->status === 'تأیید شده') bg-green-500/20 text-green-400 border border-green-500/30
                            @elseif($request->status === 'rejected' || $request->status === 'رد شده') bg-red-500/20 text-red-400 border border-red-500/30
                            @elseif($request->status === 'pending' || $request->status === 'در انتظار' || $request->status === 'در حال بررسی') bg-yellow-500/20 text-yellow-400 border border-yellow-500/30
                            @elseif($request->status === 'completed' || $request->status === 'تکمیل شده') bg-blue-500/20 text-blue-400 border border-blue-500/30
                            @else bg-gray-500/20 text-gray-400 border border-gray-500/30
                            @endif">
                            {{ $request->status_label }}
                        </span>
                    </td>
                    
                    <!-- تاریخ ایجاد -->
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-slate-400">
                        {{ $request->jalali_created_at }}
                    </td>
                    
                    <!-- عملیات -->
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-slate-400">
                        <div class="flex items-center gap-2">
                            <!-- مشاهده -->
                            @can('view', $request)
                            <a href="{{ route('sales.purchase_requests.show', $request) }}" 
                               class="text-blue-400 hover:text-blue-300 transition-colors"
                               title="مشاهده جزئیات">
                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path>
                                </svg>
                            </a>
                            @endcan
                            
                            <!-- ویرایش -->
                            @if($request->canBeEdited() && auth()->user()->can('update', $request))
                            <a href="{{ route('sales.purchase_requests.edit', $request) }}" 
                               class="text-yellow-400 hover:text-yellow-300 transition-colors"
                               title="ویرایش">
                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 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"></path>
                                </svg>
                            </a>
                            @endif
                            
                            <!-- حذف -->
                            @if($request->canBeEdited() && auth()->user()->can('delete', $request))
                            <form action="{{ route('sales.purchase_requests.destroy', $request) }}" 
                                  method="POST" 
                                  class="inline"
                                  onsubmit="return confirm('آیا از حذف این درخواست خرید اطمینان دارید؟')">
                                @csrf
                                @method('DELETE')
                                <button type="submit" 
                                        class="text-red-400 hover:text-red-300 transition-colors"
                                        title="حذف">
                                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 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"></path>
                                    </svg>
                                </button>
                            </form>
                            @endif
                        </div>
                    </td>
                </tr>
            @empty
                <tr>
                    <td colspan="11" class="px-6 py-8 text-center text-slate-400">
                        <div class="flex flex-col items-center gap-3">
                            <svg class="w-12 h-12 text-slate-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 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"></path>
                            </svg>
                            <p class="text-lg font-medium">هیچ درخواست خریدی یافت نشد</p>
                            <p class="text-sm">برای شروع، درخواست خرید جدیدی ایجاد کنید</p>
                            @can('create', App\Models\SalesPurchaseRequest::class)
                            <a href="{{ route('sales.purchase_requests.create') }}" 
                               class="mt-2 px-4 py-2 bg-green-600 text-white text-sm rounded-lg hover:bg-green-700 transition-colors">
                                ایجاد درخواست خرید
                            </a>
                            @endcan
                        </div>
                    </td>
                </tr>
            @endforelse
        </x-slot>
    </x-data-table-default>
</div>

<!-- JavaScript for handling table updates -->
<script>
document.addEventListener('dataTableUpdate', function(event) {
    const params = event.detail;
    console.log('Table update requested with params:', params);
    
    // Build query string
    const queryParams = new URLSearchParams();
    
    if (params.query) queryParams.set('search', params.query);
    if (params.status && params.status !== 'all') queryParams.set('status', params.status);
    if (params.sortKey) queryParams.set('sortKey', params.sortKey);
    if (params.sortDir) queryParams.set('sortDir', params.sortDir);
    if (params.page && params.page > 1) queryParams.set('page', params.page);
    if (params.pageSize && params.pageSize !== 10) queryParams.set('pageSize', params.pageSize);
    
    // Redirect to the same page with new parameters
    const currentUrl = new URL(window.location);
    const newParams = new URLSearchParams(queryParams);
    
    // Update current URL parameters
    for (const [key, value] of newParams.entries()) {
        currentUrl.searchParams.set(key, value);
    }
    
    // Navigate to new URL
    window.location.href = currentUrl.toString();
});
</script>
@if(session('success'))
<script>
document.addEventListener('DOMContentLoaded', function(){
    if (typeof showSuccessModal === 'function') {
        showSuccessModal(@json(session('success')));
    }
});
</script>
@endif
@if(session('error'))
<script>
document.addEventListener('DOMContentLoaded', function(){
    if (typeof showErrorModal === 'function') {
        showErrorModal(@json(session('error')));
    }
});
</script>
@endif
@endsection