@extends('layouts.site')

@php
    $date_now = date('YmdHis');
    $sciezka_do_pliku = "_sample_files/csv/FileToDB_szkolenia.csv";
@endphp

@section('content')
<style>
    .add-style-panel .card {
        border-radius: 15px;
        overflow: hidden;
    }

    .add-style-panel .card-body {
        background: #e9f7ef;
    }

    #form_tab2 .col-form-label {
        font-size: 1rem !important;
        display: flex;
        align-items: flex-start;
        justify-content: flex-end;
    }

    #form_tab2 input.form-control,
    #form_tab2 textarea.form-control,
    #form_tab2 select.form-control {
        font-size: 1.1rem !important;
        line-height: 1 !important;
        border-radius: .4rem !important;
    }

    #form_tab2 .custom-file-label,
    #form_tab2 .custom-file-input {
        font-size: 1.1rem !important;
        line-height: 1 !important;
        border-radius: .4rem !important;
        height: calc(2.25rem + 2px);
    }

    #form_tab2 .custom-file-label {
        display: flex;
        align-items: center;
    }

    #form_tab2 .custom-file-label::after {
        height: calc(2.25rem + 0px);
        display: flex;
        align-items: center;
        border-radius: 0 .4rem .4rem 0;
    }

    #form_tab2 .custom-file-label.error2 {
        border: 1px solid #dc3545 !important;
    }

    #form_tab2 .form-group.row {
        margin-bottom: 15px !important;
    }

    @media (min-width: 768px) {
        #form_tab2 .form-group > .col-md-6 {
            -ms-flex: 0 0 60%;
            flex: 0 0 60%;
            max-width: 60%;
        }
    }
</style>

<div class="tab-content_2">
    <div class="row justify-content-center">
        <div class="col-md-12">
            <div class="row col-12 index-info" style="justify-content: space-between; padding-right: 0; margin: 1rem 0 1rem .5rem;">
                <div class="col-8">
                    <h5><i>Szkolenia ODO - Import z pliku CSV.</i></h5>
                </div>
            </div>

            <div class="row col-12" style="justify-content: space-between; padding-right: 0; margin: 1rem 0 1rem .5rem;">
                <div class="col-7"></div>
                <div class="col-5 text-left">
                    <a class="btn col-12 text-left" href="{{ asset($sciezka_do_pliku) }}{{ '?' }}{{ $date_now }}" data-toggle="tooltip" target="_blank" title="Pobierz wzorzec pliku CSV">
                        <p class="my_p_info">
                            <i class="fas fa-2x fa-file-csv"></i>
                            &nbsp;&nbsp;&nbsp;
                            <i>Wzorzec pliku CSV do przeprowadzenia importu.</i>
                        </p>
                    </a>
                </div>
            </div>

            <div class="col-md-7 offset-md-2 add-style-panel">
                <div class="card" style="margin-top: 4rem;">
                    <div class="card-header card_add">Import Szkoleń ODO z pliku CSV</div>

                    <div class="card-body">
                        <form id="form_tab2" action="{{ route('m_odo_proces_szkolenia_rejestr_form_add_from_file_read') }}" method="POST" enctype="multipart/form-data">
                            @csrf

                            <div class="form-group row">
                                <label class="col-md-4 col-form-label text-md-right" for="upload_file">Wybierz plik CSV do importu:</label>
                                <div class="col-md-6">
                                    <div class="custom-file">
                                        <input type="file" name="upload_file" id="upload_file" class="custom-file-input my_upload-file" required autofocus>
                                        <label class="custom-file-label text-left" for="upload_file">Wybierz plik...</label>
                                    </div>
                                    <label id="upload_file-error" class="label_error my_FormLabelError_2 error" for="upload_file"></label>
                                </div>
                            </div>

                            <div class="form-group row">
                                <label class="col-md-4 col-form-label text-md-right"></label>
                                <div class="col-md-6">
                                    <label class="col-form-label text-md-left">
                                        Wymagane pola szkolenia: data, temat, rodzaj, status.
                                        Uczestnik (PESEL) jest opcjonalny.
                                    </label>
                                </div>
                            </div>

                            <hr>
                            <div class="form-group row mb-0">
                                <div class="text-center col-md-6 offset-md-3">
                                    <a href="{{ url('/m_odo_proces_szkolenia_rejestr') }}" type="btn" class="btn btn-secondary">Anuluj</a>
                                    <button type="submit" class="btn btn-success">Wczytaj plik</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="{{ asset('/library/jquery-validation/dist/jquery.validate.min.js') }}"></script>
<script src="{{ asset('/library/jquery-validation/dist/additional-methods.min.js') }}"></script>
<script src="{{ asset('/library/jquery-validation/dist/localization/messages_pl.min.js') }}"></script>

<script>
    $(document).ready(function () {
        $('#form_tab2').validate({
            rules: {
                upload_file: {
                    required: true,
                    extension: 'csv'
                }
            },
            messages: {
                upload_file: {
                    extension: 'Dozwolony jest tylko plik CSV.'
                }
            },
            errorPlacement: function (error, element) {
                if (element.attr('name') === 'upload_file') {
                    error.addClass('label_error my_FormLabelError_2 error');
                    error.insertAfter(element.closest('.custom-file'));
                } else {
                    error.insertAfter(element);
                }
            },
            onfocusout: function (element) {
                $(element).valid();
            },
            highlight: function (element) {
                if (element.name === 'upload_file') {
                    $('#upload_file').next('.custom-file-label').addClass('error2');
                } else {
                    $(element).addClass('error');
                }
            },
            unhighlight: function (element) {
                if (element.name === 'upload_file') {
                    $('#upload_file').next('.custom-file-label').removeClass('error2');
                } else {
                    $(element).removeClass('error').addClass('valid');
                }
            },
            submitHandler: function (form) {
                form.submit();
            }
        });

        $(document).on('change', '#upload_file', function () {
            var fileName = '';
            if (this.files && this.files.length > 0) {
                fileName = this.files[0].name;
            }
            $(this).next('.custom-file-label').text(fileName || 'Wybierz plik...');
            $(this).valid();
        });
    });
</script>
@endsection

@section('navbar')
@include('sites.odo._navbar_odo')
@include('sites.odo.rejestr_szkolen._navbar_rejestr_szkolen')
<i class="fas fa-chevron-right separator"></i>
<span class="navbar_navigate" title="Aktywny Widok">Dodaj Wiele z pliku</span>
@endsection

@section('menu')
    @include('sites.odo.menu_odo')
@endsection