@extends('layouts.app')
@section('title', 'Request a Quote — ECA Networks')

@section('content')
<div class="max-w-4xl mx-auto px-4 py-10">

    <!-- Header -->
    <div class="text-center mb-10">
        <div class="w-16 h-16 bg-electric-blue rounded-2xl flex items-center justify-center mx-auto mb-4 shadow-lg">
            <i class="fas fa-file-invoice text-white text-2xl"></i>
        </div>
        <h1 class="text-3xl font-bold text-navy mb-2">Request a Quote</h1>
        <p class="text-gray-500 max-w-lg mx-auto">We will send a formal Quote shortly.</p>
    </div>

    @if(session('error'))
    <div class="bg-red-50 border border-red-200 text-red-700 px-5 py-3 rounded-xl mb-6 flex items-center gap-2">
        <i class="fas fa-exclamation-circle"></i> {{ session('error') }}
    </div>
    @endif

    <form action="{{ route('quote.submit') }}" method="POST" id="quoteForm">
        @csrf

        <!-- ── Items Table ───────────────────────────────────────────────────── -->
        <div class="bg-white rounded-2xl shadow-sm border border-gray-100 mb-6 overflow-hidden">
            <div class="px-6 py-4 border-b border-gray-100 flex items-center justify-between">
                <h2 class="font-semibold text-navy flex items-center gap-2">
                    <i class="fas fa-list text-electric-blue text-sm"></i>
                    Items Required
                </h2>
                <span class="text-xs text-gray-400">Type anything — products, brands, specs</span>
            </div>

            <!-- Table header -->
            <div class="hidden sm:grid grid-cols-12 gap-3 px-6 py-2 bg-gray-50 border-b border-gray-100 text-xs font-semibold text-gray-500 uppercase tracking-wide">
                <div class="col-span-9">Item / Product Name</div>
                <div class="col-span-2 text-center">Qty</div>
                <div class="col-span-1"></div>
            </div>

            <!-- Item rows -->
            <div id="items-container" class="divide-y divide-gray-50">
                {{-- Pre-populate from session quote cart --}}
                @php $sessionItems = session('quote_items', []); @endphp
                @if(count($sessionItems))
                    @foreach($sessionItems as $si)
                    <div class="item-row grid grid-cols-12 gap-3 px-6 py-3 items-center">
                        <div class="col-span-10 sm:col-span-9">
                            <input type="text" name="items[][name]"
                                   value="{{ $si['name'] }}"
                                   placeholder="e.g. Mikrotik RB750Gr3"
                                   class="w-full border border-gray-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-electric-blue" required>
                        </div>
                        <div class="col-span-2 sm:col-span-2">
                            <input type="number" name="items[][qty]"
                                   value="{{ $si['qty'] }}"
                                   min="1" placeholder="Qty"
                                   class="w-full border border-gray-200 rounded-lg px-3 py-2 text-sm text-center focus:outline-none focus:border-electric-blue" required>
                        </div>
                        <div class="col-span-1 flex justify-center">
                            <button type="button" onclick="removeRow(this)"
                                    class="text-gray-300 hover:text-red-500 transition-colors w-7 h-7 flex items-center justify-center rounded-lg hover:bg-red-50">
                                <i class="fas fa-times text-sm"></i>
                            </button>
                        </div>
                    </div>
                    @endforeach
                @else
                {{-- Default 3 empty rows --}}
                @for($r = 0; $r < 3; $r++)
                <div class="item-row grid grid-cols-12 gap-3 px-6 py-3 items-center">
                    <div class="col-span-10 sm:col-span-9">
                        <input type="text" name="items[][name]"
                               placeholder="e.g. Fiber Optic Cable, CCTV Camera, Router..."
                               class="w-full border border-gray-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-electric-blue"
                               {{ $r === 0 ? 'required' : '' }}>
                    </div>
                    <div class="col-span-2 sm:col-span-2">
                        <input type="number" name="items[][qty]"
                               min="1" placeholder="Qty"
                               class="w-full border border-gray-200 rounded-lg px-3 py-2 text-sm text-center focus:outline-none focus:border-electric-blue"
                               {{ $r === 0 ? 'required' : '' }}>
                    </div>
                    <div class="col-span-1 flex justify-center">
                        <button type="button" onclick="removeRow(this)"
                                class="text-gray-300 hover:text-red-500 transition-colors w-7 h-7 flex items-center justify-center rounded-lg hover:bg-red-50">
                            <i class="fas fa-times text-sm"></i>
                        </button>
                    </div>
                </div>
                @endfor
                @endif
            </div>

            <!-- Add row button -->
            <div class="px-6 py-3 border-t border-gray-50">
                <button type="button" onclick="addRow()"
                        class="flex items-center gap-2 text-electric-blue hover:text-blue-dark text-sm font-semibold transition-colors">
                    <span class="w-6 h-6 bg-blue-50 rounded-full flex items-center justify-center">
                        <i class="fas fa-plus text-xs"></i>
                    </span>
                    Add another item
                </button>
            </div>
        </div>

        <!-- ── Customer Details ──────────────────────────────────────────────── -->
        <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-6 mb-6">
            <h2 class="font-semibold text-navy mb-5 flex items-center gap-2">
                <i class="fas fa-user-tie text-electric-blue text-sm"></i>
                Your Contact Details
            </h2>
            <div class="grid sm:grid-cols-2 gap-4">
                <div>
                    <label class="block text-xs font-semibold text-gray-500 mb-1.5 uppercase tracking-wide">Full Name *</label>
                    <input type="text" name="name" value="{{ old('name') }}" required
                           placeholder="John Kamau"
                           class="w-full border border-gray-200 rounded-xl px-4 py-2.5 text-sm focus:outline-none focus:border-electric-blue transition-colors">
                    @error('name')<p class="text-red-500 text-xs mt-1">{{ $message }}</p>@enderror
                </div>
                <div>
                    <label class="block text-xs font-semibold text-gray-500 mb-1.5 uppercase tracking-wide">Company / Organisation</label>
                    <input type="text" name="company" value="{{ old('company') }}"
                           placeholder="ABC Company Ltd / School / ISP"
                           class="w-full border border-gray-200 rounded-xl px-4 py-2.5 text-sm focus:outline-none focus:border-electric-blue transition-colors">
                </div>
                <div>
                    <label class="block text-xs font-semibold text-gray-500 mb-1.5 uppercase tracking-wide">Phone Number *</label>
                    <input type="tel" name="phone" value="{{ old('phone') }}" required
                           placeholder="0712 345 678"
                           class="w-full border border-gray-200 rounded-xl px-4 py-2.5 text-sm focus:outline-none focus:border-electric-blue transition-colors">
                    @error('phone')<p class="text-red-500 text-xs mt-1">{{ $message }}</p>@enderror
                </div>
                <div>
                    <label class="block text-xs font-semibold text-gray-500 mb-1.5 uppercase tracking-wide">Email Address *</label>
                    <input type="email" name="email" value="{{ old('email') }}" required
                           placeholder="john@company.co.ke"
                           class="w-full border border-gray-200 rounded-xl px-4 py-2.5 text-sm focus:outline-none focus:border-electric-blue transition-colors">
                    @error('email')<p class="text-red-500 text-xs mt-1">{{ $message }}</p>@enderror
                </div>
                <div class="sm:col-span-2">
                    <label class="block text-xs font-semibold text-gray-500 mb-1.5 uppercase tracking-wide">Additional Requirements / Message</label>
                    <textarea name="message" rows="3"
                              placeholder="Delivery location, installation needed, timeline, budget range, any other details..."
                              class="w-full border border-gray-200 rounded-xl px-4 py-2.5 text-sm focus:outline-none focus:border-electric-blue transition-colors resize-none">{{ old('message') }}</textarea>
                </div>
            </div>
        </div>

        <!-- Submit -->
        <div class="flex flex-col sm:flex-row items-center gap-4">
            <button type="submit"
                    class="w-full sm:w-auto flex-1 bg-electric-blue text-white py-4 px-10 rounded-xl font-bold hover:bg-blue-dark transition-colors flex items-center justify-center gap-2 shadow-lg text-base">
                <i class="fas fa-paper-plane"></i>
                Submit Quote Request
            </button>
            <p class="text-xs text-gray-400 text-center sm:text-left">
                <i class="fas fa-clock text-electric-blue mr-1"></i> We respond within 2 business hours<br>
                <i class="fas fa-lock text-electric-blue mr-1"></i> Your information is kept confidential
            </p>
        </div>
    </form>
</div>

<script>
const rowTemplate = `
<div class="item-row grid grid-cols-12 gap-3 px-6 py-3 items-center border-t border-gray-50">
    <div class="col-span-10 sm:col-span-9">
        <input type="text" name="items[][name]" placeholder="Item / product name..."
               class="w-full border border-gray-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-electric-blue">
    </div>
    <div class="col-span-2 sm:col-span-2">
        <input type="number" name="items[][qty]" min="1" placeholder="Qty"
               class="w-full border border-gray-200 rounded-lg px-3 py-2 text-sm text-center focus:outline-none focus:border-electric-blue">
    </div>
    <div class="col-span-1 flex justify-center">
        <button type="button" onclick="removeRow(this)"
                class="text-gray-300 hover:text-red-500 transition-colors w-7 h-7 flex items-center justify-center rounded-lg hover:bg-red-50">
            <i class="fas fa-times text-sm"></i>
        </button>
    </div>
</div>`;

function addRow() {
    const div = document.createElement('div');
    div.innerHTML = rowTemplate.trim();
    document.getElementById('items-container').appendChild(div.firstChild);
    // Focus on the new name input
    div.querySelector('input')?.focus();
}

function removeRow(btn) {
    const rows = document.querySelectorAll('.item-row');
    if (rows.length <= 1) return; // Keep at least 1 row
    btn.closest('.item-row').remove();
}

// On submit — remove empty rows
document.getElementById('quoteForm').addEventListener('submit', function () {
    document.querySelectorAll('.item-row').forEach(row => {
        const name = row.querySelector('input[name="items[][name]"]').value.trim();
        if (!name) row.remove();
    });
});
</script>
@endsection