@extends('portal.layout')
@section('title', 'Upload PT Survey / Plot Map')

@section('content')
<div style="max-width:680px;margin:0 auto;padding:32px 16px;">

    <div style="text-align:center;margin-bottom:36px;">
        <div style="width:52px;height:52px;background:linear-gradient(135deg,#3b82f6,#8b5cf6);border-radius:14px;display:inline-flex;align-items:center;justify-content:center;margin-bottom:12px;">
            <i data-lucide="scan-line" style="width:26px;height:26px;color:white;"></i>
        </div>
        <h1 style="font-size:22px;font-weight:700;color:#f1f5f9;margin:0 0 8px;">Upload Your Plot Survey</h1>
        <p style="font-size:14px;color:#94a3b8;margin:0;">Our AI will read your PT survey, 7/12 extract, or site plan and automatically extract plot area, dimensions, and land use details.</p>
    </div>

    @if($errors->any())
    <div style="background:rgba(239,68,68,.12);border:1px solid rgba(239,68,68,.3);border-radius:8px;padding:14px;margin-bottom:20px;">
        <ul style="margin:0;padding-left:20px;color:#fca5a5;font-size:13px;">
            @foreach($errors->all() as $e)<li>{{ $e }}</li>@endforeach
        </ul>
    </div>
    @endif

    @if($report)
    <div style="background:rgba(59,130,246,.1);border:1px solid rgba(59,130,246,.3);border-radius:8px;padding:12px 16px;margin-bottom:20px;font-size:13px;color:#93c5fd;">
        <i data-lucide="link" style="width:14px;height:14px;margin-right:4px;"></i>
        This survey will be linked to your feasibility report — <strong>{{ $report->address }}</strong>
    </div>
    @endif

    <div style="background:#1e293b;border-radius:14px;padding:28px;border:1px solid #334155;">
        <form method="POST" action="{{ route('portal.survey.store') }}" enctype="multipart/form-data">
            @csrf
            @if($report)
                <input type="hidden" name="feasibility_report_id" value="{{ $report->id }}">
            @endif

            {{-- File drop zone --}}
            <div style="border:2px dashed #3b5075;border-radius:10px;padding:36px;text-align:center;cursor:pointer;transition:border-color .2s;margin-bottom:20px;"
                 id="drop-zone"
                 ondragover="event.preventDefault();this.style.borderColor='#3b82f6'"
                 ondragleave="this.style.borderColor='#3b5075'"
                 ondrop="handleDrop(event)">
                <i data-lucide="upload-cloud" style="width:36px;height:36px;color:#64748b;margin-bottom:10px;"></i>
                <div style="font-size:14px;color:#94a3b8;margin-bottom:6px;">Drop your survey document here</div>
                <div style="font-size:12px;color:#64748b;margin-bottom:14px;">JPG, PNG, PDF, TIFF • Max 20 MB</div>
                <label for="survey-file" style="background:#3b82f6;color:white;padding:8px 18px;border-radius:6px;cursor:pointer;font-size:13px;">Choose File</label>
                <input type="file" id="survey-file" name="survey_file" accept=".pdf,.jpg,.jpeg,.png,.tiff"
                       style="display:none;" onchange="showFile(this)" required>
                <div id="file-preview" style="margin-top:14px;"></div>
            </div>

            {{-- Supported document types --}}
            <div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px;margin-bottom:20px;">
                @foreach([
                    ['7/12 Extract','Satbara Utara (Maharashtra)','#10b981'],
                    ['Property Card','Mumbai/Urban land records','#3b82f6'],
                    ['PT Survey','Property Title survey map','#8b5cf6'],
                    ['Site Plan','Architect/civil sketch','#f59e0b'],
                    ['Cadastral Map','Village map screenshot','#ec4899'],
                ] as [$type, $desc, $color])
                <div style="background:rgba(255,255,255,.04);border-radius:6px;padding:10px;text-align:center;">
                    <div style="font-size:11px;font-weight:600;color:{{ $color }};margin-bottom:3px;">{{ $type }}</div>
                    <div style="font-size:10px;color:#64748b;">{{ $desc }}</div>
                </div>
                @endforeach
            </div>

            {{-- AI info box --}}
            <div style="background:rgba(139,92,246,.08);border:1px solid rgba(139,92,246,.2);border-radius:8px;padding:14px 16px;margin-bottom:20px;">
                <div style="font-size:12px;font-weight:600;color:#c4b5fd;margin-bottom:8px;">
                    <i data-lucide="sparkles" style="width:12px;height:12px;margin-right:4px;"></i> What GPT-4o extracts
                </div>
                <div style="display:grid;grid-template-columns:1fr 1fr;gap:6px;font-size:11px;color:#94a3b8;">
                    <div>✓ Plot area (auto-converts units)</div>
                    <div>✓ Survey / CTS number</div>
                    <div>✓ Dimensions (L × W)</div>
                    <div>✓ Road frontage</div>
                    <div>✓ Village / Taluka / District</div>
                    <div>✓ Land use classification</div>
                    <div>✓ Ownership type</div>
                    <div>✓ Boundary details</div>
                </div>
            </div>

            <button type="submit" style="width:100%;background:linear-gradient(135deg,#3b82f6,#8b5cf6);color:white;border:none;padding:14px;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;">
                <i data-lucide="cpu" style="width:16px;height:16px;"></i> Upload &amp; Analyze with AI
            </button>
        </form>
    </div>

    <p style="text-align:center;font-size:11px;color:#475569;margin-top:16px;">
        Your document is processed securely and never shared. <a href="{{ route('portal.analyze.form') }}" style="color:#3b82f6;">Skip → enter area manually</a>
    </p>
</div>

<script>
function showFile(input) {
    const f = input.files[0];
    if (!f) return;
    const isImg = f.type.startsWith('image/');
    document.getElementById('file-preview').innerHTML = isImg
        ? `<img src="${URL.createObjectURL(f)}" style="max-height:120px;border-radius:6px;opacity:.7;" /><div style="color:#94a3b8;font-size:12px;margin-top:6px;">${f.name}</div>`
        : `<div style="color:#94a3b8;font-size:13px;">📄 ${f.name} (${(f.size/1024/1024).toFixed(1)} MB)</div>`;
}
function handleDrop(e) {
    e.preventDefault();
    document.getElementById('drop-zone').style.borderColor = '#3b5075';
    const f = e.dataTransfer.files[0];
    if (f) {
        const input = document.getElementById('survey-file');
        const dt = new DataTransfer(); dt.items.add(f); input.files = dt.files;
        showFile(input);
    }
}
</script>
@endsection