@extends('layouts.masterHome2')

@section('content')
<style>


    :root {
        diretions:rtl;
        --primary-color: #2C4E71;
        --secondary-color: #4CAF50;
        --accent-color: #FF9800;
        --light-color: #f8f9fa;
        --dark-color: #343a40;
        --danger-color: #dc3545;
        --border-color: #dee2e6;
        --shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }
    
    .review-container {
        padding: 20px;
        margin: 20px auto;
        max-width: 1200px;
    }
    
    .review-card {
        background-color: white;
        border-radius: 8px;
        box-shadow: var(--shadow);
        padding: 25px;
        margin-bottom: 20px;
    }
    
    .review-header {
        text-align: center;
        margin-bottom: 25px;
        color: var(--primary-color);
        border-bottom: 2px solid var(--primary-color);
        padding-bottom: 15px;
    }
    
    .form-group {
        margin-bottom: 20px;
    }
    
    .form-label {
        display: block;
        margin-bottom: 8px;
        font-weight: 600;
        color: var(--dark-color);
    }
    
    .form-control {
        width: 100%;
        padding: 10px 15px;
        border: 1px solid var(--border-color);
        border-radius: 4px;
        font-size: 16px;
        transition: border-color 0.3s;
    }
    
    .form-control:focus {
        border-color: var(--primary-color);
        outline: none;
        box-shadow: 0 0 0 3px rgba(44, 78, 113, 0.1);
    }
    
    .items-table {
        width: 100%;
        border-collapse: collapse;
        margin: 20px 0;
    }
    
    .items-table th {
        background-color: var(--primary-color);
        color: white;
        padding: 12px;
        text-align: center;
    }
    
    .items-table td {
        padding: 12px;
        border: 1px solid var(--border-color);
        text-align: center;
    }
    
    .items-table tr:nth-child(even) {
        background-color: #f8f9fa;
    }
    
    .btn {
        padding: 10px 20px;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        font-size: 16px;
        transition: background-color 0.3s;
    }
    
    .btn-primary {
        background-color: var(--primary-color);
        color: white;
    }
    
    .btn-primary:hover {
        background-color: #1e3957;
    }
    
    .btn-success {
        background-color: var(--secondary-color);
        color: white;
    }
    
    .btn-success:hover {
        background-color: #3d8b40;
    }
    
    .btn-danger {
        background-color: var(--danger-color);
        color: white;
    }
    
    .btn-danger:hover {
        background-color: #bd2130;
    }
    
    .loading {
        display: none;
        text-align: center;
        padding: 15px;
        background-color: #f8f9fa;
        border-radius: 4px;
        margin: 10px 0;
    }
    
    .select2-container--default .select2-selection--single {
        height: 42px;
        padding: 8px;
        border: 1px solid var(--border-color);
        border-radius: 4px;
    }
    
    .select2-container--default .select2-selection--single .select2-selection__arrow {
        height: 40px;
    }
    
    .alert {
        padding: 15px;
        margin-bottom: 20px;
        border: 1px solid transparent;
        border-radius: 4px;
    }
    
    .alert-success {
        color: #155724;
        background-color: #d4edda;
        border-color: #c3e6cb;
    }
    
    .alert-danger {
        color: #721c24;
        background-color: #f8d7da;
        border-color: #f5c6cb;
    }
    
    @media (max-width: 768px) {
        .review-container {
            padding: 10px;
        }
        
        .items-table {
            font-size: 14px;
        }
        
        .btn {
            width: 100%;
            margin-bottom: 10px;
        }
    }
</style>

<div class="review-container" style="direction: rtl; text-align: right;">
    <div class="review-card">
        <h2 class="review-header">  نموذج اشعار  مرتجع</h2>
        
        <form id="reviewForm">
            {{ csrf_field() }}
            
            <div class="form-group">
                <label for="customerName" class="form-label">اسم العميل:</label>
                <select id="customerName" name="customerName" required onchange="checkInvoiceFields()" class="form-control select2">
                    <option value="">-- اختر العميل --</option>
                    @foreach($clients as $client)
                        <option value="{{ $client->id }}">{{ $client->name }}</option>
                    @endforeach
                </select>
            </div>

            <div class="form-group">
                <label for="invoiceNumber" class="form-label">رقم الفاتورة:</label>
                <input type="number" id="invoiceNumber" name="invoiceNumber" required onkeyup="checkInvoiceFields()" class="form-control">
            </div>

            <div id="loadingItems" class="loading">
                <p><i class="fas fa-spinner fa-spin"></i> جاري تحميل أصناف الفاتورة...</p>
            </div>
            
            <div class="form-group">
                <label for="returnReason" class="form-label">سبب المرتجع:</label>
                <input type="text" id="returnReason" name="returnReason" required class="form-control">
            </div>
            
            <div class="form-group">
                <label for="receivedBy" class="form-label">القائم باستلام المرتجع:</label>
                <input type="text" id="receivedBy" name="receivedBy" required class="form-control">
            </div>
            
            <div class="form-group">
                <label for="itemSelect" class="form-label">اختر صنف:</label>
                <select id="itemSelect" name="itemSelect" class="form-control select2">
                    <option value="">-- اختر صنف --</option>
                </select>
            </div>
            
            <div class="form-group">
                <label for="itemPrice" class="form-label">السعر المرتجع:</label>
                <input type="number" id="itemPrice" name="itemPrice" min="0" step="0.01" class="form-control">
            </div>
            
            <div class="form-group">
                <label for="itemQuantity" class="form-label">الكمية المراد مراجعتها:</label>
                <input type="number" id="itemQuantity" name="itemQuantity" min="1" value="1" class="form-control">
            </div>
            
            <button type="button" class="btn btn-primary" onclick="addItem()">
                <i class="fas fa-plus"></i> إضافة صنف للمراجعة
            </button>
            
            <table class="items-table">
                <thead>
                    <tr>
                        <th>اسم الصنف</th>
                        <th>السعر</th>
                        <th>الكمية</th>
                        <th>الإجمالي</th>
                        <th>إجراءات</th>
                    </tr>
                </thead>
                <tbody id="itemsList">
                    <!-- سيتم إضافة الأصناف هنا -->
                </tbody>
            </table>
            
            <div class="form-group">
                <label for="reviewNotes" class="form-label">ملاحظات المراجعة:</label>
                <textarea id="reviewNotes" name="reviewNotes" rows="4" class="form-control"></textarea>
            </div>
            
            <button type="button" id="submitReview" class="btn btn-success">
                <i class="fas fa-save"></i> حفظ المراجعة
            </button>
        </form>
    </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<script>
    $(document).ready(function() {
        // تهيئة Select2
        $('.select2').select2({
            placeholder: '-- اختر العميل --',
            allowClear: true
        });
    });

    function addItem() {
        const itemSelect = document.getElementById('itemSelect');
        const itemPrice = document.getElementById('itemPrice');
        const itemQuantity = document.getElementById('itemQuantity');
        
        if (itemSelect.value === '') {
            alert('يرجى اختيار صنف');
            return;
        }
        
        if (itemPrice.value <= 0) {
            alert('يرجى التأكد من وجود سعر صحيح للصنف');
            return;
        }
        
        if (itemQuantity.value <= 0) {
            alert('يرجى إدخال كمية صحيحة');
            return;
        }
        
        const itemsList = document.getElementById('itemsList');
        const row = document.createElement('tr');
        
        const itemId = itemSelect.value;
        const itemName = itemSelect.options[itemSelect.selectedIndex].text;
        const price = parseFloat(itemPrice.value);
        const quantity = parseInt(itemQuantity.value);
        const total = price * quantity;
        
        row.innerHTML = `
            <td>
                ${itemName}
                <input type="hidden" name="items[${itemId}][id]" value="${itemId}">
            </td>
            <td>
                <input type="hidden" name="items[${itemId}][price]" value="${price}">
                ${price.toFixed(2)}
            </td>
            <td>
                <input type="hidden" name="items[${itemId}][quantity]" value="${quantity}">
                ${quantity}
            </td>
            <td>${total.toFixed(2)}</td>
            <td>
                <button type="button" class="btn btn-danger" onclick="removeItem(this)">
                    <i class="fas fa-trash"></i> حذف
                </button>
            </td>
        `;
        
        itemsList.appendChild(row);
        
        // مسح الحقول بعد الإضافة
        itemSelect.value = '';
        itemPrice.value = '';
        itemQuantity.value = '1';
    }
    
    function removeItem(button) {
        const row = button.parentNode.parentNode;
        row.parentNode.removeChild(row);
    }
    
    $('#submitReview').click(function() {
        const formData = {
            client_id: $('#customerName').val(),
            invoice_id: $('#invoiceNumber').val(),
            reason: $('#returnReason').val(),
            received_by: $('#receivedBy').val(),
            notes: $('#reviewNotes').val(),
            items: []
        };

        // جمع بيانات الأصناف من الجدول
        $('#itemsList tr').each(function() {
            const row = $(this);
            const itemId = row.find('input[name^="items["]').attr('name').match(/\[(.*?)\]\[/)[1];
            
            formData.items.push({
                item_id: itemId,
                price: parseFloat(row.find('input[name$="[price]"]').val()),
                quantity: parseInt(row.find('input[name$="[quantity]"]').val())
            });
        });

        if (formData.items.length === 0) {
            alert('يرجى إضافة أصناف للمراجعة');
            return;
        }

        $.ajax({
            url: 'save_review',
            type: 'POST',
            data: formData,
            headers: {
                'X-CSRF-TOKEN': "{{ csrf_token() }}"
            },
            success: function(response) {
                if (response.success) {
                    alert('تم حفظ المراجعة بنجاح');
                    $('#reviewForm')[0].reset();
                    $('#itemsList').empty();
                    $('.select2').val(null).trigger('change');
                } else {
                    alert('حدث خطأ أثناء الحفظ: ' + response.message);
                }
            },
            error: function(xhr) {
                alert('حدث خطأ في الاتصال بالخادم');
                console.error(xhr.responseText);
            }
        });
    });
    
    function getInvoiceItems(customerId, invoiceNumber) {
        $('#loadingItems').show();
        $('#itemSelect').html('<option value="">-- جاري التحميل --</option>');
        
        $.ajax({
            url: 'get-invoice-items',
            type: 'GET',
            data: {
                customer_id: customerId,
                invoice_number: invoiceNumber
            },
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            success: function(response) {
                if (response.success && response.items.length > 0) {
                    populateItemsSelect(response.items);
                } else {
                    $('#itemSelect').html('<option value="">-- لا توجد أصناف --</option>');
                }
                $('#loadingItems').hide();
            },
            error: function(xhr) {
                $('#itemSelect').html('<option value="">-- خطأ في التحميل --</option>');
                $('#loadingItems').hide();
                console.error(xhr.responseText);
            }
        });
    }

    function populateItemsSelect(items) {
        const select = $('#itemSelect');
        select.empty();
        select.append('<option value="">-- اختر صنف --</option>');
        
        items.forEach(function(item) {
            select.append(`<option value="${item.id}" 
                          data-price="${item.item_price}" 
                          data-original-price="${item.item_price}">
                          ${item.sell_store.store.sell_name} (السعر: ${item.item_price}) (الكمية: ${item.item_amount}) 
                          </option>`); 
        });
        
        // تحديث السعر عند اختيار صنف
        select.change(function() {
            const selectedOption = $(this).find('option:selected');
            if (selectedOption.val()) {
                $('#itemPrice').val(selectedOption.data('price'));
            } else {
                $('#itemPrice').val('');
            }
        });
    }

    function checkInvoiceFields() {
        const customerId = $('#customerName').val();
        const invoiceNumber = $('#invoiceNumber').val();
        
        if (customerId && invoiceNumber.length >= 1) {
            getInvoiceItems(customerId, invoiceNumber);
        }
    }
</script>
@endsection