@extends('layouts.panel')

@section('title', app(\App\Services\TitleService::class)->generate())

@section('content')
<main class="w-full">
    <header class="flex flex-col sm:flex-row justify-between items-start sm:items-center border-b pb-4 mb-6 border-slate-700">
        <h1 class="text-2xl font-bold text-slate-100">مدیریت انبارها</h1>
        <button id="open-warehouse-modal" class="px-6 py-3 bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-700 hover:to-indigo-700 text-white font-medium rounded-xl transition-all duration-200 transform hover:scale-105 shadow-lg hover:shadow-xl glow">
            <span>➕ افزودن انبار جدید</span>
        </button>
    </header>

    <!-- Add/Edit Warehouse Modal -->
    <div id="warehouse-modal" class="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-60 backdrop-blur-sm hidden transition-opacity duration-300">
        <div class="glass rounded-2xl w-full max-w-3xl max-h-[90vh] overflow-y-auto">
            <div class="sticky top-0 glass p-6 border-b border-slate-700 flex justify-between items-center">
                <h2 id="warehouse-modal-title" class="text-xl font-bold">افزودن انبار جدید</h2>
                <button id="close-warehouse-modal" class="close-modal-btn inline-flex w-9 h-9 min-w-9 max-w-9 flex-shrink-0 flex-grow-0 items-center justify-center rounded-lg transition-colors">
                    <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"/></svg>
                </button>
            </div>
            <form id="warehouse-form" class="p-6 space-y-6">
                @csrf
                <input type="hidden" id="warehouse-id" name="warehouse_id">
                
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>
                        <label class="block text-sm font-medium text-slate-400 mb-2">نام شهر <span class="text-red-400">*</span></label>
                        <input type="text" id="warehouse-city" name="city" class="block w-full rounded-md bg-white/5 border-slate-700 text-slate-200 shadow-sm focus:border-blue-500 focus:ring-blue-500" placeholder="مثال: تهران" required>
                    </div>
                    
                    <div>
                        <label class="block text-sm font-medium text-slate-400 mb-2">اسم انبار <span class="text-red-400">*</span></label>
                        <input type="text" id="warehouse-name" name="name" class="block w-full rounded-md bg-white/5 border-slate-700 text-slate-200 shadow-sm focus:border-blue-500 focus:ring-blue-500" placeholder="مثال: انبار مرکزی" required>
                    </div>
                </div>

                <div>
                    <label class="block text-sm font-medium text-slate-400 mb-2">آدرس (اختیاری)</label>
                    <textarea id="warehouse-address" name="address" rows="2" class="block w-full rounded-md bg-white/5 border-slate-700 text-slate-200 shadow-sm focus:border-blue-500 focus:ring-blue-500" placeholder="آدرس کامل انبار"></textarea>
                </div>

                <div>
                    <div class="flex items-center justify-between mb-3">
                        <label class="block text-sm font-medium text-slate-400">شماره تماس انبار</label>
                        <button type="button" id="add-phone-btn" class="px-3 py-1.5 text-xs bg-blue-600 hover:bg-blue-700 text-white rounded-lg transition-colors">
                            ➕ افزودن شماره
                        </button>
                    </div>
                    <div id="phone-numbers-container" class="space-y-3">
                        <!-- Phone numbers will be added here dynamically -->
                    </div>
                </div>

                <div>
                    <label class="block text-sm font-medium text-slate-400 mb-2">توضیحات (اختیاری)</label>
                    <textarea id="warehouse-description" name="description" rows="3" class="block w-full rounded-md bg-white/5 border-slate-700 text-slate-200 shadow-sm focus:border-blue-500 focus:ring-blue-500" placeholder="توضیحات تکمیلی درباره انبار"></textarea>
                </div>

                <div class="flex justify-end gap-3 pt-4 border-t border-slate-700">
                    <button type="button" id="cancel-warehouse-btn" class="px-6 py-2 bg-slate-600 hover:bg-slate-700 text-white font-medium rounded-xl transition-colors">
                        انصراف
                    </button>
                    <button type="submit" class="px-6 py-2 bg-green-600 hover:bg-green-700 text-white font-medium rounded-xl shadow-lg transition-colors">
                        <span id="warehouse-submit-text">ثبت انبار</span>
                    </button>
                </div>
            </form>
        </div>
    </div>

    <!-- Warehouses List -->
    <section class="table-card">
        <div class="table-wrapper">
            <table id="warehousesTable" class="min-w-full text-sm">
                <thead>
                    <tr>
                        <th style="width:60px">ردیف</th>
                        <th>نام شهر</th>
                        <th>اسم انبار</th>
                        <th>تعداد محصولات</th>
                        <th>شماره تماس</th>
                        <th>آدرس</th>
                        <th style="width:150px">عملیات</th>
                    </tr>
                </thead>
                <tbody id="warehouses-table-body"></tbody>
            </table>
        </div>
        <div id="warehouses-empty" class="empty-state hidden">موردی یافت نشد</div>
    </section>
</main>
@endsection

@push('styles')
<style>
    #close-warehouse-modal,
    #close-warehouse-modal:hover,
    #close-warehouse-modal.close-modal-btn,
    #close-warehouse-modal.close-modal-btn:hover,
    button#close-warehouse-modal,
    button#close-warehouse-modal:hover,
    button.close-modal-btn,
    button.close-modal-btn:hover {
        width: 36px !important;
        min-width: 36px !important;
        max-width: 36px !important;
        flex-basis: auto !important;
    }
    
    #close-warehouse-modal:hover {
        background-color: rgba(255, 255, 255, 0.05) !important;
    }

    .phone-number-item {
        @apply flex items-center gap-3 p-3 rounded-lg bg-slate-800/50 border border-slate-700;
    }

    .phone-number-item input {
        @apply flex-1 rounded-md bg-white/5 border-slate-700 text-slate-200 shadow-sm focus:border-blue-500 focus:ring-blue-500;
    }
</style>
@endpush

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    const modal = document.getElementById('warehouse-modal');
    const openBtn = document.getElementById('open-warehouse-modal');
    const closeBtn = document.getElementById('close-warehouse-modal');
    const cancelBtn = document.getElementById('cancel-warehouse-btn');
    const form = document.getElementById('warehouse-form');
    const phoneContainer = document.getElementById('phone-numbers-container');
    const addPhoneBtn = document.getElementById('add-phone-btn');
    const tableBody = document.getElementById('warehouses-table-body');
    const modalTitle = document.getElementById('warehouse-modal-title');
    const submitText = document.getElementById('warehouse-submit-text');
    const warehouseIdInput = document.getElementById('warehouse-id');

    let phoneNumberIndex = 0;

    // Open modal
    if (openBtn) {
        openBtn.addEventListener('click', function() {
            resetForm();
            modalTitle.textContent = 'افزودن انبار جدید';
            submitText.textContent = 'ثبت انبار';
            modal.classList.remove('hidden');
        });
    }

    // Close modal
    function closeModal() {
        modal.classList.add('hidden');
        resetForm();
    }

    if (closeBtn) closeBtn.addEventListener('click', closeModal);
    if (cancelBtn) cancelBtn.addEventListener('click', closeModal);
    if (modal) modal.addEventListener('click', function(e) {
        if (e.target === modal) closeModal();
    });

    // Add phone number field
    function addPhoneNumberField(phone = '', support = '') {
        const index = phoneNumberIndex++;
        const phoneItem = document.createElement('div');
        phoneItem.className = 'phone-number-item';
        phoneItem.dataset.index = index;
        phoneItem.innerHTML = `
            <input type="text" name="phones[${index}][number]" value="${phone}" placeholder="شماره تماس (مثال: 021-12345678)" class="phone-number-input">
            <input type="text" name="phones[${index}][support]" value="${support}" placeholder="پشتیبانی (مثال: حسین احمدی)" class="phone-support-input" style="width: 200px;">
            <button type="button" class="remove-phone-btn px-3 py-1.5 text-xs bg-red-600 hover:bg-red-700 text-white rounded-lg transition-colors" onclick="removePhoneNumber(${index})">
                حذف
            </button>
        `;
        phoneContainer.appendChild(phoneItem);
    }

    // Remove phone number field
    window.removePhoneNumber = function(index) {
        const phoneItem = phoneContainer.querySelector(`[data-index="${index}"]`);
        if (phoneItem) {
            phoneItem.remove();
        }
    };

    if (addPhoneBtn) {
        addPhoneBtn.addEventListener('click', function() {
            addPhoneNumberField();
        });
    }

    // Reset form
    function resetForm() {
        form.reset();
        warehouseIdInput.value = '';
        phoneContainer.innerHTML = '';
        phoneNumberIndex = 0;
        addPhoneNumberField(); // Add one default phone field
    }

    // Form submission
    if (form) {
        form.addEventListener('submit', async function(e) {
            e.preventDefault();
            
            const formData = new FormData(form);
            const warehouseId = warehouseIdInput.value;
            const isEdit = !!warehouseId;
            
            // Collect phone numbers
            const phones = [];
            const phoneInputs = phoneContainer.querySelectorAll('.phone-number-item');
            phoneInputs.forEach(item => {
                const number = item.querySelector('.phone-number-input').value.trim();
                const support = item.querySelector('.phone-support-input').value.trim();
                if (number) {
                    phones.push({ number, support });
                }
            });
            
            // Add phones to form data
            formData.append('phone_numbers', JSON.stringify(phones));
            
            const submitButton = form.querySelector('button[type="submit"]');
            const originalText = submitButton.innerHTML;
            submitButton.disabled = true;
            submitButton.innerHTML = '<span class="inline-block animate-spin mr-2">⏳</span>در حال ثبت...';
            
            try {
                const url = isEdit ? `/admin/inventory/warehouses/${warehouseId}` : '/admin/inventory/warehouses';
                const method = isEdit ? 'PUT' : 'POST';
                
                formData.append('_method', method === 'PUT' ? 'PUT' : 'POST');
                
                const response = await fetch(url, {
                    method: 'POST',
                    body: formData,
                    headers: {
                        'Accept': 'application/json',
                        'X-Requested-With': 'XMLHttpRequest'
                    },
                    credentials: 'same-origin'
                });
                
                const data = await response.json();
                
                if (response.ok && data.ok) {
                    closeModal();
                    if (window.showSuccessModalWithAutoClose) {
                        window.showSuccessModalWithAutoClose(isEdit ? 'انبار با موفقیت به‌روزرسانی شد' : 'انبار با موفقیت ثبت شد');
                    } else {
                        alert(isEdit ? 'انبار با موفقیت به‌روزرسانی شد' : 'انبار با موفقیت ثبت شد');
                    }
                    fetchWarehouses();
                } else {
                    const errorMessage = data.message || data.error || 'خطا در ثبت انبار';
                    if (window.showErrorModal) {
                        window.showErrorModal(errorMessage);
                    } else {
                        alert(errorMessage);
                    }
                }
            } catch (error) {
                console.error('Error:', error);
                if (window.showErrorModal) {
                    window.showErrorModal('خطا در ارتباط با سرور');
                } else {
                    alert('خطا در ارتباط با سرور');
                }
            } finally {
                submitButton.disabled = false;
                submitButton.innerHTML = originalText;
            }
        });
    }

    // Fetch warehouses list
    async function fetchWarehouses() {
        tableBody.innerHTML = '<tr><td colspan="6" class="text-center py-8 text-slate-400">در حال بارگذاری...</td></tr>';
        
        try {
            const response = await fetch('/admin/inventory/warehouses/list', {
                headers: { 'Accept': 'application/json' }
            });
            
            const data = await response.json();
            
            if (data && data.warehouses) {
                renderWarehouses(data.warehouses);
            } else {
                tableBody.innerHTML = '<tr><td colspan="6" class="text-center py-8 text-slate-400">موردی یافت نشد</td></tr>';
            }
        } catch (error) {
            console.error('Error fetching warehouses:', error);
            tableBody.innerHTML = '<tr><td colspan="6" class="text-center py-8 text-red-400">خطا در دریافت اطلاعات</td></tr>';
        }
    }

    // Render warehouses
    function renderWarehouses(warehouses) {
        tableBody.innerHTML = '';
        
        if (!warehouses || warehouses.length === 0) {
            tableBody.innerHTML = '<tr><td colspan="7" class="text-center py-8 text-slate-400">موردی یافت نشد</td></tr>';
            return;
        }
        
        warehouses.forEach((warehouse, index) => {
            let phones = [];
            if (warehouse.phone_numbers) {
                try {
                    phones = typeof warehouse.phone_numbers === 'string' 
                        ? JSON.parse(warehouse.phone_numbers) 
                        : warehouse.phone_numbers;
                } catch (e) {
                    phones = [];
                }
            }
            const phonesDisplay = phones.length > 0 
                ? phones.map(p => `${p.number || ''}${p.support ? ` (${p.support})` : ''}`).filter(p => p.trim()).join('<br>')
                : '-';
            
            const productCount = warehouse.product_count || 0;
            
            const row = `
                <tr class="hover:bg-white/5 transition duration-150 ease-in-out">
                    <td class="px-4 py-4 whitespace-nowrap text-sm font-medium text-slate-300">${index + 1}</td>
                    <td class="px-4 py-4 whitespace-nowrap text-sm text-slate-200">${warehouse.location || '-'}</td>
                    <td class="px-4 py-4 whitespace-nowrap text-sm font-medium text-slate-200">${warehouse.name || '-'}</td>
                    <td class="px-4 py-4 whitespace-nowrap text-sm text-slate-300">
                        <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-blue-500/20 text-blue-400 border border-blue-500/30">
                            ${productCount}
                        </span>
                    </td>
                    <td class="px-4 py-4 text-sm text-slate-400">${phonesDisplay}</td>
                    <td class="px-4 py-4 text-sm text-slate-400">${warehouse.address || '-'}</td>
                    <td class="px-4 py-4 whitespace-nowrap">
                        <div class="actions">
                            <a href="/admin/inventory/warehouses/${warehouse.id}" class="btn-action">مشاهده</a>
                            <a href="#" class="btn-action btn-edit" onclick="event.preventDefault(); editWarehouse(${warehouse.id})">ویرایش</a>
                            <button class="btn-action btn-delete" onclick="deleteWarehouse(${warehouse.id}, '${warehouse.name}')">حذف</button>
                        </div>
                    </td>
                </tr>
            `;
            tableBody.insertAdjacentHTML('beforeend', row);
        });
    }

    // Edit warehouse
    window.editWarehouse = async function(warehouseId) {
        try {
            const response = await fetch(`/admin/inventory/warehouses/${warehouseId}/api`, {
                headers: { 'Accept': 'application/json' }
            });
            
            if (!response.ok) return;
            
            const warehouse = await response.json();
            
            // Populate form
            warehouseIdInput.value = warehouse.id;
            document.getElementById('warehouse-city').value = warehouse.location || '';
            document.getElementById('warehouse-name').value = warehouse.name || '';
            document.getElementById('warehouse-address').value = warehouse.address || '';
            document.getElementById('warehouse-description').value = warehouse.description || '';
            
            // Populate phone numbers
            phoneContainer.innerHTML = '';
            phoneNumberIndex = 0;
            let phones = [];
            if (warehouse.phone_numbers) {
                try {
                    phones = typeof warehouse.phone_numbers === 'string' 
                        ? JSON.parse(warehouse.phone_numbers) 
                        : warehouse.phone_numbers;
                } catch (e) {
                    phones = [];
                }
            }
            if (phones.length > 0) {
                phones.forEach(phone => {
                    addPhoneNumberField(phone.number || '', phone.support || '');
                });
            } else {
                addPhoneNumberField();
            }
            
            modalTitle.textContent = 'ویرایش انبار';
            submitText.textContent = 'به‌روزرسانی انبار';
            modal.classList.remove('hidden');
        } catch (error) {
            console.error('Error loading warehouse:', error);
            if (window.showErrorModal) {
                window.showErrorModal('خطا در بارگذاری اطلاعات انبار');
            } else {
                alert('خطا در بارگذاری اطلاعات انبار');
            }
        }
    };

    // Delete warehouse
    window.deleteWarehouse = function(warehouseId, warehouseName) {
        if (window.showDeleteModal) {
            window.showDeleteModal(
                'حذف انبار',
                `آیا از حذف انبار "${warehouseName}" مطمئن هستید؟`,
                async () => {
                    try {
                        const response = await fetch(`/admin/inventory/warehouses/${warehouseId}`, {
                            method: 'DELETE',
                            headers: {
                                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                                'Accept': 'application/json'
                            }
                        });
                        
                        if (response.ok) {
                            if (window.showSuccessModalWithAutoClose) {
                                window.showSuccessModalWithAutoClose('انبار با موفقیت حذف شد');
                            } else {
                                alert('انبار با موفقیت حذف شد');
                            }
                            fetchWarehouses();
                        } else {
                            const errorData = await response.json().catch(() => ({}));
                            const errorMessage = errorData.message || 'خطا در حذف انبار';
                            if (window.showErrorModal) {
                                window.showErrorModal(errorMessage);
                            } else {
                                alert(errorMessage);
                            }
                        }
                    } catch (error) {
                        console.error('Error deleting warehouse:', error);
                        if (window.showErrorModal) {
                            window.showErrorModal('خطا در حذف انبار');
                        } else {
                            alert('خطا در حذف انبار');
                        }
                    }
                },
                () => {}
            );
        } else {
            if (confirm(`آیا از حذف انبار "${warehouseName}" مطمئن هستید؟`)) {
                fetch(`/admin/inventory/warehouses/${warehouseId}`, {
                    method: 'DELETE',
                    headers: {
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                        'Accept': 'application/json'
                    }
                })
                .then(response => {
                    if (response.ok) {
                        alert('انبار با موفقیت حذف شد');
                        fetchWarehouses();
                    } else {
                        alert('خطا در حذف انبار');
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                    alert('خطا در حذف انبار');
                });
            }
        }
    };

    // Initialize: Add one default phone field and fetch warehouses
    addPhoneNumberField();
    fetchWarehouses();
});
</script>
@endpush