@extends('admin.layouts.app')
@section('title', 'Upload Regulation Document')

@section('breadcrumbs')
    <a href="{{ route('admin.dashboard') }}" class="breadcrumb-item">Dashboard</a>
    <a href="{{ route('admin.regulation-documents.index') }}" class="breadcrumb-item">Regulation Documents</a>
    <span class="current">Upload</span>
@endsection

@section('content')
<div style="max-width:720px;">
    <h1 class="page-title">Upload Regulation Document</h1>
    <p class="page-subtitle">Upload a PDF (scanned or digital) or Word file. GPT-4o will automatically extract zone rules.</p>

    @if($errors->any())
        <div class="alert alert-danger" style="margin-bottom:16px;">
            <ul style="margin:0;padding-left:20px;">@foreach($errors->all() as $e)<li>{{ $e }}</li>@endforeach</ul>
        </div>
    @endif

    <div class="admin-card" style="padding:28px;">
        <form method="POST" action="{{ route('admin.regulation-documents.store') }}" enctype="multipart/form-data">
            @csrf

            <div class="form-group">
                <label class="form-label">Document Title <span style="color:var(--vsc-red);">*</span></label>
                <input type="text" name="title" class="form-control" value="{{ old('title') }}"
                       placeholder="e.g. Mumbai DCR 2034, Pune Development Plan 2041"
                       required>
                <div class="form-hint">Give a clear name identifying the regulation document and its year.</div>
            </div>

            <div style="display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px;">
                <div class="form-group" style="margin-bottom:0;">
                    <label class="form-label">State</label>
                    <select name="state_id" class="form-control">
                        <option value="">— All States —</option>
                        @foreach($states as $s)
                            <option value="{{ $s->id }}" {{ old('state_id') == $s->id ? 'selected' : '' }}>{{ $s->name }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="form-group" style="margin-bottom:0;">
                    <label class="form-label">City (optional)</label>
                    <select name="city_id" class="form-control">
                        <option value="">— Any City —</option>
                        @foreach($cities as $c)
                            <option value="{{ $c->id }}" {{ old('city_id') == $c->id ? 'selected' : '' }}>{{ $c->name }}</option>
                        @endforeach
                    </select>
                </div>
            </div>

            <div class="form-group">
                <label class="form-label">Document File <span style="color:var(--vsc-red);">*</span></label>
                <div style="border:2px dashed var(--vsc-border);border-radius:8px;padding:32px;text-align:center;cursor:pointer;transition:border-color .2s;"
                     id="drop-zone"
                     ondragover="event.preventDefault();this.style.borderColor='var(--vsc-blue)'"
                     ondragleave="this.style.borderColor='var(--vsc-border)'"
                     ondrop="handleDrop(event)">
                    <i data-lucide="file-up" style="width:32px;height:32px;color:var(--vsc-text-muted);margin-bottom:8px;"></i>
                    <div style="font-size:13px;color:var(--vsc-text-secondary);margin-bottom:8px;">Drag &amp; drop your file here, or</div>
                    <label for="document-input" class="btn btn-secondary" style="cursor:pointer;">Browse File</label>
                    <input type="file" id="document-input" name="document" accept=".pdf,.doc,.docx"
                           style="display:none;" onchange="showFileName(this)">
                    <div id="file-name" style="margin-top:12px;font-size:12px;color:var(--vsc-text-secondary);"></div>
                </div>
                <div class="form-hint">
                    Supported: <strong>PDF</strong> (digital or scanned), <strong>DOC/DOCX</strong> (Word). Max 50 MB.<br>
                    <strong>Scanned PDFs</strong>: GPT-4o Vision will perform OCR automatically.
                </div>
            </div>

            <div style="background:var(--vsc-bg-secondary);border-radius:8px;padding:16px;margin-bottom:24px;">
                <div style="font-size:12px;font-weight:600;color:var(--vsc-yellow);margin-bottom:8px;">
                    <i data-lucide="zap" style="width:12px;height:12px;margin-right:4px;"></i> What happens after upload
                </div>
                <ol style="font-size:12px;color:var(--vsc-text-secondary);margin:0;padding-left:18px;line-height:1.8;">
                    <li>Text is extracted from the document (OCR for scanned files)</li>
                    <li>GPT-4o analyzes the text and extracts all zone rules (FAR, setbacks, floors, permitted uses, etc.)</li>
                    <li>You review the extracted rules and approve or reject them</li>
                    <li>Approved rules are pushed into the Zone Rules database</li>
                </ol>
            </div>

            <div style="display:flex;gap:12px;">
                <button type="submit" class="btn btn-primary">
                    <i data-lucide="upload" style="width:16px;height:16px;margin-right:6px;"></i> Upload &amp; Analyze
                </button>
                <a href="{{ route('admin.regulation-documents.index') }}" class="btn btn-ghost">Cancel</a>
            </div>
        </form>
    </div>
</div>

<script>
function showFileName(input) {
    const name = input.files[0]?.name || '';
    document.getElementById('file-name').textContent = name ? '📄 ' + name : '';
}
function handleDrop(e) {
    e.preventDefault();
    document.getElementById('drop-zone').style.borderColor = 'var(--vsc-border)';
    const files = e.dataTransfer.files;
    if (files.length > 0) {
        const input = document.getElementById('document-input');
        const dt = new DataTransfer();
        dt.items.add(files[0]);
        input.files = dt.files;
        showFileName(input);
    }
}
</script>
@endsection