{{-- resources/views/agent/leads/purchase.blade.php --}}
@extends('layouts.contentLayoutMaster')
@section('title', 'Purchase Leads')

@section('content')
    <div class="container py-4">
        {{-- Top: Filter + (optional) Map placeholder --}}
        <div class="card mb-3">
            <div class="card-body">
                <h4 class="mb-3">Filter Leads Prior to Purchase</h4>
                <form method="POST" action="{{ route('agent.leads.cart.add') }}" class="row g-3 align-items-end">
                    @csrf
                    <div class="col-md-3">
                        <label class="form-label">Lead Type</label>
                        <select name="lead_type" class="form-select" required>
                            <option value="life">Life</option>
                            <option value="mortgage_protection">Mortgage Protection</option>
                            <option value="health">Health</option>
                        </select>
                    </div>
                    <div class="col-md-3">
                        <label class="form-label">State</label>
                        <select name="state" class="form-select">
                            <option value="">Any</option>
                            @foreach ($states as $s)
                                <option value="{{ $s }}">{{ $s }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-3">
                        <label class="form-label">County</label>
                        <input type="text" name="county" class="form-control" placeholder="Optional">
                    </div>
                    <div class="col-md-3">
                        <label class="form-label">Lead Age</label>
                        <select name="age_bucket" class="form-select" required>
                            <option value="0_30">0–30 Days (${{ number_format($pricing['0_30'], 2) }})</option>
                            <option value="31_90">31–90 Days (${{ number_format($pricing['31_90'], 2) }})</option>
                            <option value="91_180">91–180 Days (${{ number_format($pricing['91_180'], 2) }})</option>
                            <option value="181_365">180–365 Days (${{ number_format($pricing['181_365'], 2) }})</option>
                        </select>
                    </div>

                    <div class="col-md-3">
                        <label class="form-label">Order Quantity</label>
                        <div class="input-group">
                            <input type="number" name="quantity" class="form-control" min="1" value="10"
                                required>
                            <button class="btn btn-primary" type="submit" title="Add to cart">
                                <i data-feather="shopping-cart"></i>
                            </button>
                        </div>
                    </div>
                </form>
                {{-- Map placeholder (embed later) --}}
                <div class="mt-3 p-3 bg-light rounded">
                    <em>Map preview here (optional)</em>
                </div>
            </div>
        </div>

        {{-- Bottom: Header-style dropdown links (quick selectors) --}}
        <div class="card">
            <div class="card-body d-flex flex-wrap gap-3">
                <div>
                    <span class="fw-bold me-2">Lead Type:</span>
                    <div class="btn-group">
                        <a href="#" class="btn btn-outline-secondary btn-sm">Life</a>
                        <a href="#" class="btn btn-outline-secondary btn-sm">Mortgage Protection</a>
                        <a href="#" class="btn btn-outline-secondary btn-sm">Health</a>
                    </div>
                </div>
                <div>
                    <span class="fw-bold me-2">Lead Age:</span>
                    <div class="btn-group">
                        <span class="btn btn-outline-secondary btn-sm">0–30</span>
                        <span class="btn btn-outline-secondary btn-sm">31–90</span>
                        <span class="btn btn-outline-secondary btn-sm">90–180</span>
                        <span class="btn btn-outline-secondary btn-sm">180–365</span>
                    </div>
                </div>
                <div>
                    <span class="fw-bold me-2">Unit Cost/Lead:</span>
                    <div class="btn-group">
                        <span class="btn btn-outline-secondary btn-sm">$14.00</span>
                        <span class="btn btn-outline-secondary btn-sm">$8.00</span>
                        <span class="btn btn-outline-secondary btn-sm">$5.00</span>
                        <span class="btn btn-outline-secondary btn-sm">$1.25</span>
                    </div>
                </div>
                <div class="ms-auto">
                    <a href="{{ route('agent.leads.cart') }}" class="btn btn-success">
                        View Cart <i data-feather="shopping-cart" class="ms-1"></i>
                    </a>
                </div>
            </div>
        </div>
    </div>
@endsection