@extends('layouts.main')
@section('title', 'New AI Report Analysis')
@section('container')

<style>
    .upload-zone {
        border: 2px dashed #c5cae9;
        border-radius: 10px;
        padding: 22px 18px;
        background: #f8f9ff;
        transition: border-color .2s, background .2s;
        cursor: pointer;
        position: relative;
    }
    .upload-zone:hover, .upload-zone.dragover {
        border-color: var(--primary, #405189);
        background: #eef0ff;
    }
    .upload-zone input[type=file] {
        position: absolute; inset: 0;
        opacity: 0; cursor: pointer; width: 100%; height: 100%;
    }
    .upload-zone .zone-icon { font-size: 28px; color: #8fa0c8; margin-bottom: 6px; }
    .upload-zone .zone-label { font-weight: 600; font-size: 13px; color: #444; margin: 0; }
    .upload-zone .zone-hint  { font-size: 11px; color: #999; margin-top: 2px; }
    .file-selected { background: #e8f5e9; border-color: #43a047; }
    .file-selected .zone-icon { color: #2e7d32; }
    .file-name-tag {
        display: inline-flex; align-items: center; gap: 6px;
        background: #fff; border: 1px solid #c8e6c9; border-radius: 6px;
        padding: 3px 10px; font-size: 12px; color: #2e7d32; margin-top: 6px;
    }
    .step-badge {
        display: inline-flex; align-items: center; justify-content: center;
        width: 24px; height: 24px; border-radius: 50%;
        background: var(--secondary, #222B40); color: #fff;
        font-size: 12px; font-weight: 700; flex-shrink: 0;
    }
    .info-strip {
        background: #f0f4ff;
        border-left: 4px solid var(--primary, #405189);
        border-radius: 0 8px 8px 0;
        padding: 12px 16px;
        font-size: 13px;
    }
</style>

<div class="row justify-content-center">
    <div class="col-lg-12 col-xl-12">

        <div class="card">
            <div class="card-header p-2" style="background:var(--secondary);">
                <h4 class="card-title mb-0" style="color:#fff;">
                    <i class="fa fa-magic me-2"></i>AI Report Builder &mdash; Upload Files
                </h4>
            </div>

            <div class="card-body">

                <div class="info-strip mb-4">
                    <strong>3 files, 3 roles:</strong>
                    <div class="mt-2" style="font-size:12px;line-height:1.8;">
                        <span class="fw-semibold" style="color:#222B40;">&#9312; Input File</span> &mdash;
                        Your raw source data file containing all the actual rows to be processed
                        (e.g. stock audit data, sales export, distributor data).<br>
                        <span class="fw-semibold" style="color:#6a5acd;">&#9313; Expected Output File</span> &mdash;
                        <strong>The Excel file you want the system to generate.</strong>
                        It must contain the final columns, grouping and totals you expect in the report.
                        The AI learns column mapping, grouping rules and calculations <em>from this file</em>.<br>
                        <span class="fw-semibold" style="color:#e65100;">&#9314; Expected Report</span>
                        <em>(Optional)</em> &mdash;
                        A design/layout reference for the final branded report (logo, header rows, merged cells).
                        The AI uses this file <strong>only for formatting</strong> &mdash; not for data mapping.
                        If your Expected Output File is already fully formatted (e.g. HCCB report), upload it here as well.
                    </div>
                </div>

                <form action="{{ route('ai-report-builder.store') }}" method="POST"
                      enctype="multipart/form-data" id="uploadForm">
                    @csrf

                    {{-- Analysis Name --}}
                    <div class="mb-4">
                        <label class="form-label fw-semibold">
                            Analysis Name
                            <span class="text-muted fw-normal small">(optional)</span>
                        </label>
                        <input type="text" name="name"
                               class="form-control @error('name') is-invalid @enderror"
                               placeholder="e.g. Monthly Sales Mapping"
                               value="{{ old('name') }}">
                        @error('name')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    </div>

                    {{-- Step 1: Input File --}}
                    <div class="mb-4">
                        <label class="form-label fw-semibold d-flex align-items-center gap-2">
                            <span class="step-badge">1</span>
                            Input File
                            <span class="text-danger">*</span>
                        </label>
                        <div class="mb-1" style="font-size:12px;color:#555;padding-left:36px;">
                            <i class="fa fa-info-circle text-success me-1"></i>
                            <strong>Your raw source data</strong> &mdash; the file containing all the rows that need to be processed.
                            <span class="text-muted">Example: stock audit export, sales data, distributor inventory file, etc.</span>
                        </div>

                        <div class="upload-zone" id="zone-input">
                            <input type="file" name="input_file" id="input_file" accept=".xlsx,.xls,.csv">
                            <div class="text-center">
                                <div class="zone-icon"><i class="fa fa-file-excel-o"></i></div>
                                <p class="zone-label">Input File &mdash; raw source data with all rows</p>
                                <p class="zone-hint">Excel (.xlsx, .xls) or CSV &mdash; max {{ number_format(config('ai_report_builder.upload.max_size_kb')/1024, 0) }} MB</p>
                            </div>
                            <div id="name-input" class="text-center d-none">
                                <span class="file-name-tag">
                                    <i class="fa fa-check-circle"></i>
                                    <span id="label-input"></span>
                                </span>
                            </div>
                        </div>
                        @error('input_file')
                            <div class="text-danger small mt-1"><i class="fa fa-exclamation-circle me-1"></i>{{ $message }}</div>
                        @enderror
                    </div>

                    {{-- Step 2: Output File --}}
                    <div class="mb-4">
                        <label class="form-label fw-semibold d-flex align-items-center gap-2">
                            <span class="step-badge">2</span>
                            Expected Output File
                            <span class="text-danger">*</span>
                        </label>
                        <div class="mb-1" style="font-size:12px;color:#555;padding-left:36px;">
                            <i class="fa fa-info-circle text-primary me-1"></i>
                            <strong>The Excel file you want the system to generate.</strong>
                            It must contain the actual output columns &mdash; e.g.
                            <em>Product Type, Book Stock, Damaged Stock, Total</em> etc.
                            The AI learns column mapping and grouping rules from this file.<br>
                            <span class="text-muted">
                                Example: a sample "Report Output.xlsx" with grouped rows and totals &mdash;
                                dummy data is fine as long as the structure is correct.
                            </span>
                        </div>

                        <div class="upload-zone" id="zone-output">
                            <input type="file" name="output_file" id="output_file" accept=".xlsx,.xls,.csv">
                            <div class="text-center">
                                <div class="zone-icon" style="color:#6a5acd;"><i class="fa fa-file-excel-o"></i></div>
                                <p class="zone-label">Expected Output File &mdash; final columns + grouped rows + totals</p>
                                <p class="zone-hint">Excel (.xlsx, .xls) or CSV &mdash; max {{ number_format(config('ai_report_builder.upload.max_size_kb')/1024, 0) }} MB</p>
                            </div>
                            <div id="name-output" class="text-center d-none">
                                <span class="file-name-tag" style="border-color:#c5b8ff;color:#6a5acd;">
                                    <i class="fa fa-check-circle"></i>
                                    <span id="label-output"></span>
                                </span>
                            </div>
                        </div>
                        @error('output_file')
                            <div class="text-danger small mt-1"><i class="fa fa-exclamation-circle me-1"></i>{{ $message }}</div>
                        @enderror
                    </div>

                    {{-- Step 3: Report (optional) --}}
                    <div class="mb-4">
                        <label class="form-label fw-semibold d-flex align-items-center gap-2">
                            <span class="step-badge" style="background:#888;">3</span>
                            Expected Report (Design Reference)
                            <span class="badge" style="background:#fff3e0;color:#e65100;font-size:10px;">Optional</span>
                        </label>
                        <div class="mb-1" style="font-size:12px;color:#555;padding-left:36px;">
                            <i class="fa fa-info-circle text-warning me-1"></i>
                            <strong>For design/formatting only</strong> &mdash; company logo, merged header rows, title rows, branded layout.
                            The AI reads this file solely for the <em>visual layout</em> of the final report, not for data mapping.<br>
                            <span class="text-muted">
                                Example: an HCCB branded report where rows 1&ndash;10 are the header section and data starts below.
                                If your Expected Output File is already fully formatted, you can skip this field or upload the same file again.
                            </span>
                        </div>

                        <div class="upload-zone" id="zone-report" style="border-style:dashed;opacity:.85;">
                            <input type="file" name="report_file" id="report_file" accept=".xlsx,.xls,.csv">
                            <div class="text-center">
                                <div class="zone-icon" style="color:#f59e0b;"><i class="fa fa-paint-brush"></i></div>
                                <p class="zone-label">Design Reference &mdash; formatted/branded report (Optional)</p>
                                <p class="zone-hint">Logo, title rows, merged headers &mdash; used for layout only, not data mapping</p>
                            </div>
                            <div id="name-report" class="text-center d-none">
                                <span class="file-name-tag" style="border-color:#ffe0b2;color:#e65100;">
                                    <i class="fa fa-check-circle"></i>
                                    <span id="label-report"></span>
                                </span>
                            </div>
                        </div>
                        @error('report_file')
                            <div class="text-danger small mt-1"><i class="fa fa-exclamation-circle me-1"></i>{{ $message }}</div>
                        @enderror
                    </div>

                    <hr class="my-3">

                    <div class="d-flex justify-content-between align-items-center">
                        <a href="{{ route('ai-report-builder.index') }}" class="btn btn-light">
                            <i class="fa fa-arrow-left me-1"></i> Back
                        </a>
                        <button type="submit" class="btn btn-primary" id="submitBtn">
                            <i class="fa fa-upload me-1"></i> Upload &amp; Start AI Analysis
                        </button>
                    </div>

                </form>
            </div>
        </div>

    </div>
</div>

<script nonce="{{ $cspNonce }}">
$(function () {
    function initZone(inputId, zoneId, nameWrapId, labelId) {
        var $input    = $('#' + inputId);
        var $zone     = $('#' + zoneId);
        var $nameWrap = $('#' + nameWrapId);
        var $label    = $('#' + labelId);

        $input.on('change', function () {
            if (this.files.length) {
                var f    = this.files[0];
                var size = f.size > 1048576
                    ? (f.size / 1048576).toFixed(1) + ' MB'
                    : (f.size / 1024).toFixed(0) + ' KB';
                $label.text(f.name + '  (' + size + ')');
                $nameWrap.removeClass('d-none');
                $zone.addClass('file-selected');
            } else {
                $nameWrap.addClass('d-none');
                $zone.removeClass('file-selected');
            }
        });

        $zone.on('dragover dragenter', function (e) {
            e.preventDefault(); $(this).addClass('dragover');
        }).on('dragleave drop', function () {
            $(this).removeClass('dragover');
        });
    }

    initZone('input_file',  'zone-input',  'name-input',  'label-input');
    initZone('output_file', 'zone-output', 'name-output', 'label-output');
    initZone('report_file', 'zone-report', 'name-report', 'label-report');

    $('#uploadForm').on('submit', function () {
        var $btn = $('#submitBtn');
        $btn.prop('disabled', true)
            .html('<i class="fa fa-spinner fa-spin me-1"></i> Uploading &amp; Analysing&hellip;');
    });
});
</script>
@endsection