@extends('web.layouts.container')
@section('css')
    <link href="{{asset('assets/web/css/lib/image-uploader.min.css')}}" rel="stylesheet" type="text/css">
    <link type="text/css" rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
@endsection
@section('content')
    <section class="inner_header">
        <img src="{{asset('assets/web/images/icons/inner.svg')}}" alt="" class="inner_shap">
        <div class="container">
            <ul class="links">
                <li>
                    <a href="{{LaravelLocalization::getLocalizedURL($lang, route('home'), [], true)}}">{{__('main.home')}}</a>
                </li>
                <li>
                    <a href="#"> {{__('trainingRequests.training_request')}} </a>
                </li>
            </ul>
            <h4>{{__('trainingRequests.training_request')}}</h4>
        </div>
    </section>

    <section class="consultation-pg section_padding">
        <div class="container">
            <div class="form-container">
                <form method="post" action="{{route('trainings.trainingRequest')}}" class="training_request_form">
                    <div class="row mt-5 pt-3">
                        <div class="col-md-6">
                            <select name="purpose_training_id" class="form-select">
                                <option selected value="">{{__('trainingRequests.purpose_training_id')}}</option>
                                @if(count($trainingPurposes))
                                    @foreach($trainingPurposes as $trainingPurpose)
                                        <option value="{{$trainingPurpose->id}}">{{$trainingPurpose->name}}</option>
                                    @endforeach
                                @endif
                            </select>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <input name="name" maxlength="50" type="text" class="form-control" placeholder="{{__('trainingRequests.name')}}"/>
                            </div>
                        </div>
                    </div>
                    <div class="row mt-5">
                        <div class="col-md-6">
                            <div class="form-group">
                                <input name="email" maxlength="50" type="email" class="form-control" placeholder="{{__('trainingRequests.email')}}"/>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <input name="university" type="text" maxlength="100" class="form-control" placeholder=" {{__('trainingRequests.university') . __('trainingRequests.optional')}} "/>
                        </div>
                    </div>
                    <div class="row mt-5">
                        <div class="col-md-6">
                            <label class="label mb-4"><b>{{__('trainingRequests.birth_date')}}</b></label>
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="form-group">
                                        <input type="date" name="birth_date" class="w-100">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <label class="label mb-4"><b>{{__('trainingRequests.graduation_date') . __('trainingRequests.if_found')}}</b></label>
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="form-group">
                                        <input type="date" name="graduation_date" class="w-100">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-12 mt-5">
                        <input name="phone" type="tel" class="form-control" placeholder="{{__('trainingRequests.phone')}}"/>
                    </div>
                    <div class="row mt-5 pt-3">
{{--                        <div class="col-md-6">--}}
{{--                            <h5 class="title text-dark mb-4"><b>{{__('trainingRequests.attache_cv')}}</b></h5>--}}
{{--                            <div class="input-images cv">--}}
{{--                            </div>--}}
{{--                        </div>--}}
                        <div class="col-md-6">
                            <h5 class="title text-dark mb-4"><b>{{__('trainingRequests.attache_cv')}} </b></h5>
                            <div class="file_upload_content cv_container">
                                <div class="file-upload mt-2">
                                    <input class="form-control up_input" name="cv[]" type="file" id="formCvFile"/>
                                    <button class="butn me-4">{{__('trainingRequests.attachment_file')}}</button>
                                </div>
                                <span class="add_new_file main_color mt-3">{{__('trainingRequests.attachment_more_file')}}</span>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <h5 class="title text-dark mb-4"><b>{{__('trainingRequests.attache_certifications')}} </b></h5>
                            <div class="file_upload_content certifications_container">
                                <div class="file-upload mt-2">
                                    <input class="form-control up_input" name="certifications[]" type="file" id="formCertFile"/>
                                    <button class="butn me-4">{{__('trainingRequests.attachment_file')}}</button>
                                </div>
                                <span class="add_new_file main_color mt-3">{{__('trainingRequests.attachment_more_file')}}</span>
                            </div>
                        </div>
                    </div>

                    <button class="submit-butn butn mt-5 m-auto d-block training_request_button" type="button"><span><b> {{__('trainingRequests.send_request')}} </b></span></button>

                </form>
            </div>
        </div>
    </section>

    <div class="modal confirmConsult training_request_modal fade" id="confirmConsult" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content">
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                <div class="modal-body">
                    <img src="{{asset('assets/web/images/icons/confirm.png')}}" alt="" class="icon"/>
                    <div class="content text-center mt-4">
                        <h3 class="title text-dark mb-2"><b>{{__('trainingRequests.request_send_successfully')}}</b></h3>
                        <p class="text">
                            {{__('trainingRequests.training_request_hint')}}
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>

@endsection

@section('inner_js')
    <script src="{{asset('assets/web/js/lib/image-uploader.min.js')}}"></script>

    <script>
        let uploadAttachments = "{{__('trainingRequests.upload_attachments')}}",
            attachmentFile = "{{__('trainingRequests.attachment_file')}}";
        $('.training_request_button').click(async function (e) {
            e.preventDefault();
            $(this).attr('disabled', true);
            let form = $('.training_request_form'),
                data = new FormData(form[0]),
                url = form.attr('action'),
                method = form.attr('method');

            const response=await ajax({
                url,
                data,
                dataType: 'json',
                method,
                contentType: false,
                processData: false,
            });

            if (response.errors) {
                $(this).attr('disabled', false);
                toasterError(response.errors);
            }
            if (response.success) {
                let myModal = new bootstrap.Modal(document.querySelector('.training_request_modal'));
                myModal.show();
            }
        });

        $('.training_request_modal').on('hide.bs.modal', function () {
            window.location.reload();
        });

        $(".certifications_container").delegate(".add_new_file" , "click" ,   function(){
            $(this).parent(".certifications_container").append(`
            <div class="file-upload mt-4">
                <input class="form-control up_input" name="certifications[]" type="file" id="formCertFile"/>
                <button class="butn me-4">${attachmentFile}</button>
                <span class="dlt"> <i class="bi bi-x-lg"></i> </span>
            </div>`);
        });

        $(".cv_container").delegate(".add_new_file" , "click" ,   function(){
            $(this).parent(".cv_container").append(`
            <div class="file-upload mt-4">
                <input class="form-control up_input" name="cv[]" type="file" id="formCvtFile"/>
                <button class="butn me-4">${attachmentFile}</button>
                <span class="dlt"> <i class="bi bi-x-lg"></i> </span>
            </div>`);
        });

        $(".file_upload_content").on('click', '.file-upload .dlt',  function(){
            $(this).parent(".file-upload").remove();
        });

        {{--$('.certifications').imageUploader({--}}
        {{--    label: uploadAttachments,--}}
        {{--    imagesInputName: 'certifications'--}}
        {{--});--}}

        {{--$('.cv').imageUploader({--}}
        {{--    label: uploadAttachments,--}}
        {{--    imagesInputName: 'cv'--}}

        {{--});--}}

        {{--$('input[name="certifications[]"]').change(function () {--}}
        {{--    changeUploaderImage('.certifications', $(this));--}}
        {{--});--}}
        {{--$('input[name="cv[]"]').change(function () {--}}
        {{--    changeUploaderImage('.cv', $(this));--}}
        {{--});--}}

        {{--function changeUploaderImage(selector, inputName){--}}
        {{--    let images = {};--}}
        {{--    for (let i = 0; i < $(inputName).get(0).files.length; ++i) {--}}
        {{--        let fileName = $(inputName).get(0).files[i].name,--}}
        {{--            fileExtension = fileName.search('.pdf');--}}

        {{--        if(fileExtension > -1){--}}
        {{--            images[i] = "{{asset('assets/web/images/icons/google-docs.png')}}"--}}
        {{--        }--}}
        {{--    }--}}

        {{--    $(selector + ' .uploaded-image').each(function (index) {--}}
        {{--        if(images[index] !== undefined){--}}
        {{--            $(this).children('img').attr('src', images[index])--}}
        {{--        }--}}
        {{--    });--}}
        {{--}--}}
    </script>

@endsection