@extends('layouts.app')

@section('title', __('member.account.trainings_title'))

@section('content')
<div class="edu-breadcrumb-area bg-white" style="padding: 50px 0 50px;">
    <div class="container">
        <div class="breadcrumb-inner">
            <div class="page-title">
                <h1 class="title">{{ __('member.account.dashboard_breadcrumb') }}</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 active" aria-current="page">{{ __('member.account.trainings_title') }}</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>

<section class="edu-section-gap account-page-area section-gap-equal contact-form-area edu-member-dashboard">
    <div class="container position-relative">
        <div class="row g-5">
            <div class="col-12 col-md-4 col-xl-3">
                @include('member.partials.account-sidebar', ['active' => 'trainings'])
            </div>
            <div class="col-12 col-md-8 col-xl-9">
                <div class="login-form-box mb-4">
                    <h3 class="title edu-member-main-heading">{{ __('member.account.trainings_title') }}</h3>
                    <p class="edu-member-main-intro mb-0">{{ __('member.account.trainings_intro') }}</p>
                </div>

                @if(session('success'))
                    <div class="alert alert-success mb-4" role="alert">{{ session('success') }}</div>
                @endif
                @if(session('error'))
                    <div class="alert alert-danger mb-4" role="alert">{{ session('error') }}</div>
                @endif

                @if($registrations->isEmpty())
                    <div class="login-form-box text-center py-5">
                        <i class="ri-book-open-line edu-member-empty-icon" aria-hidden="true"></i>
                        <p class="text-muted mb-0 mt-3">{{ __('member.account.trainings_empty') }}</p>
                    </div>
                @else
                    @foreach($registrations as $registration)
                        @php
                            $training = $registration->training;
                            $session = $registration->session;
                            $status = $registration->status ?? 'pending';
                            $badgeClass = match ($status) {
                                'confirmed' => 'bg-success',
                                'pending' => 'bg-warning text-dark',
                                'pending_cancellation' => 'bg-info text-dark',
                                'cancelled' => 'bg-secondary',
                                'archived' => 'bg-secondary',
                                default => 'bg-secondary',
                            };
                            $statusLabel = match ($status) {
                                'confirmed' => __('member.account.status_confirmed'),
                                'pending' => __('member.account.status_pending'),
                                'pending_cancellation' => __('member.account.status_pending_cancellation'),
                                'cancelled' => __('member.account.status_cancelled'),
                                'archived' => __('member.account.status_archived'),
                                default => $status,
                            };
                            $progressKey = $session?->sessionProgressKey();
                            $progressBadgeClass = match ($progressKey) {
                                'upcoming' => 'bg-info text-dark',
                                'ongoing' => 'bg-primary',
                                'finished' => 'bg-secondary',
                                default => 'bg-secondary',
                            };
                            $progressLabel = match ($progressKey) {
                                'upcoming' => __('member.account.session_progress_upcoming'),
                                'ongoing' => __('member.account.session_progress_ongoing'),
                                'finished' => __('member.account.session_progress_finished'),
                                default => null,
                            };
                        @endphp
                        <div class="login-form-box edu-member-training-card mb-4">
                            <div class="d-flex flex-wrap justify-content-between align-items-start gap-3 mb-3">
                                <h4 class="title h5 mb-0 flex-grow-1">
                                    @if($training)
                                        {{ $training->translate()?->title ?? $training->title }}
                                    @else
                                        {{ __('member.account.training_unavailable') }}
                                    @endif
                                </h4>
                                <div class="d-flex flex-wrap align-items-center gap-2 align-self-start">
                                    <span class="badge {{ $badgeClass }}">{{ $statusLabel }}</span>
                                    @if($progressLabel)
                                        <span class="badge {{ $progressBadgeClass }}">{{ $progressLabel }}</span>
                                    @endif
                                </div>
                            </div>

                            @if($training && ($session || $registration->registration_date))
                                <ul class="list-unstyled mb-0 edu-member-training-meta">
                                    @if($registration->registration_date)
                                        <li>
                                            <span class="edu-member-training-meta-label">{{ __('member.account.purchase_date') }}</span>
                                            {{ $registration->registration_date->format('d/m/Y') }}
                                        </li>
                                    @endif
                                    @if($session)
                                        <li>
                                            <span class="edu-member-training-meta-label">{{ __('member.account.training_session') }}</span>
                                            {{ $session->name }}
                                        </li>
                                        @if($session->start_date)
                                            <li>
                                                <span class="edu-member-training-meta-label">{{ __('trainings.start_date') }}</span>
                                                {{ $session->start_date_human }}
                                            </li>
                                        @endif
                                    @endif
                                </ul>
                            @endif

                            @if($registration->registration_number)
                                <p class="small mb-0 mt-5 edu-member-training-ref">
                                    <span class="edu-member-training-meta-label d-inline me-2">{{ __('member.account.reference') }}</span>
                                    <strong>{{ $registration->invoice_number }}</strong>
                                </p>
                            @endif

                            @if($status === 'confirmed' && $session && $session->files->isNotEmpty())
                                <div class="mt-5 pt-4 border-top edu-member-training-session-files">
                                    <p class="edu-member-training-meta-label mb-2">{{ __('member.account.session_files_heading') }}</p>
                                    <ul class="list-unstyled mb-0">
                                        @foreach($session->files as $sessionFile)
                                            <li class="mb-2">
                                                <a href="{{ route('member.account.session-file.download', ['file' => $sessionFile->id]) }}" class="text-decoration-none edu-member-session-file-download" data-filename="{{ $sessionFile->original_name }}" title="{{ __('member.account.session_file_download', ['name' => $sessionFile->original_name]) }}">
                                                    <i class="ri-attachment-2 align-middle me-1" aria-hidden="true"></i>
                                                    {{ $sessionFile->original_name }}
                                                </a>
                                                <span class="text-muted small">({{ $sessionFile->formatted_size }})</span>
                                            </li>
                                        @endforeach
                                    </ul>
                                </div>
                            @endif

                            @if($training)
                                <div class="d-flex flex-wrap gap-2 mt-4 pt-3 border-top align-items-center flex-column align-items-stretch">
                                    @if($status === 'pending_cancellation')
                                        <p class="small text-muted mb-2 mb-md-3 order-0">{{ __('member.account.cancellation_request_notice') }}</p>
                                    @endif
                                    <div class="d-flex flex-wrap gap-2 align-items-center order-1">
                                    <a href="{{ route('training.show', ['slug' => $training->slug]) }}" class="edu-btn btn-border btn-medium m-0">{{ __('member.account.view_training') }} <i class="icon-4"></i></a>
                                    @if($registration->shouldShowContinuePaymentButton() && $session)
                                        <a href="{{ route('training.register.payment', ['slug' => $training->slug, 'registration' => $registration->id]) }}" class="edu-btn btn-medium m-0">{{ __('member.account.continue_payment') }} <i class="icon-4"></i></a>
                                    @endif
                                    @if($registration->shouldShowMemberCancelIncompleteOnlinePaymentButton())
                                        <form method="post" action="{{ route('training.register.cancel', [$training->slug, $registration->id]) }}" class="m-0 d-inline-flex js-member-cancel-registration"
                                            data-confirm-message="{{ e(__('trainings.register_cancel_confirm')) }}">
                                            @csrf
                                            <input type="hidden" name="redirect_to" value="member_trainings">
                                            <button type="submit" class="edu-btn btn-border btn-medium m-0 d-inline-flex align-items-center justify-content-center gap-2">
                                                <span class="spinner-border spinner-border-sm js-cancel-btn-spinner d-none flex-shrink-0" role="status" aria-hidden="true"></span>
                                                <span class="js-cancel-btn-label">{{ __('trainings.register_cancel_inscription') }}</span>
                                            </button>
                                        </form>
                                    @endif
                                    </div>
                                </div>
                            @endif
                        </div>
                    @endforeach
                @endif
            </div>
        </div>
        <ul class="shape-group" aria-hidden="true">
            <li class="shape-1 scene"><img data-depth="2" src="{{ asset('assets/images/about/shape-07.png') }}" alt=""></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/counterup/shape-02.png') }}" alt=""></li>
        </ul>
    </div>
</section>

{{-- Modale de confirmation (remplace confirm() natif) --}}
<div class="modal fade" id="memberCancelRegistrationModal" tabindex="-1" aria-labelledby="memberCancelRegistrationModalLabel" aria-hidden="true" data-bs-backdrop="static" data-bs-keyboard="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content edu-member-cancel-modal border-0 shadow-lg overflow-hidden">
            <div class="modal-header edu-member-cancel-modal__header border-0 align-items-center">
                <h5 class="modal-title text-white d-flex align-items-center mb-0" id="memberCancelRegistrationModalLabel">
                    <span class="edu-member-cancel-modal__icon d-inline-flex align-items-center justify-content-center me-2 rounded-circle flex-shrink-0" aria-hidden="true">
                        <i class="ri-error-warning-line"></i>
                    </span>
                    {{ __('trainings.register_cancel_modal_title') }}
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="{{ __('trainings.register_cancel_modal_close') }}"></button>
            </div>
            <div class="modal-body px-4 py-4">
                <p class="mb-0 lh-lg text-secondary" id="memberCancelRegistrationModalBody"></p>
            </div>
            <div class="modal-footer border-0 bg-light px-4 py-3 flex-wrap gap-2 justify-content-end">
                <button type="button" class="edu-btn btn-border btn-medium m-0" data-bs-dismiss="modal">{{ __('trainings.register_cancel_modal_keep') }}</button>
                <button type="button" class="edu-btn btn-medium m-0 edu-member-cancel-modal__confirm text-white border-0" id="memberCancelRegistrationModalConfirm">
                    <span class="spinner-border spinner-border-sm js-modal-cancel-confirm-spinner d-none me-2 align-middle" role="status" aria-hidden="true"></span>
                    <span class="js-modal-cancel-confirm-label">{{ __('trainings.register_cancel_modal_confirm') }}</span>
                </button>
            </div>
        </div>
    </div>
</div>
@endsection

@push('styles')
<style>
.edu-member-cancel-modal__header {
    background: linear-gradient(135deg, #0051a6 0%, #27acdd 100%);
    padding: 1.1rem 1.25rem;
}
.edu-member-cancel-modal__icon {
    width: 2.25rem;
    height: 2.25rem;
    background: rgba(255, 255, 255, 0.2);
    font-size: 1.25rem;
}
.edu-member-cancel-modal__confirm {
    background: linear-gradient(135deg, #c62828 0%, #e53935 100%);
    box-shadow: 0 2px 8px rgba(198, 40, 40, 0.35);
}
.edu-member-cancel-modal__confirm:hover,
.edu-member-cancel-modal__confirm:focus {
    background: linear-gradient(135deg, #b71c1c 0%, #c62828 100%);
    color: #fff !important;
}
.edu-member-cancel-modal__confirm:disabled {
    opacity: 0.85;
}
/* Annuler inscription : le thème .edu-btn utilise overflow:hidden + line-height fixe → spinner invisible */
.edu-member-dashboard .js-member-cancel-registration button.edu-btn {
    overflow: visible;
    line-height: 1.25;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
}
.edu-member-dashboard .js-member-cancel-registration button.edu-btn .spinner-border-sm {
    border-color: currentColor;
    border-right-color: transparent;
}
.edu-member-cancel-modal .modal-footer .edu-btn {
    overflow: visible;
    line-height: 1.25;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
}
.edu-member-cancel-modal .modal-footer .edu-member-cancel-modal__confirm .spinner-border-sm {
    border-color: rgba(255, 255, 255, 0.85);
    border-right-color: transparent;
}
</style>
@endpush

@push('scripts')
<script>
(function () {
    var modalEl = document.getElementById('memberCancelRegistrationModal');
    var modal = null;
    var bodyEl = document.getElementById('memberCancelRegistrationModalBody');
    var confirmBtn = document.getElementById('memberCancelRegistrationModalConfirm');
    var pendingForm = null;

    if (modalEl && typeof bootstrap !== 'undefined' && bootstrap.Modal) {
        modal = bootstrap.Modal.getOrCreateInstance(modalEl);

        modalEl.addEventListener('hidden.bs.modal', function () {
            pendingForm = null;
            if (confirmBtn) {
                confirmBtn.disabled = false;
                confirmBtn.removeAttribute('aria-busy');
                var cSpin = confirmBtn.querySelector('.js-modal-cancel-confirm-spinner');
                var cLab = confirmBtn.querySelector('.js-modal-cancel-confirm-label');
                if (cSpin) {
                    cSpin.classList.add('d-none');
                }
                if (cLab) {
                    cLab.classList.remove('d-none');
                }
            }
        });

        if (confirmBtn) {
            confirmBtn.addEventListener('click', function () {
                if (!pendingForm) {
                    return;
                }
                confirmBtn.disabled = true;
                confirmBtn.setAttribute('aria-busy', 'true');
                var cSpin = confirmBtn.querySelector('.js-modal-cancel-confirm-spinner');
                var cLab = confirmBtn.querySelector('.js-modal-cancel-confirm-label');
                if (cSpin) {
                    cSpin.classList.remove('d-none');
                }
                if (cLab) {
                    cLab.classList.add('d-none');
                }

                var form = pendingForm;
                form.setAttribute('data-confirmed', 'true');
                modal.hide();
                form.requestSubmit();
            });
        }
    }

    document.querySelectorAll('form.js-member-cancel-registration').forEach(function (form) {
        form.addEventListener('submit', function (e) {
            if (form.getAttribute('data-confirmed') === 'true') {
                form.removeAttribute('data-confirmed');
                var btn = form.querySelector('button[type="submit"]');
                if (!btn) {
                    return;
                }
                btn.disabled = true;
                btn.setAttribute('aria-busy', 'true');
                var label = btn.querySelector('.js-cancel-btn-label');
                var spin = btn.querySelector('.js-cancel-btn-spinner');
                if (spin) {
                    spin.classList.remove('d-none');
                }
                if (label) {
                    label.classList.add('opacity-75');
                }
                return;
            }
            e.preventDefault();
            var msg = form.getAttribute('data-confirm-message');
            if (!modal) {
                if (window.confirm(msg || '')) {
                    form.setAttribute('data-confirmed', 'true');
                    form.requestSubmit();
                }
                return;
            }
            pendingForm = form;
            if (bodyEl) {
                bodyEl.textContent = msg || '';
            }
            modal.show();
        });
    });

    document.querySelectorAll('a.edu-member-session-file-download').forEach(function (link) {
        link.addEventListener('click', function (e) {
            if (!window.fetch || !window.URL || !window.URL.createObjectURL) {
                return;
            }
            e.preventDefault();
            var url = link.getAttribute('href');
            var filename = link.getAttribute('data-filename') || 'download';
            fetch(url, { credentials: 'same-origin', cache: 'no-store' })
                .then(function (res) {
                    if (!res.ok) {
                        throw new Error('HTTP ' + res.status);
                    }
                    return res.blob();
                })
                .then(function (blob) {
                    var objectUrl = URL.createObjectURL(blob);
                    var a = document.createElement('a');
                    a.href = objectUrl;
                    a.setAttribute('download', filename);
                    a.rel = 'noopener';
                    document.body.appendChild(a);
                    a.click();
                    a.remove();
                    URL.revokeObjectURL(objectUrl);
                })
                .catch(function () {
                    window.location.href = url;
                });
        });
    });
})();
</script>
@endpush