@extends('layouts.trading')

@section('title', 'Nouveau trade — ICT Performance Lab')

@section('styles')

    .page {
        max-width: 950px;
        margin: 0 auto;
        padding: 2rem 1.5rem 3rem;
    }

    .header {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 1.5rem;
        margin-bottom: 2rem;
        flex-wrap: wrap;
    }

    .header__brand {
        display: flex;
        flex-direction: column;
        gap: 0.35rem;
    }

    .header__eyebrow {
        font-size: 0.7rem;
        font-weight: 650;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: var(--accent);
    }

    .header__title {
        margin: 0;
        font-size: clamp(1.7rem, 4vw, 2.2rem);
        font-weight: 750;
        letter-spacing: -0.03em;
    }

    .header__subtitle {
        margin: 0.15rem 0 0;
        font-size: 0.95rem;
        color: var(--text-secondary);
    }

    .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        min-height: 42px;
        padding: 0.7rem 1.2rem;
        border: 1px solid transparent;
        border-radius: var(--radius-sm);
        font-size: 0.875rem;
        font-weight: 700;
        text-decoration: none;
        cursor: pointer;
        transition:
            background 0.15s ease,
            border-color 0.15s ease,
            box-shadow 0.15s ease,
            transform 0.1s ease;
    }

    .btn:active {
        transform: scale(0.98);
    }

    .btn--ghost {
        background: var(--bg-elevated);
        color: var(--text-secondary);
        border-color: var(--border-strong);
    }

    .btn--ghost:hover {
        background: var(--bg-hover);
        color: var(--text-primary);
    }

    .btn--primary {
        color: #fff;
        background: linear-gradient(
            135deg,
            var(--accent-light),
            var(--accent)
        );
        box-shadow: 0 8px 24px var(--accent-glow);
    }

    .btn--primary:hover {
        background: linear-gradient(
            135deg,
            #75b6ff,
            var(--accent-hover)
        );
        transform: translateY(-1px);
    }

    .alert {
        padding: 1rem 1.25rem;
        margin-bottom: 1.5rem;
        background: rgba(239, 68, 68, 0.08);
        border: 1px solid rgba(239, 68, 68, 0.25);
        border-radius: var(--radius);
        color: #f87171;
        font-size: 0.875rem;
    }

    .alert__title {
        margin: 0 0 0.5rem;
        font-weight: 700;
    }

    .alert ul {
        margin: 0;
        padding-left: 1.25rem;
    }

    .risk-manager-card {
        margin-bottom: 1.5rem;
        background:
            linear-gradient(
                135deg,
                var(--bg-surface),
                var(--bg-elevated)
            );
        border: 1px solid rgba(59, 130, 246, 0.28);
        border-radius: var(--radius);
        overflow: hidden;
    }

    .risk-manager-card__header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        flex-wrap: wrap;
        padding: 1rem 1.25rem;
        background: var(--bg-elevated);
        border-bottom: 1px solid var(--border);
    }

    .risk-manager-card__eyebrow {
        font-size: 0.68rem;
        font-weight: 700;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: var(--accent);
    }

    .risk-manager-card__title {
        margin: 0.2rem 0 0;
        font-size: 0.95rem;
        font-weight: 750;
        color: var(--text-primary);
    }

    .risk-manager-card__risk {
        font-family: var(--font-mono);
        font-size: 1.8rem;
        font-weight: 800;
        color: var(--accent-light);
    }

    .risk-manager-card__body {
        padding: 1.25rem;
    }

    .risk-manager-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 1rem;
    }

    .risk-manager-metric {
        padding: 0.85rem 1rem;
        background: var(--bg-base);
        border: 1px solid var(--border-strong);
        border-radius: var(--radius-sm);
    }

    .risk-manager-metric__label {
        font-size: 0.68rem;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--text-muted);
    }

    .risk-manager-metric__value {
        margin-top: 0.3rem;
        font-family: var(--font-mono);
        font-size: 1rem;
        font-weight: 750;
        color: var(--text-primary);
    }

    .risk-manager-progress {
        margin-top: 1rem;
    }

    .risk-manager-progress__top {
        display: flex;
        justify-content: space-between;
        gap: 1rem;
        margin-bottom: 0.45rem;
        color: var(--text-secondary);
        font-size: 0.75rem;
    }

    .risk-manager-progress__track {
        height: 8px;
        overflow: hidden;
        background: var(--bg-base);
        border-radius: 999px;
    }

    .risk-manager-progress__fill {
        height: 100%;
        background: linear-gradient(
            90deg,
            var(--accent),
            var(--accent-light)
        );
        border-radius: inherit;
    }

    .risk-manager-card__rule {
        margin-top: 0.8rem;
        color: var(--text-muted);
        font-size: 0.72rem;
        line-height: 1.5;
    }

    .trade-mode {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.85rem;
    }

    .trade-mode__option {
        display: block;
        cursor: pointer;
    }

    .trade-mode__option input {
        position: absolute;
        opacity: 0;
        pointer-events: none;
    }

    .trade-mode__card {
        display: flex;
        align-items: flex-start;
        gap: 0.75rem;
        min-height: 100%;
        padding: 0.9rem 1rem;
        background: var(--bg-base);
        border: 1px solid var(--border-strong);
        border-radius: var(--radius-sm);
        transition:
            border-color 0.15s ease,
            background 0.15s ease,
            box-shadow 0.15s ease;
    }

    .trade-mode__option:hover .trade-mode__card {
        background: var(--bg-hover);
    }

    .trade-mode__option input:checked + .trade-mode__card {
        border-color: var(--accent);
        box-shadow: 0 0 0 3px var(--accent-glow);
    }

    .trade-mode__dot {
        width: 14px;
        height: 14px;
        margin-top: 0.2rem;
        border: 2px solid var(--text-muted);
        border-radius: 50%;
        flex-shrink: 0;
    }

    .trade-mode__option input:checked + .trade-mode__card .trade-mode__dot {
        border-color: var(--accent-light);
        box-shadow: inset 0 0 0 3px var(--bg-base);
        background: var(--accent-light);
    }

    .trade-mode__title {
        display: block;
        font-size: 0.87rem;
        font-weight: 750;
        color: var(--text-primary);
    }

    .trade-mode__help {
        display: block;
        margin-top: 0.2rem;
        font-size: 0.74rem;
        line-height: 1.45;
        color: var(--text-muted);
    }

    .position-type {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.85rem;
    }

    .position-type__option {
        display: block;
        cursor: pointer;
    }

    .position-type__option input {
        position: absolute;
        opacity: 0;
        pointer-events: none;
    }

    .position-type__card {
        display: flex;
        align-items: flex-start;
        gap: 0.75rem;
        min-height: 100%;
        padding: 0.9rem 1rem;
        background: var(--bg-base);
        border: 1px solid var(--border-strong);
        border-radius: var(--radius-sm);
        transition:
            border-color 0.15s ease,
            background 0.15s ease,
            box-shadow 0.15s ease;
    }

    .position-type__option:hover .position-type__card {
        background: var(--bg-hover);
    }

    .position-type__option input:checked + .position-type__card {
        border-color: var(--accent);
        box-shadow: 0 0 0 3px var(--accent-glow);
    }

    .position-type__dot {
        width: 14px;
        height: 14px;
        margin-top: 0.2rem;
        border: 2px solid var(--text-muted);
        border-radius: 50%;
        flex-shrink: 0;
    }

    .position-type__option input:checked + .position-type__card .position-type__dot {
        border-color: var(--accent-light);
        box-shadow: inset 0 0 0 3px var(--bg-base);
        background: var(--accent-light);
    }

    .position-type__title {
        display: block;
        font-size: 0.87rem;
        font-weight: 750;
        color: var(--text-primary);
    }

    .position-type__help {
        display: block;
        margin-top: 0.2rem;
        font-size: 0.74rem;
        line-height: 1.45;
        color: var(--text-muted);
    }

    .conditional-field[hidden] {
        display: none !important;
    }

    .form-card {
        background: var(--bg-surface);
        border: 1px solid var(--border);
        border-radius: var(--radius);
        overflow: hidden;
    }

    .form-section + .form-section {
        border-top: 1px solid var(--border);
    }

    .form-section__header {
        padding: 1rem 1.5rem;
        background: var(--bg-elevated);
        border-bottom: 1px solid var(--border);
    }

    .form-section__title {
        margin: 0;
        font-size: 0.75rem;
        font-weight: 700;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: var(--text-muted);
    }

    .addin-only-summary {
        margin-top: 0.9rem;
        padding: 0.9rem 1rem;
        border: 1px solid var(--border);
        border-radius: 10px;
        background: var(--bg-base);
    }

    .addin-only-summary__title {
        margin-bottom: 0.35rem;
        font-size: 0.68rem;
        font-weight: 800;
        letter-spacing: 0.07em;
        text-transform: uppercase;
        color: var(--text-muted);
    }

    .addin-only-summary__value {
        font-family: var(--font-mono);
        font-size: 0.86rem;
        font-weight: 800;
        color: var(--text-primary);
    }

    .addin-only-summary__help {
        margin-top: 0.3rem;
        font-size: 0.72rem;
        line-height: 1.45;
        color: var(--text-secondary);
    }

    .addin-hidden {
        display: none !important;
    }

    .form-section__body {
        padding: 1.5rem;
    }

    .form-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1.25rem;
    }

    .form-grid--3 {
        grid-template-columns: repeat(3, 1fr);
    }

    .form-grid--1 {
        grid-template-columns: 1fr;
    }

    .field {
        display: flex;
        flex-direction: column;
        gap: 0.4rem;
    }

    .field__label {
        font-size: 0.8rem;
        font-weight: 650;
        color: var(--text-secondary);
    }

    .field__input,
    .field__select,
    .field__textarea {
        width: 100%;
        padding: 0.65rem 0.85rem;
        background: var(--bg-base);
        border: 1px solid var(--border-strong);
        border-radius: var(--radius-sm);
        color: var(--text-primary);
        font-family: var(--font-sans);
        font-size: 0.875rem;
    }

    .field__input:focus,
    .field__select:focus,
    .field__textarea:focus {
        outline: none;
        border-color: var(--accent);
        box-shadow: 0 0 0 3px var(--accent-glow);
    }

    .field__input::placeholder,
    .field__textarea::placeholder {
        color: var(--text-muted);
    }

    .field__textarea {
        min-height: 100px;
        resize: vertical;
    }

    .field__input--mono {
        font-family: var(--font-mono);
    }

    .field__error {
        font-size: 0.78rem;
        color: var(--negative);
    }

    .checkbox-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
        gap: 0.75rem;
    }

    .checkbox {
        display: flex;
        align-items: center;
        gap: 0.6rem;
        padding: 0.65rem 0.85rem;
        background: var(--bg-base);
        border: 1px solid var(--border-strong);
        border-radius: var(--radius-sm);
        cursor: pointer;
    }

    .checkbox:hover {
        background: var(--bg-hover);
    }

    .checkbox input {
        width: 16px;
        height: 16px;
        accent-color: var(--accent);
    }

    .checkbox__label {
        font-size: 0.85rem;
    }

    .form-actions {
        display: flex;
        justify-content: flex-end;
        gap: 0.75rem;
        padding: 1.5rem;
        background: var(--bg-elevated);
        border-top: 1px solid var(--border);
    }

    .footer {
        margin-top: 2rem;
        text-align: center;
        font-size: 0.75rem;
        color: var(--text-muted);
    }

    @media (max-width: 768px) {
        .form-grid,
        .form-grid--3 {
            grid-template-columns: 1fr;
        }

        .header {
            flex-direction: column;
        }

        .form-actions {
            flex-direction: column-reverse;
        }

        .form-actions .btn {
            width: 100%;
        }

        .risk-manager-grid,
        .trade-mode,
        .position-type {
            grid-template-columns: 1fr;
        }
    }

@endsection


@section('content')

@php
    $recommendedRisk = (float) ($riskStatus['next_risk'] ?? 0.75);
    $standardRisk = (float) ($riskStatus['standard_risk'] ?? $riskStatus['maximum_risk'] ?? $recommendedRisk);
    $reducedRisk = (float) ($riskStatus['reduced_risk'] ?? 0.50);
    $minimumRisk = (float) ($riskStatus['minimum_risk'] ?? 0.25);

    $cyclePerformance = (float) ($riskStatus['cycle_performance'] ?? 0);
    $cycleTarget = (float) ($riskStatus['cycle_target'] ?? 3.00);
    $cycleProgress = (float) ($riskStatus['cycle_progress'] ?? 0);
    $cycleTargetReached = (bool) ($riskStatus['cycle_target_reached'] ?? false);

    /*
    |--------------------------------------------------------------------------
    | Mode initial du formulaire
    |--------------------------------------------------------------------------
    |
    | Le bouton "Ajouter un Add-in" transmet :
    | ?position_type=addin&parent_trade_id=XX
    |
    | On reprend ces valeurs automatiquement, tout en laissant old()
    | prioritaire après une erreur de validation.
    |
    */
    $initialPositionType = old(
        'position_type',
        request('position_type', 'main')
    );

    $initialParentTradeId = old(
        'parent_trade_id',
        request('parent_trade_id')
    );

    $isInitialAddin =
        $initialPositionType === 'addin'
        && filled($initialParentTradeId);

    $initialParentTrade = $isInitialAddin
        ? ($parentTrades ?? collect())->first(
            fn ($parentTrade) =>
                (string) $parentTrade->id === (string) $initialParentTradeId
        )
        : null;

    $riskStatusLabel = match (true) {
        $cycleTargetReached => 'Objectif du cycle atteint — risque standard',
        $recommendedRisk <= $minimumRisk => 'Protection maximale — risque minimum',
        $recommendedRisk <= $reducedRisk => 'Risque réduit',
        default => 'Risque standard',
    };
@endphp

<div class="page">

    <header class="header">

        <div class="header__brand">

            <span class="header__eyebrow">
                ICT Performance Lab by Jul
            </span>

            <h1 class="header__title">
                {{ $isInitialAddin ? 'Nouvel Add-in' : 'Nouveau trade' }}
            </h1>

            <p class="header__subtitle">
                @if ($isInitialAddin && $initialParentTrade)
                    Renforcement de l'idée {{ $initialParentTrade->asset }}
                    · {{ $initialParentTrade->direction }}
                @else
                    Documenter un setup ICT dans le journal
                @endif
            </p>

        </div>

        <a
            href="{{ route('trades.index') }}"
            class="btn btn--ghost"
        >
            ← Retour
        </a>

    </header>


    @if ($isInitialAddin && $initialParentTrade)
        <div
            style="
                margin-bottom: 1.25rem;
                padding: 1rem 1.15rem;
                border: 1px solid rgba(34, 197, 94, 0.35);
                border-radius: var(--radius-sm);
                background: rgba(34, 197, 94, 0.08);
            "
        >
            <div
                style="
                    font-size: 0.7rem;
                    font-weight: 800;
                    letter-spacing: 0.12em;
                    text-transform: uppercase;
                    color: #16a34a;
                    margin-bottom: 0.35rem;
                "
            >
                Add-in
            </div>

            <div style="font-weight: 750;">
                Rattaché à
                {{ $initialParentTrade->asset }}
                · {{ $initialParentTrade->direction }}
                · {{ $initialParentTrade->trade_date?->format('d/m/Y') }}
            </div>

            <div
                style="
                    margin-top: 0.35rem;
                    font-size: 0.82rem;
                    color: var(--text-secondary);
                "
            >
                L'actif, la direction, la date et le contexte ICT sont repris automatiquement.
                Tu renseignes uniquement les informations propres à cette nouvelle exécution.
            </div>
        </div>
    @endif


    @if ($errors->any())

        <div class="alert">

            <p class="alert__title">
                Des erreurs empêchent l'enregistrement du trade.
            </p>

            <ul>
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>

        </div>

    @endif


    <section class="risk-manager-card">

        <div class="risk-manager-card__header">

            <div>
                <div class="risk-manager-card__eyebrow">
                    Risk Manager
                </div>

                <h2 class="risk-manager-card__title">
                    Risque recommandé pour le prochain trade
                </h2>
            </div>

            <div
                id="risk-manager-display"
                class="risk-manager-card__risk"
                data-standard-risk="{{ number_format($recommendedRisk, 2, '.', '') }}"
            >
                {{ number_format($recommendedRisk, 2, ',', ' ') }}%
            </div>

        </div>

        <div class="risk-manager-card__body">

            <div class="risk-manager-grid">

                <div class="risk-manager-metric">
                    <div class="risk-manager-metric__label">
                        Statut
                    </div>

                    <div class="risk-manager-metric__value">
                        {{ $riskStatusLabel }}
                    </div>
                </div>

                <div class="risk-manager-metric">
                    <div class="risk-manager-metric__label">
                        Performance cycle
                    </div>

                    <div class="risk-manager-metric__value">
                        {{ $cyclePerformance > 0 ? '+' : '' }}
                        {{ number_format($cyclePerformance, 2, ',', ' ') }}%
                    </div>
                </div>

                <div class="risk-manager-metric">
                    <div class="risk-manager-metric__label">
                        Objectif
                    </div>

                    <div class="risk-manager-metric__value">
                        +{{ number_format($cycleTarget, 2, ',', ' ') }}%
                    </div>
                </div>

            </div>

            <div class="risk-manager-progress">

                <div class="risk-manager-progress__top">
                    <span>Progression du cycle</span>

                    <span>
                        {{ number_format($cycleProgress, 0) }}%
                    </span>
                </div>

                <div class="risk-manager-progress__track">
                    <div
                        class="risk-manager-progress__fill"
                        style="width: {{ min(100, max(0, $cycleProgress)) }}%;"
                    ></div>
                </div>

            </div>

            <div class="risk-manager-card__rule">
                Règle :
                {{ number_format($standardRisk, 2, ',', ' ') }} %
                → SL :
                {{ number_format($reducedRisk, 2, ',', ' ') }} %
                → SL :
                {{ number_format($minimumRisk, 2, ',', ' ') }} % ·
                Un TP remonte d'un niveau ·
                À +{{ number_format($cycleTarget, 2, ',', ' ') }} % sur le cycle :
                retour/maintien au risque standard
                {{ number_format($standardRisk, 2, ',', ' ') }} %.
            </div>

        </div>

    </section>

    <div class="form-card">

        <form
            method="POST"
            action="{{ route('trades.store') }}"
        >

            @csrf


            {{-- IDENTIFICATION --}}

            <section class="form-section">

                <div class="form-section__header">
                    <h2 class="form-section__title">
                        Identification
                    </h2>
                </div>

                <div class="form-section__body">

                    <div class="field" style="margin-bottom: 1.25rem;">

                        <label class="field__label">
                            Mode du trade
                        </label>

                        <div class="trade-mode">

                            <label class="trade-mode__option">

                                <input
                                    type="radio"
                                    name="trade_mode"
                                    value="real"
                                    @checked(old('trade_mode', 'real') === 'real')
                                >

                                <span class="trade-mode__card">
                                    <span class="trade-mode__dot"></span>

                                    <span>
                                        <span class="trade-mode__title">
                                            Trade réel
                                        </span>

                                        <span class="trade-mode__help">
                                            Trade réellement exécuté. Il compte dans la performance réelle et le Risk Manager.
                                        </span>
                                    </span>
                                </span>

                            </label>

                            <label class="trade-mode__option">

                                <input
                                    type="radio"
                                    name="trade_mode"
                                    value="paper"
                                    @checked(old('trade_mode') === 'paper')
                                >

                                <span class="trade-mode__card">
                                    <span class="trade-mode__dot"></span>

                                    <span>
                                        <span class="trade-mode__title">
                                            Paper Trade
                                        </span>

                                        <span class="trade-mode__help">
                                            Setup non exécuté à conserver pour l'analyse, sans impacter les performances réelles.
                                        </span>
                                    </span>
                                </span>

                            </label>

                        </div>

                        @error('trade_mode')
                            <span class="field__error">
                                {{ $message }}
                            </span>
                        @enderror

                    </div>

                    <div
                        id="real-position-fields"
                        class="field conditional-field"
                        style="margin-bottom: 1.25rem;"
                    >

                        <label class="field__label">
                            Type de position
                        </label>

                        <div class="position-type">

                            <label class="position-type__option">

                                <input
                                    type="radio"
                                    name="position_type"
                                    value="main"
                                    @checked($initialPositionType === 'main')
                                >

                                <span class="position-type__card">
                                    <span class="position-type__dot"></span>

                                    <span>
                                        <span class="position-type__title">
                                            Trade principal
                                        </span>

                                        <span class="position-type__help">
                                            Nouvelle idée de trade. Elle compte dans la limite de trades réels autorisés.
                                        </span>
                                    </span>
                                </span>

                            </label>

                            <label class="position-type__option">

                                <input
                                    type="radio"
                                    name="position_type"
                                    value="addin"
                                    @checked($initialPositionType === 'addin')
                                >

                                <span class="position-type__card">
                                    <span class="position-type__dot"></span>

                                    <span>
                                        <span class="position-type__title">
                                            Add-in
                                        </span>

                                        <span class="position-type__help">
                                            Renforcement d’un trade principal déjà ouvert. Il reste rattaché à la même idée.
                                        </span>
                                    </span>
                                </span>

                            </label>

                        </div>

                        @error('position_type')
                            <span class="field__error">
                                {{ $message }}
                            </span>
                        @enderror

                    </div>

                    <div
                        id="parent-trade-field"
                        class="field conditional-field"
                        style="margin-bottom: 1.25rem;"
                        hidden
                    >

                        <label class="field__label">
                            Trade principal à renforcer
                        </label>

                        <select
                            name="parent_trade_id"
                            class="field__select"
                        >
                            <option value="">
                                Choisir un trade principal…
                            </option>

                            @foreach ($parentTrades ?? collect() as $parentTrade)

                                <option
                                    value="{{ $parentTrade->id }}"
                                    data-risk-limit="{{ number_format((float) ($parentTrade->idea_risk_limit ?? 0), 2, '.', '') }}"
                                    data-risk-used="{{ number_format((float) ($parentTrade->idea_risk_used ?? 0), 2, '.', '') }}"
                                    data-risk-remaining="{{ number_format((float) ($parentTrade->idea_risk_remaining ?? 0), 2, '.', '') }}"
                                    data-trade-date="{{ $parentTrade->trade_date?->format('Y-m-d') }}"
                                    data-asset="{{ $parentTrade->asset }}"
                                    data-direction="{{ $parentTrade->direction }}"
                                    @selected((string) $initialParentTradeId === (string) $parentTrade->id)
                                >
                                    {{ $parentTrade->trade_date?->format('d/m/Y') }}
                                    —
                                    {{ $parentTrade->asset }}
                                    {{ $parentTrade->direction ? '· ' . $parentTrade->direction : '' }}
                                    {{ $parentTrade->entry_time ? '· ' . \Illuminate\Support\Str::of($parentTrade->entry_time)->substr(0, 5) : '' }}
                                </option>

                            @endforeach
                        </select>

                        <span class="trade-mode__help">
                            Seuls tes trades réels principaux ouverts sont proposés.
                        </span>

                        @error('parent_trade_id')
                            <span class="field__error">
                                {{ $message }}
                            </span>
                        @enderror

                        <div
                            id="addin-no-risk-warning"
                            hidden
                            style="
                                margin-top: 0.9rem;
                                padding: 0.9rem 1rem;
                                border: 1px solid rgba(239, 68, 68, 0.35);
                                border-radius: var(--radius-sm);
                                background: rgba(239, 68, 68, 0.08);
                                color: #b91c1c;
                                font-size: 0.82rem;
                                font-weight: 650;
                                line-height: 1.5;
                            "
                        >
                            Aucun risque disponible pour un nouvel Add-in.
                            Le plafond de risque de cette idée est déjà atteint.
                        </div>

                        <div
                            id="addin-risk-summary"
                            class="risk-manager-metric"
                            style="margin-top: 0.9rem;"
                            hidden
                        >
                            <div class="risk-manager-metric__label">
                                Risque disponible pour l’add-in
                            </div>

                            <div class="risk-manager-metric__value">
                                <span id="addin-risk-remaining">—</span>
                            </div>

                            <div
                                class="trade-mode__help"
                                style="margin-top: 0.35rem;"
                            >
                                Limite de l’idée :
                                <span id="addin-risk-limit">—</span>
                                · Déjà utilisé :
                                <span id="addin-risk-used">—</span>
                            </div>
                        </div>

                        <div
                            id="addin-parent-summary"
                            class="addin-only-summary"
                            hidden
                        >
                            <div class="addin-only-summary__title">
                                Informations reprises automatiquement
                            </div>

                            <div
                                id="addin-parent-summary-value"
                                class="addin-only-summary__value"
                            >
                                —
                            </div>

                            <div class="addin-only-summary__help">
                                Pour un add-in, l'actif, la direction, la date et le contexte ICT
                                sont repris du trade principal. Tu renseignes seulement l'heure
                                d'entrée et le risque utilisé.
                            </div>
                        </div>

                    </div>

                    <div class="form-grid">

                        <div class="field addin-inherited-field">

                            <label class="field__label">
                                Date du trade
                            </label>

                            <input
                                type="date"
                                name="trade_date"
                                class="field__input"
                                value="{{ old('trade_date', now()->format('Y-m-d')) }}"
                                required
                            >

                        </div>


                        <div class="field">

                            <label class="field__label">
                                Heure d'entrée
                            </label>

                            <input
                                type="time"
                                name="entry_time"
                                class="field__input"
                                value="{{ old('entry_time') }}"
                            >

                        </div>


                        <div class="field addin-inherited-field">

                            <label class="field__label">
                                Actif
                            </label>

                            <input
                                type="text"
                                name="asset"
                                class="field__input field__input--mono"
                                value="{{ old('asset') }}"
                                placeholder="EURUSD, DXY, SILVER..."
                                required
                            >

                        </div>


                        <div class="field addin-inherited-field">

                            <label class="field__label">
                                Direction
                            </label>

                            <select
                                name="direction"
                                class="field__select"
                                required
                            >

                                <option
                                    value=""
                                    disabled
                                    @selected(!old('direction'))
                                >
                                    Choisir…
                                </option>

                                <option
                                    value="Long"
                                    @selected(old('direction') === 'Long')
                                >
                                    Long
                                </option>

                                <option
                                    value="Short"
                                    @selected(old('direction') === 'Short')
                                >
                                    Short
                                </option>

                            </select>

                        </div>

                    </div>

                </div>

            </section>


            {{-- CONTEXTE ICT --}}

            <section id="addin-context-section" class="form-section">

                <div class="form-section__header">

                    <h2 class="form-section__title">
                        Contexte ICT
                    </h2>

                </div>


                <div class="form-section__body">

                    <div class="form-grid form-grid--3">

                        <div class="field">

                            <label class="field__label">
                                Session
                            </label>

                            <input
                                type="text"
                                name="session"
                                class="field__input"
                                value="{{ old('session') }}"
                                placeholder="London, New York..."
                            >

                        </div>


                        <div class="field">

                            <label class="field__label">
                                Jour
                            </label>

                            <input
                                type="text"
                                name="day"
                                class="field__input"
                                value="{{ old('day') }}"
                                placeholder="Lundi, Mardi..."
                            >

                        </div>


                        <div class="field">

                            <label class="field__label">
                                Zone HTF
                            </label>

                            <input
                                type="text"
                                name="htf_zone"
                                class="field__input"
                                value="{{ old('htf_zone') }}"
                                placeholder="FVG 4H, OB 4H, BISI 30m..."
                            >

                        </div>


                        <div class="field">

                            <label class="field__label">
                                Type de liquidité
                            </label>

                            <input
                                type="text"
                                name="liquidity_type"
                                class="field__input"
                                value="{{ old('liquidity_type') }}"
                                placeholder="Asia High, Asia Low, PDH, PDL..."
                            >

                        </div>

                    </div>

                </div>

            </section>


            {{-- CONFIRMATIONS --}}

            <section id="addin-confirmations-section" class="form-section">

                <div class="form-section__header">

                    <h2 class="form-section__title">
                        Confirmations
                    </h2>

                </div>


                <div class="form-section__body">

                    <div class="checkbox-grid">

                        @php
                            $checks = [
                                'htf_bias' => 'HTF Bias',
                                'liquidity_taken' => 'Liquidité prise',
                                'displacement' => 'Displacement',
                                'mss' => 'MSS',
                                'fvg15' => 'FVG 15m',
                                'breaker' => 'Breaker',
                                'bisi30' => 'BISI 30m',
                                'news' => 'News',
                            ];
                        @endphp

                        @foreach ($checks as $field => $label)

                            <label class="checkbox">

                                <input
                                    type="checkbox"
                                    name="{{ $field }}"
                                    value="1"
                                    @checked(old($field))
                                >

                                <span class="checkbox__label">
                                    {{ $label }}
                                </span>

                            </label>

                        @endforeach

                    </div>


                    <div
                        class="form-grid"
                        style="margin-top: 1.25rem;"
                    >

                        <div class="field">

                            <label class="field__label">
                                Type de news
                            </label>

                            <input
                                type="text"
                                name="news_type"
                                class="field__input"
                                value="{{ old('news_type') }}"
                                placeholder="NFP, CPI, FOMC, Trump..."
                            >

                        </div>

                    </div>

                </div>

            </section>


            {{-- RISQUE & RESULTAT --}}

            <section class="form-section">

                <div class="form-section__header">
                    <h2 class="form-section__title">
                        Risque & résultat
                    </h2>
                </div>

                <div class="form-section__body">

                    <div class="form-grid form-grid--3">

                        <div class="field addin-secondary-risk-field">

                            <label class="field__label">
                                Risque recommandé (%)
                            </label>

                            <input
                                type="number"
                                id="risk-percent"
                                name="risk_percent"
                                class="field__input field__input--mono"
                                value="{{ old('risk_percent', number_format($recommendedRisk, 2, '.', '')) }}"
                                step="0.01"
                                min="0"
                                readonly
                            >

                        </div>


                        <div class="field">

                            <label class="field__label">
                                <span id="risk-used-label">
                                    Risque utilisé (%)
                                </span>
                            </label>

                            <input
                                type="number"
                                id="risk-used-percent"
                                name="risk_used_percent"
                                class="field__input field__input--mono"
                                value="{{ old('risk_used_percent', number_format($recommendedRisk, 2, '.', '')) }}"
                                step="0.01"
                                min="0"
                            >

                            <span
                                id="risk-used-help"
                                class="field__help"
                            >
                                Risque réellement engagé sur cette exécution.
                            </span>

                            @error('risk_used_percent')
                                <span class="field__error">
                                    {{ $message }}
                                </span>
                            @enderror

                        </div>


                        <div class="field addin-secondary-risk-field">

                            <label class="field__label">
                                Résultat
                            </label>

                            <input
                                type="text"
                                name="result"
                                class="field__input"
                                value="{{ old('result') }}"
                                placeholder="TP, SL, BE..."
                            >

                        </div>


                        <div class="field addin-secondary-risk-field">

                            <label class="field__label">
                                RR planifié
                            </label>

                            <input
                                type="number"
                                name="rr_planned"
                                class="field__input field__input--mono"
                                value="{{ old('rr_planned') }}"
                                step="0.01"
                            >

                        </div>


                        <div class="field">

                            <label class="field__label">
                                RR réalisé
                            </label>

                            <input
                                type="number"
                                name="rr_realized"
                                class="field__input field__input--mono"
                                value="{{ old('rr_realized') }}"
                                step="0.01"
                            >

                        </div>

                    </div>

                </div>

            </section>


            {{-- DISCIPLINE --}}

            <section id="addin-discipline-section" class="form-section">

                <div class="form-section__header">
                    <h2 class="form-section__title">
                        Discipline
                    </h2>
                </div>

                <div class="form-section__body">

                    <div
                        class="checkbox-grid"
                        style="margin-bottom:1.25rem;"
                    >

                        <label class="checkbox">

                            <input
                                type="checkbox"
                                name="anticipated"
                                value="1"
                                @checked(old('anticipated'))
                            >

                            <span class="checkbox__label">
                                Trade anticipé
                            </span>

                        </label>


                        <label class="checkbox">

                            <input
                                type="checkbox"
                                name="one_trade_rule_respected"
                                value="1"
                                @checked(old('one_trade_rule_respected', true))
                            >

                            <span class="checkbox__label">
                                Règle 1 trade / jour respectée
                            </span>

                        </label>

                    </div>


                    <div class="form-grid">

                        <div class="field">

                            <label class="field__label">
                                Score discipline /10
                            </label>

                            <input
                                type="number"
                                name="discipline_score"
                                class="field__input field__input--mono"
                                value="{{ old('discipline_score') }}"
                                min="0"
                                max="10"
                            >

                        </div>


                        <div class="field">

                            <label class="field__label">
                                Setup Grade
                            </label>

                            <input
                                type="text"
                                name="setup_grade"
                                class="field__input"
                                value="{{ old('setup_grade') }}"
                                placeholder="A+, A, B, Hors plan..."
                            >

                        </div>

                    </div>

                </div>

            </section>


            {{-- PSYCHOLOGIE --}}

            <section id="addin-psychology-section" class="form-section">

                <div class="form-section__header">

                    <h2 class="form-section__title">
                        Psychologie / analyse
                    </h2>

                </div>


                <div class="form-section__body">

                    <div class="form-grid form-grid--1">

                        <div class="field">

                            <label class="field__label">
                                Émotion avant le trade
                            </label>

                            <input
                                type="text"
                                name="emotion_before"
                                class="field__input"
                                value="{{ old('emotion_before') }}"
                                placeholder="Calme, confiance, FOMO..."
                            >

                        </div>


                        <div class="field">

                            <label class="field__label">
                                Notes
                            </label>

                            <textarea
                                name="notes"
                                class="field__textarea"
                                placeholder="Contexte et observations..."
                            >{{ old('notes') }}</textarea>

                        </div>


                        <div class="field">

                            <label class="field__label">
                                Ce qui a bien fonctionné
                            </label>

                            <textarea
                                name="what_went_well"
                                class="field__textarea"
                                placeholder="Points positifs..."
                            >{{ old('what_went_well') }}</textarea>

                        </div>


                        <div class="field">

                            <label class="field__label">
                                À améliorer
                            </label>

                            <textarea
                                name="to_improve"
                                class="field__textarea"
                                placeholder="Axes d'amélioration..."
                            >{{ old('to_improve') }}</textarea>

                        </div>

                    </div>

                </div>

            </section>


            {{-- MT5 / FTMO --}}

            <section id="addin-mt5-section" class="form-section">

                <div class="form-section__header">

                    <h2 class="form-section__title">
                        MT5 / FTMO
                    </h2>

                </div>


                <div class="form-section__body">

                    <div class="form-grid">

                        <div class="field">

                            <label class="field__label">
                                Ticket MT5
                            </label>

                            <input
                                type="text"
                                name="mt5_ticket"
                                class="field__input field__input--mono"
                                value="{{ old('mt5_ticket') }}"
                                placeholder="123456789"
                            >

                        </div>


                        <div class="field">

                            <label class="field__label">
                                Compte MT5
                            </label>

                            <input
                                type="text"
                                name="mt5_account"
                                class="field__input field__input--mono"
                                value="{{ old('mt5_account') }}"
                                placeholder="FTMO-123456"
                            >

                        </div>

                    </div>

                </div>

            </section>


            <div class="form-actions">

                <a
                    href="{{ route('trades.index') }}"
                    class="btn btn--ghost"
                >
                    Annuler
                </a>

                <button
                    type="submit"
                    id="trade-submit-button"
                    class="btn btn--primary"
                >
                    Enregistrer le trade
                </button>

            </div>

        </form>

    </div>


    <footer class="footer">
        ICT Performance Lab by Jul —
        {{ now()->format('Y') }}
    </footer>

</div>

@endsection

@section('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function () {
        const modeInputs = document.querySelectorAll('input[name="trade_mode"]');
        const positionInputs = document.querySelectorAll('input[name="position_type"]');

        const realPositionFields = document.getElementById('real-position-fields');
        const parentTradeField = document.getElementById('parent-trade-field');
        const parentTradeSelect = parentTradeField
            ? parentTradeField.querySelector('select[name="parent_trade_id"]')
            : null;

        const riskDisplay = document.getElementById('risk-manager-display');
        const riskPercentInput = document.getElementById('risk-percent');
        const riskUsedInput = document.getElementById('risk-used-percent');
        const riskUsedLabel = document.getElementById('risk-used-label');
        const riskUsedHelp = document.getElementById('risk-used-help');

        const addinRiskSummary = document.getElementById('addin-risk-summary');
        const addinNoRiskWarning = document.getElementById('addin-no-risk-warning');
        const tradeSubmitButton = document.getElementById('trade-submit-button');
        const addinRiskLimit = document.getElementById('addin-risk-limit');
        const addinRiskUsed = document.getElementById('addin-risk-used');
        const addinRiskRemaining = document.getElementById('addin-risk-remaining');
        const addinParentSummary = document.getElementById('addin-parent-summary');
        const addinParentSummaryValue = document.getElementById('addin-parent-summary-value');

        const inheritedFields = document.querySelectorAll('.addin-inherited-field');
        const secondaryRiskFields = document.querySelectorAll('.addin-secondary-risk-field');

        const contextSection = document.getElementById('addin-context-section');
        const confirmationsSection = document.getElementById('addin-confirmations-section');
        const disciplineSection = document.getElementById('addin-discipline-section');
        const psychologySection = document.getElementById('addin-psychology-section');
        const mt5Section = document.getElementById('addin-mt5-section');

        const tradeDateInput = document.querySelector('input[name="trade_date"]');
        const assetInput = document.querySelector('input[name="asset"]');
        const directionSelect = document.querySelector('select[name="direction"]');
        const entryTimeInput = document.querySelector('input[name="entry_time"]');

        const standardRisk = riskDisplay
            ? parseFloat(riskDisplay.dataset.standardRisk || '0')
            : 0;

        function selectedValue(name, fallback = null) {
            const checked = document.querySelector(`input[name="${name}"]:checked`);
            return checked ? checked.value : fallback;
        }

        function formatRisk(value) {
            return Number(value || 0)
                .toFixed(2)
                .replace('.', ',') + '%';
        }

        function selectedParentOption() {
            if (!parentTradeSelect || !parentTradeSelect.value) {
                return null;
            }

            return parentTradeSelect.options[parentTradeSelect.selectedIndex] || null;
        }

        function applyParentIdentity() {
            const parentOption = selectedParentOption();

            if (!parentOption) {
                if (addinParentSummary) {
                    addinParentSummary.hidden = true;
                }
                return;
            }

            const parentDate = parentOption.dataset.tradeDate || '';
            const parentAsset = parentOption.dataset.asset || '';
            const parentDirection = parentOption.dataset.direction || '';

            if (tradeDateInput && parentDate) {
                tradeDateInput.value = parentDate;
            }

            if (assetInput && parentAsset) {
                assetInput.value = parentAsset;
            }

            if (directionSelect && parentDirection) {
                directionSelect.value = parentDirection;
            }

            if (addinParentSummaryValue) {
                const time = parentOption.textContent
                    .trim()
                    .replace(/\s+/g, ' ');

                addinParentSummaryValue.textContent = time;
            }

            if (addinParentSummary) {
                addinParentSummary.hidden = false;
            }
        }

        function setAddinCompactMode(isAddin) {
            inheritedFields.forEach((field) => {
                field.classList.toggle('addin-hidden', isAddin);
            });

            secondaryRiskFields.forEach((field) => {
                field.classList.toggle('addin-hidden', isAddin);
            });

            [
                contextSection,
                confirmationsSection,
                disciplineSection,
                psychologySection,
                mt5Section,
            ].forEach((section) => {
                if (section) {
                    section.classList.toggle('addin-hidden', isAddin);
                }
            });

            if (tradeDateInput) {
                tradeDateInput.required = !isAddin;
            }

            if (assetInput) {
                assetInput.required = !isAddin;
            }

            if (directionSelect) {
                directionSelect.required = !isAddin;
            }

            if (entryTimeInput) {
                entryTimeInput.required = isAddin;
            }

            if (!isAddin && addinParentSummary) {
                addinParentSummary.hidden = true;
            }
        }

        function refreshRisk() {
            const tradeMode = selectedValue('trade_mode', 'real');
            const positionType = selectedValue('position_type', 'main');
            const isAddin = tradeMode === 'real' && positionType === 'addin';
            const parentOption = selectedParentOption();

            if (!isAddin || !parentOption) {
                if (riskDisplay) {
                    riskDisplay.textContent = formatRisk(standardRisk);
                }

                if (riskPercentInput) {
                    riskPercentInput.value = standardRisk.toFixed(2);
                }

                if (riskUsedLabel) {
                    riskUsedLabel.textContent = 'Risque utilisé (%)';
                }

                if (riskUsedHelp) {
                    riskUsedHelp.textContent =
                        'Risque réellement engagé sur cette exécution.';
                }

                if (riskUsedInput) {
                    riskUsedInput.max = '';
                    if (!riskUsedInput.value || parseFloat(riskUsedInput.value) > standardRisk) {
                        riskUsedInput.value = standardRisk.toFixed(2);
                    }
                }

                if (addinRiskSummary) {
                    addinRiskSummary.hidden = true;
                }

                if (addinNoRiskWarning) {
                    addinNoRiskWarning.hidden = true;
                }

                if (tradeSubmitButton) {
                    tradeSubmitButton.disabled = false;
                    tradeSubmitButton.style.opacity = '';
                    tradeSubmitButton.style.cursor = '';
                    tradeSubmitButton.title = '';
                }

                return;
            }

            const limit = parseFloat(parentOption.dataset.riskLimit || '0');
            const used = parseFloat(parentOption.dataset.riskUsed || '0');
            const remaining = parseFloat(parentOption.dataset.riskRemaining || '0');

            if (riskDisplay) {
                riskDisplay.textContent = formatRisk(remaining);
            }

            if (riskPercentInput) {
                riskPercentInput.value = remaining.toFixed(2);
            }

            if (riskUsedLabel) {
                riskUsedLabel.textContent = 'Risque utilisé pour cet Add-in (%)';
            }

            if (riskUsedHelp) {
                riskUsedHelp.textContent =
                    'Maximum disponible pour cet Add-in : ' + formatRisk(remaining) + '.';
            }

            if (riskUsedInput) {
                riskUsedInput.max = remaining.toFixed(2);

                const currentValue = parseFloat(riskUsedInput.value || '0');

                if (
                    !riskUsedInput.value
                    || currentValue <= 0
                    || currentValue > remaining
                ) {
                    riskUsedInput.value = remaining.toFixed(2);
                }
            }

            if (addinRiskLimit) {
                addinRiskLimit.textContent = formatRisk(limit);
            }

            if (addinRiskUsed) {
                addinRiskUsed.textContent = formatRisk(used);
            }

            if (addinRiskRemaining) {
                addinRiskRemaining.textContent = formatRisk(remaining);
            }

            if (addinRiskSummary) {
                addinRiskSummary.hidden = false;
            }

            const noRiskAvailable = remaining <= 0.00001;

            if (addinNoRiskWarning) {
                addinNoRiskWarning.hidden = !noRiskAvailable;
            }

            if (tradeSubmitButton) {
                tradeSubmitButton.disabled = noRiskAvailable;

                if (noRiskAvailable) {
                    tradeSubmitButton.style.opacity = '0.45';
                    tradeSubmitButton.style.cursor = 'not-allowed';
                    tradeSubmitButton.title =
                        'Impossible d’enregistrer : aucun risque disponible pour cet Add-in.';
                } else {
                    tradeSubmitButton.style.opacity = '';
                    tradeSubmitButton.style.cursor = '';
                    tradeSubmitButton.title = '';
                }
            }
        }

        function refreshPositionFields() {
            const tradeMode = selectedValue('trade_mode', 'real');
            const positionType = selectedValue('position_type', 'main');

            const isReal = tradeMode === 'real';
            const isAddin = isReal && positionType === 'addin';

            if (realPositionFields) {
                realPositionFields.hidden = !isReal;
            }

            if (parentTradeField) {
                parentTradeField.hidden = !isAddin;
            }

            if (parentTradeSelect) {
                parentTradeSelect.required = isAddin;

                if (!isAddin) {
                    parentTradeSelect.value = '';
                }
            }

            setAddinCompactMode(isAddin);

            if (isAddin) {
                applyParentIdentity();
            }

            refreshRisk();
        }

        modeInputs.forEach((input) => {
            input.addEventListener('change', refreshPositionFields);
        });

        positionInputs.forEach((input) => {
            input.addEventListener('change', refreshPositionFields);
        });

        if (parentTradeSelect) {
            parentTradeSelect.addEventListener('change', function () {
                applyParentIdentity();
                refreshRisk();
            });
        }

        refreshPositionFields();
    });
</script>
@endsection