@extends('web.layouts.main')
@section('content')


<main>

    <form id="form" method="post" action="{{url(getCurrentLocale().'/subscribe/continue')}}" onsubmit="saveForm(this)">
        @CSRF
        <!-- ---------- brand_head_sec ----------- -->
        <section class="brand_head_sec">
            <div class="container">
                <div class="row align-items-center">
                    <div class="col-lg-6">
                        @include('web.pages.components.subscribe_card',['subscribe'=>$subscribe])
                    </div>
                </div>
            </div>
        </section>

        <!-- ---------- title ----------- -->
        <div class="title my-5">
            <div class="container">
                <h2 class="text-center"> {{$title}} </h2>
            </div>
        </div>
        
        <!-- ---------- days_choose_sec ----------- -->
        <section class="days_choose_sec">
            <div class="container">
                <p class="fw-bold mb-3"> {{__('web.select_days')}} </p>
                <div class="days_calender">
                    <div class="row justify-content-center">
                        <div class="col-lg-8">
                            <input type="hidden" name="dates" id="dates" @isset($days_imp) value="{{$days_imp}}" @else value="{{$start_date}}" @endisset>
                            <div class="datepicker_side">
                                <div id="datepicker"></div>
                            </div>
                            <div class="text-center mt-4">
                                <button type="button" onclick="selectDays()" class="butn">
                                    <span class="small px-5"> {{__('web.save')}} </span>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- ---------- single_day_choose_sec ----------- -->
        <div id="days">
            
        </div>



        
    </form>
</main>


    @push('js')
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js" integrity="sha512-57oZ/vW8ANMjR/KQ6Be9v/+/h6bq9/l3f0Oc7vn6qMqyhvPd1cvKBRWWpzu0QoneImqr2SkmO4MSqU+RpHom3Q==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
        <script src="{{url('')}}/assets/web/js/jquery-ui.multidatespicker.js"></script>
        <script src="{{url('')}}/assets/web/js/date_lang.js"></script>
        <script>
            let action_selectDays = {!! json_encode(url(getCurrentLocale().'/subscribe/select/days')) !!}
            let action_day_selected = {!! json_encode(url(getCurrentLocale().'/subscribe/selects/days')) !!}
            let action_date_duplicated = {!! json_encode(url(getCurrentLocale().'/subscribe/selects/days/duplication')) !!}
            
            let action_calculate = {!! json_encode(url(getCurrentLocale().'/subscribe/calculate/meal')) !!}
            let start_date = {!! json_encode($start_date) !!}
            let end_date = {!! json_encode($end_date) !!}
            let count_days = {!! json_encode($count_days) !!}
            let days = {!! json_encode($days) !!}
            
            
            
            if(days.length == 0)
            {
                $('#datepicker').multiDatesPicker({
                    minDate: start_date,
                    maxDate: end_date,
                    dateFormat: 'yy-mm-dd',
                    maxPicks: count_days,
                       onSelect: function (date) {
                        let data = $('#datepicker').multiDatesPicker('getDates');
                        $('#dates').val(data); 
                       }
                });
            }
            else
            {
                $('#datepicker').multiDatesPicker({
                    minDate: start_date,
                    maxDate: end_date,
                    dateFormat: 'yy-mm-dd',
                    maxPicks: count_days,
                       onSelect: function (date) {
                        let data = $('#datepicker').multiDatesPicker('getDates');
                        $('#dates').val(data); 
                       },
                    addDates: days,
                });
                var executed = false;
                if (!executed) {
                    executed = true;
                    $.ajax
                    ({
                        url : action_day_selected,
                        type: 'GET',              
                        data: 'nothing',
                        dataType:'json',
                        success:function(data)
                        {
                            $('#days').html(data.data);
                        }
                    })
                }
            }

            function duplicateDay(elem)
            {
                let data = $(elem).attr('day-id')
                let date = $(elem).attr('date-id')
                let checked = $(elem).is(":checked");
                if(checked == true)
                {
                    $('.day'+data).hide();
                    $('.mealDate'+data).attr('name','');
                    var dataform = new FormData( $('#form')[0]);
                    dataform.append("date", date);
                    $.ajax
                    ({
                        url : action_date_duplicated,
                        type: 'POST',              
                        data: dataform,
                        dataType:'json',
                        contentType: false, 
                        processData: false, 
                        success:function(data)
                        {
                            $('#daydate'+date).html(data);
                        }
                    })
                    
                }
                else
                {
                    $('.day'+data).show();
                    $('.mealDate'+data).each(function(){
                        let attr = $(this).attr('name-id');
                        $(this).attr("name", attr);
                        
                    });
                    $('#daydate'+date).html('');
                }
                
            }
            
            
        </script>
        <script src="{{url('')}}/assets/web/js/custom/continueAction.js"></script>
        <script src="{{url('')}}/assets/web/js/custom/calculatePackage.js"></script>
    @endpush  
@stop