@extends('layouts.app')

@section('title', 'Import')
@section('container-class', 'ams-container--narrow')

@section('content')
    <x-page-header
        title="Import"
        subtitle="Bring an existing spreadsheet of assets, employees or master data into Aumni AMS.">
        <x-slot:breadcrumbs>
            <li class="breadcrumb-item"><a href="{{ route('imports.index') }}">Imports</a></li>
            <li class="breadcrumb-item active" aria-current="page">Import</li>
        </x-slot:breadcrumbs>
    </x-page-header>

    <div class="d-flex flex-column gap-3">

        <x-panel title="1. What are you importing?">
            {{--
                A plain GET form: choosing an entity reloads this page with
                `?module=...`, which is what keeps the template link and the
                upload form below in sync with the selection — without
                needing any JavaScript to do it.
            --}}
            <form method="GET" action="{{ route('imports.create') }}" class="d-flex flex-wrap align-items-end gap-2">
                <div class="ams-field mb-0" style="min-width: 16rem;">
                    <label for="module" class="form-label">Entity</label>
                    <select name="module" id="module" class="form-select" onchange="this.form.submit()">
                        @foreach ($modules as $key => $label)
                            <option value="{{ $key }}" @selected($key === $selectedModule)>{{ $label }}</option>
                        @endforeach
                    </select>
                </div>
                <noscript>
                    <button type="submit" class="btn btn-outline-secondary">Switch</button>
                </noscript>
            </form>
        </x-panel>

        <x-panel title="2. Download the Template" subtitle="Start from the exact columns the importer expects.">
            <p class="ams-text-xs text-secondary">
                @switch ($selectedModule)
                    @case ('assets')
                        Category, Location and Team are matched by name — use the
                        names already in <a href="{{ route('masters.categories.index') }}">Categories</a>,
                        <a href="{{ route('masters.locations.index') }}">Locations</a> and
                        <a href="{{ route('masters.teams.index') }}">Teams</a>. A subcategory can be
                        written as either its own name or "Parent / Child". Asset Tag is required and is
                        never auto-generated on import — enter the exact tag each asset should have.
                        Specifications (RAM, CPU, Storage, etc.) are optional — write them as
                        "Key: Value" pairs separated by semicolons in one cell, e.g.
                        "RAM: 16GB; CPU: Intel i7; Storage: 512GB SSD".
                        @break
                    @case ('employees')
                        Team and Location are matched by name — use the names already in
                        <a href="{{ route('masters.teams.index') }}">Teams</a> and
                        <a href="{{ route('masters.locations.index') }}">Locations</a>. Employee Code
                        must be unique.
                        @break
                    @case ('teams')
                        Head Employee Code is optional and matched against an existing employee's
                        code under <a href="{{ route('employees.index') }}">Employees</a>. Leave it
                        blank if the team has no head yet.
                        @break
                    @case ('locations')
                        Code is optional but must be unique if given. Address fields are all optional.
                        @break
                    @case ('categories')
                        Parent Category is optional and matched by name against an existing
                        top-level category — categories may only be nested one level deep, so a
                        subcategory cannot itself be used as a parent.
                        @break
                @endswitch
            </p>

            <a href="{{ route('imports.template', ['module' => $selectedModule]) }}" class="btn btn-outline-secondary">
                <i class="bi bi-download" aria-hidden="true"></i>Download {{ $modules[$selectedModule] }} Template (.xlsx)
            </a>
        </x-panel>

        <x-panel title="3. Upload Your File" :subtitle="'Excel (.xlsx) or CSV, up to 10 MB and '.number_format((int) setting('import_max_rows', \App\Services\ImportService::MAX_ROWS)).' rows.'">
            <form method="POST" action="{{ route('imports.store') }}" enctype="multipart/form-data" data-ams-progress="Reading file…">
                @csrf
                <input type="hidden" name="module" value="{{ $selectedModule }}">

                <x-form.file
                    name="file"
                    label="Spreadsheet"
                    accept=".xlsx,.csv"
                    required
                    help="Filled in from the template above. Nothing is imported yet — the next screen shows every row before anything is written." />

                @if ($selectedModule === 'assets')
                    <hr>

                    <div class="ams-fieldset__legend">4. Optional: Asset Documents</div>
                    <p class="ams-fieldset__hint">
                        Attach the invoices for these assets now, matched automatically to
                        each row by its Asset Tag — no separate trip to each asset's
                        Documents section needed. A missing document never stops an asset
                        from being imported; the next screen shows which tags found a
                        match. Name each file after the exact Asset Tag it belongs to,
                        for example <code>AUM-LAP-0001.pdf</code> — matching ignores case
                        and the file extension. Upload either a handful of loose files or,
                        for a large batch, one ZIP:
                    </p>
                    <pre class="ams-text-xs bg-body-secondary rounded p-2 mb-3" style="white-space: pre-wrap;">Aumni Asset Import
├── Bulk Assets.xlsx
└── Asset Documents.zip
      ├── AUM-LAP-0001.pdf
      ├── AUM-LAP-0002.pdf
      └── AUM-MON-0001.pdf</pre>

                    <x-form.file
                        name="documents[]"
                        id="documents"
                        label="Individual Documents"
                        accept=".pdf,.jpg,.jpeg,.png"
                        multiple
                        help="PDF, JPG or PNG, up to 10 MB each." />

                    <x-form.file
                        name="documents_zip"
                        label="Or a ZIP of Documents"
                        accept=".zip"
                        help="Up to 15 MB. Use either this or the individual files above, not both." />
                @endif

                <button type="submit" class="btn btn-primary">
                    <i class="bi bi-upload" aria-hidden="true"></i>Continue to Preview
                </button>
            </form>
        </x-panel>

    </div>
@endsection
