@extends('layout.front')
@section('title', 'Sertifikati | Krojačeva škola')
@section('description', 'Pregledaj sve sertifikate koje si stekao kroz Krojačevu školu. Preuzmi svoje sertifikate i pokaži svoje znanje i veštine.')
@section('keywords', 'Krojačeva škola, sertifikati, kursevi, edukacija, online učenje, diplome, priznanja')

@section('content')
<div class="page-wrapper">

    <!-- Header Account -->
    @include('front-inc._header-account')

    <!-- section main-container -->
    <section class="main-container">

        <div class="container">
            <div class="row">

                <!-- main-content -->
                <div class="main-content col-12">

                    <nav class="breadcrumb-holder" aria-label="breadcrumb">
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item"><a href="{{ route('lms.profile') }}">Moj nalog</a></li>
                            <li class="breadcrumb-item active" aria-current="page">Sertifikati</li>
                        </ol>
                    </nav>
                    <!-- breadcrumb end -->

                    <div class="main-title-hr-holder">
                        <div class="main-title-hr">
                            <h1>Sertifikati ({{ $certificates->count() }})</h1>
                        </div>
                        <!-- main-title-hr end -->
                        <p class="text-light">Preuzimanje sertifikata i praćenje progresa</p>
                    </div>
                    <!-- main-title-hr-holder end -->
                    @php
                        $prevRoute = route('lms.moji-sertifikati.index', [
                            'sortColumn' => request()->get('sortColumn', null),
                            'sortDirection' => request()->get('sortDirection', null),
                            'status' => request()->get('status', null),
                            'page' => ($certificates->currentPage() == 1) ? 1 : ($certificates->currentPage() -1),
                            'perPage' => request()->get('perPage', 10)
                        ]);

                        $nextRoute = route('lms.moji-sertifikati.index', [
                            'sortColumn' => request()->get('sortColumn', null),
                            'sortDirection' => request()->get('sortDirection', null),
                            'status' => request()->get('status', null),
                            'page' => ($certificates->currentPage() == $certificates->lastPage()) ? $certificates->lastPage() : ($certificates->currentPage() + 1),
                            'perPage' => request()->get('perPage', 10)
                        ]);
                    @endphp
                    <!-- row table desktop only -->
                    @include('front.user.partials.certificates._desktop-table')
                    <!-- row table desktop only end -->

                    <!-- row mobile only -->
                    @include('front.user.partials.certificates._mobile_table')
                    <!-- row mobile only end -->

                </div>
                <!-- main-content end -->

            </div>
            <!-- row end -->
        </div>
        <!-- container end -->

    </section>

    @include('front-inc._footer')

</div>
@include('front.user.partials.certificates._modal-replace-certificate')
@endsection

@section('add-scripts')
    @parent
    <script>
        const replaceCertificateBtns = document.querySelectorAll('.btn-replace-certificate');
        const replaceCertificateModal = new bootstrap.Modal(document.querySelector('#modalReplaceCertificate'));
        replaceCertificateBtns.forEach((element) => {
            element.addEventListener('click', (event) => {
                const enrollment_id = event.currentTarget.dataset.enrollment_id;
                if(enrollment_id != -1) {
                    const formAction = route('lms.moji-sertifikati.replace');
                    replaceCertificateModal.show();
                    document.querySelector('#replaceCertificateForm input[name=enrollment_id]').setAttribute('value', enrollment_id)
                    replaceCertificateForm.setAttribute('action', formAction);
                }
            });
        });
    </script>
    <script
        type="text/javascript"
        src="{{ mix('js/userCertificates.js') }}"
    ></script>
@endsection