@php(
    $headerOption = \App\Http\Controllers\Controller::getHeaderOptions(
        $title ?? '',
        $subTitle ?? '',
        isset($filters) ? $filters : [],
        isset($advancedFilters) ? $advancedFilters : []
    )
)
@extends('admin.layouts.layout', $headerOption)
@section('content')
<div class="container-fluid">
    <div class="main_title d-flex justify-content-between align-items-center mb-3">
        <h2>Proposal Generator</h2>
        @if(!empty($leadData))
            <span class="badge bg-info">Lead: {{ $leadData['dba'] ?: ($leadData['first_name'].' '.$leadData['last_name']) }}</span>
        @endif
    </div>

    {{-- Step indicator --}}
    <div class="d-flex gap-3 mb-4 align-items-center">
        @foreach(['Application Type','Merchant Info','Pricing','Review & Generate'] as $i => $label)
            <div class="proposal-step d-flex align-items-center gap-2" id="stepIndicator{{ $i+1 }}">
                <span class="badge rounded-circle {{ $i===0 ? 'bg-success' : 'bg-secondary' }}" style="width:28px;height:28px;line-height:20px;font-size:13px;">{{ $i+1 }}</span>
                <span class="{{ $i===0 ? 'fw-bold' : 'text-muted' }}">{{ $label }}</span>
            </div>
            @if($i < 3) <span class="text-muted">→</span> @endif
        @endforeach
    </div>

    <input type="hidden" id="leadIdInput" value="{{ $leadId ?? '' }}">
    @csrf

    {{-- Step 1: Application Type --}}
    <div id="proposalStep1" class="proposal-step-content">
        <div class="project-box">
            <div class="info-heading align-items-center mb-3">
                <div class="info-heading-text"><h3>Step 1: Application Information</h3></div>
            </div>
            <div class="row">
                <div class="col-md-4">
                    <div class="project-form">
                        <label>Application Type <span class="text-danger">*</span></label>
                        <select class="form-select" id="applicationType" required>
                            <option value="">Choose One</option>
                            @foreach($applicationTypes as $key => $label)
                                <option value="{{ $key }}">{{ $label }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
            </div>
            <div class="mt-3">
                <button type="button" class="green-btn-inner waves-effect" id="btnStep1Next" disabled>Next →</button>
            </div>
        </div>
    </div>

    {{-- Step 2: Merchant Info --}}
    <div id="proposalStep2" class="proposal-step-content" style="display:none;">
        <div class="project-box">
            <div class="info-heading align-items-center mb-3">
                <div class="info-heading-text"><h3>Step 2: Business Information</h3></div>
            </div>
            <div class="row">
                <div class="col-md-6">
                    <div class="project-form">
                        <label>DBA Name <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" id="propDba" value="{{ $leadData['dba'] ?? '' }}" placeholder="DBA Name">
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="project-form">
                        <label>Legal Name</label>
                        <input type="text" class="form-control" id="propLegalName" value="{{ $leadData['legal_name'] ?? '' }}" placeholder="Legal Business Name">
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="project-form">
                        <label>First Name</label>
                        <input type="text" class="form-control" id="propFirstName" value="{{ $leadData['first_name'] ?? '' }}">
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="project-form">
                        <label>Last Name</label>
                        <input type="text" class="form-control" id="propLastName" value="{{ $leadData['last_name'] ?? '' }}">
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="project-form">
                        <label>Email</label>
                        <input type="email" class="form-control" id="propEmail" value="{{ $leadData['email'] ?? '' }}">
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="project-form">
                        <label>Phone</label>
                        <input type="text" class="form-control" id="propPhone" value="{{ $leadData['phone'] ?? '' }}">
                    </div>
                </div>
                <div class="col-md-8">
                    <div class="project-form">
                        <label>Address</label>
                        <input type="text" class="form-control" id="propAddress" value="{{ $leadData['address'] ?? '' }}">
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="project-form">
                        <label>City</label>
                        <input type="text" class="form-control" id="propCity" value="{{ $leadData['city'] ?? '' }}">
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="project-form">
                        <label>State</label>
                        <input type="text" class="form-control" id="propState" value="{{ $leadData['state'] ?? '' }}">
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="project-form">
                        <label>ZIP</label>
                        <input type="text" class="form-control" id="propZip" value="{{ $leadData['zip'] ?? '' }}">
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="project-form">
                        <label>Current Processor</label>
                        <input type="text" class="form-control" id="propProcessor" value="{{ $leadData['processor'] ?? '' }}">
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="project-form">
                        <label>Monthly Volume</label>
                        <input type="text" class="form-control" id="propMonthlyVolume" value="{{ $leadData['monthly_volume'] ?? '' }}">
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="project-form">
                        <label>Average Ticket</label>
                        <input type="text" class="form-control" id="propAvgTicket" value="{{ $leadData['average_ticket'] ?? '' }}">
                    </div>
                </div>
            </div>
            <div class="mt-3 d-flex gap-2">
                <button type="button" class="black-btn-inner waves-effect" id="btnStep2Back">← Back</button>
                <button type="button" class="green-btn-inner waves-effect" id="btnStep2Next">Next →</button>
            </div>
        </div>
    </div>

    {{-- Step 3: Pricing --}}
    <div id="proposalStep3" class="proposal-step-content" style="display:none;">
        <div class="project-box">
            <div class="info-heading align-items-center mb-3">
                <div class="info-heading-text"><h3>Step 3: Pricing / Rate Structure</h3></div>
            </div>
            <div class="row">
                <div class="col-md-4">
                    <div class="project-form">
                        <label>Rate Type</label>
                        <select class="form-select" id="propRateType">
                            <option value="interchange_plus">Interchange Plus</option>
                            <option value="flat_rate">Flat Rate</option>
                            <option value="tiered">Tiered</option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="table-responsive mt-3">
                <table class="table custom-table mb-0" style="max-width:600px;">
                    <thead style="background-color:#16C4C0; color:#fff;">
                        <tr><th>Card Type</th><th>Credit Rate</th><th>Debit Rate</th></tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>Visa / MasterCard</td>
                            <td><input type="text" class="form-control form-control-sm" id="propRateCredit" value="1.70%" placeholder="1.70%"></td>
                            <td><input type="text" class="form-control form-control-sm" id="propRateDebit" value="0.20%" placeholder="0.20%"></td>
                        </tr>
                        <tr>
                            <td>Discover / Amex</td>
                            <td><input type="text" class="form-control form-control-sm" id="propRateDiscCredit" value="1.70%" placeholder="1.70%"></td>
                            <td>—</td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div class="row mt-2">
                <div class="col-md-3">
                    <div class="project-form">
                        <label>Monthly Fee</label>
                        <input type="text" class="form-control" id="propMonthlyFee" value="$0.00">
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="project-form">
                        <label>Per Item Fee</label>
                        <input type="text" class="form-control" id="propPerItemFee" value="$0.10">
                    </div>
                </div>
            </div>
            <div class="mt-3 d-flex gap-2">
                <button type="button" class="black-btn-inner waves-effect" id="btnStep3Back">← Back</button>
                <button type="button" class="green-btn-inner waves-effect" id="btnStep3Next">Review →</button>
            </div>
        </div>
    </div>

    {{-- Step 4: Review & Generate --}}
    <div id="proposalStep4" class="proposal-step-content" style="display:none;">
        <div class="project-box">
            <div class="info-heading align-items-center mb-3">
                <div class="info-heading-text"><h3>Step 4: Review & Generate</h3></div>
            </div>
            <div id="proposalSummary" class="mb-3 p-3 bg-light rounded">
                <!-- filled by JS -->
            </div>
            <div class="project-form">
                <div class="custom-control custom-checkbox project-checkbox">
                    <input class="custom-control-input" type="checkbox" id="propSendEmail">
                    <label class="custom-control-label" for="propSendEmail">Also send proposal by email</label>
                </div>
            </div>
            <div id="proposalEmailTemplateRow" class="mt-2" style="display:none;">
                <div class="row">
                    <div class="col-md-5">
                        <label class="form-label">Proposal Email Template</label>
                        <select class="form-select" id="propEmailTemplateId">
                            <option value="">— Use Default Email —</option>
                            @foreach($proposalEmailTemplates ?? [] as $tpl)
                                <option value="{{ $tpl->id }}">{{ $tpl->template_name }}</option>
                            @endforeach
                        </select>
                        <small class="text-muted">
                            Manage templates at
                            <a href="/admin/manages/email-templates?gr=3" target="_blank">Email Templates → Proposal Emails</a>
                        </small>
                    </div>
                </div>
            </div>
            <div class="mt-3 d-flex gap-2 flex-wrap">
                <button type="button" class="black-btn-inner waves-effect" id="btnStep4Back">← Back</button>
                <button type="button" class="green-btn-inner waves-effect" id="btnGeneratePDF">
                    <i class="bx bx-download me-1"></i> Generate PDF
                </button>
            </div>
            <div id="proposalResult" class="mt-3" style="display:none;"></div>
        </div>
    </div>
</div>
@endsection
@push('page_script')
<script>
(function(){
    'use strict';
    const csrf = document.querySelector('meta[name="csrf-token"]')?.content || '';
    const urls = {
        generate: '{{ route("leads.proposals.generate") }}',
    };
    let currentStep = 1;

    function goToStep(n) {
        document.querySelectorAll('.proposal-step-content').forEach((el, i) => {
            el.style.display = (i + 1 === n) ? 'block' : 'none';
        });
        document.querySelectorAll('.proposal-step').forEach((el, i) => {
            const badge = el.querySelector('.badge');
            const label = el.querySelector('span:last-child');
            if (badge) badge.className = 'badge rounded-circle ' + (i + 1 <= n ? 'bg-success' : 'bg-secondary');
            if (label) label.className = (i + 1 === n ? 'fw-bold' : 'text-muted');
        });
        currentStep = n;
    }

    // Step 1
    document.getElementById('applicationType')?.addEventListener('change', function(){
        document.getElementById('btnStep1Next').disabled = !this.value;
    });
    document.getElementById('btnStep1Next')?.addEventListener('click', () => goToStep(2));

    // Step 2
    document.getElementById('btnStep2Back')?.addEventListener('click', () => goToStep(1));
    document.getElementById('btnStep2Next')?.addEventListener('click', () => {
        if (!document.getElementById('propDba').value.trim()) {
            alert('Please enter the DBA Name.');
            return;
        }
        goToStep(3);
    });

    // Step 3
    document.getElementById('btnStep3Back')?.addEventListener('click', () => goToStep(2));
    document.getElementById('btnStep3Next')?.addEventListener('click', () => {
        buildSummary();
        goToStep(4);
    });

    // Step 4
    document.getElementById('btnStep4Back')?.addEventListener('click', () => goToStep(3));
    document.getElementById('propSendEmail')?.addEventListener('change', function(){
        const row = document.getElementById('proposalEmailTemplateRow');
        if (row) row.style.display = this.checked ? 'block' : 'none';
    });

    function buildSummary() {
        const s = document.getElementById('proposalSummary');
        if (!s) return;
        s.innerHTML = `
            <h5>Proposal Summary</h5>
            <div class="row">
                <div class="col-md-6">
                    <p><strong>Application Type:</strong> ${document.getElementById('applicationType')?.selectedOptions[0]?.text || ''}</p>
                    <p><strong>DBA:</strong> ${val('propDba')}</p>
                    <p><strong>Contact:</strong> ${val('propFirstName')} ${val('propLastName')}</p>
                    <p><strong>Email:</strong> ${val('propEmail')}</p>
                    <p><strong>Phone:</strong> ${val('propPhone')}</p>
                </div>
                <div class="col-md-6">
                    <p><strong>Monthly Volume:</strong> ${val('propMonthlyVolume')}</p>
                    <p><strong>Average Ticket:</strong> ${val('propAvgTicket')}</p>
                    <p><strong>Credit Rate:</strong> ${val('propRateCredit')}</p>
                    <p><strong>Debit Rate:</strong> ${val('propRateDebit')}</p>
                    <p><strong>Monthly Fee:</strong> ${val('propMonthlyFee')}</p>
                </div>
            </div>`;
    }

    function val(id) { return document.getElementById(id)?.value || '—'; }

    document.getElementById('btnGeneratePDF')?.addEventListener('click', function() {
        this.disabled = true;
        this.textContent = 'Generating...';

        const data = {
            lead_id:           document.getElementById('leadIdInput')?.value || null,
            application_type:  document.getElementById('applicationType')?.value,
            dba:               val('propDba'),
            legal_name:        val('propLegalName'),
            first_name:        val('propFirstName'),
            last_name:         val('propLastName'),
            email:             val('propEmail'),
            phone:             val('propPhone'),
            address:           val('propAddress'),
            city:              val('propCity'),
            state:             val('propState'),
            zip:               val('propZip'),
            processor:         val('propProcessor'),
            monthly_volume:    val('propMonthlyVolume'),
            average_ticket:    val('propAvgTicket'),
            rate_credit:       val('propRateCredit'),
            rate_debit:        val('propRateDebit'),
            rate_disc_credit:  val('propRateDiscCredit'),
            monthly_fee:       val('propMonthlyFee'),
            per_item_fee:      val('propPerItemFee'),
            send_email:        document.getElementById('propSendEmail')?.checked ? 1 : 0,
            email_template_id: document.getElementById('propEmailTemplateId')?.value || null,
            _token:            csrf,
        };

        fetch(urls.generate, {
            method: 'POST',
            headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': csrf, 'Accept': 'application/json' },
            body: JSON.stringify(data),
        })
        .then(r => r.json())
        .then(resp => {
            const resultEl = document.getElementById('proposalResult');
            resultEl.style.display = 'block';
            if (resp.status === 200) {
                resultEl.className = 'alert alert-success';
                resultEl.innerHTML = `Proposal generated! <a href="${resp.data?.download_url}" class="green-btn-inner waves-effect btn-sm ms-2" target="_blank"><i class="bx bx-download"></i> Download PDF</a>`;
            } else {
                resultEl.className = 'alert alert-danger';
                resultEl.textContent = resp.message || 'Generation failed.';
            }
        })
        .catch(() => {
            document.getElementById('proposalResult').className = 'alert alert-danger';
            document.getElementById('proposalResult').textContent = 'Request failed.';
            document.getElementById('proposalResult').style.display = 'block';
        })
        .finally(() => {
            const btn = document.getElementById('btnGeneratePDF');
            btn.disabled = false;
            btn.innerHTML = '<i class="bx bx-download me-1"></i> Generate PDF';
        });
    });
})();
</script>
@endpush