@extends('front.layouts.app')

@section('title', 'خدمة Washout - MedExchange')

@section('styles')
    <link rel="stylesheet" href="{{ asset('css/washout.css') }}">
    <meta name="csrf-token" content="{{ csrf_token() }}">
@endsection

@section('content')
<main class="main-content">
    <div class="container">
        <!-- Page Header -->
        <div class="page-header">
            <div class="page-title-section">
                <button class="btn-back" onclick="history.back()">
                    <i class="fas fa-arrow-right"></i>
                </button>
                <div class="page-title-content">
                    <h1 class="page-title">خدمة Washout</h1>
                    <p class="page-subtitle">للأدوية منتهية الصلاحية منذ فترة طويلة</p>
                </div>
            </div>
            <div class="page-actions">
                <button class="btn-secondary" id="clearAll">
                    <i class="fas fa-trash-alt"></i>
                    مسح الكل
                </button>
            </div>
        </div>

        <!-- Info Alert -->
        <div class="info-alert" style="background: #fdf2f2; border-right: 4px solid #ef4444; padding: 20px; border-radius: 12px; display: flex; gap: 15px; margin-bottom: 30px;">
            <div class="alert-icon" style="color: #ef4444; font-size: 1.5rem;">
                <i class="fas fa-info-circle"></i>
            </div>
            <div class="alert-content">
                <h4 style="font-weight: 800; color: #991b1b; margin-bottom: 5px;">ما هي خدمة Washout؟</h4>
                <p style="color: #b91c1c; font-size: 0.95rem; line-height: 1.6;">خدمة متخصصة للأدوية منتهية الصلاحية منذ فترة طويلة والتي تحتاج إلى معالجة خاصة. نوفر لك حلول آمنة وفعالة للتخلص منها بطريقة صحيحة.</p>
            </div>
        </div>

        <!-- Stats Cards -->
        <div class="stats-cards">
            <div class="stat-card">
                <div class="stat-icon purple">
                    <i class="fas fa-recycle"></i>
                </div>
                <div class="stat-content">
                    <span class="stat-label">عدد الأدوية</span>
                    <span class="stat-value" id="totalMedicines">0</span>
                </div>
            </div>
            <div class="stat-card">
                <div class="stat-icon red">
                    <i class="fas fa-boxes"></i>
                </div>
                <div class="stat-content">
                    <span class="stat-label">إجمالي الكمية</span>
                    <span class="stat-value" id="totalQuantity">0</span>
                </div>
            </div>
            <div class="stat-card">
                <div class="stat-icon orange">
                    <i class="fas fa-clock"></i>
                </div>
                <div class="stat-content">
                    <span class="stat-label">حالة الطلب</span>
                    <span class="stat-value" id="requestStatus">جديد</span>
                </div>
            </div>
        </div>

        <!-- Add Medicine Form -->
        <div class="medicine-form-card">
            <div class="card-header">
                <div class="card-title">
                    <i class="fas fa-recycle"></i>
                    <h3>إضافة دواء للـ Washout</h3>
                </div>
            </div>
            <div class="card-body">
                <form class="medicine-form" id="medicineForm">
                    <div class="form-row">
                        <div class="form-group">
                            <label for="medicineName">
                                <i class="fas fa-pills"></i>
                                اسم الدواء
                            </label>
                            <input type="text" id="medicineName" name="medicineName" placeholder="أدخل اسم الدواء" required>
                        </div>

                        <div class="form-group">
                            <label for="quantity">
                                <i class="fas fa-boxes"></i>
                                الكمية
                            </label>
                            <input type="number" id="quantity" name="quantity" placeholder="أدخل الكمية" min="1" required>
                        </div>

                        <div class="form-group">
                            <label for="expiryDate">
                                <i class="fas fa-calendar-times"></i>
                                تاريخ الصلاحية
                            </label>
                            <input type="date" id="expiryDate" name="expiryDate" required>
                        </div>

                        <div class="form-group">
                            <label>&nbsp;</label>
                            <button type="submit" class="btn-add-medicine">
                                <i class="fas fa-plus"></i>
                                <span>إضافة الدواء</span>
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </div>

        <!-- Medicines Table -->
        <div class="medicines-table-card">
            <div class="card-header">
                <div class="card-title">
                    <i class="fas fa-list"></i>
                    <h3>قائمة الأدوية المضافة</h3>
                </div>
                <div class="search-box">
                    <i class="fas fa-search"></i>
                    <input type="text" id="searchMedicine" placeholder="بحث عن دواء...">
                </div>
            </div>
            <div class="card-body">
                <div class="empty-state" id="emptyState">
                    <div class="empty-icon">
                        <i class="fas fa-recycle"></i>
                    </div>
                    <h3>لا توجد أدوية مضافة</h3>
                    <p>ابدأ بإضافة الأدوية منتهية الصلاحية القديمة باستخدام النموذج أعلاه</p>
                </div>

                <div class="table-wrapper" id="tableWrapper" style="display: none;">
                    <table class="medicines-table">
                        <thead>
                            <tr>
                                <th>#</th>
                                <th>اسم الدواء</th>
                                <th>الكمية</th>
                                <th>تاريخ الصلاحية</th>
                                <th>الحالة</th>
                                <th>الإجراءات</th>
                            </tr>
                        </thead>
                        <tbody id="medicinesTableBody"></tbody>
                    </table>
                </div>
            </div>
        </div>

        <!-- Submit Section -->
        <div class="submit-section" id="submitSection" style="display: none;">
            <div class="submit-card">
                <div class="submit-info">
                    <div class="submit-icon">
                        <i class="fas fa-paper-plane"></i>
                    </div>
                    <div class="submit-content">
                        <h3>جاهز لإرسال الطلب؟</h3>
                        <p>سيتم مراجعة طلبك من قبل الإدارة وتحديد أفضل طريقة للمعالجة</p>
                    </div>
                </div>
                <button class="btn-submit-request" id="submitRequest">
                    <i class="fas fa-check-circle"></i>
                    <span>إرسال الطلب</span>
                </button>
            </div>
        </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>تم إرسال طلب Washout بنجاح!</h3>
        <p>سيتم مراجعة طلبك من قبل الإدارة والتواصل معك قريباً. رقم الطلب: <span id="modalRequestNumber" style="font-weight:bold; color:#ef4444;"></span></p>
        <button class="btn-modal-close" onclick="closeModal()">
            <i class="fas fa-times"></i>
            إغلاق
        </button>
    </div>
</div>

<!-- Delete Confirmation Modal -->
<div class="modal" id="deleteModal">
    <div class="modal-overlay"></div>
    <div class="modal-content">
        <div class="modal-icon danger">
            <i class="fas fa-exclamation-triangle"></i>
        </div>
        <h3>تأكيد الحذف</h3>
        <p>هل أنت متأكد من حذف هذا الدواء من القائمة؟</p>
        <div class="modal-actions">
            <button class="btn-cancel" onclick="closeDeleteModal()">إلغاء</button>
            <button class="btn-confirm-delete" id="confirmDelete">حذف</button>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
    let medicines = [];
    let deleteIndex = null;

    const medicineForm = document.getElementById('medicineForm');
    const medicinesTableBody = document.getElementById('medicinesTableBody');
    const emptyState = document.getElementById('emptyState');
    const tableWrapper = document.getElementById('tableWrapper');
    const submitSection = document.getElementById('submitSection');
    const totalMedicinesEl = document.getElementById('totalMedicines');
    const totalQuantityEl = document.getElementById('totalQuantity');
    const searchMedicine = document.getElementById('searchMedicine');
    const clearAll = document.getElementById('clearAll');
    const submitRequest = document.getElementById('submitRequest');

    medicineForm.addEventListener('submit', (e) => {
        e.preventDefault();
        const medicine = {
            medicineName: document.getElementById('medicineName').value,
            quantity: parseInt(document.getElementById('quantity').value),
            expiryDate: document.getElementById('expiryDate').value
        };
        medicines.push(medicine);
        updateUI();
        medicineForm.reset();
    });

    searchMedicine.addEventListener('input', (e) => {
        updateUI(e.target.value);
    });

    clearAll.addEventListener('click', () => {
        if (confirm('هل أنت متأكد من مسح جميع الأدوية؟')) {
            medicines = [];
            updateUI();
        }
    });

    submitRequest.addEventListener('click', async () => {
        if (!@json(Auth::check())) {
            alert('يرجى تسجيل الدخول أولاً');
            window.location.href = "{{ route('login') }}";
            return;
        }

        try {
            const response = await fetch("{{ route('medicine-requests.store') }}", {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
                },
                body: JSON.stringify({
                    type: 'washout',
                    items: medicines
                })
            });
            const result = await response.json();
            if (result.success) {
                document.getElementById('modalRequestNumber').textContent = result.request_number;
                document.getElementById('successModal').classList.add('show');
                medicines = [];
                updateUI();
            } else {
                alert('حدث خطأ أثناء إرسال الطلب');
            }
        } catch (error) {
            console.error('Error:', error);
            alert('حدث خطأ في الاتصال بالسيرفر');
        }
    });

    function updateUI(searchTerm = '') {
        const filtered = medicines.filter(m => m.medicineName.toLowerCase().includes(searchTerm.toLowerCase()));
        
        medicinesTableBody.innerHTML = '';
        filtered.forEach((m, index) => {
            const row = `
                <tr>
                    <td>${index + 1}</td>
                    <td>${m.medicineName}</td>
                    <td>${m.quantity}</td>
                    <td>${m.expiryDate}</td>
                    <td><span class="status-badge pending">Washout</span></td>
                    <td>
                        <button class="btn-delete" onclick="openDeleteModal(${index})">
                            <i class="fas fa-trash"></i>
                        </button>
                    </td>
                </tr>
            `;
            medicinesTableBody.insertAdjacentHTML('beforeend', row);
        });

        const hasMedicines = medicines.length > 0;
        emptyState.style.display = hasMedicines ? 'none' : 'block';
        tableWrapper.style.display = hasMedicines ? 'block' : 'none';
        submitSection.style.display = hasMedicines ? 'block' : 'none';
        
        totalMedicinesEl.textContent = medicines.length;
        totalQuantityEl.textContent = medicines.reduce((sum, m) => sum + m.quantity, 0);
    }

    window.openDeleteModal = (index) => {
        deleteIndex = index;
        document.getElementById('deleteModal').classList.add('show');
    };

    window.closeDeleteModal = () => {
        document.getElementById('deleteModal').classList.remove('show');
    };

    document.getElementById('confirmDelete').addEventListener('click', () => {
        if (deleteIndex !== null) {
            medicines.splice(deleteIndex, 1);
            updateUI();
            closeDeleteModal();
        }
    });

    window.closeModal = () => {
        document.getElementById('successModal').classList.remove('show');
    };
</script>
@endsection