@extends('front.layouts.app')

@section('title', 'قائمة طلبات الشراء - MedExchange')

@section('styles')
    <link rel="stylesheet" href="{{ asset('css/browse-products.css') }}">
    <style>
        .summary-card {
            background: white;
            border-radius: var(--border-radius-lg);
            box-shadow: 0 10px 30px rgba(0,0,0,0.05);
            padding: 30px;
            margin-bottom: 30px;
        }
        .summary-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 25px;
            border-bottom: 1px solid var(--border-color);
            padding-bottom: 15px;
        }
        .request-item {
            display: grid;
            grid-template-columns: 80px 1fr auto auto auto;
            gap: 20px;
            align-items: center;
            padding: 15px 0;
            border-bottom: 1px solid var(--border-color);
        }
        .request-item:last-child {
            border-bottom: none;
        }
        .item-image {
            width: 80px;
            height: 80px;
            background: var(--secondary-color);
            border-radius: var(--border-radius-md);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
            color: var(--text-light);
            overflow: hidden;
        }
        .item-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        .qty-input {
            width: 60px;
            padding: 8px;
            border: 1px solid var(--border-color);
            border-radius: var(--border-radius-sm);
            text-align: center;
        }
        .total-section {
            background: var(--secondary-color);
            padding: 20px;
            border-radius: var(--border-radius-md);
            margin-top: 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .customer-form {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
            margin-top: 30px;
        }
        .form-group {
            margin-bottom: 15px;
        }
        .form-group label {
            display: block;
            margin-bottom: 8px;
            font-weight: 700;
        }
        .form-group input, .form-group textarea {
            width: 100%;
            padding: 12px;
            border: 1px solid var(--border-color);
            border-radius: var(--border-radius-md);
        }
        .submit-btn {
            background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
            color: white;
            border: none;
            padding: 15px 30px;
            border-radius: var(--border-radius-md);
            font-weight: 700;
            font-size: 1.1rem;
            cursor: pointer;
            width: 100%;
            margin-top: 20px;
            transition: all 0.3s ease;
        }
        .submit-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(var(--primary-rgb), 0.3);
        }
    </style>
@endsection

@section('content')
<main class="main-content" style="padding: 60px 0;">
    <div class="container">
        <div class="breadcrumb" style="margin-bottom: 30px;">
            <a href="{{ route('home') }}"><i class="fas fa-home"></i> الرئيسية</a>
            <span>/</span>
            <a href="{{ route('front.products.index') }}">تصفح المنتجات</a>
            <span>/</span>
            <span>قائمة طلبات الشراء</span>
        </div>

        <div class="summary-card">
            <div class="summary-header">
                <h2><i class="fas fa-clipboard-list"></i> ملخص طلبات الشراء</h2>
                <a href="{{ route('front.products.index') }}" class="btn-secondary" style="padding: 10px 20px; text-decoration: none; font-size: 0.9rem;">
                    <i class="fas fa-plus"></i> إضافة المزيد
                </a>
            </div>

            @if(count($orderList) > 0)
                <div class="request-items-list">
                    @foreach($orderList as $id => $item)
                        <div class="request-item">
                            <div class="item-image">
                                @if(isset($item['image']) && $item['image'])
                                    <img src="{{ asset('storage/' . $item['image']) }}" alt="{{ $item['name'] }}">
                                @else
                                    <i class="fas fa-pills"></i>
                                @endif
                            </div>
                            <div class="item-details">
                                <h4 style="margin: 0 0 5px 0;">{{ $item['name'] }}</h4>
                                <span style="font-size: 0.85rem; color: var(--text-light);">السعر للوحدة: {{ number_format($item['price'], 2) }} جنيه</span>
                            </div>
                            <div class="item-qty">
                                <form action="{{ route('order.update', $id) }}" method="POST" style="display: flex; align-items: center; gap: 10px;">
                                    @csrf
                                    <label style="font-size: 0.85rem;">الكمية:</label>
                                    <input type="number" name="quantity" value="{{ $item['quantity'] }}" min="1" class="qty-input" onchange="this.form.submit()">
                                </form>
                            </div>
                            <div class="item-total">
                                <strong style="color: var(--primary-color);">{{ number_format($item['price'] * $item['quantity'], 2) }} جنيه</strong>
                            </div>
                            <div class="item-remove">
                                <form action="{{ route('order.remove', $id) }}" method="POST">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" style="background: none; border: none; color: #ff4757; cursor: pointer; font-size: 1.1rem;">
                                        <i class="fas fa-trash-alt"></i>
                                    </button>
                                </form>
                            </div>
                        </div>
                    @endforeach
                </div>

                <div class="total-section">
                    <span style="font-size: 1.1rem; font-weight: 700;">إجمالي الطلب:</span>
                    <strong style="font-size: 1.5rem; color: var(--primary-color);">{{ number_format($total, 2) }} جنيه</strong>
                </div>

                <form action="{{ route('order.submit') }}" method="POST" style="margin-top: 40px;">
                    @csrf
                    <h3 style="margin-bottom: 20px; border-right: 4px solid var(--primary-color); padding-right: 15px;">بيانات مقدم الطلب</h3>
                    
                    <div class="customer-form">
                        <div class="form-group">
                            <label><i class="fas fa-user"></i> الاسم الكامل *</label>
                            <input type="text" name="customer_name" required placeholder="أدخل اسمك بالكامل" value="{{ auth()->user() ? auth()->user()->name : '' }}">
                        </div>
                        <div class="form-group">
                            <label><i class="fas fa-phone"></i> رقم الهاتف *</label>
                            <input type="tel" name="customer_phone" required placeholder="مثال: 01234567890">
                        </div>
                        <div class="form-group" style="grid-column: span 2;">
                            <label><i class="fas fa-envelope"></i> البريد الإلكتروني (اختياري)</label>
                            <input type="email" name="customer_email" placeholder="example@domain.com" value="{{ auth()->user() ? auth()->user()->email : '' }}">
                        </div>
                        <div class="form-group" style="grid-column: span 2;">
                            <label><i class="fas fa-comment-alt"></i> ملاحظات إضافية</label>
                            <textarea name="notes" rows="4" placeholder="أي تفاصيل أو طلبات خاصة بخصوص هذا الطلب..."></textarea>
                        </div>
                    </div>

                    <button type="submit" class="submit-btn" onclick="return confirm('هل أنت متأكد من إرسال طلب الشراء مجمعاً؟')">
                        <i class="fas fa-paper-plane"></i> إرسال طلب الشراء الآن
                    </button>
                </form>
            @else
                <div style="text-align: center; padding: 60px 0;">
                    <div class="empty-icon" style="font-size: 4rem; color: var(--text-lighter); margin-bottom: 20px;">
                        <i class="fas fa-shopping-basket"></i>
                    </div>
                    <h3>قائمة طلباتك فارغة حالياً</h3>
                    <p style="margin-top: 10px; color: var(--text-light);">تصفح المنتجات وأضف ما تحتاجه لإرسال طلب شراء مجمع</p>
                    <a href="{{ route('front.products.index') }}" class="btn-primary" style="display: inline-block; margin-top: 20px; text-decoration: none; padding: 12px 30px;">
                        ابدأ التسوق الآن
                    </a>
                </div>
            @endif
        </div>
    </div>
</main>
@endsection