@extends('admin.layouts.app')

@section('title', $type === 'services' ? 'Create Services Invoice' : 'Create Products Quotation')

@section('content')
<form method="POST" action="{{ route('admin.quotations.store') }}" id="quotationForm">
    @csrf
    <input type="hidden" name="invoice_type" value="{{ $type }}">

    <div class="grid grid-2">
        <!-- Customer Info -->
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">Customer Information</h3>
            </div>

            <div class="form-group">
                <label class="form-label">Customer Name *</label>
                <input type="text" name="customer_name" class="form-input" value="{{ old('customer_name') }}" required>
            </div>

            <div class="grid grid-2">
                <div class="form-group">
                    <label class="form-label">Email *</label>
                    <input type="email" name="customer_email" class="form-input" value="{{ old('customer_email') }}" required>
                </div>
                <div class="form-group">
                    <label class="form-label">Phone *</label>
                    <input type="tel" name="customer_phone" class="form-input" value="{{ old('customer_phone') }}" required>
                </div>
            </div>

            <div class="form-group">
                <label class="form-label">Address</label>
                <textarea name="customer_address" class="form-textarea" rows="2">{{ old('customer_address') }}</textarea>
            </div>

            <div class="form-group">
                <label class="form-label">Installation Site Address</label>
                <textarea name="site_address" class="form-textarea" rows="2">{{ old('site_address') }}</textarea>
            </div>
        </div>

        <!-- Quotation Settings -->
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">{{ $type === 'services' ? 'Service Details' : 'Quotation Settings' }}</h3>
            </div>

            <div class="form-group">
                <label class="form-label">Service Type</label>
                <select name="service_type" class="form-select">
                    <option value="installation" {{ $type === 'services' ? 'selected' : '' }}>Installation</option>
                    <option value="maintenance">Maintenance</option>
                    <option value="consultation">Consultation</option>
                    <option value="product_sale" {{ $type === 'products' ? 'selected' : '' }}>Product Sale</option>
                </select>
            </div>

            <div class="form-group">
                <label class="form-label">Service Description</label>
                <textarea name="service_description" class="form-textarea" rows="3">{{ old('service_description') }}</textarea>
            </div>

            <div class="form-group">
                <label class="form-label">Valid Until</label>
                <input type="date" name="valid_until" class="form-input" value="{{ old('valid_until', now()->addDays(30)->format('Y-m-d')) }}">
            </div>

            <div class="form-group">
                <label class="flex items-center gap-2">
                    <input type="checkbox" name="is_shop_customer" value="1" id="shopCustomer" {{ old('is_shop_customer') ? 'checked' : '' }}>
                    <span>Customer bought equipment from our shop (apply installation discount)</span>
                </label>
            </div>

            <div class="form-group">
                <label class="form-label">Discount Percentage (%)</label>
                <input type="number" name="discount_percentage" class="form-input" value="{{ old('discount_percentage', $defaultDiscount) }}" min="0" max="100" step="0.5">
            </div>
        </div>
    </div>

    <!-- Quotation Items -->
    <div class="card">
        <div class="card-header">
            <h3 class="card-title">{{ $type === 'services' ? 'Service Items' : 'Products / Items' }}</h3>
        </div>

        <div id="itemsContainer">
            <div class="item-row flex gap-3 mb-2" data-index="0">
                <select name="items[0][item_type]" class="form-select" style="width: 120px;">
                    <option value="product" {{ $type === 'products' ? 'selected' : '' }}>Product</option>
                    <option value="service" {{ $type === 'services' ? 'selected' : '' }}>Service</option>
                    <option value="labor">Labor</option>
                </select>
                <input type="text" name="items[0][description]" class="form-input" placeholder="Description" required style="flex: 2;">
                <input type="number" name="items[0][unit_price]" class="form-input" placeholder="Unit Price" step="0.01" min="0" required style="width: 150px;">
                <input type="number" name="items[0][quantity]" class="form-input" placeholder="Qty" min="1" value="1" required style="width: 80px;">
                <button type="button" class="btn btn-danger btn-sm remove-item" style="display: none;"><i class="fas fa-times"></i></button>
            </div>
        </div>

        <button type="button" id="addItem" class="btn btn-secondary btn-sm mt-2">
            <i class="fas fa-plus"></i> Add Item
        </button>
    </div>

    <!-- Notes -->
    <div class="card">
        <div class="card-header">
            <h3 class="card-title">Additional Notes</h3>
        </div>
        <textarea name="notes" class="form-textarea" rows="3" placeholder="Any additional notes for this quotation...">{{ old('notes') }}</textarea>
    </div>

    <div class="flex gap-3">
        <button type="submit" class="btn btn-primary">
            <i class="fas fa-save"></i> Create Quotation
        </button>
        <a href="{{ route('admin.quotations.index') }}" class="btn btn-secondary">Cancel</a>
    </div>
</form>

@push('scripts')
<script>
    let itemIndex = 1;
    
    document.getElementById('addItem').addEventListener('click', function() {
        const container = document.getElementById('itemsContainer');
        const row = document.createElement('div');
        row.className = 'item-row flex gap-3 mb-2';
        row.dataset.index = itemIndex;
        row.innerHTML = `
            <select name="items[${itemIndex}][item_type]" class="form-select" style="width: 120px;">
                <option value="product">Product</option>
                <option value="service">Service</option>
                <option value="labor">Labor</option>
            </select>
            <input type="text" name="items[${itemIndex}][description]" class="form-input" placeholder="Description" required style="flex: 2;">
            <input type="number" name="items[${itemIndex}][unit_price]" class="form-input" placeholder="Unit Price" step="0.01" min="0" required style="width: 150px;">
            <input type="number" name="items[${itemIndex}][quantity]" class="form-input" placeholder="Qty" min="1" value="1" required style="width: 80px;">
            <button type="button" class="btn btn-danger btn-sm remove-item"><i class="fas fa-times"></i></button>
        `;
        container.appendChild(row);
        itemIndex++;
        updateRemoveButtons();
    });

    document.getElementById('itemsContainer').addEventListener('click', function(e) {
        if (e.target.closest('.remove-item')) {
            e.target.closest('.item-row').remove();
            updateRemoveButtons();
        }
    });

    function updateRemoveButtons() {
        const rows = document.querySelectorAll('.item-row');
        rows.forEach((row, index) => {
            const btn = row.querySelector('.remove-item');
            if (btn) btn.style.display = rows.length > 1 ? 'flex' : 'none';
        });
    }
</script>
@endpush
@endsection