@extends('layouts.app')

@section('title', __('trainings.register_page_title', ['training' => $training->title]))
@section('meta_description', Str::limit(strip_tags($training->accroche_first ?? $training->title), 155))

@php
    $registerHeroImage = $training->image
        ? asset('storage/' . $training->image)
        : asset('assets/images/others/contact-me.jpg');
@endphp


@section('content')

{{-- Breadcrumb (aligné sur edublink/contact-me.html) --}}
<div class="edu-breadcrumb-area bg-white">
    <div class="container">
        <div class="breadcrumb-inner">
            <div class="page-title">
                <h1 class="title">{{ __('trainings.register_page_heading', ['training' => $training->title]) }}</h1>
            </div>
            <ul class="edu-breadcrumb">
                <li class="breadcrumb-item">
                    <a href="{{ LaravelLocalization::localizeUrl('/') }}">{{ __('navigation.home') }}</a>
                </li>
                <li class="separator"><i class="icon-angle-right"></i></li>
                <li class="breadcrumb-item">
                    <a href="{{ route('trainings.index') }}">{{ __('navigation.trainings') }}</a>
                </li>
                <li class="separator"><i class="icon-angle-right"></i></li>
                <li class="breadcrumb-item">
                    <a href="{{ route('training.show', $training->slug) }}">{{ $training->title }}</a>
                </li>
                <li class="separator"><i class="icon-angle-right"></i></li>
                <li class="breadcrumb-item active" aria-current="page">{{ __('trainings.register_breadcrumb') }}</li>
            </ul>
        </div>
    </div>
    <ul class="shape-group" aria-hidden="true">
        <li class="shape-1"><span></span></li>
        <li class="shape-2 scene"><img data-depth="2" src="{{ asset('assets/images/about/shape-13.png') }}" alt=""></li>
        <li class="shape-3 scene"><img data-depth="-2" src="{{ asset('assets/images/about/shape-15.png') }}" alt=""></li>
        <li class="shape-4"><span></span></li>
        <li class="shape-5 scene"><img data-depth="2" src="{{ asset('assets/images/about/shape-07.png') }}" alt=""></li>
    </ul>
</div>

{{-- Formulaires en premier (puis visuel / infos), comme demandé --}}
<section class="edu-section-gap contact-form-area page-training-register">
    <div class="container">
        @php
            $registerBannerErrors = collect($errors->getMessages())
                ->except(['login'])
                ->flatten()
                ->all();
        @endphp
        @if(count($registerBannerErrors) > 0)
        <div class="alert alert-danger alert-dismissible fade show" role="alert">
            <ul class="mb-0">
                @foreach($registerBannerErrors as $error)
                <li>{{ $error }}</li>
                @endforeach
            </ul>
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
        @endif

        @if(request('session') && !$selectedSession && $registerableSessions->count() > 1)
        <div class="alert alert-warning alert-dismissible fade show" role="alert">
            {{ __('trainings.register_session_url_invalid') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
        @endif

        @if(session('error'))
        <div class="alert alert-danger alert-dismissible fade show" role="alert">
            {{ session('error') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
        @endif

        @if(session('warning'))
        <div class="alert alert-warning alert-dismissible fade show" role="alert">
            {{ session('warning') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
        @endif

        @guest
            @include('trainings.partials.register-account-gateway', [
                'training' => $training,
                'registerVerifyEmail' => $registerVerifyEmail ?? null,
                'registerVerifyToken' => $registerVerifyToken ?? null,
            ])
        @else
        <div class="row justify-content-center">
            <div class="col-lg-8 col-xl-7">
                <div class="login-form-box training-register-finalize-card">
                    <h3 class="title">{{ __('trainings.register_auth_heading') }}</h3>
                    <p class="text-center text-muted mb-4">
                        {{ __('trainings.register_logged_as', ['name' => trim(auth()->user()->firstname.' '.auth()->user()->lastname), 'email' => auth()->user()->email]) }}
                    </p>
                    <div class="contact-form">
                    {{-- Pas de rwt-dynamic-form : le thème bloque le submit (AJAX vers mail.php). --}}
                    <form id="training-register-session-form" class="rnt-contact-form" method="POST" action="{{ route('training.register.post', $training->slug) }}">
                        @csrf
                        <div class="row row--10">
                            <div class="form-group col-12">
                                <label class="d-block mb-2 fw-semibold">{{ __('trainings.register_field_session') }} <span class="text-danger">*</span></label>

                                @if($registerableSessions->count() === 1)
                                    @php $only = $registerableSessions->first(); @endphp
                                    <input type="hidden" name="session_id" value="{{ $only->id }}">
                                    <div class="p-3 bg-light rounded">
                                        <strong>{{ $only->name }}</strong>
                                        @if($only->start_date)
                                            <div class="small text-muted mt-1">
                                                {{ __('trainings.start_date') }} : {{ $only->start_date->format('d/m/Y') }}
                                                @if($only->end_date)
                                                    — {{ __('trainings.end_date') }} : {{ $only->end_date->format('d/m/Y') }}
                                                @endif
                                            </div>
                                        @endif
                                    </div>
                                @elseif($selectedSession)
                                    <input type="hidden" name="session_id" value="{{ $selectedSession->id }}">
                                    <div class="p-3 bg-light rounded">
                                        <strong>{{ $selectedSession->name }}</strong>
                                        @if($selectedSession->start_date)
                                            <div class="small text-muted mt-1">
                                                {{ __('trainings.start_date') }} : {{ $selectedSession->start_date->format('d/m/Y') }}
                                                @if($selectedSession->end_date)
                                                    — {{ __('trainings.end_date') }} : {{ $selectedSession->end_date->format('d/m/Y') }}
                                                @endif
                                            </div>
                                        @endif
                                    </div>
                                    @if($registerableSessions->count() > 1)
                                        <p class="form-text mt-2 mb-0">
                                            <a href="{{ route('training.register', $training->slug) }}">{{ __('trainings.register_change_session') }}</a>
                                        </p>
                                    @endif
                                @else
                                    @foreach($registerableSessions as $session)
                                    <div class="form-check mb-2 p-3 border rounded">
                                        <input class="form-check-input" type="radio" name="session_id" id="session-{{ $session->id }}"
                                            value="{{ $session->id }}" {{ (string) old('session_id') === (string) $session->id ? 'checked' : '' }} required>
                                        <label class="form-check-label w-100" for="session-{{ $session->id }}">
                                            <strong>{{ $session->name }}</strong>
                                            @if($session->start_date)
                                                <span class="d-block small text-muted">
                                                    {{ __('trainings.start_date') }} : {{ $session->start_date->format('d/m/Y') }}
                                                    @if($session->end_date)
                                                        — {{ __('trainings.end_date') }} : {{ $session->end_date->format('d/m/Y') }}
                                                    @endif
                                                </span>
                                            @endif
                                        </label>
                                    </div>
                                    @endforeach
                                @endif
                                @error('session_id')<div class="text-danger small mt-2">{{ $message }}</div>@enderror
                            </div>

                            @if($training->student_price && (float) $training->student_price > 0 && (float) $training->student_price < (float) $training->price)
                            <div class="form-group col-12">
                                <div class="form-check">
                                    <input type="hidden" name="use_student_price" value="0">
                                    <input class="form-check-input" type="checkbox" name="use_student_price" id="use_student_price" value="1"
                                        {{ old('use_student_price', '0') === '1' ? 'checked' : '' }}>
                                    <label class="form-check-label" for="use_student_price">
                                        {{ __('trainings.register_student_price', ['price' => number_format($training->student_price, 2, ',', ' ')]) }}
                                    </label>
                                </div>
                            </div>
                            @endif

                            <div class="form-group col-12 text-center">
                                <button type="submit" id="training-register-submit-btn" class="rn-btn edu-btn submit-btn d-inline-flex align-items-center justify-content-center gap-2" data-loading-label="{{ __('trainings.register_submit_loading') }}">
                                    <span class="spinner-border spinner-border-sm training-register-submit-spinner d-none" role="status" aria-hidden="true"></span>
                                    <span class="training-register-submit-label">{{ __('trainings.register_submit_continue') }} <i class="icon-4"></i></span>
                                </button>
                            </div>
                        </div>
                    </form>
                    <div class="d-flex flex-wrap justify-content-center align-items-center gap-2 mt-4">
                        <a href="{{ route('training.show', $training->slug) }}" class="edu-btn btn-border btn-medium m-0">{{ __('trainings.register_cancel') }}</a>
                        <form class="m-0 d-inline-flex align-items-center" method="post" action="{{ route('member.logout') }}">
                            @csrf
                            <button type="submit" class="edu-btn btn-border btn-medium">{{ __('trainings.register_logout') }}</button>
                        </form>
                    </div>
                    </div>
                </div>
            </div>
        </div>
        @endguest
    </div>
    <ul class="shape-group" aria-hidden="true">
        <li class="shape-1 scene"><img data-depth="-2" src="{{ asset('assets/images/about/shape-15.png') }}" alt=""></li>
        <li class="shape-2 scene"><img data-depth="2" src="{{ asset('assets/images/cta/shape-04.png') }}" alt=""></li>
        <li class="shape-3 scene"><span data-depth="1"></span></li>
        <li class="shape-4 scene"><img data-depth="-2" src="{{ asset('assets/images/about/shape-13.png') }}" alt=""></li>
    </ul>
</section>

{{-- Zone visuel + infos (contact-me-area) --}}
<section class="section-gap-equal contact-me-area page-training-register">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-12 col-xl-11">
                <div class="contact-me">
                    <div class="inner training-register-contact-inner">
                        <div class="row align-items-center g-4 g-lg-5 w-100 mx-0">
                            <div class="col-md-5 col-lg-5 col-xl-4 text-center text-md-start">
                                <div class="thumbnail training-register-thumbnail">
                                    <div class="thumb training-register-thumb">
                                        <img src="{{ $registerHeroImage }}" alt="{{ $training->title }}">
                                    </div>
                                    <ul class="shape-group" aria-hidden="true">
                                        <li class="shape-1 scene">
                                            <img data-depth="1.4" src="{{ asset('assets/images/about/shape-13.png') }}" alt="">
                                        </li>
                                        <li class="shape-2 scene">
                                            <img data-depth="-1.4" src="{{ asset('assets/images/counterup/shape-02.png') }}" alt="">
                                        </li>
                                        <li class="shape-3">
                                            <img src="{{ asset('assets/images/about/shape-07.png') }}" alt="">
                                        </li>
                                    </ul>
                                </div>
                            </div>
                            <div class="col-md-7 col-lg-7 col-xl-8">
                                <div class="contact-us-info">
                                    <h3 class="heading-title">{{ __('trainings.register_sidebar_intro') }}</h3>
                                    <p class="training-register-lead mb-0"><strong>{{ $training->title }}</strong></p>
                                    <ul class="address-list">
                                        @if(config('sfer.address'))
                                        <li>
                                            <h5 class="title">{{ __('contact.address') }}</h5>
                                            <p>{{ config('sfer.address') }}</p>
                                        </li>
                                        @endif
                                        @if(config('sfer.email'))
                                        <li>
                                            <h5 class="title">{{ __('contact.email') }}</h5>
                                            <p><a href="mailto:{{ config('sfer.email') }}">{{ config('sfer.email') }}</a></p>
                                        </li>
                                        @endif
                                        @if(config('sfer.phone'))
                                        <li>
                                            <h5 class="title">{{ __('contact.phone') }}</h5>
                                            <p><a href="tel:{{ preg_replace('/\s+/', '', config('sfer.phone')) }}">{{ config('sfer.phone') }}</a></p>
                                        </li>
                                        @endif
                                    </ul>
                                    <div class="mt-4 pt-2">
                                        <a href="{{ route('contact') }}" class="edu-btn btn-medium">{{ __('trainings.contact_us') }} <i class="icon-4"></i></a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
@endsection

@push('scripts')
<script>
(function () {
    var form = document.getElementById('training-register-session-form');
    var btn = document.getElementById('training-register-submit-btn');
    if (!form || !btn) return;
    form.addEventListener('submit', function () {
        var sp = btn.querySelector('.training-register-submit-spinner');
        if (sp) sp.classList.remove('d-none');
        btn.classList.add('is-loading');
        btn.disabled = true;
        btn.setAttribute('aria-busy', 'true');
        var loadingLabel = btn.getAttribute('data-loading-label');
        if (loadingLabel) btn.setAttribute('aria-label', loadingLabel);
    });
})();
</script>
@endpush