@extends('admin.layouts.app')

@section('title', __('admin.investment_create.title').' — '.__('admin.brand.name'))
@section('page_title', __('admin.investment_create.page_title'))

@push('styles')
<link rel="stylesheet" href="{{ asset('css/admin-investment-create.css') }}">
@endpush

@section('content')
@php
    $locale = app()->getLocale();
    $optionName = static fn ($option): string => (string) ($locale === 'ar'
        ? ($option?->name_ar ?: $option?->name_en ?: $option?->value)
        : ($option?->name_en ?: $option?->name_ar ?: $option?->value));
    $participantRows = old('participants');
    if (!is_array($participantRows) || $participantRows === []) {
        $participantRows = [[
            'investor_id' => $selectedInvestorId,
            'amount_sar' => '',
            'equity_percentage' => '',
            'notes' => '',
        ]];
    }
    $selectedApplication = $applications->firstWhere(
        'id',
        (int) old('startup_application_id', $selectedApplicationId),
    );
    $selectedStartupId = (int) old('startup_id', $selectedApplication?->startup_id);
    $startupOptions = $applications
        ->map(fn ($application) => $application->startup)
        ->filter()
        ->unique('id')
        ->sortBy(fn ($startup) => $startup->display_name)
        ->values();
    $applicationPickerData = $applications->map(fn ($application) => [
        'id' => (int) $application->id,
        'startup_id' => (int) $application->startup_id,
        'label' => __('admin.startup_360.application_number', ['number' => $application->round_number])
            .' · '.$optionName($application->investmentStage)
            .' · '.$optionName($application->statusOption),
    ])->values();
@endphp
<main class="investment-create">
    <a class="investment-create__back" href="{{ route('admin.investments.index') }}">← {{ __('admin.investment_create.back') }}</a>

    <header class="investment-create__hero">
        <div class="investment-create__hero-icon" aria-hidden="true">↗</div>
        <div>
            <span class="investment-create__eyebrow">{{ __('admin.investment_create.eyebrow') }}</span>
            <h1>{{ __('admin.investment_create.title') }}</h1>
            <p>{{ __('admin.investment_create.multi_subtitle') }}</p>
        </div>
        <div class="investment-create__steps" aria-label="{{ __('admin.investment_create.flow') }}">
            <span><b>1</b>{{ __('admin.investment_create.step_application') }}</span><i>→</i>
            <span><b>2</b>{{ __('admin.investment_create.step_terms') }}</span><i>→</i>
            <span><b>3</b>{{ __('admin.investment_create.step_investor') }}</span>
        </div>
    </header>

    @if ($errors->any())
        <div class="investment-create__alert investment-create__alert--danger" role="alert">
            <strong>{{ __('admin.investment_create.validation_title') }}</strong>
            <ul>@foreach($errors->all() as $error)<li>{{ $error }}</li>@endforeach</ul>
        </div>
    @endif
    @if ($requestedInvestorUnavailable)
        <div class="investment-create__alert" role="status">
            <strong>{{ $requestedInvestorUnavailable->display_name }}</strong>
            {{ __('admin.investment_create.investor_ineligible') }}
        </div>
    @endif

    @if ($applications->isEmpty())
        <section class="investment-create__empty">
            <span aria-hidden="true">◇</span>
            <h2>{{ __('admin.investment_create.no_applications_title') }}</h2>
            <p>{{ __('admin.investment_create.no_applications_help') }}</p>
            <a href="{{ route('admin.startup-applications.index') }}">{{ __('admin.investment_create.review_applications') }}</a>
        </section>
    @else
        <form class="investment-create__form" method="POST" enctype="multipart/form-data" action="{{ route('admin.investments.store') }}" data-investment-create-form>
            @csrf
            <section class="investment-create__card">
                <div class="investment-create__card-head">
                    <span class="investment-create__number">01</span>
                    <div><h2>{{ __('admin.investment_create.application_title') }}</h2><p>{{ __('admin.investment_create.application_help') }}</p></div>
                </div>
                <div class="investment-create__grid investment-create__grid--application">
                    <label class="investment-create__field">
                        <span>{{ __('admin.nav.startups') }}</span>
                        <select data-startup-picker data-search-select data-placeholder="{{ __('admin.investment_create.choose_startup') }}">
                            <option value=""></option>
                            @foreach($startupOptions as $startup)
                                <option value="{{ $startup->id }}" @selected($selectedStartupId === (int) $startup->id)>{{ $startup->display_name }}</option>
                            @endforeach
                        </select>
                        <small>{{ __('admin.investment_create.eligibility_help') }}</small>
                    </label>
                    <label class="investment-create__field">
                        <span>{{ __('admin.investment_create.application') }}</span>
                        <select name="startup_application_id" required data-application-picker data-search-select data-placeholder="{{ __('admin.investment_create.choose_application') }}">
                            <option value=""></option>
                        </select>
                        <small>{{ __('admin.investment_create.application_help') }}</small>
                    </label>
                </div>
            </section>

            <section class="investment-create__card">
                <div class="investment-create__card-head">
                    <span class="investment-create__number">02</span>
                    <div><h2>{{ __('admin.investment_create.terms_title') }}</h2><p>{{ __('admin.investment_create.terms_help') }}</p></div>
                </div>
                <div class="investment-create__grid investment-create__grid--terms">
                    <label class="investment-create__field">
                        <span>{{ __('admin.investments_index.fields.type') }}</span>
                        <select name="investment_type_option_id" required>
                            <option value="">{{ __('admin.investment_create.choose_type') }}</option>
                            @foreach($investmentTypes as $type)<option value="{{ $type->id }}" @selected((string)old('investment_type_option_id') === (string)$type->id)>{{ $optionName($type) }}</option>@endforeach
                        </select>
                    </label>
                    <label class="investment-create__field"><span>{{ __('admin.investments_index.fields.start_date') }}</span><input type="date" name="start_date" value="{{ old('start_date') }}" required></label>
                    <label class="investment-create__field"><span>{{ __('admin.investments_index.fields.completion_date') }}</span><input type="date" name="completion_date" value="{{ old('completion_date') }}" required></label>
                </div>
            </section>

            <section class="investment-create__card">
                <div class="investment-create__card-head investment-create__card-head--participants">
                    <span class="investment-create__number">03</span>
                    <div><h2>{{ __('admin.investment_create.multi_investor_title') }}</h2><p>{{ __('admin.investment_create.multi_investor_help') }}</p></div>
                    <button type="button" class="investment-create__add" data-add-participant>+ {{ __('admin.investment_create.add_participant') }}</button>
                </div>
                <div class="investment-create__participants" data-participants>
                    @foreach($participantRows as $index => $participant)
                        @include('admin.investments.partials.participant-fields', compact('index', 'participant', 'investors'))
                    @endforeach
                </div>
                <div class="investment-create__summary" aria-live="polite">
                    <div><span>{{ __('admin.investment_create.participants_count') }}</span><strong data-participant-count>1</strong></div>
                    <div><span>{{ __('admin.investment_create.total_amount') }}</span><strong><b data-total-amount>0.00</b> {{ __('admin.startup_360.sar') }}</strong></div>
                    <div><span>{{ __('admin.investment_create.total_equity') }}</span><strong><b data-total-equity>0.0000</b>%</strong></div>
                </div>
            </section>

            <footer class="investment-create__footer">
                <div><strong>{{ __('admin.investment_create.safe_title') }}</strong><span>{{ __('admin.investment_create.safe_help') }}</span></div>
                <div class="investment-create__actions">
                    <a href="{{ route('admin.investments.index') }}">{{ __('admin.actions.cancel') }}</a>
                    <button type="submit">{{ __('admin.investment_create.submit') }} <span aria-hidden="true">→</span></button>
                </div>
            </footer>
        </form>
        <template data-participant-template>
            @include('admin.investments.partials.participant-fields', ['index' => '__INDEX__', 'participant' => [], 'investors' => $investors])
        </template>
    @endif
</main>
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function () {
    const container = document.querySelector('[data-participants]');
    const template = document.querySelector('[data-participant-template]');
    const addButton = document.querySelector('[data-add-participant]');
    if (!container || !template || !addButton) return;

    const startupPicker = document.querySelector('[data-startup-picker]');
    const applicationPicker = document.querySelector('[data-application-picker]');
    const applicationChoices = @json($applicationPickerData);
    const selectedApplicationId = @json((string) old('startup_application_id', $selectedApplicationId));

    let nextIndex = container.querySelectorAll('[data-participant-row]').length;
    const initializeSelect = function (select) {
        if (!select || !window.jQuery || !jQuery.fn.select2 || select.dataset.enhanced === 'true') return;
        const element = jQuery(select);
        element.select2({width: '100%', placeholder: element.data('placeholder'), allowClear: true});
        select.dataset.enhanced = 'true';
    };
    const sync = function () {
        const rows = Array.from(container.querySelectorAll('[data-participant-row]'));
        let amount = 0;
        let equity = 0;
        rows.forEach(function (row, index) {
            row.querySelector('[data-participant-number]').textContent = index + 1;
            row.querySelector('[data-remove-participant]').disabled = rows.length === 1;
            amount += Number(row.querySelector('[data-participant-amount]').value || 0);
            equity += Number(row.querySelector('[data-participant-equity]').value || 0);
        });
        document.querySelector('[data-participant-count]').textContent = rows.length;
        document.querySelector('[data-total-amount]').textContent = amount.toLocaleString(undefined, {minimumFractionDigits: 2, maximumFractionDigits: 2});
        document.querySelector('[data-total-equity]').textContent = equity.toFixed(4);
        document.querySelector('[data-total-equity]').closest('strong').classList.toggle('is-over', equity > 100);
    };

    const setApplicationChoices = function (startupId, selectedId) {
        if (!applicationPicker) return;
        const previous = String(selectedId || '');
        applicationPicker.replaceChildren(new Option('', ''));
        applicationChoices
            .filter(function (application) { return String(application.startup_id) === String(startupId || ''); })
            .forEach(function (application) {
                applicationPicker.add(new Option(application.label, application.id, false, String(application.id) === previous));
            });
        applicationPicker.disabled = !startupId;
        if (window.jQuery && applicationPicker.dataset.enhanced === 'true') jQuery(applicationPicker).trigger('change');
    };

    document.querySelectorAll('[data-search-select], [data-investor-select]').forEach(initializeSelect);
    if (startupPicker && applicationPicker) {
        setApplicationChoices(startupPicker.value, selectedApplicationId);
        startupPicker.addEventListener('change', function () {
            setApplicationChoices(startupPicker.value, '');
        });
    }
    container.addEventListener('input', sync);
    container.addEventListener('click', function (event) {
        const button = event.target.closest('[data-remove-participant]');
        if (!button || container.querySelectorAll('[data-participant-row]').length === 1) return;
        const row = button.closest('[data-participant-row]');
        const select = row.querySelector('[data-investor-select]');
        if (window.jQuery && select.dataset.enhanced === 'true') jQuery(select).select2('destroy');
        row.remove();
        sync();
    });
    addButton.addEventListener('click', function () {
        const wrapper = document.createElement('div');
        wrapper.innerHTML = template.innerHTML.replaceAll('__INDEX__', String(nextIndex++));
        const row = wrapper.firstElementChild;
        container.appendChild(row);
        initializeSelect(row.querySelector('[data-investor-select]'));
        sync();
        row.scrollIntoView({behavior: 'smooth', block: 'center'});
    });
    sync();
});
</script>
@endpush