@extends('portal.layout')
@section('title', 'Compare Two Plots')

@section('content')
@php
    $old    = $old ?? request()->old();
    $ptLabels = ['residential' => 'Residential', 'commercial' => 'Commercial', 'industrial' => 'Industrial', 'mixed' => 'Mixed Use'];

    function compRow(string $label, $v1, $v2, bool $higherBetter = true): array {
        $winner = null;
        $n1 = is_numeric($v1) ? (float)$v1 : null;
        $n2 = is_numeric($v2) ? (float)$v2 : null;
        if ($n1 !== null && $n2 !== null && $n1 !== $n2) {
            $winner = $higherBetter ? ($n1 > $n2 ? 1 : 2) : ($n1 < $n2 ? 1 : 2);
        }
        return [$label, $v1, $v2, $winner];
    }
@endphp

<div style="max-width:1100px;margin:0 auto;padding:32px 24px;">

    <div style="text-align:center;margin-bottom:36px;">
        <div style="display:inline-flex;align-items:center;gap:6px;background:rgba(167,139,250,.12);border:1px solid rgba(167,139,250,.25);padding:4px 12px;border-radius:20px;font-size:11px;color:#c4b5fd;margin-bottom:14px;letter-spacing:.08em;text-transform:uppercase;">
            Side-by-Side Comparison
        </div>
        <h1 style="font-size:28px;font-weight:700;margin-bottom:8px;">Compare Two Plots</h1>
        <p style="font-size:14px;color:var(--text-secondary);max-width:480px;margin:0 auto;">Enter details for both plots to get a side-by-side feasibility analysis and instantly identify the better opportunity.</p>
    </div>

    @if($errors->any())
    <div class="alert alert-error" style="margin-bottom:24px;">
        @foreach($errors->all() as $e)<div>{{ $e }}</div>@endforeach
    </div>
    @endif

    {{-- Input Form --}}
    <form method="POST" action="{{ route('portal.compare') }}">
        @csrf
        <div style="display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:24px;">

            @foreach([1, 2] as $i)
            @php $color = $i === 1 ? '#60a5fa' : '#a78bfa'; @endphp
            <div class="card" style="padding:20px;border-color:{{ $color }}40;">
                <div style="font-size:13px;font-weight:700;color:{{ $color }};margin-bottom:16px;display:flex;align-items:center;gap:8px;">
                    <span style="width:22px;height:22px;background:{{ $color }};color:#fff;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;">{{ $i }}</span>
                    Plot {{ $i }}
                </div>

                <div style="margin-bottom:12px;">
                    <label class="form-label">Address</label>
                    <input type="text" name="plot{{ $i }}_address" class="form-input"
                        value="{{ $old['plot'.$i.'_address'] ?? request('address'.$i) }}"
                        placeholder="e.g. Bandra West, Mumbai">
                </div>

                <div style="display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px;">
                    <div>
                        <label class="form-label">State</label>
                        <select name="plot{{ $i }}_state_id" class="form-input" id="state{{ $i }}" onchange="loadZones{{ $i }}(this.value)">
                            <option value="">Any</option>
                            @foreach($states as $st)
                            <option value="{{ $st->id }}" {{ ($old['plot'.$i.'_state_id'] ?? request('state'.$i)) == $st->id ? 'selected' : '' }}>{{ $st->name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div>
                        <label class="form-label">Zone</label>
                        <select name="plot{{ $i }}_zone_id" class="form-input" id="zone{{ $i }}">
                            <option value="">Auto-detect</option>
                        </select>
                    </div>
                </div>

                <div style="display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px;">
                    <div>
                        <label class="form-label">Plot Area (sqm) *</label>
                        <input type="number" name="plot{{ $i }}_area_sqm" class="form-input"
                            value="{{ $old['plot'.$i.'_area_sqm'] ?? request('area'.$i) }}"
                            step="0.01" min="10" required placeholder="e.g. 500">
                    </div>
                    <div>
                        <label class="form-label">Road Width (m)</label>
                        <input type="number" name="plot{{ $i }}_road_m" class="form-input"
                            value="{{ $old['plot'.$i.'_road_m'] ?? '' }}"
                            step="0.1" min="0" placeholder="Auto">
                    </div>
                </div>

                <div>
                    <label class="form-label">Project Type</label>
                    <select name="plot{{ $i }}_type" class="form-input">
                        @foreach($ptLabels as $val => $lbl)
                        <option value="{{ $val }}" {{ ($old['plot'.$i.'_type'] ?? 'residential') === $val ? 'selected' : '' }}>{{ $lbl }}</option>
                        @endforeach
                    </select>
                </div>
            </div>
            @endforeach

        </div>

        <div style="text-align:center;">
            <button type="submit" class="btn btn-primary btn-lg" style="padding:14px 40px;">
                ⚖️ Compare Both Plots
            </button>
        </div>
    </form>

    {{-- Results --}}
    @if(isset($plot1) && isset($plot2))
    <div style="margin-top:40px;">
        <div style="font-size:18px;font-weight:700;margin-bottom:20px;text-align:center;">📊 Comparison Results</div>

        {{-- Score Headers --}}
        <div style="display:grid;grid-template-columns:200px 1fr 1fr;gap:2px;margin-bottom:2px;">
            <div></div>
            @foreach([$plot1, $plot2] as $pi => $p)
            @php $res = $p['result']; @endphp
            <div class="card" style="padding:16px;text-align:center;border-color:{{ $pi === 0 ? '#60a5fa' : '#a78bfa' }}40;">
                @if($p['error'])
                <div style="color:var(--red);font-size:13px;">⚠ {{ $p['error'] }}</div>
                @else
                <div style="font-size:36px;font-weight:800;color:{{ ($res['feasibility_score']??0) >= 70 ? 'var(--green)' : (($res['feasibility_score']??0) >= 40 ? 'var(--yellow)' : 'var(--red)') }};">
                    {{ $res['feasibility_score'] ?? '—' }}
                </div>
                <div style="font-size:12px;color:var(--text-secondary);margin-top:2px;">Feasibility Score</div>
                <div style="font-size:13px;font-weight:600;margin-top:4px;">{{ $res['address'] ?? 'Plot '.($pi+1) }}</div>
                @endif
            </div>
            @endforeach
        </div>

        @if(!$plot1['error'] && !$plot2['error'])
        @php
        $r1 = $plot1['result'];
        $r2 = $plot2['result'];
        $c1 = $r1['cost_estimates'] ?? [];
        $c2 = $r2['cost_estimates'] ?? [];

        $rows = [
            ['— PLOT DETAILS —', null, null, null],
            compRow('Plot Area (sqm)',          number_format($r1['plot_area_sqm'] ?? 0), number_format($r2['plot_area_sqm'] ?? 0)),
            compRow('Road Width (m)',            $r1['road_width_m'] ?? '—', $r2['road_width_m'] ?? '—'),

            ['— DEVELOPMENT POTENTIAL —', null, null, null],
            compRow('FAR / FSI',                $r1['max_far'] ?? '—', $r2['max_far'] ?? '—'),
            compRow('Max Buildable Area (sqm)', number_format($r1['max_buildable_area_sqm'] ?? 0), number_format($r2['max_buildable_area_sqm'] ?? 0)),
            compRow('Max Floors',               $r1['max_floors'] ?? '—', $r2['max_floors'] ?? '—'),
            compRow('Max Height (m)',            $r1['max_height_m'] ?? '—', $r2['max_height_m'] ?? '—'),
            compRow('Ground Coverage (sqm)',     number_format($r1['ground_coverage_sqm'] ?? 0), number_format($r2['ground_coverage_sqm'] ?? 0)),
            compRow('Parking Required (ECS)',    $r1['parking_required_ecs'] ?? '—', $r2['parking_required_ecs'] ?? '—', false),

            ['— SETBACKS (m) —', null, null, null],
            ['Front Setback',                   ($r1['front_setback_m'] ?? '—').'m',  ($r2['front_setback_m'] ?? '—').'m',  null],
            ['Side Setback',                    ($r1['side_setback_m'] ?? '—').'m',   ($r2['side_setback_m'] ?? '—').'m',   null],
            ['Rear Setback',                    ($r1['rear_setback_m'] ?? '—').'m',   ($r2['rear_setback_m'] ?? '—').'m',   null],

            ['— COST & ROI ESTIMATES —', null, null, null],
            compRow('Construction Cost (min)',  !empty($c1) ? '₹'.number_format($c1['construction_cost_min_inr']) : '—', !empty($c2) ? '₹'.number_format($c2['construction_cost_min_inr']) : '—', false),
            compRow('Construction Cost (max)',  !empty($c1) ? '₹'.number_format($c1['construction_cost_max_inr']) : '—', !empty($c2) ? '₹'.number_format($c2['construction_cost_max_inr']) : '—', false),
            compRow('Gross Dev. Value',         !empty($c1) ? '₹'.number_format($c1['gross_development_value_inr']) : '—', !empty($c2) ? '₹'.number_format($c2['gross_development_value_inr']) : '—'),
            compRow('Est. Profit',              !empty($c1) ? '₹'.number_format($c1['estimated_profit_inr']) : '—', !empty($c2) ? '₹'.number_format($c2['estimated_profit_inr']) : '—'),
            compRow('ROI %',                   !empty($c1) ? $c1['roi_pct'].'%' : '—', !empty($c2) ? $c2['roi_pct'].'%' : '—'),
            compRow('Monthly Rent Est.',        !empty($c1) ? '₹'.number_format($c1['monthly_rent_estimate_inr']) : '—', !empty($c2) ? '₹'.number_format($c2['monthly_rent_estimate_inr']) : '—'),
            compRow('Break-even (yrs)',         !empty($c1) ? ($c1['breakeven_years'] ?? '—') : '—', !empty($c2) ? ($c2['breakeven_years'] ?? '—') : '—', false),

            ['— ZONE INFO —', null, null, null],
            ['Zone Name',                       $r1['zone_name'] ?? '—',     $r2['zone_name'] ?? '—',     null],
            ['Zone Type',                       $r1['zone_type'] ?? '—',     $r2['zone_type'] ?? '—',     null],
            ['Project Type',                    ucfirst($r1['project_type'] ?? '—'), ucfirst($r2['project_type'] ?? '—'), null],
            ['Regulation',                      $r1['rule_source'] ?? '—',   $r2['rule_source'] ?? '—',   null],
        ];
        @endphp

        <div class="card" style="overflow:hidden;">
            @foreach($rows as [$label, $val1, $val2, $winner])
            @if($val1 === null)
            {{-- Section header --}}
            <div style="display:grid;grid-template-columns:200px 1fr 1fr;gap:0;background:rgba(255,255,255,.04);">
                <div colspan="3" style="grid-column:1/4;padding:10px 16px;font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);">{{ $label }}</div>
            </div>
            @else
            <div style="display:grid;grid-template-columns:200px 1fr 1fr;border-bottom:1px solid rgba(255,255,255,.04);">
                <div style="padding:10px 16px;font-size:12px;color:var(--text-secondary);border-right:1px solid rgba(255,255,255,.04);">{{ $label }}</div>
                @foreach([[$val1, $winner === 1], [$val2, $winner === 2]] as [$val, $isWinner])
                <div style="padding:10px 16px;font-size:13px;font-weight:{{ $isWinner ? '700' : '400' }};color:{{ $isWinner ? '#22c55e' : 'var(--text)' }};border-right:1px solid rgba(255,255,255,.04);display:flex;align-items:center;gap:6px;">
                    {{ $val }}
                    @if($isWinner)<span style="font-size:10px;background:rgba(34,197,94,.15);color:#22c55e;padding:1px 6px;border-radius:3px;">Better</span>@endif
                </div>
                @endforeach
            </div>
            @endif
            @endforeach
        </div>

        {{-- Winner summary --}}
        @php
        $s1 = $r1['feasibility_score'] ?? 0;
        $s2 = $r2['feasibility_score'] ?? 0;
        $winnerIdx = $s1 > $s2 ? 1 : ($s2 > $s1 ? 2 : 0);
        @endphp
        @if($winnerIdx > 0)
        <div class="card" style="margin-top:16px;padding:18px;background:rgba(34,197,94,.06);border-color:rgba(34,197,94,.25);text-align:center;">
            <div style="font-size:16px;font-weight:700;color:#22c55e;margin-bottom:6px;">
                🏆 Plot {{ $winnerIdx }} is the better opportunity
            </div>
            <div style="font-size:13px;color:var(--text-secondary);">
                Score: <strong style="color:#22c55e;">{{ $winnerIdx === 1 ? $s1 : $s2 }}</strong> vs {{ $winnerIdx === 1 ? $s2 : $s1 }}
                @if(!empty($c1) && !empty($c2))
                &nbsp;|&nbsp; ROI: <strong style="color:#22c55e;">{{ $winnerIdx === 1 ? ($c1['roi_pct'] ?? '—') : ($c2['roi_pct'] ?? '—') }}%</strong>
                vs {{ $winnerIdx === 1 ? ($c2['roi_pct'] ?? '—') : ($c1['roi_pct'] ?? '—') }}%
                @endif
            </div>
        </div>
        @endif

        @endif {{-- no errors --}}
    </div>
    @endif
</div>
@endsection

@section('scripts')
<script>
async function loadZones1(stateId) { await _loadZones(stateId, 'zone1'); }
async function loadZones2(stateId) { await _loadZones(stateId, 'zone2'); }
async function _loadZones(stateId, selId) {
    const sel = document.getElementById(selId);
    sel.innerHTML = '<option value="">Loading...</option>';
    if (!stateId) { sel.innerHTML = '<option value="">Auto-detect</option>'; return; }
    const res = await fetch('{{ url('/') }}/ajax/zones/' + stateId);
    const zones = await res.json();
    sel.innerHTML = '<option value="">Auto-detect</option>';
    zones.forEach(z => sel.innerHTML += `<option value="${z.id}">${z.name} (${z.zone_type})</option>`);
}
</script>
@endsection