@extends('front.layouts.app')

@section('title', 'حساب المورد - MedExchange')

@section('styles')
    <link rel="stylesheet" href="{{ asset('css/add-products.css') }}">
    <style>
        .tabs-nav {
            display: flex;
            gap: 20px;
            margin-bottom: 30px;
            border-bottom: 2px solid #e2e8f0;
            padding-bottom: 10px;
        }
        .tab-btn {
            padding: 10px 20px;
            font-weight: 700;
            color: #64748b;
            cursor: pointer;
            transition: all 0.3s;
            border-bottom: 3px solid transparent;
            margin-bottom: -13px;
        }
        .tab-btn.active {
            color: var(--primary-color);
            border-bottom-color: var(--primary-color);
        }
        .tab-content {
            display: none;
        }
        .tab-content.active {
            display: block;
        }
        .status-toggle {
            cursor: pointer;
            padding: 5px 12px;
            border-radius: 20px;
            font-size: 0.8rem;
            font-weight: bold;
            transition: 0.3s;
        }
        .status-available { background: #dcfce7; color: #166534; }
        .status-unavailable { background: #fee2e2; color: #991b1b; }
    </style>
    <meta name="csrf-token" content="{{ csrf_token() }}">
@endsection

@section('content')
<main class="main-content">
    <div class="container">
        <div class="page-header">
            <div class="page-title-section">
                <div class="page-title-content">
                    <h1 class="page-title">لوحة تحكم المورد</h1>
                    <p class="page-subtitle">أهلاً بك، {{ Auth::user()->name }}</p>
                </div>
            </div>
        </div>

        <div class="tabs-nav">
            <div class="tab-btn active" onclick="switchTab('add-tab', this)">
                <i class="fas fa-plus-circle"></i> إضافة منتجات
            </div>
            <div class="tab-btn" onclick="switchTab('list-tab', this)">
                <i class="fas fa-list"></i> منتجاتي المعروضة
            </div>
            <div class="tab-btn" onclick="switchTab('orders-tab', this)">
                <i class="fas fa-shopping-cart"></i> الطلبات الواردة
            </div>
        </div>

        <!-- Tab: Add Product -->
        <div id="add-tab" class="tab-content active">
            <div class="product-form-card">
                <div class="card-header">
                    <div class="card-title">
                        <i class="fas fa-plus-circle"></i>
                        <h3>إضافة منتج جديد للمخزن</h3>
                    </div>
                </div>
                <div class="card-body">
                    <form id="merchantProductForm" class="product-form">
                        <div class="form-row">
                            <div class="form-group">
                                <label for="productName"><i class="fas fa-pills"></i> اسم الدواء</label>
                                <input type="text" id="productName" name="name" placeholder="مثال: كونجستال أقراص" required>
                            </div>
                            <div class="form-group">
                                <label for="price"><i class="fas fa-money-bill-wave"></i> السعر (جنيه)</label>
                                <input type="number" id="price" name="price" step="0.01" required oninput="calculateFinal()">
                            </div>
                            <div class="form-group">
                                <label for="discount"><i class="fas fa-percentage"></i> الخصم (%)</label>
                                <input type="number" id="discount" name="discount" value="0" min="0" max="100" required oninput="calculateFinal()">
                            </div>
                            <div class="form-group full-width">
                                <div class="price-calculator" style="background: #f8fafc; padding: 15px; border-radius: 8px; border: 1px dashed #cbd5e1;">
                                    <span style="font-weight: bold; color: #64748b;">السعر بعد الخصم: <span id="finalPriceShow" style="color: var(--primary-color); font-size: 1.2rem;">0.00</span> جنيه</span>
                                </div>
                            </div>
                            <div class="form-group full-width">
                                <button type="submit" class="btn-add-product" style="width: 100%;">إرسال للمراجعة</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <!-- Tab: Product List -->
        <div id="list-tab" class="tab-content">
            <div class="products-table-card">
                <div class="card-header">
                    <h3>منتجاتي الحالية</h3>
                </div>
                <div class="card-body">
                    <div class="table-wrapper" style="display: block;">
                        <table class="products-table">
                            <thead>
                                <tr>
                                    <th>اسم المنتج</th>
                                    <th>السعر</th>
                                    <th>الخصم</th>
                                    <th>الصافي</th>
                                    <th>حالة المراجعة</th>
                                    <th>الحالة</th>
                                    <th>إجراءات</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($products as $product)
                                <tr>
                                    <td>{{ $product->name }}</td>
                                    <td>{{ number_format($product->price, 2) }}</td>
                                    <td>{{ $product->discount }}%</td>
                                    <td style="font-weight:bold; color:var(--primary-color);">{{ number_format($product->final_price, 2) }}</td>
                                    <td>
                                        @if($product->admin_status == 'pending')
                                            <span class="status-toggle" style="background:#fef9c3; color:#854d0e;">قيد المراجعة</span>
                                        @elseif($product->admin_status == 'approved')
                                            <span class="status-toggle" style="background:#dcfce7; color:#166534;">مقبول</span>
                                        @else
                                            <span class="status-toggle" style="background:#fee2e2; color:#991b1b;">مرفوض</span>
                                        @endif
                                    </td>
                                    <td>
                                        <button onclick="toggleProductStatus({{ $product->id }}, this)" 
                                            class="status-toggle {{ $product->status == 'available' ? 'status-available' : 'status-unavailable' }}">
                                            {{ $product->status == 'available' ? 'متاح' : 'غير متاح' }}
                                        </button>
                                    </td>
                                    <td>
                                        <button onclick="deleteProduct({{ $product->id }}, this)" class="btn-delete" style="background:none; border:none; color:#ef4444; cursor:pointer;">
                                            <i class="fas fa-trash"></i>
                                        </button>
                                    </td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <!-- Tab: Orders -->
        <div id="orders-tab" class="tab-content">
            @if($incomingOrders->isEmpty())
            <div class="empty-state">
                <i class="fas fa-shopping-basket" style="font-size: 3rem; opacity: 0.2; margin-bottom: 15px;"></i>
                <h3>لا توجد طلبات جديدة حالياً</h3>
                <p>ستظهر هنا الطلبات الواردة من الصيدليات لمنتجاتك</p>
            </div>
            @else
            <div class="products-table-card">
                <div class="card-header">
                    <h3>الطلبات الواردة لمنتجاتك</h3>
                </div>
                <div class="card-body">
                    <div class="table-wrapper" style="display: block;">
                        <table class="products-table">
                            <thead>
                                <tr>
                                    <th>رقم الطلب</th>
                                    <th>العميل</th>
                                    <th>المنتجات المطلوبة</th>
                                    <th>التاريخ</th>
                                    <th>الإجمالي لمنتجاتك</th>
                                    <th>الحالة</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($incomingOrders as $order)
                                <tr>
                                    <td><span style="font-weight: bold; color: var(--primary-color);">{{ $order->order_number }}</span></td>
                                    <td>
                                        <div style="font-size: 0.9rem;">
                                            <div>{{ $order->customer_name ?: 'عميل' }}</div>
                                            <div style="color: #64748b; font-size: 0.8rem;"><i class="fas fa-phone"></i> {{ $order->customer_phone }}</div>
                                        </div>
                                    </td>
                                    <td>
                                        <ul style="list-style: none; padding: 0; margin: 0; font-size: 0.85rem;">
                                            @php $merchantTotal = 0; @endphp
                                            @foreach($order->items as $item)
                                                @php $merchantTotal += $item->price * $item->quantity; @endphp
                                                <li>• {{ $item->product->name }} ({{ $item->quantity }})</li>
                                            @endforeach
                                        </ul>
                                    </td>
                                    <td style="font-size: 0.85rem;">{{ $order->created_at->format('Y/m/d H:i') }}</td>
                                    <td style="font-weight: bold; color: #166534;">{{ number_format($merchantTotal, 2) }} ج.م</td>
                                    <td>
                                        @if($order->status == 'pending')
                                            <span class="status-toggle" style="background:#fef9c3; color:#854d0e;">قيد المراجعة</span>
                                        @elseif($order->status == 'approved' || $order->status == 'completed')
                                            <span class="status-toggle" style="background:#dcfce7; color:#166534;">مقبول</span>
                                        @else
                                            <span class="status-toggle" style="background:#fee2e2; color:#991b1b;">ملغى</span>
                                        @endif
                                    </td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            @endif
        </div>
    </div>
</main>

<!-- Success Modal -->
<div class="modal" id="successModal">
    <div class="modal-overlay"></div>
    <div class="modal-content">
        <div class="modal-icon success"><i class="fas fa-check-circle"></i></div>
        <h3>تم بنجاح!</h3>
        <p id="modalMsg">تم تنفيذ العملية بنجاح</p>
        <button class="btn-modal-close" onclick="document.getElementById('successModal').classList.remove('show'); location.reload();">إغلاق</button>
    </div>
</div>

@endsection

@section('scripts')
<script>
    function switchTab(tabId, btn) {
        document.querySelectorAll('.tab-content').forEach(t => t.classList.remove('active'));
        document.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active'));
        document.getElementById(tabId).classList.add('active');
        btn.classList.add('active');
    }

    function calculateFinal() {
        const price = parseFloat(document.getElementById('price').value) || 0;
        const discount = parseFloat(document.getElementById('discount').value) || 0;
        const final = price - (price * (discount / 100));
        document.getElementById('finalPriceShow').textContent = final.toFixed(2);
    }

    document.getElementById('merchantProductForm').addEventListener('submit', async (e) => {
        e.preventDefault();
        const formData = new FormData(e.target);
        const data = Object.fromEntries(formData.entries());

        try {
            const response = await fetch("{{ route('merchant.product.store') }}", {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
                },
                body: JSON.stringify(data)
            });
            const result = await response.json();
            if (result.success) {
                document.getElementById('modalMsg').textContent = result.message;
                document.getElementById('successModal').classList.add('show');
            }
        } catch (error) {
            alert('حدث خطأ أثناء الحفظ');
        }
    });

    async function toggleProductStatus(id, btn) {
        try {
            const response = await fetch(`/merchant/product/${id}/toggle`, {
                method: 'POST',
                headers: { 'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content }
            });
            const result = await response.json();
            if (result.success) {
                btn.textContent = result.status === 'available' ? 'متاح' : 'غير متاح';
                btn.className = `status-toggle ${result.status === 'available' ? 'status-available' : 'status-unavailable'}`;
            }
        } catch (error) {
            alert('فشل في تغيير الحالة');
        }
    }

    async function deleteProduct(id, btn) {
        if (!confirm('هل أنت متأكد من حذف هذا المنتج نهائياً؟')) return;
        try {
            const response = await fetch(`/merchant/product/${id}`, {
                method: 'DELETE',
                headers: { 'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content }
            });
            const result = await response.json();
            if (result.success) {
                btn.closest('tr').remove();
            }
        } catch (error) {
            alert('فشل في حذف المنتج');
        }
    }
</script>
@endsection