@extends('layouts.app')

@section('title', 'الطلبات')


@if (!Auth::check())
    <script>
        window.location.href = "{{ route('home') }}";
    </script>
@endif

@section('content')
<div class="container mt-4">
    <div class="card shadow-sm">
        <div class="card-header bg-gradient-primary text-white p-3" style="background: linear-gradient(45deg, #4b6cb7, #182848);">
            <div class="d-flex justify-content-between align-items-center">
                <h3 class="mb-0">إدارة الطلبات</h3>
                <a href="{{ route('admin') }}" class="btn btn-light btn-sm">
                    العودة للوحة التحكم
                </a>
            </div>
        </div>
        
        <div class="card-body">
            @if ($orders->isEmpty())
                <div class="text-center p-5">
                    <h3 class="text-muted">لا توجد طلبات حالياً</h3>
                </div>
            @else
                <div class="table-responsive">
                    <table class="table table-hover align-middle">
                        <thead class="bg-light">
                            <tr>
                                <th class="py-3">رقم الطلب</th>
                                <th>اسم العميل</th>
                                <th>رقم الهاتف</th>
                                <th>اسم المنتج</th>
                                <th>المحافظة</th>
                                <th>المنطقة</th>
                                <th>اقرب نقطة دالة</th>
                                <th>تاريخ الطلب</th>
                                {{-- <th>الحالة</th> --}}
                                <th>الإجراءات</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($orders as $order)
                                <tr class="align-middle">
                                    <td class="fw-bold">#{{ $order->id }}</td>
                                    <td>{{ $order->customer_name }}</td>
                                    <td>
                                        <a href="https://wa.me/{{ $order->phone_number }}" 
                                           class="text-success text-decoration-none">
                                            {{ $order->phone_number }}
                                        </a>
                                    </td>
                                    <td>
                                        @php
                                            $itemFromName = App\Models\Item::where('item_name', $order->product_name)->first();
                                        @endphp
                                        @if($itemFromName)
                                            <a href="{{ route('product.show', $itemFromName->id) }}" 
                                               class="text-primary text-decoration-none">
                                                {{ $order->product_name }}
                                            </a>
                                        @else
                                            {{ $order->product_name }}
                                        @endif
                                    </td>
                                    <td>{{ $order->province }}</td>
                                    <td>{{ $order->area }}</td>
                                    <td>{{ $order->landmark }}</td>
                                    <td>
                                        <span class="text-muted">
                                            {{ $order->created_at->format('Y-m-d') }}
                                        </span>
                                    </td>
                                    {{-- <td>
                                        @if($order->status == 'مكتمل')
                                            <span class="badge bg-success-subtle text-success px-3 py-2 rounded-pill">
                                                {{ $order->status }}
                                            </span>
                                        @else
                                            <span class="badge bg-warning-subtle text-warning px-3 py-2 rounded-pill">
                                                {{ $order->status }}
                                            </span>
                                        @endif
                                    </td> --}}
                                    <td>
                                        <div class="btn-group" role="group">
                                            <a href="{{ route('orders.edit', $order->id) }}" 
                                               class="btn btn-sm btn-outline-primary me-2">
                                                تعديل
                                            </a>
                                            <form action="{{ route('orders.destroy', $order->id) }}" 
                                                  method="POST" 
                                                  style="display:inline;" 
                                                  onsubmit="return confirm('هل أنت متأكد أنك تريد حذف هذا الطلب؟');">
                                                @csrf
                                                @method('DELETE')
                                                <button type="submit" class="btn btn-sm btn-outline-danger">
                                                    حذف
                                                </button>
                                            </form>
                                        </div>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            @endif
        </div>
    </div>
</div>

<style>
.bg-gradient-primary {
    background: linear-gradient(45deg, #4b6cb7, #182848);
}
.card {
    border: none;
    border-radius: 10px;
    overflow: hidden;
}
.table th {
    font-weight: 600;
    color: #495057;
}
.table td {
    vertical-align: middle;
}
.badge {
    font-weight: 500;
}
.btn-group .btn {
    padding: 0.25rem 0.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}
.btn-group .btn:hover {
    transform: translateY(-1px);
}
.table-responsive {
    border-radius: 8px;
}
</style>

@endsection