@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="#"> {{__('caseRequests.case_request')}} </a>
                </li>
            </ul>
            <h4>{{__('caseRequests.case_request')}}</h4>
        </div>
    </section>

    <section class="consultation-pg section_padding">
        <div class="container">
            <div class="form-container">
                <form method="post" action="{{route('cases.caseRequest')}}" class="case_request_form">
                    <div class="doc-wrapper">
                        <div class="consultation_slider">
                            <div class="swiper-container">
                                <div class="swiper-wrapper">
                                    <div class="swiper-slide p-2">
                                        <div class="form-check">
                                            <input class="form-check-input" type="radio" name="request_type" id="case_study" value="case_study">
                                            <label class="form-check-label color2" for="case_study">
                                                <div class="icon-outer">
                                                    <img src="{{asset('assets/web/images/icons/law-1.svg')}}" alt="" class="icon"/>
                                                </div>
                                                <h6 class="title mb-0">{{__('caseRequests.case_study')}}</h6>
                                            </label>
                                        </div>
                                    </div>
                                    <div class="swiper-slide p-2">
                                        <div class="form-check">
                                            <input class="form-check-input" type="radio" name="request_type" id="drafting_contracts" value="drafting_contracts">
                                            <label class="form-check-label color1" for="drafting_contracts">
                                                <div class="icon-outer">
                                                    <img src="{{asset('assets/web/images/icons/law-1.svg')}}" alt="" class="icon"/>
                                                </div>
                                                <h6 class="title mb-0">{{__('caseRequests.drafting_contracts')}}</h6>
                                            </label>
                                        </div>
                                    </div>
                                    <div class="swiper-slide p-2">
                                        <div class="form-check">
                                            <input class="form-check-input" type="radio" name="request_type" id="case_study_attending" value="case_study_attending">
                                            <label class="form-check-label color2" for="case_study_attending">
                                                <div class="icon-outer">
                                                    <img src="{{asset('assets/web/images/icons/law-1.svg')}}" alt="" class="icon"/>
                                                </div>
                                                <h6 class="title mb-0">{{__('caseRequests.case_study_attending')}} </h6>
                                            </label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row justify-content-between mt-5 pt-3 form_cont_scroll">
                        <div class="col-md-6">
                            <h5 class="title text-dark mb-4"><b>{{__('caseRequests.case_topic_id')}}</b></h5>
                            <div class="form-group">
                                <select name="case_topic_id" class="form-control form-select">
                                    <option value="">{{__('caseRequests.case_topic_id')}}</option>
                                    @if(count($topics))
                                        @foreach($topics as $topic)
                                            <option value="{{$topic->id}}">{{$topic->name}}</option>
                                        @endforeach
                                    @endif
                                </select>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <h5 class="title text-dark mb-4"><b>{{__('caseRequests.requests')}}</b></h5>
                            <div class="form-group">
                                <input name="requests" class="form-control" placeholder="{{__('caseRequests.requests')}}"/>
                            </div>
                        </div>
                    </div>
                    <div class="row mt-5 pt-3">
                        <div class="col-md-6">
                            <h5 class="title text-dark mb-4"><b>{{__('caseRequests.details')}}</b></h5>
                            <textarea name="details" class="form-control" rows="12"></textarea>
                        </div>
                        {{-- Files block --}}
                        <div class="col-md-6">
                            <h5 class="title text-dark mb-4"><b>{{__('caseRequests.files') . __('caseRequests.if_found')}} </b></h5>
                            <div class="file_upload_content files_container">
                                <div class="file-upload mt-2">
                                    <input class="form-control up_input" name="files[]" type="file" id="formFile"/>
                                    <button class="butn me-4">{{__('caseRequests.attachment_file')}}</button>
                                    <span class="dlt"> <i class="bi bi-x-lg"></i> </span>
                                </div>
                                <span class="add_new_file main_color mt-3">{{__('caseRequests.attachment_more_file')}}</span>
                            </div>
                        </div>
{{--                        <div class="col-md-6 cases_files_container position-relative">--}}
{{--                            <h5 class="title text-dark mb-4"><b>{{__('caseRequests.files')}}</b></h5>--}}
{{--                            <a href="#" style="left: 0;top: 0" class="position-absolute delete_file"><i class="fa fa-times fa-2x text-danger"></i></a>--}}
{{--                            <div class="input-images case_files"></div>--}}

{{--                        </div>--}}
                    </div>
                    @if(auth()->check() && auth()->user()->role == 'user')
                        <button class="submit-butn butn mt-5 m-auto d-block case_request_button" type="button"><span><b>{{__('caseRequests.send_case')}} </b></span></button>
                    @else
                        <a href="{{route('user.login')}}" class="submit-butn butn mt-5 m-auto d-block login_url" type="button"><span><b>{{__('caseRequests.send_case')}} </b></span></a>
                    @endif
                </form>
            </div>
        </div>
    </section>

    <div class="modal confirmConsult case_confirmation_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>{{__('caseRequests.case_send_successfully')}}</b></h3>
                        <h5 class="title text-dark mb-2">{{__('caseRequests.case_no')}} : <b class="case_no"></b></h5>
{{--                        <p class="text">--}}
{{--                            {{__('caseRequests.case_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 = "{{__('caseRequests.upload_attachments')}}",
            attachmentFile = "{{__('caseRequests.attachment_file')}}";

        $(document).ready(function () {
            let request_type = localStorage.getItem('request_type'),
                case_topic_id = localStorage.getItem('case_topic_id'),
                requests = localStorage.getItem('requests'),
                details = localStorage.getItem('details');

            $('input[name="request_type"]').each(function () {
                if($(this).val() === request_type){
                    $(this).prop('checked', true);
                    $(this).trigger('click');
                }
            });

            $('select[name="case_topic_id"]').val(case_topic_id);
            $('input[name="requests"]').val(requests);
            $('textarea[name="details"]').val(details);

        });

        $('.login_url').hover(function () {
            localStorage.setItem('request_type',  $('input[name="request_type"]:checked').val());
            localStorage.setItem('case_topic_id',  $('select[name="case_topic_id"]').val());
            localStorage.setItem('requests',  $('input[name="requests"]').val());
            localStorage.setItem('details',  $('textarea[name="details"]').val());
        });


        $('.case_request_button').click(async function (e) {
            e.preventDefault();
            $(this).prop('disabled', true);
            let form = $('.case_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).prop('disabled', false);
                toasterError(response.errors);
            }
            if (response.success) {
                localStorage.setItem('request_type', '');
                localStorage.setItem('case_topic_id', '');
                localStorage.setItem('requests', '');
                localStorage.setItem('details', '');
                let myModal = new bootstrap.Modal(document.querySelector('.case_confirmation_modal'));
                myModal.show();
                $('.case_no').html(response.case_no);
            }
        });

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

        $(".files_container").delegate(".add_new_file" , "click" ,   function(){
            $(this).parent(".files_container").append(`
            <div class="file-upload mt-4">
                <input class="form-control up_input" name="files[]" 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();
        });

        // $('.input-images').imageUploader({
        //     label: uploadAttachments,
        //     imagesInputName: 'files'
        // });

        // $('.cases_files_container').mouseenter(function () {
        //    let inputImage = $(this).find('.input-images input');
        //    if(!inputImage.length){
        //        console.log('hello');
        //        let time = new Date().getTime();
        //        $('.case_files .image-uploader').prepend(`
        //         <input type="file" id="files-${time}" name="files[]" multiple="multiple">
        //        `)
        //    }
        // });
        //
        // $('.delete_file').click(function (e) {
        //     e.preventDefault();
        //     $(this).siblings('.case_files').children('.image-uploader').children('input').remove();
        //     $(this).siblings('.case_files').children('.image-uploader').removeClass('has-files');
        //     $('.uploaded').html('')
        // });

        {{--$('input[name="files[]"]').change(function () {--}}
        {{--    let images = {},--}}
        {{--        files = {};--}}
        {{--    for (let i = 0; i < $(this).get(0).files.length; ++i) {--}}
        {{--        let fileName = $(this).get(0).files[i].name,--}}
        {{--            fileExtension = fileName.search('.pdf');--}}
        {{--        $(this).get(0).files[i] = null;--}}
        {{--        files[i] = $(this).get(0).files[i];--}}

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

        {{--    console.log(files)--}}

        {{--    $('.case_files .uploaded-image').each(function (index) {--}}
        {{--        if(images[index] !== undefined){--}}
        {{--            $(this).children('img').attr('src', images[index])--}}
        {{--        }--}}
        {{--    });--}}
        {{--});--}}


    </script>

    <script>
        $('.consultation_slider .form-check-label').click(function() {
            var contt = $(".form_cont_scroll").offset().top;
            $(this).siblings(".form-check-input").click()
            $('html, body').animate({
                    scrollTop: contt
                }, 100);
            return false;
        });
    </script>
@endsection