@extends('web.layouts.app')

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

@section('styles')
<style>
    .orders-container {
        font-family: 'Cairo', sans-serif;
    }

    .order-card {
        background: #fff;
        border-radius: 12px;
        padding: 1.5rem;
        box-shadow: 0 2px 10px rgba(0,0,0,0.08);
        transition: transform 0.2s ease;
    }

    /* Fixed Size Card */
    .fixed-size {
        width: 100%;
        height: 400px; /* ارتفاع ثابت */
        display: flex;
        flex-direction: column;
    }

    .order-card:hover {
        transform: translateY(-5px);
    }

    .order-header {
        margin-bottom: 1.5rem;
        flex-shrink: 0; /* منع التقلص */
    }

    .order-number {
        font-size: 1.1rem;
        font-weight: 600;
        color: #2d3748;
    }

    .order-date {
        font-size: 0.9rem;
        color: #718096;
    }

    .status-badge {
        padding: 0.5rem 1rem;
        border-radius: 50px;
        font-size: 0.85rem;
        font-weight: 500;
    }

    .order-items {
        background: #f8fafc;
        padding: 1rem;
        border-radius: 8px;
        margin: 1rem 0;
        flex: 1; /* يأخذ المساحة المتبقية */
        overflow-y: auto;
        min-height: 0; /* مهم للتمرير */
    }

    .order-item {
        padding: 0.5rem 0;
        border-bottom: 1px solid #edf2f7;
    }

    .order-item:last-child {
        border-bottom: none;
    }

    .item-name {
        font-size: 0.95rem;
        color: #4a5568;
    }

    .item-quantity {
        font-size: 0.9rem;
        color: #718096;
        font-weight: 500;
    }

    .order-footer {
        margin-top: auto; /* دفع للأسفل */
        padding-top: 1rem;
        border-top: 1px solid #edf2f7;
        flex-shrink: 0; /* منع التقلص */
    }

    .total-label {
        font-weight: 600;
        color: #2d3748;
    }

    .total-amount {
        font-size: 1.2rem;
        font-weight: 700;
        color: #2d3748;
    }

    .currency {
        font-size: 0.9rem;
        color: #718096;
        margin-right: 0.25rem;
    }

    .btn {
        padding: 0.6rem 1.2rem;
        border-radius: 8px;
        font-weight: 500;
        transition: all 0.2s ease;
    }

    /* تعديل لون زر التتبع */
    .btn-track {
        background-color: #f94539;
        color: white;
        border: none;
    }

    .btn-track:hover {
        background-color: #e03d32;
        color: white;
    }

    .empty-state {
        text-align: center;
        padding: 3rem;
        background: #f8fafc;
        border-radius: 12px;
        color: #718096;
        height: 400px; /* نفس ارتفاع البطاقات */
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .empty-state i {
        font-size: 3rem;
        color: #cbd5e0;
    }

    /* Custom Scrollbar */
    .order-items::-webkit-scrollbar {
        width: 4px;
    }

    .order-items::-webkit-scrollbar-track {
        background: #f1f1f1;
    }

    .order-items::-webkit-scrollbar-thumb {
        background: #cbd5e0;
        border-radius: 4px;
    }

    /* Responsive Adjustments */
    @media (max-width: 768px) {
        .order-card {
            padding: 1rem;
        }

        .order-actions {
            flex-direction: column;
        }

        .btn {
            width: 100%;
            margin-bottom: 0.5rem;
        }
    }
</style>
@endsection

@section('content')
    <div class="content">
        <div class="user-info-page">
            <div class="container">
                <div class="row">
                    @include('web.layouts.inc.user_sidebar')
                    <div class="col-lg-9">
                        <div class="user-info-content">
                            <div class="section-header">
                                <div class="section-header-info">
                                    <h3>سجل الطلبات</h3>
                                    <p>تصفح طلباتك التى قمت بشرائها مسبقاً</p>
                                </div>
                            </div>

                            {{-- Orders List Container --}}
                            <div class="orders-container container py-4">
                                <div class="row">
                                    @forelse($orders as $order)
                                        <div class="col-lg-6 mb-4">
                                            <div class="order-card fixed-size">
                                                {{-- Order Header --}}
                                                <div class="order-header d-flex justify-content-between align-items-center">
                                                    <div class="order-info">
                                                        <div class="order-number">طلب رقم: #{{ $order->id }}</div>
                                                        <div class="order-date">{{ $order->created_at->format('d/m/Y') }}</div>
                                                    </div>
                                                    
                                                    {{-- Order Status --}}
                                                    <div class="order-status">
                                                        @php
                                                            $statusColor = match($order->status) {
                                                                'delivered', 'partially_delivered' => 'success',
                                                                'shipped', 'partially_shipped' => 'info',
                                                                'processing' => 'warning',
                                                                'cancelled' => 'danger',
                                                                default => 'secondary'
                                                            };
                                                        @endphp
                                                        <span class="status-badge badge badge-{{ $statusColor }}">
                                                            @switch($order->status)
                                                                @case('pending')
                                                                    قيد الانتظار
                                                                    @break
                                                                @case('processing')
                                                                    قيد المعالجة
                                                                    @break
                                                                @case('shipped')
                                                                    تم الشحن
                                                                    @break
                                                                @case('delivered')
                                                                    تم التوصيل
                                                                    @break
                                                                @case('cancelled')
                                                                    ملغي
                                                                    @break
                                                                @case('partially_shipped')
                                                                    تم الشحن جزئيًا
                                                                    @break
                                                                @case('partially_delivered')
                                                                    تم التوصيل جزئيًا
                                                                    @break
                                                            @endswitch
                                                        </span>
                                                    </div>
                                                </div>

                                                {{-- Order Items --}}
                                                <div class="order-items">
                                                    @foreach ($order->items as $item)
                                                        <div class="order-item d-flex justify-content-between align-items-center">
                                                            <span class="item-name">{{ $item->product->name }}</span>
                                                            <span class="item-quantity">× {{ $item->quantity }}</span>
                                                        </div>
                                                    @endforeach
                                                </div>

                                                {{-- Order Footer --}}
                                                <div class="order-footer">
                                                    <div class="d-flex justify-content-between align-items-center mb-3">
                                                        <span class="total-label">الإجمالي:</span>
                                                        <span class="total-amount">
                                                            {{ $order->grand_total }}
                                                            <span class="currency">جنيه</span>
                                                        </span>
                                                    </div>

                                                    <div class="order-actions d-flex justify-content-between">
                                                        {{-- Track Order Button --}}
                                                        <a href="{{ route('user.order.details', $order->id) }}" class="btn btn-track" style="width: 48%;">
                                                            <i class="fas fa-truck ml-1"></i>
                                                            تفاصيل الطلب
                                                        </a>

                                                        {{-- Cancel Order Button (if applicable) --}}
                                                        @if(in_array($order->status, ['pending', 'processing']))
                                                            <form action="{{ route('order.cancel', $order->id) }}" method="POST" style="width: 48%;">
                                                                @csrf
                                                                @method('PUT')
                                                                <button type="submit" class="btn btn-outline-danger w-100">
                                                                    <i class="fas fa-times ml-1"></i>
                                                                    إلغاء الطلب
                                                                </button>
                                                            </form>
                                                        @endif
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    @empty
                                        <div class="col-12">
                                            <div class="empty-state">
                                                <i class="fas fa-shopping-bag mb-3"></i>
                                                <p>لا توجد لديك طلبات سابقة.</p>
                                            </div>
                                        </div>
                                    @endforelse
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11.7.32/dist/sweetalert2.all.min.js"></script>

<script>
    $(document).ready(function() {
        $('form').on('submit', function(e) {
            e.preventDefault();
            const form = $(this);
            
            Swal.fire({
                title: 'هل أنت متأكد؟',
                text: "هل تريد إلغاء هذا الطلب؟",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#dc3545',
                cancelButtonColor: '#6c757d',
                confirmButtonText: 'نعم، إلغاء الطلب',
                cancelButtonText: 'تراجع'
            }).then((result) => {
                if (result.isConfirmed) {
                    form[0].submit();
                }
            });
        });
    });
</script>
@endsection