@extends('layouts.app')

@push('styles')
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
<script src="https://cdn.jsdelivr.net/npm/flatpickr/dist/l10n/ar.js"></script>
@endpush

@section('content')
<div style="padding: 2rem;">
    <h1 style="color: #d4af37; margin-bottom: 2rem;">تعديل الفاتورة - {{ $invoice->invoice_number }}</h1>

    @if($errors->any())
    <div style="background: rgba(239, 68, 68, 0.1); border: 1px solid #ef4444; color: #ef4444; padding: 1rem; border-radius: 0.5rem; margin-bottom: 2rem;">
        <ul>
            @foreach($errors->all() as $error)
            <li>{{ $error }}</li>
            @endforeach
        </ul>
    </div>
    @endif

    <form method="POST" action="{{ route('admin.invoices.update', $invoice) }}" style="background: #111; border: 1px solid #333; border-radius: 1rem; padding: 2rem;">
        @csrf
        @method('PUT')

        <div style="margin-bottom: 2rem;">
            <label style="color: #999; font-size: 0.875rem; display: block; margin-bottom: 0.5rem;">الوصف</label>
            <textarea name="description" style="width: 100%; padding: 0.75rem; background: #222; border: 1px solid #333; color: white; border-radius: 0.5rem; resize: vertical; min-height: 80px;">{{ $invoice->description }}</textarea>
        </div>

        <div style="margin-bottom: 2rem;">
            <label style="color: #999; font-size: 0.875rem; display: block; margin-bottom: 0.5rem;">تاريخ الاستحقاق</label>
            <input type="text" id="dueDatePicker" name="due_date" value="{{ $invoice->due_date->format('Y-m-d') }}" placeholder="اختر التاريخ" style="width: 100%; padding: 0.75rem; background: #222; border: 1px solid #333; color: white; border-radius: 0.5rem;">
        </div>

        <h3 style="color: #d4af37; margin-bottom: 1rem;">البنود</h3>
        <div id="itemsContainer" style="border: 1px solid #333; border-radius: 0.5rem; padding: 1.5rem; margin-bottom: 2rem;">
            @foreach($invoice->items as $index => $item)
            <div class="item-row" style="display: grid; grid-template-columns: 1fr 1fr 1fr 1fr auto; gap: 1rem; margin-bottom: 1rem;">
                <div>
                    <input type="text" name="items[{{ $index }}][description]" value="{{ $item->description }}" placeholder="الوصف" required style="width: 100%; padding: 0.5rem; background: #222; border: 1px solid #333; color: white; border-radius: 0.5rem;">
                </div>
                <div>
                    <input type="number" name="items[{{ $index }}][quantity]" value="{{ $item->quantity }}" placeholder="الكمية" step="0.01" required style="width: 100%; padding: 0.5rem; background: #222; border: 1px solid #333; color: white; border-radius: 0.5rem;" onchange="calculateTotal()">
                </div>
                <div>
                    <input type="number" name="items[{{ $index }}][unit_price]" value="{{ $item->unit_price }}" placeholder="السعر" step="0.01" required style="width: 100%; padding: 0.5rem; background: #222; border: 1px solid #333; color: white; border-radius: 0.5rem;" onchange="calculateTotal()">
                </div>
                <div>
                    <input type="number" name="items[{{ $index }}][amount]" value="{{ $item->amount }}" placeholder="الإجمالي" step="0.01" readonly style="width: 100%; padding: 0.5rem; background: #1a1a1a; border: 1px solid #333; color: #999; border-radius: 0.5rem;">
                </div>
                <button type="button" onclick="removeItem(this)" style="background: #ef4444; color: white; padding: 0.5rem 1rem; border: none; border-radius: 0.5rem; cursor: pointer;">
                    ✕
                </button>
            </div>
            @endforeach
        </div>

        <button type="button" onclick="addItem()" style="background: #3b82f6; color: white; padding: 0.75rem 1.5rem; border: none; border-radius: 0.5rem; cursor: pointer; margin-bottom: 2rem;">
            + إضافة بند
        </button>

        <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 2rem;">
            <div></div>
            <div style="background: #1a1a1a; border: 1px solid #333; border-radius: 0.5rem; padding: 1.5rem;">
                <div style="display: flex; justify-content: space-between; margin-bottom: 1rem; padding-bottom: 1rem; border-bottom: 1px solid #333;">
                    <span style="color: #999;">الإجمالي الجزئي:</span>
                    <span id="subtotal" style="color: white; font-weight: bold;">{{ number_format($invoice->subtotal, 2) }} ر.س</span>
                </div>
                <div style="display: flex; justify-content: space-between; margin-bottom: 1rem; padding-bottom: 1rem; border-bottom: 1px solid #333;">
                    <span style="color: #999;">الضريبة (15%):</span>
                    <span id="tax" style="color: white; font-weight: bold;">{{ number_format($invoice->tax_amount, 2) }} ر.س</span>
                </div>
                <div style="display: flex; justify-content: space-between; padding-bottom: 1rem; border-bottom: 2px solid #333;">
                    <span style="color: #d4af37; font-weight: bold;">الإجمالي:</span>
                    <span id="total" style="color: #d4af37; font-weight: bold; font-size: 1.25rem;">{{ number_format($invoice->total_amount, 2) }} ر.س</span>
                </div>
            </div>
        </div>

        <div style="display: flex; gap: 1rem; margin-top: 2rem;">
            <button type="submit" style="background: #10b981; color: white; padding: 0.75rem 2rem; border: none; border-radius: 0.5rem; font-weight: bold; cursor: pointer;">
                ✓ حفظ التغييرات
            </button>
            <a href="{{ route('admin.invoices.show', $invoice) }}" style="background: #6b7280; color: white; padding: 0.75rem 2rem; border: none; border-radius: 0.5rem; font-weight: bold; text-decoration: none; display: inline-flex; align-items: center;">
                ← إلغاء
            </a>
        </div>
    </form>
</div>

<script>
    let itemCount = {{ $invoice->items->count() }};

    function addItem() {
        const container = document.getElementById('itemsContainer');
        const html = `
            <div class="item-row" style="display: grid; grid-template-columns: 1fr 1fr 1fr 1fr auto; gap: 1rem; margin-bottom: 1rem;">
                <div>
                    <input type="text" name="items[${itemCount}][description]" placeholder="الوصف" required style="width: 100%; padding: 0.5rem; background: #222; border: 1px solid #333; color: white; border-radius: 0.5rem;">
                </div>
                <div>
                    <input type="number" name="items[${itemCount}][quantity]" placeholder="الكمية" step="0.01" value="1" required style="width: 100%; padding: 0.5rem; background: #222; border: 1px solid #333; color: white; border-radius: 0.5rem;" onchange="calculateTotal()">
                </div>
                <div>
                    <input type="number" name="items[${itemCount}][unit_price]" placeholder="السعر" step="0.01" required style="width: 100%; padding: 0.5rem; background: #222; border: 1px solid #333; color: white; border-radius: 0.5rem;" onchange="calculateTotal()">
                </div>
                <div>
                    <input type="number" name="items[${itemCount}][amount]" placeholder="الإجمالي" step="0.01" readonly style="width: 100%; padding: 0.5rem; background: #1a1a1a; border: 1px solid #333; color: #999; border-radius: 0.5rem;">
                </div>
                <button type="button" onclick="removeItem(this)" style="background: #ef4444; color: white; padding: 0.5rem 1rem; border: none; border-radius: 0.5rem; cursor: pointer;">
                    ✕
                </button>
            </div>
        `;
        container.insertAdjacentHTML('beforeend', html);
        itemCount++;
    }

    function removeItem(button) {
        const rows = document.querySelectorAll('.item-row');
        if (rows.length > 1) {
            button.closest('.item-row').remove();
            calculateTotal();
        }
    }

    function calculateTotal() {
        let subtotal = 0;
        const items = document.querySelectorAll('.item-row');
        
        items.forEach((row, index) => {
            const quantityInput = row.querySelector(`input[type="number"][placeholder="الكمية"]`);
            const priceInput = row.querySelector(`input[type="number"][placeholder="السعر"]`);
            const amountInput = row.querySelector(`input[type="number"][placeholder="الإجمالي"]`);
            
            const quantity = parseFloat(quantityInput?.value || 0);
            const price = parseFloat(priceInput?.value || 0);
            const amount = quantity * price;
            
            if (amountInput) {
                amountInput.value = amount.toFixed(2);
            }
            
            subtotal += amount;
        });
        
        const tax = subtotal * 0.15;
        const total = subtotal + tax;
        
        document.getElementById('subtotal').textContent = subtotal.toFixed(2) + ' ر.س';
        document.getElementById('tax').textContent = tax.toFixed(2) + ' ر.س';
        document.getElementById('total').textContent = total.toFixed(2) + ' ر.س';
    }

    // تفعيل التقويم
    flatpickr('#dueDatePicker', {
        mode: 'single',
        dateFormat: 'Y-m-d',
        locale: 'ar',
        allowInput: true,
    });
</script>
@endsection