@extends('web.layouts.container')

@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="#"> {{$title}} </a>
                </li>
            </ul>
            <h4>{{$title}}</h4>
        </div>
    </section>
    <section class="consultation-pg section_padding">
        <div class="container">
            <form method="post" action="{{route('consulting.consultingRequest', $consultingType)}}" class="consulting_request_form">
                <div class="sec-cards mb-5">
                    <div class="consultation_slider">
                        <div class="swiper-container">
                            <div class="swiper-wrapper">
                                <div class="swiper-slide">
                                    <div class="form-check color2">
                                        <input style="cursor:pointer;" class="form-check-input" type="radio" name="consulting_way" id="consulting_phone" value="phone">
                                        <label class="form-check-label" for="consulting_phone">
                                            <div class="item">
                                                <div class="icon-outer">
                                                    <i class="bi bi-telephone-fill"></i>
                                                </div>
                                                <div class="content">
                                                    <h5 class="title text-white"><b>{{__('consultings.consulting_phone')}}</b></h5>
                                                </div>
                                            </div>
                                        </label>
                                    </div>
                                </div>
                                <div class="swiper-slide">
                                    <div class="form-check color1">
                                        <input style="cursor:pointer;" class="form-check-input" type="radio" name="consulting_way" id="consulting_zoom"value="zoom">
                                        <label class="form-check-label" for="consulting_zoom">
                                            <div class="item">
                                                <div class="icon-outer">
                                                    <i class="bi bi-camera-video-fill"></i>
                                                </div>
                                                <div class="content">
                                                    <h5 class="title text-white"><b>{{__('consultings.visible_consulting')}} <br>{{__('consultings.via_zoom')}}</b></h5>
                                                </div>
                                            </div>
                                        </label>
                                    </div>
                                </div>
                                <div class="swiper-slide">
                                    <div class="form-check color2">
                                        <input style="cursor:pointer;" class="form-check-input" type="radio" name="consulting_way" id="consulting_office"value="office">
                                        <label class="form-check-label" for="consulting_office">
                                            <div class="item">
                                                <div class="icon-outer">
                                                    <i class="bi bi-building"></i>
                                                </div>
                                                <div class="content">
                                                    <h5 class="title text-white"><b>{{__('consultings.visible_consulting')}} <br>{{__('consultings.via_office')}}</b></h5>
                                                </div>
                                            </div>
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="form-container">
                    <div class="row justify-content-between">
                        <h5 class="title text-dark mb-4"><b>{{__('activeConsultings.consulting_subject')}}</b></h5>
                        <div class="col-md-5">
                            <div class="form-group">
                                <select name="consulting_topic_id" class="form-control form-select">
                                    <option value="">{{__('activeConsultings.consulting_subject')}}</option>
                                    @if(count($topics))
                                        @foreach($topics as $topic)
                                            <option value="{{$topic->id}}">{{$topic->name}}</option>
                                        @endforeach
                                    @endif
                                </select>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <p class="note">
                                <i class="bi bi-exclamation-circle"></i>
                                {{$settings['consulting_requests_hint_1_'.$lang]}}
                            </p>
                        </div>
                    </div>
                    {{-- Date block--}}
                    <div class="date-outer mt-5">
                        <h5 class="title text-dark mb-4"><b><i class="bi bi-calendar3 me-2"></i>{{__('consultings.consulting_date')}}</b></h5>
                        <div class="swiper-container date-inner d-block">
                            <div class="swiper-wrapper consulting_date_container"></div>
                        </div>
                    </div>

                    {{-- Time block--}}
                    <div class="date-outer mt-5">
                        <h5 class="title text-dark mb-4"><b><i class="bi bi-clock me-2"></i>{{__('consultings.consulting_time')}}</b></h5>
                        <div class="swiper-container date-inner d-block">
                            <div class="swiper-wrapper consulting_time_container"></div>
                        </div>
                    </div>

                    <p class="note mt-5">
                        <i class="bi bi-exclamation-circle"></i>
                        {{$settings['consulting_requests_hint_2_'.$lang]}}
                    </p>
                    <div class="payment_methods mt-5 payment_way_container">
                        <h5 class="title text-dark mb-4"><b>{{__('activeConsultings.pay_way')}}</b></h5>
                        <div class="row">
                            <div class="col-md-6 mb-2">
                                <div class="form-check color3">
                                    <input class="form-check-input" type="radio" name="pay_way" id="visa_master" value="2">
                                    <label class="form-check-label" for="visa_master">
                                        {{__('activeConsultings.visa_master')}}
                                        <img src="{{asset('assets/web/images/icons/pay_way/visa_master.png')}}" alt="" class="icon">

                                    </label>
                                </div>
                            </div>
                            <div class="col-md-6 mb-2">
                                <div class="form-check color1">
                                    <input class="form-check-input" type="radio" name="pay_way" id="mada" value="6">
                                    <label class="form-check-label" for="mada">
                                        {{__('activeConsultings.mada')}}
                                        <img src="{{asset('assets/web/images/icons/pay_way/mada.png')}}" alt="" class="icon">
                                    </label>
                                </div>
                            </div>
{{--                            <div class="col-md-6">--}}
{{--                                <div class="form-check color2">--}}
{{--                                    <input class="form-check-input" type="radio" name="pay_way" id="stc_pay" value="14">--}}
{{--                                    <label class="form-check-label" for="stc_pay">--}}
{{--                                        {{__('activeConsultings.stc_pay')}}--}}
{{--                                        <img src="{{asset('assets/web/images/icons/pay_way/stc_pay.png')}}" alt="" class="icon">--}}
{{--                                    </label>--}}
{{--                                </div>--}}
{{--                            </div>--}}

                            @if($showApplePay)
                                <div class="col-md-6">
                                    <div class="form-check color2">
                                        <input class="form-check-input" type="radio" name="pay_way" id="apple_pay" value="11">
                                        <label class="form-check-label" for="apple_pay">
                                            {{__('activeConsultings.apple_pay')}}
                                            <img src="{{asset('assets/web/images/icons/pay_way/apple_pay.png')}}" alt="" class="icon">
                                        </label>
                                    </div>
                                </div>
                            @endif

                        </div>
                    </div>
                    <div class="row mt-5 mb-5">
                        <div class="col-md-6">
                            <h5 class="title text-dark mb-4"><b> {{__('activeConsultings.coupon_id')}} </b></h5>
                            <div class="form-group copun-group">
                                <input name="coupon_code" class="form-control" placeholder="{{__('activeConsultings.coupon_id')}}"/>
                                <a href="#" class="butn sub_butn check_coupon"><span> {{__('consultings.apply_coupon')}} </span></a>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <h5 class="title text-dark mb-4 discount_title"><b> {{__('consultings.discount_percentage')}} </b></h5>
                            <div class="form-group">
                                <input class="form-control discount_value" placeholder="0" disabled/>
                            </div>
                        </div>
                    </div>
                    <div class="total_box text-center col-md-5 m-auto">
                        <h5 class="title main_color"><b>{{__('consultings.total')}}</b></h5>
                        <h1 class="price text-dark mt-3"><b class="total">0</b> <small>{{__('main.sar')}}</small></h1>
                    </div>
                    <p class="note mt-3 col-md-4 m-auto">
                        <i class="bi bi-exclamation-circle"></i>
                        {{__('main.total_including_added_value')}}
                    </p>
                    @if(auth()->check() && auth()->user()->role == 'user')
                        <button class="submit-butn butn mt-5 m-auto d-block consulting_request_button" type="button"><span><b>{{__('consultings.complete_consultation_request')}}</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>{{__('consultings.complete_consultation_request')}}</b></span></a>
                    @endif
                </div>
            </form>
        </div>
    </section>
@endsection

@section('inner_js')
    <script>

        let getConsultingDateAndTimeRoute = "{{route('consulting.getConsultingDateAndTime')}}",
            checkCouponRoute = "{{route('checkCoupon')}}",
            {{--consultingType = "{{$consultingType}}",--}}
            consultingDateAlert = "{{__('consultings.select_consulting_date_time')}}",
            discountTitlePercentage = "{{__('coupons.discount_percentage')}}",
            discountTitleValue = "{{__('coupons.discount_amount')}}",
            noData = "{{__('consultings.no_data')}}";


        $(document).ready(function () {
            let consulting_way = localStorage.getItem('consulting_way'),
                consulting_topic_id = localStorage.getItem('consulting_topic_id'),
                pay_way = localStorage.getItem('pay_way');

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

        $('.login_url').hover(function () {
            localStorage.setItem('consulting_way',  $('input[name="consulting_way"]:checked').val());
            localStorage.setItem('consulting_topic_id',  $('select[name="consulting_topic_id"]').val());
            localStorage.setItem('pay_way', $('input[name="pay_way"]:checked').val());
        });


        $('.consulting_request_button').click(async function (e) {
            e.preventDefault();
            $(this).prop('disabled', true);
            let form = $('.consulting_request_form'),
                data = new FormData(form[0]),
                url = form.attr('action'),
                method = form.attr('method');

            data.append('consulting_id', $('input[name="consulting_time"]:checked').data('consulting-id'));
            // data.append('consulting_type', consultingType);
            data.append('coupon_code', $('input[name="coupon_code"]').val());
            data.append('service_type', 'consulting');

            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.url) {
                localStorage.setItem('consulting_way', '');
                localStorage.setItem('consulting_topic_id', '');
                localStorage.setItem('pay_way', '');
                window.location.href = response.url;
            }
        });

        $('input[name="consulting_way"]').click(async function () {
            let data = {
                consulting_way: $(this).val(),
                    // type: consultingType
                },
                url = getConsultingDateAndTimeRoute,
                method = 'get';

            $('.consulting_time_container').html('');

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

            if (response.consulting_dates) {
                $('.consulting_date_container').html('');
                for(let consulting of response.consulting_dates){
                    $('.consulting_date_container').append(`
                        <div class="swiper-slide">
                            <div class="form-check">
                                <input value="${consulting.date}" class="form-check-input" type="radio" name="consulting_date" id="consulting_date_${consulting.id}">
                                <label class="form-check-label" for="consulting_date_${consulting.id}">
                                    ${consulting.label}
                                </label>
                            </div>
                        </div>
                    `);
                }
            } else {
                $('.consulting_date_container').html(`<div class="alert alert-secondary text-danger text-center">${noData}</div>`);
            }
        });

        let oldPrice = 0;
        $(document).on('click', 'input[name="consulting_date"]',async function () {
            let data = {
                    // consulting_type: consultingType,
                    consulting_date: $(this).val(),
                    consulting_way: $('input[name="consulting_way"]:checked').val()
                },
                url = getConsultingDateAndTimeRoute,
                method = 'get';

            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.consulting_times){
                $('.consulting_time_container').html('');
                for(let consultingTimes of response.consulting_times){
                    $('.consulting_time_container').append(`
                    <div class="swiper-slide">
                        <div class="form-check">
                            <input data-consulting-id="${consultingTimes.id}" class="form-check-input" type="radio" name="consulting_time" id="consulting_time_${consultingTimes.id}" value="${consultingTimes.time}">
                            <label class="form-check-label" for="consulting_time_${consultingTimes.id}">
                                ${consultingTimes.label}
                            </label>
                        </div>
                    </div>
                    `);
                }
            } else {
                $('.consulting_time_container').html(`<div class="alert alert-secondary text-danger text-center">${noData}</div>`);
            }
        });

        $(document).on('click', 'input[name="consulting_time"]',async function () {
            let data = {
                    consulting_id: $(this).data('consulting-id'),
                },
                url = getConsultingDateAndTimeRoute,
                method = 'get';

            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.price && $('input[name="coupon_code"]').val() !== ''){
                oldPrice = response.price;
                $('.check_coupon').trigger('click');
            } else {
                oldPrice = response.price;
                $('.total').html(response.price);
            }

        });

        $('input[name="coupon_code"]').focus(function () {
            $(this).css({
                borderColor: '#E1E1E1'
            })
        }).blur(function () {
            if($(this).val() === ''){
                $('.discount_value').val(0);
                $('.total').html(oldPrice);
                $('.payment_way_container').removeClass('d-none');
                $('.payment_way_container input[type="radio"]:checked').prop('checked', false);
            }
        });

        $('.check_coupon').click(async function (e) {
            e.preventDefault();
            let couponCode = $('input[name="coupon_code"]');
            if(couponCode.val() === ''){
                couponCode.css({
                    borderColor: 'red'
                });
                return false;
            }
            let data = {
                    // consulting_type: consultingType,
                    coupon_code: couponCode.val(),
                    consulting_id: $('input[name="consulting_time"]:checked').data('consulting-id'),
                    service_type : 'consulting'
                },
                url = checkCouponRoute,
                method = 'get';

            if(data.consulting_id === undefined){
                alert(consultingDateAlert);
                return false;
            }

            $(this).attr('disabled', true);
            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.errors) {
                $(this).attr('disabled', true);
                let discountTitle = response.discount_type === 'percentage' ? discountTitlePercentage : discountTitleValue;
                $('.discount_title').html(discountTitle);
                $('.discount_value').val(response.coupon_discount);
                $('.total').html(response.total);

                if(response.total <= 0){
                    $('.payment_way_container').addClass('d-none');
                    $('.payment_way_container input[type="radio"]:checked').prop('checked', false);
                } else {
                    $('.payment_way_container').removeClass('d-none');
                }

            }
        })
    </script>


    <script>
        var swiper = new Swiper('.date-inner.swiper-container', {
            slidesPerView: 6,
            spaceBetween: 0,
            // centeredSlides: true,
            speed: 1000,
            pagination: false,
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
            mousewheel: false,
            keyboard: true,
            observer: true,
            observeParents: true,
            autoplay: {
                delay: 10000,
            },
            loop: false,
            breakpoints: {
                0: {
                    slidesPerView: 2,
                },
                480: {
                    slidesPerView: 2,
                },
                787: {
                    slidesPerView: 3,
                },
                991: {
                    slidesPerView: 4,
                },
                1200: {
                    slidesPerView: 6,
                }
            }
        });
    </script>

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


@endsection