@extends('layouts.site')
@php
    $my_name_view = 'Uzytkownik - Moje szkolenia';
    $my_short_view_name = 'Moje szkolenia';
@endphp
@section('title', 'Moje szkolenia')

@section('content')
    <div class="tab-content_2 p-3 szkol-user-trainings" id="my-trainings-page-root" data-endpoint="{{ route('szkolenia.user.my-trainings') }}" style="overflow-y: auto;">
        <div id="my-trainings-header">
            @include('szkolenia.user.partials.my_trainings_header')
        </div>

        <div id="my-trainings-filters">
            @include('szkolenia.user.partials.my_trainings_filters')
        </div>

        <div id="my-trainings-results">
            @include('szkolenia.user.partials.my_trainings_results')
        </div>
    </div>
@endsection

@section('menu')
    @include('sites.szkol.menu_szkol')
@endsection

@section('navbar')
    @include('sites.szkol._navbar_szkol')
@endsection

@push('styles')
    <style>
        .szkol-user-trainings.is-loading {
            opacity: .65;
            pointer-events: none;
            transition: opacity .18s ease-in-out;
        }

        .szkol-user-trainings .stats-item-col {
            flex: 0 0 20%;
            max-width: 20%;
        }
        @media (max-width: 1199.98px) {
            .szkol-user-trainings .stats-item-col {
                flex: 0 0 50%;
                max-width: 50%;
            }
        }
        @media (max-width: 767.98px) {
            .szkol-user-trainings .stats-item-col {
                flex: 0 0 100%;
                max-width: 100%;
            }
        }
        .szkol-user-trainings .stat-card {
            border: 1px solid #dbe2ea;
            border-radius: 12px;
            color: #38495c;
            text-decoration: none;
            transition: all .15s ease-in-out;
            min-height: 120px;
        }
        .szkol-user-trainings .stat-card:hover {
            text-decoration: none;
            transform: translateY(-2px);
            box-shadow: 0 0.5rem 1rem rgba(18, 40, 72, .12);
        }
        .szkol-user-trainings .stat-card.is-active {
            background-color: floralwhite;
            border-color: #2f7bdc;
            /*box-shadow: 0 0 0 2px rgba(47, 123, 220, .2);*/
            box-shadow: 0px 0px 10px 5px rgb(189 166 5 / 72%);
        }
        .szkol-user-trainings .stat-icon {
            font-size: 1.1rem;
            margin-bottom: .35rem;
        }
        .szkol-user-trainings .stat-value {
            font-size: 1.6rem;
            font-weight: 700;
            line-height: 1.1;
        }
        .szkol-user-trainings .stat-label {
            font-size: .9rem;
            color: #5f7085;
        }
        .szkol-user-trainings .my-training-tile {
            border: 1px solid #dbe2ea;
            border-radius: 14px;
            box-shadow: 0 .35rem .9rem rgba(20, 35, 55, .08);
        }
        .szkol-user-trainings .my-training-tile-card {
            position: relative;
            overflow: hidden;
        }
        .szkol-user-trainings .my-training-tile-card.is-clickable {
            cursor: pointer;
        }
        .szkol-user-trainings .my-training-tile-card .card-body {
            position: relative;
            z-index: 2;
        }
        .szkol-user-trainings .training-result-watermark {
            position: absolute;
            inset: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            pointer-events: none;
            z-index: 1;
            font-weight: 800;
            letter-spacing: 2px;
            line-height: 1;
            opacity: .24;
            user-select: none;
        }
        .szkol-user-trainings .training-result-watermark.is-label {
            font-size: 5rem;
        }
        .szkol-user-trainings .training-result-watermark.is-percent {
            font-size: 10rem;
        }
        .szkol-user-trainings .training-result-watermark.is-passed.is-percent {
            font-size: 8rem;
        }
        .szkol-user-trainings .training-result-watermark span {
            transform: rotate(-8deg);
            white-space: nowrap;
            max-width: 95%;
            text-align: center;
        }
        .szkol-user-trainings .training-result-watermark.is-passed {
            color: #2f9e44;
        }
        .szkol-user-trainings .training-result-watermark.is-failed {
            color: #d32f2f;
        }
        .szkol-user-trainings .my-training-title {
            font-size: 1.05rem;
            min-height: 2.7rem;
            margin-bottom: .65rem;
            color: #2f4054;
            font-weight: 700;
        }
        .szkol-user-trainings .my-training-meta {
            color: #5b6d82;
            font-size: .86rem;
            line-height: 1.45;
        }
        .szkol-user-trainings .my-trainings-list-grid .ajax-crud-card {
            border: 1px solid #dbe2ea;
            border-radius: 10px;
            overflow: hidden;
        }
        .szkol-user-trainings .my-trainings-list-grid .tabela-naglowek th {
            white-space: nowrap;
        }
        .szkol-user-trainings .tile-status-icons {
            display: inline-flex;
            align-items: center;
            gap: .35rem;
        }
        .szkol-user-trainings .tile-status-icon {
            width: 34px;
            height: 34px;
            border-radius: 50%;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5rem;
            line-height: 1;
            border: 1px solid rgba(0, 0, 0, .06);
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2);
        }
        .szkol-user-trainings .tile-status-icon.is-success {
            background: #91d4a9;
            color: #fff;
        }
        .szkol-user-trainings .tile-status-icon.is-warning {
            background: #f6d8a8;
            color: #7a5814;
        }
        .szkol-user-trainings .tile-status-icon.is-muted {
            background: #d9dde2;
            color: #5f6d7b;
        }
        .szkol-user-trainings .tile-status-icon.is-active {
            background: #9dd7a9;
            color: #fff;
        }
        .szkol-user-trainings .tile-status-icon.is-archived {
            background: #d1d6dc;
            color: #6a7480;
        }

        /* Ujednolicona wysokosc kontrolek filtra (input + lupa + reset). */
        .szkol-user-trainings #my-trainings-filter-form .form-control.form-control-sm,
        .szkol-user-trainings #my-trainings-filter-form .btn.btn-sm {
            height: 34px;
            min-height: 34px;
        }

        .szkol-user-trainings #my-trainings-filter-form .btn.js-filter-reset {
            white-space: nowrap;
        }
    </style>
@endpush

@push('scripts')
    <script>
        (function () {
            var $root = $('#my-trainings-page-root');
            if (!$root.length) {
                return;
            }

            var pendingRequest = null;

            function setLoading(loading) {
                $root.toggleClass('is-loading', !!loading);
            }

            function normalizeUrl(url) {
                try {
                    return new URL(String(url || ''), window.location.origin).toString();
                } catch (_e) {
                    return '';
                }
            }

            function toAjaxUrl(url) {
                try {
                    var parsed = new URL(String(url || ''), window.location.origin);
                    parsed.searchParams.set('ajax', '1');
                    return parsed.toString();
                } catch (_e) {
                    return url;
                }
            }

            function replaceSection(selector, html) {
                if (typeof html !== 'string') {
                    return;
                }
                $(selector).html(html);
            }

            // Wspolna akcja AJAX dla statystyk, filtrow, paginacji i zmiany trybu (kafelki/lista).
            function loadByUrl(url, pushHistory, options) {
                options = options || {};
                var shouldReplaceHeader = options.replaceHeader !== false;
                var shouldReplaceFilters = options.replaceFilters !== false;
                var shouldReplaceResults = options.replaceResults !== false;

                var targetUrl = normalizeUrl(url);
                if (!targetUrl) {
                    return;
                }

                if (pendingRequest && pendingRequest.readyState !== 4) {
                    pendingRequest.abort();
                }

                setLoading(true);
                var requestUrl = toAjaxUrl(targetUrl);

                pendingRequest = $.ajax({
                    url: requestUrl,
                    method: 'GET',
                    dataType: 'json',
                    headers: {
                        'X-Requested-With': 'XMLHttpRequest'
                    }
                }).done(function (res) {
                    if (!res || res.ok !== true || !res.html) {
                        window.location.href = targetUrl;
                        return;
                    }

                    if (shouldReplaceHeader) {
                        replaceSection('#my-trainings-header', res.html.header || '');
                    }
                    if (shouldReplaceFilters) {
                        replaceSection('#my-trainings-filters', res.html.filters || '');
                    }
                    if (shouldReplaceResults) {
                        replaceSection('#my-trainings-results', res.html.results || '');
                    }

                    if (pushHistory) {
                        var historyUrl = targetUrl;
                        try {
                            var parsed = new URL(targetUrl);
                            historyUrl = parsed.pathname + parsed.search + parsed.hash;
                        } catch (_e) {
                            historyUrl = targetUrl;
                        }
                        window.history.pushState({ myTrainingsAjax: true }, '', historyUrl);
                    }
                }).fail(function (_xhr, statusText) {
                    if (statusText === 'abort') {
                        return;
                    }
                    window.location.href = targetUrl;
                }).always(function () {
                    setLoading(false);
                });
            }

            $(document).on('submit', '#my-trainings-filter-form', function (e) {
                e.preventDefault();
                triggerLiveFilter($(this), false);
            });

            function triggerLiveFilter($form, debounced) {
                if (!$form || !$form.length) {
                    return;
                }

                var action = normalizeUrl($form.attr('action'));
                if (!action) {
                    action = normalizeUrl($root.data('endpoint'));
                }
                if (!action) {
                    return;
                }

                var query = $form.serialize();
                var url = action + (action.indexOf('?') === -1 ? '?' : '&') + query;

                if (!debounced) {
                    loadByUrl(url, true, {
                        replaceHeader: true,
                        replaceFilters: true,
                        replaceResults: true
                    });
                    return;
                }

                clearTimeout(window.__myTrainingsFilterDebounceTimer);
                window.__myTrainingsFilterDebounceTimer = setTimeout(function () {
                    // Podczas pisania NIE podmieniamy sekcji filtrowania,
                    // aby nie gubic fokusu i pozycji kursora.
                    loadByUrl(url, true, {
                        replaceHeader: true,
                        replaceFilters: false,
                        replaceResults: true
                    });
                }, 350);
            }

            // Dynamiczne filtry: selecty i daty odswiezaja liste natychmiast po zmianie.
            $(document).on('change', '#my-trainings-filter-form select, #my-trainings-filter-form input[type="date"]', function () {
                triggerLiveFilter($('#my-trainings-filter-form'), false);
            });

            // Dynamiczne wyszukiwanie tekstowe z debounce.
            $(document).on('input', '#my-trainings-filter-form input[type="text"]', function () {
                triggerLiveFilter($('#my-trainings-filter-form'), true);
            });

            $(document).on('click', '.js-my-trainings-link', function (e) {
                var href = normalizeUrl($(this).attr('href'));
                if (!href) {
                    return;
                }

                e.preventDefault();
                loadByUrl(href, true);
            });

            $(document).on('click', '#my-trainings-results .pagination a', function (e) {
                var href = normalizeUrl($(this).attr('href'));
                if (!href) {
                    return;
                }

                e.preventDefault();
                loadByUrl(href, true);
            });

            // Otwieranie szkolenia po kliknieciu w kafelek (nie tylko w przycisk).
            $(document).on('click', '.js-open-training-tile', function (e) {
                var $tile = $(this);
                var href = normalizeUrl($tile.data('open-url'));
                if (!href) {
                    return;
                }

                // Klik w elementy interaktywne wewnatrz kafelka zostawiamy bez zmian.
                if ($(e.target).closest('a,button,input,select,textarea,label').length) {
                    return;
                }

                window.location.href = href;
            });

            // Dostepnosc klawiaturowa: Enter/Spacja otwieraja wskazany kafelek.
            $(document).on('keydown', '.js-open-training-tile', function (e) {
                if (e.key !== 'Enter' && e.key !== ' ') {
                    return;
                }
                var href = normalizeUrl($(this).data('open-url'));
                if (!href) {
                    return;
                }
                e.preventDefault();
                window.location.href = href;
            });

            // Obsluga wstecz/dalej w przegladarce bez pelnego reloadu.
            window.addEventListener('popstate', function () {
                loadByUrl(window.location.href, false);
            });
        })();
    </script>
@endpush