@extends('layouts.admin')

@section('page-title', 'منابع تأمین')

@section('content')

    <div class="bg-white p-4 sm:p-5 rounded-lg shadow-sm text-sm">

        <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 mb-4">
            <h1 class="text-lg font-bold text-gray-800">لیست منابع تأمین برق</h1>
            <a href="{{ route('admin.suppliers.create') }}"
               class="bg-blue-600 text-white px-4 sm:px-6 py-2.5 rounded-full text-xs hover:bg-blue-700 transition flex items-center shadow-md">
                <i class="fas fa-plus ml-1"></i>
                افزودن تامین کننده جدید
            </a>
        </div>

        <!-- desktop -->
        <div class="hidden sm:block overflow-x-auto">
            <table class="min-w-full divide-y divide-gray-200 text-xs">
                <thead class="bg-gradient-to-r from-orange-400 to-yellow-400 text-white">
                <tr>
                    <th class="px-3 py-2 text-right border-l border-white/20 first:border-l-0">نام تامین کننده</th>
                    <th class="px-3 py-2 text-right border-l border-white/20">توضیحات</th>
                    <th class="px-3 py-2 text-right border-l border-white/20">تاریخ ثبت</th>
                    <th class="px-3 py-2 text-right">عملیات</th>
                </tr>
                </thead>
                <tbody class="divide-y divide-gray-200">
                @forelse($suppliers as $supplier)
                    <tr class="{{ $loop->even ? 'bg-gray-50/50' : 'bg-white' }} hover:bg-gray-100 transition">
                        <td class="px-3 py-2 text-right font-medium">{{ $supplier->name }}</td>
                        <td class="px-3 py-2 text-right text-gray-600">{{ $supplier->description ? Str::limit($supplier->description, 60) : '—' }}</td>
                        <td class="px-3 py-2 text-right font-mono text-xs">{{ jdate($supplier->created_at)->format('j F Y') }}</td>
                        <td class="px-3 py-2 text-right flex gap-3 justify-content-start items-center">
                            <a href="{{ route('admin.suppliers.edit', $supplier) }}" class="text-blue-600 hover:text-blue-800 transition" title="ویرایش">
                                <i class="fas fa-edit text-sm"></i>
                            </a>
                            <button type="button" onclick="confirmDelete({{ $supplier->id }}, '{{ addslashes($supplier->name) }}')" class="text-red-600 hover:text-red-800 transition" title="حذف">
                                <i class="fas fa-trash-alt text-sm"></i>
                            </button>
                            <form id="delete-form-{{ $supplier->id }}" action="{{ route('admin.suppliers.destroy', $supplier) }}" method="POST" class="hidden">
                                @csrf
                                @method('DELETE')
                            </form>
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="4" class="text-center py-12 text-gray-500">
                            <i class="fas fa-building text-6xl mb-4 block opacity-20"></i>
                            <p class="text-lg">هنوز هیچ تامین کننده‌ای ثبت نشده است</p>
                            <a href="{{ route('admin.suppliers.create') }}" class="text-blue-600 hover:underline text-sm mt-2 block">
                                اولین تامین کننده را همین الان اضافه کنید
                            </a>
                        </td>
                    </tr>
                @endforelse
                </tbody>
            </table>
        </div>

        <!-- mobile carts -->
        <div class="sm:hidden space-y-4">
            @forelse($suppliers as $supplier)
                <div class="bg-gray-50 p-3 rounded-lg shadow-sm flex flex-col gap-2">
                    <div class="flex justify-between items-start">
                        <span class="font-medium text-right">{{ $supplier->name }}</span>
                        <div class="flex gap-2">
                            <a href="{{ route('admin.suppliers.edit', $supplier) }}" class="text-blue-600 hover:text-blue-800 transition">
                                <i class="fas fa-edit text-sm"></i>
                            </a>
                            <button type="button" onclick="confirmDelete({{ $supplier->id }}, '{{ addslashes($supplier->name) }}')" class="text-red-600 hover:text-red-800 transition">
                                <i class="fas fa-trash text-sm"></i>
                            </button>
                            <form id="delete-form-{{ $supplier->id }}" action="{{ route('admin.suppliers.destroy', $supplier) }}" method="POST" class="hidden">
                                @csrf
                                @method('DELETE')
                            </form>
                        </div>
                    </div>
                    <p class="text-gray-600 text-right text-sm">{{ $supplier->description ?? '—' }}</p>
                    <p class="text-xs font-mono text-gray-500 text-right">{{ jdate($supplier->created_at)->format('j F Y') }}</p>
                </div>
            @empty
                <div class="text-center py-12 text-gray-500">
                    <i class="fas fa-building text-6xl mb-4 block opacity-20"></i>
                    <p class="text-lg">هنوز هیچ تامین کننده‌ای ثبت نشده است</p>
                    <a href="{{ route('admin.suppliers.create') }}" class="text-blue-600 hover:underline text-sm mt-2 block">
                        اولین تامین کننده را همین الان اضافه کنید
                    </a>
                </div>
            @endforelse
        </div>

        <!-- pagination -->
        <div class="mt-4 flex justify-center">
            {{ $suppliers->links('pagination::tailwind') }}
        </div>

    </div>

    <script>
        function confirmDelete(id, name) {
            Swal.fire({
                title: 'مطمئنی می‌خوای حذف کنی؟',
                text: `"${name}" حذف بشه؟`,
                icon: 'warning',
                showCancelButton: true,
                confirmButtonText: 'بله',
                cancelButtonText: 'خیر',
                reverseButtons: true,
                heightAuto: false,
                width: '360px',
                padding: '1.5rem',
                buttonsStyling: false,
                customClass: {
                    title: 'text-lg font-bold',
                    text: 'text-sm text-gray-600',
                    confirmButton: 'bg-red-600 hover:bg-red-700 text-white font-medium py-2 px-6 rounded-lg mx-1',
                    cancelButton: 'bg-gray-500 hover:bg-gray-600 text-white font-medium py-2 px-6 rounded-lg mx-1',
                    popup: 'rounded-xl shadow-2xl'
                }
            }).then((result) => {
                if (result.isConfirmed) {
                    document.getElementById('delete-form-' + id).submit();
                }
            });
        }

        @if(session('success'))
        document.addEventListener('DOMContentLoaded', function () {
            Swal.fire({
                title: 'موفقیت‌آمیز!',
                text: '{{ session('success') }}',
                icon: 'success',
                confirmButtonText: 'باشه',
                heightAuto: false,
                width: '360px',
                padding: '1.5rem',
                buttonsStyling: false,
                customClass: {
                    title: 'text-lg font-bold',
                    text: 'text-sm text-gray-600',
                    confirmButton: 'bg-green-600 hover:bg-green-700 text-white font-medium py-2 px-6 rounded-lg mx-1',
                    popup: 'rounded-xl shadow-2xl'
                }
            });
        });
        @endif
    </script>

@endsection