@extends('web.signup.layout')

@section('title', __('web.startup_initial_dd.title'))
@section('page_title', __('web.startup_initial_dd.start.hero_title'))
@section('page_subtitle', '')
@section('body_class', 'has-sticky-logo')

@push('styles')
<style>
    .sdd-upload-card {
        background: #fff;
        border: 1px solid var(--slate-200);
        border-radius: 18px;
        box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 12px 32px -16px rgba(15,23,42,.12);
        padding: 28px;
    }
    @media (max-width: 640px) { .sdd-upload-card { padding: 22px; border-radius: 14px; } }

    .sdd-startup-strip {
        display: flex; align-items: center; gap: 12px;
        padding: 12px 14px;
        background: var(--primary-50);
        border: 1px solid var(--primary-100);
        border-radius: 12px;
        margin-bottom: 22px;
        font-size: 13px;
    }
    .sdd-startup-strip__avatar {
        width: 38px; height: 38px;
        display: inline-flex; align-items: center; justify-content: center;
        background: #fff; border: 1px solid var(--primary-100);
        border-radius: 10px; color: var(--primary-600);
    }
    .sdd-startup-strip__body { flex: 1 1 auto; min-width: 0; }
    .sdd-startup-strip__name { font-weight: 700; color: var(--slate-800); }
    .sdd-startup-strip__sub  { color: var(--slate-500); font-size: 12px; margin-top: 2px; }
    .sdd-startup-strip form  { margin: 0; }
    .sdd-startup-strip button {
        background: transparent; border: 0; color: var(--slate-500);
        font: inherit; font-size: 12px; cursor: pointer;
    }
    .sdd-startup-strip button:hover { color: var(--error-600); }

    /* Category grouping — each section gathers all uploads under one
       business heading so the form mirrors how the admin show page will
       eventually display the same files. */
    .sdd-category {
        margin-top: 22px;
        padding-top: 22px;
        border-top: 1px dashed var(--slate-200);
    }
    .sdd-category:first-of-type { margin-top: 4px; padding-top: 0; border-top: 0; }
    .sdd-category__title {
        font-size: 14px; font-weight: 800; color: var(--slate-900);
        margin: 0 0 14px;
        display: inline-flex; align-items: center; gap: 8px;
    }
    .sdd-category__title span.cnt {
        display: inline-flex; align-items: center;
        padding: 2px 8px; background: var(--slate-100); color: var(--slate-700);
        border-radius: 999px; font-size: 11px; font-weight: 700;
    }

    .sdd-doc {
        background: #fafbff;
        border: 1px solid var(--slate-200);
        border-radius: 12px;
        padding: 14px;
        margin-bottom: 12px;
    }
    .sdd-doc__head {
        display: flex; align-items: baseline; gap: 8px;
        margin-bottom: 8px;
    }
    .sdd-doc__title { font-weight: 700; color: var(--slate-800); font-size: 14px; }
    .sdd-doc__required { color: var(--error-500); font-weight: 700; }
    .sdd-doc__optional { font-size: 12px; color: var(--slate-500); font-weight: 500; }

    .sdd-doc__drop {
        display: flex; flex-direction: column; align-items: center; gap: 8px;
        padding: 18px;
        border: 1.5px dashed var(--slate-300); border-radius: 10px;
        background: #fff;
        text-align: center; color: var(--slate-500); font-size: 13px;
        cursor: pointer;
        transition: border-color .12s, background-color .12s;
    }
    .sdd-doc__drop:hover { border-color: var(--primary-300); background: var(--primary-50); }
    .sdd-doc__drop input[type="file"] { display: none; }
    .sdd-doc__drop svg { width: 22px; height: 22px; color: var(--primary-500); }
    .sdd-doc__drop strong { color: var(--slate-700); font-weight: 700; }
    .sdd-doc__drop small { color: var(--slate-400); font-size: 11.5px; }

    .sdd-doc__queue {
        list-style: none; padding: 0; margin: 10px 0 0;
        display: grid; gap: 6px;
    }
    .sdd-doc__queue li {
        display: flex; align-items: center; gap: 8px;
        padding: 8px 10px;
        background: #fff;
        border: 1px solid var(--slate-200);
        border-radius: 8px;
        font-size: 12.5px;
    }
    .sdd-doc__queue .name { flex: 1 1 auto; min-width: 0; color: var(--slate-700); word-break: break-word; }
    .sdd-doc__queue .size { color: var(--slate-400); font-size: 11.5px; }
    .sdd-doc__queue button {
        background: 0; border: 0; color: var(--slate-400); cursor: pointer; padding: 2px;
    }
    .sdd-doc__queue button:hover { color: var(--error-600); }

    .sdd-doc__existing {
        margin-top: 10px;
        border-top: 1px solid var(--slate-100);
        padding-top: 10px;
    }
    .sdd-doc__existing-title { font-size: 11px; font-weight: 700; color: var(--slate-500); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 6px; }
    .sdd-doc__existing-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
    .sdd-doc__existing-list li {
        display: flex; align-items: center; gap: 8px;
        font-size: 12.5px; color: var(--slate-600);
        padding: 6px 8px; background: #f8fafc; border-radius: 6px;
    }
    .sdd-doc__existing-list svg { color: var(--success-600); width: 14px; height: 14px; }

    .sdd-submit-row {
        margin-top: 24px;
        padding-top: 22px;
        border-top: 1px solid var(--slate-100);
        display: flex; gap: 10px; flex-wrap: wrap;
    }
    .sdd-submit-row .sdd-submit { flex: 1 1 200px; }
    .sdd-submit {
        padding: 14px 22px;
        background: var(--primary-600); color: #fff; border: 0; border-radius: 11px;
        font: inherit; font-size: 15px; font-weight: 800; cursor: pointer;
        box-shadow: 0 1px 2px rgba(79,70,229,.2), 0 10px 22px -8px rgba(79,70,229,.4);
        transition: all .15s;
        display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    }
    .sdd-submit:disabled { opacity: .55; cursor: not-allowed; box-shadow: none; }

    .sdd-error-list {
        background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c;
        border-radius: 10px; padding: 12px 14px; margin-bottom: 16px;
        font-size: 13px;
    }
    .sdd-error-list ul { margin: 4px 0 0 18px; padding: 0; }

    /* Failed document field — red border + inline, per-field message so the
       startup sees exactly which document to fix while the accepted ones
       stay saved and visible. */
    .sdd-doc--error {
        border-color: #f87171;
        background: #fef2f2;
        box-shadow: 0 0 0 3px rgba(248,113,113,.12);
    }
    .sdd-doc__error {
        margin-top: 10px;
        display: flex; align-items: flex-start; gap: 8px;
        color: #b91c1c; font-size: 12.5px; font-weight: 600;
    }
    .sdd-doc__error svg { width: 16px; height: 16px; flex: none; margin-top: 1px; }
    .sdd-doc__error ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; }

    .sdd-flash {
        background: #ecfdf5; border: 1px solid #a7f3d0; color: #065f46;
        border-radius: 10px; padding: 12px 14px; margin-bottom: 16px;
        font-size: 13px; font-weight: 600;
    }
</style>
@endpush

@section('content')
<div class="sdd-upload-card"
     x-data="ddUploadForm({
        types: @js(collect($documentTypes)->map(fn ($spec, $type) => [
            'type'      => $type,
            'label'     => __($spec['label_key']),
            'category'  => $spec['category'],
            'required'  => $spec['required'],
            'accept'    => $spec['accept'],
            // A required field already satisfied by a previously-accepted
            // upload is no longer "missing" — lets partial resubmits through.
            'existing'  => $existingByType->get($type, collect())->isNotEmpty(),
        ])->values()->all()),
        requiredMsg: @js(__('web.startup_initial_dd.upload.required_missing')),
     })"
     x-cloak>

    {{-- Identity strip + sign-out --}}
    <div class="sdd-startup-strip">
        <span class="sdd-startup-strip__avatar" aria-hidden="true">
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <path d="M3 21h18M5 21V7l8-4 8 4v14M9 21V11h6v10"/>
            </svg>
        </span>
        <div class="sdd-startup-strip__body">
            <div class="sdd-startup-strip__name">{{ $startup->display_name ?: $startup->name_en }}</div>
            <div class="sdd-startup-strip__sub">{{ __('web.startup_initial_dd.upload.identity_subtitle') }}</div>
        </div>
        {{-- Relative URL keeps the form same-origin with the page even
             when the user is hitting a different host than APP_URL
             (e.g. local-network test from a phone). Same-origin submits
             skip iOS Safari's "not secure" cross-origin warning. --}}
        <form method="POST" action="{{ route('startup-initial-dd.logout', [], false) }}">
            @csrf
            <button type="submit">{{ __('web.startup_initial_dd.upload.logout') }}</button>
        </form>
    </div>

    @if (session('flash'))
        <div class="sdd-flash">{{ session('flash')['message'] ?? '' }}</div>
    @endif

    @if ($errors->any())
        <div class="sdd-error-list">
            <strong>{{ __('web.startup_initial_dd.upload.errors_heading') }}</strong>
            <ul>
                @foreach ($errors->all() as $err)
                    <li>{{ $err }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    {{-- Per-field upload errors from the last submit. The accepted documents
         were already saved (they show under "Already on file"); only the
         highlighted fields below need fixing + resubmitting. --}}
    @php $ddFieldErrors = session('dd_field_errors', []); @endphp
    @if (! empty($ddFieldErrors))
        <div class="sdd-error-list">
            <strong>{{ __('web.startup_initial_dd.upload.errors_heading') }}</strong>
            <ul>
                @foreach ($ddFieldErrors as $msgs)
                    @foreach ($msgs as $err)
                        <li>{{ $err }}</li>
                    @endforeach
                @endforeach
            </ul>
        </div>
    @endif

    {{-- Client-side required-field gate (mirrors the server rules). --}}
    <div class="sdd-error-list" x-show="frontErrors.length > 0" x-cloak>
        <strong>{{ __('web.startup_initial_dd.upload.errors_heading') }}</strong>
        <ul>
            <template x-for="msg in frontErrors" :key="msg">
                <li x-text="msg"></li>
            </template>
        </ul>
    </div>

    <form method="POST" action="{{ route('startup-initial-dd.upload', [], false) }}" enctype="multipart/form-data" @submit="onSubmit($event)">
        @csrf

        @php
            /* Group document types by category for the visual section
               headings. The Alpine `ddUploadForm` factory keeps the same
               order so the queue + the rendered DOM stay aligned. */
            $byCategory = collect($documentTypes)
                ->map(fn ($spec, $type) => ['type' => $type] + $spec)
                ->groupBy('category');
            $categoryLabels = [
                \App\Models\File::DD_CATEGORY_LEGAL     => __('web.startup_initial_dd.upload.category.legal_documents'),
                \App\Models\File::DD_CATEGORY_FINANCIAL => __('web.startup_initial_dd.upload.category.financial_documents'),
                \App\Models\File::DD_CATEGORY_OTHER     => __('web.startup_initial_dd.upload.category.other'),
            ];
        @endphp

        @foreach ($byCategory as $catKey => $items)
            <section class="sdd-category">
                <h3 class="sdd-category__title">
                    {{ $categoryLabels[$catKey] ?? $catKey }}
                    <span class="cnt">{{ $items->count() }}</span>
                </h3>

                @foreach ($items as $item)
                    @php
                        $type      = $item['type'];
                        $required  = (bool) $item['required'];
                        $label     = __($item['label_key']);
                        $existing  = $existingByType->get($type, collect());
                        $fieldErrs = $ddFieldErrors[$type] ?? [];
                    @endphp
                    <div class="sdd-doc {{ ! empty($fieldErrs) ? 'sdd-doc--error' : '' }}" x-data="{ inputId: 'sdd-file-' + Math.random().toString(36).slice(2, 8) }">
                        <div class="sdd-doc__head">
                            <span class="sdd-doc__title">{{ $label }}</span>
                            @if ($required)
                                <span class="sdd-doc__required" aria-label="{{ __('web.startup_initial_dd.upload.doc.required_mark') }}">*</span>
                            @else
                                <span class="sdd-doc__optional">{{ __('web.startup_initial_dd.upload.doc.optional_label') }}</span>
                            @endif
                        </div>

                        <label class="sdd-doc__drop" :for="inputId">
                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
                                <polyline points="17 8 12 3 7 8"/>
                                <line x1="12" y1="3" x2="12" y2="15"/>
                            </svg>
                            <strong>{{ __('web.startup_initial_dd.upload.doc.drop_title') }}</strong>
                            <small>{{ __('web.startup_initial_dd.upload.doc.drop_hint') }}</small>
                            <input type="file"
                                   :id="inputId"
                                   name="{{ $type }}[]"
                                   multiple
                                   accept="{{ $item['accept'] }}"
                                   @change="onPick($event, '{{ $type }}')">
                        </label>

                        {{-- Per-field validation error (kept open so the user
                             fixes exactly this document without losing others). --}}
                        @if (! empty($fieldErrs))
                            <div class="sdd-doc__error">
                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                    <circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/>
                                </svg>
                                <ul>
                                    @foreach ($fieldErrs as $err)
                                        <li>{{ $err }}</li>
                                    @endforeach
                                </ul>
                            </div>
                        @endif

                        {{-- Queue: files just picked, not yet submitted. --}}
                        <ul class="sdd-doc__queue" x-show="(queues['{{ $type }}'] || []).length > 0" x-cloak>
                            <template x-for="(f, i) in (queues['{{ $type }}'] || [])" :key="f.name + i">
                                <li>
                                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="color:var(--primary-500);">
                                        <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
                                        <polyline points="14 2 14 8 20 8"/>
                                    </svg>
                                    <span class="name" x-text="f.name"></span>
                                    <span class="size" x-text="humanSize(f.size)"></span>
                                    {{-- Remove button: we can't mutate a FileList directly,
                                         so the form drops the input/rewires it below. --}}
                                    <button type="button" @click="remove('{{ $type }}', i, inputId)" aria-label="{{ __('web.startup_initial_dd.upload.doc.remove_aria') }}">×</button>
                                </li>
                            </template>
                        </ul>

                        {{-- Already on file (read-only view) --}}
                        @if ($existing->isNotEmpty())
                            <div class="sdd-doc__existing">
                                <div class="sdd-doc__existing-title">{{ __('web.startup_initial_dd.upload.doc.existing_title') }}</div>
                                <ul class="sdd-doc__existing-list">
                                    @foreach ($existing as $f)
                                        <li>
                                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
                                                <polyline points="20 6 9 17 4 12"/>
                                            </svg>
                                            <span>{{ $f->file_name }}</span>
                                        </li>
                                    @endforeach
                                </ul>
                            </div>
                        @endif
                    </div>
                @endforeach
            </section>
        @endforeach

        <div class="sdd-submit-row">
            <button type="submit" class="sdd-submit">
                <span>{{ __('web.startup_initial_dd.upload.submit') }}</span>
            </button>
        </div>
    </form>
</div>
@endsection

@push('scripts')
<script>
document.addEventListener('alpine:init', () => {
    Alpine.data('ddUploadForm', (cfg) => ({
        types: Array.isArray(cfg.types) ? cfg.types : [],
        requiredMsg: cfg.requiredMsg || 'This field is required.',
        // For each doc type we keep a parallel JS array of File objects
        // that mirrors what's in the corresponding <input type="file">.
        // This drives the visual queue + lets us "remove" a queued file
        // (FileList itself is immutable — we rebuild a DataTransfer).
        queues: {},
        // Client-side required-field errors, surfaced above the form.
        frontErrors: [],

        init() {
            this.types.forEach(t => { this.queues[t.type] = []; });
        },

        /**
         * Front-end required gate — mirrors the server rules (every field
         * except MISA is required + min:1). Blocks submit and lists the
         * missing fields if any required type has an empty queue. The
         * server still re-validates, so this is purely a faster UX.
         */
        onSubmit(event) {
            const missing = this.types
                .filter(t => t.required && !t.existing && (this.queues[t.type] || []).length === 0)
                .map(t => this.requiredMsg.replace(':field', t.label));
            if (missing.length > 0) {
                event.preventDefault();
                this.frontErrors = missing;
                window.scrollTo({ top: 0, behavior: 'smooth' });
                return;
            }
            this.frontErrors = [];
        },

        onPick(event, type) {
            const files = Array.from(event.target.files || []);
            // APPEND so picking files in two passes accumulates rather
            // than replacing. We rebuild the FileList from the JS array.
            this.queues[type] = (this.queues[type] || []).concat(files);
            this.rewireInput(event.target, this.queues[type]);
        },

        remove(type, idx, inputId) {
            this.queues[type] = (this.queues[type] || []).filter((_, i) => i !== idx);
            const input = document.getElementById(inputId);
            if (input) this.rewireInput(input, this.queues[type]);
        },

        /**
         * FileList is immutable. To support the "queue + remove" UX we
         * build a fresh DataTransfer with the current JS array of File
         * objects and assign its `.files` back to the input — supported
         * in every modern browser.
         */
        rewireInput(input, files) {
            const dt = new DataTransfer();
            (files || []).forEach(f => dt.items.add(f));
            input.files = dt.files;
        },

        humanSize(bytes) {
            const b = parseInt(bytes, 10) || 0;
            if (b < 1024) return b + ' B';
            if (b < 1024 * 1024) return (b / 1024).toFixed(1) + ' KB';
            return (b / (1024 * 1024)).toFixed(1) + ' MB';
        },
    }));
});
</script>
@endpush