@extends('admin.layouts.container')

@section('content')
<div class="side-title row">
    <h3 class="col-6">{{ $head ?? ''}}</h3>

    <div class="text-center col-6"> <!-- mt-5 -->
        <button type="submit" form="form" class="butn add_button float-right"><span>{{ __('dashboard.save') }}</span></button>
    </div>
</div>

<div class="border-item">
    <form class="form-row add_form" method="post" action="{{ $action }}" enctype="multipart/form-data" id="form">
        @if($program ?? ''  && $program->id)
            @method('PUT')
        @endif
        @csrf

        <ul class="nav nav-tabs" id="myTab" role="tablist">
            <li class="nav-item" role="presentation">
                <button class="nav-link active" id="basic-tab" data-toggle="tab" data-target="#basic" type="button" role="tab" aria-controls="basic" aria-selected="true">
                    {{ __('programs.basic_information') }}
                </button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="training-tab" data-toggle="tab" data-target="#training" type="button" role="tab" aria-controls="training" aria-selected="false">
                    {{ __('programs.training') }}
                </button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="nutrition-tab" data-toggle="tab" data-target="#nutrition" type="button" role="tab" aria-controls="nutrition" aria-selected="false">
                    {{ __('programs.nutrition') }}
                </button>
            </li>
        </ul>
        <div class="tab-content w-100" id="myTabContent">
            <div class="tab-pane fade show active" id="basic" role="tabpanel" aria-labelledby="basic-tab">
                @include('admin.programs._basic')
            </div>
            <div class="tab-pane fade " id="training" role="tabpanel" aria-labelledby="training-tab">
                @include('admin.programs._training')
            </div>
            <div class="tab-pane fade" id="nutrition" role="tabpanel" aria-labelledby="nutrition-tab">
                @include('admin.programs._nutrition')
            </div>
        </div>

    </form>
</div>

@endsection

@section('inner_js')
    <!-- Editor JS files -->
    <script src="{{ asset('/assets/admin/js/lib/tinymce.min.js') }}"></script>
    <script>
        let route_prefix = "{{ url(config('lfm.prefix')) }}",
            url = "{{url('/')}}/",
            currentLanguage = "{{$lang}}",
            imagePath = "{{asset('')}}",
            inputName = null;
    </script>
    <script src="{{ asset('assets/admin/js/editor.js') }}"></script>

    {{--    start training--}}
    <script>
        let html2; //dayEx,
        const getDayForm = async (dayData=null) =>{
            //console.log('dayData', dayData)
            /*let formData = new FormData($('#form')[0]);
            formData.delete('_method');
            formData.append('day_id', day_id);*/
            let formData = dataInDiv('#form');
            //formData.day_id = day_id;
            tinyMCE.remove();
            //console.log('dayData', dayData);
            const callAjaxResponse = await callAjax({
                data: dayData, // $('#form').serialize() | dataInDiv('#form') | new FormData($('#form')[0])
                url: "{{ route('programs.getDayForm') }}",
                method: 'get'
            });

            $('#day-details').html(callAjaxResponse);
        } //end of getDayForm()
        getDayForm();

        $(document).on('click', '.training-days .day', function(event) {
            $('.training-days .day').removeClass('active');
            $(this).addClass('active');
            let inputs = $(this).find('[name^=days]');
            let dayData = {};
            for (let j=0; j<inputs.length; j++){
                dayData[inputs[j].name] = inputs[j].value;
            }
            dayData['edit'] = true;
            dayData['index'] = $(this).data('index');
            getDayForm(dayData);
        });

        $(document).on('click', '.reset-day-form', function(event) {
            $('.training-days .day').removeClass('active');
            getDayForm();
        });

        $(document).on('click', '#day-btn', async function(event) {
            let formData = new FormData($('#form')[0]);
            let edit = $('.training-days .day.active').length === 1;
            formData.delete('_method');
            //let daysBtnSel = $('.training-days .day');
            let dayBtnLength = edit ? $(this).data('index') : getMaxItemIndex();
            //console.log('edit', $(this).data('edit'), edit, getMaxItemIndex(), dayBtnLength, $('#day-btn').data('edit'));
            formData.append('dayIndex', dayBtnLength);
            //formData.append('edit', edit);
            const addDayResponse = await callAjax({
                data: formData, // $('#form').serialize() | dataInDiv('#day-details') | new FormData($('#form')[0])
                url: "{{ route('programs.addDay') }}",
                method: 'post',
                showToaster: true,
            });
            if(addDayResponse){
                //console.log(addDayResponse.data);
                addDayToDaysList(addDayResponse.data, edit);
            }
        });

        function addDayToDaysList(data=null, edit=false){
            //console.log('edit', data.dayIndex, getMaxItemIndex(), $('#day-btn').data('edit'));
            let dayIndex = data.dayIndex;
            let descVal;
            let dayType = $('[name=day_type]:checked').val();
            let daySort = $('[name=day_sort]').val();
            let html = '<button type="button" class="btn btn-info day '+dayType+'" data-sort="'+daySort+'" data-index="'+dayIndex+'" data-day-type="'+dayType+'">';
            html    += '   <i class="bi bi-trash-fill delete-icon"></i><i class="fa fa-copy copy-icon"></i>';
            html    += dayType === 'training' ? `{{ __('programs.day') }} ${data.day_sort}` : '{{ __('programs.rest') }}';

            html    += '    <input type="hidden" name="days['+dayIndex+'][id]" value="'+$('[name=day_id]').val()+'" />';
            html    += '    <input type="hidden" name="days['+dayIndex+'][sort]" value="'+daySort+'" />';
            html    += '    <input type="hidden" name="days['+dayIndex+'][day_type]" value="'+dayType+'" />';
            html    += '    <input type="hidden" name="days['+dayIndex+'][is_free]" value="'+$('[name=is_free]:checked').val()+'" />';
            html    += '    <input type="hidden" name="days['+dayIndex+'][status]" value="'+$('[name=day_status]:checked').val()+'" />';
            @foreach(languages() as $language)
                descVal = data.day_description_{{ $language->local }} !== null ? data.day_description_{{ $language->local }} : '';
                html += '<input type="hidden" class="my-editor" name="days['+dayIndex+'][description][{{ $language->local }}]" value="'+descVal+'" />';
            @endforeach

            if(dayType === 'training'){
                //console.log(data.day_exercise_arr.length, data.day_exercise_arr);
                for (let i=0;i<data.day_exercise_arr.length;i++){
                    let element = data.day_exercise_arr[i];
                    let elementId = element.id !== null ? element.id : '';
                    html += '<input type="hidden" name="days['+dayIndex+'][exercise]['+i+'][id]" value="'+elementId+'" />';
                    html += '<input type="hidden" name="days['+dayIndex+'][exercise]['+i+'][video_link]" value="'+element.video_link+'" />';
                    @foreach(languages() as $language)
                        html += '<input type="hidden" name="days['+dayIndex+'][exercise]['+i+'][title][{{ $language->local }}]" value="'+element.title.{{ $language->local }}+'" />';
                    @endforeach
                }
            }

            html    += '</button>';
            if(edit){
                $('.training-days .day.active').remove();
                $('.training-days').append(html);
                sortItems();
                let dayBtn = $('#day-btn');
                dayBtn.text("{{__('programs.add_new_day')}}");
                dayBtn.attr('data-edit', 0);
                dayBtn.attr('data-index', '');
                $('.reset-day-form').remove();
            }else {
                $('.training-days').append(html);
                sortItems();
            }
            resetDayForm();
        }

        function resetDayForm(){
            $('[name=day_id]').val('');
            $('.day-exercise-block').empty();
            $('[name=day_sort]').val('');
            $('[name=day_type][value=training]').prop('checked', true).trigger('change');
            $('[name=is_free][value=no]').prop('checked', true);
            $('[name=day_status][value=active]').prop('checked', true);
            if($(document).find('.day-description .my-editor').length){
                $('.day-description .my-editor').each(function () {
                    tinymce.get($(this).attr('id')).setContent('');
                });
            }
        }

        $(document).on('click', '.training-days .delete-icon', function(event) {
            event.stopPropagation(); // Event bubbles up. Use .stopPropagation() to stop it from moving to parent.
            $('.training-days .day').removeClass('active');
            $(this).closest('.day').remove();
            getDayForm();
        });

        $(document).on('click', '.training-days .copy-icon', function(event) {
            event.stopPropagation(); // Event bubbles up. Use .stopPropagation() to stop it from moving to parent.
            $('.training-days .day').removeClass('active');
            let btn = $(this).closest('.day');
            let dayType = btn.data('dayType');
            let inputs = btn.find('[name^=days]');
            let dayIndex = getMaxItemIndex();
            let daySort = getMaxItemSort();

            let html = '<button type="button" class="btn btn-info day '+dayType+'" data-sort="'+daySort+'" data-index="'+dayIndex+'" data-day-type="'+dayType+'">';
            html    += '   <i class="bi bi-trash-fill delete-icon"></i><i class="fa fa-copy copy-icon"></i>';
            html    +=     dayType === 'training' ? `{{ __('programs.day') }} ${daySort}` : '{{ __('programs.rest') }}';
            for (let j=0; j<inputs.length; j++){
                let inputName = inputs[j].name;
                let inputValue = inputs[j].value;
                const regex = /\[[\d]+\]/i;
                let newName = inputName.replace(regex, `[${dayIndex}]`);
                //console.log(newName, inputs[j]);
                if(newName.includes('[description]')){
                    html += '<input type="hidden" name="'+newName+'" value="'+inputValue+'" class="my-editor" />';
                }else if(newName.includes('[id]')){
                    html += '<input type="hidden" name="'+newName+'" value="" />';
                }else if(newName.includes('[sort]')){
                    html += '<input type="hidden" name="'+newName+'" value="'+daySort+'" />';
                }else{
                    html += '<input type="hidden" name="'+newName+'" value="'+inputValue+'" />';
                }
            } //end of for
            html += '</button>';
            $('.training-days').append(html);
        });
        // ================================ end training ========================

        // =============================== start nutrition ======================

        let html3;
        const getNutritionForm = async (data=null) =>{
            const callAjaxResponse2 = await callAjax({
                data: data,
                url: "{{ route('programs.getNutritionForm') }}",
                method: 'get'
            });

            $('#nutrition-details').html(callAjaxResponse2);
        } //end of getNutritionForm()
        getNutritionForm();

        $(document).on('click', '.nutrition-items .nutrition-item', function(event) {
            $('.nutrition-items .nutrition-item').removeClass('active');
            $(this).addClass('active');
            let inputs = $(this).find('[name^=nutrition]');
            let nutritionData = {};
            for (let j=0; j<inputs.length; j++){
                nutritionData[inputs[j].name] = inputs[j].value;
            }
            nutritionData['edit'] = true;
            nutritionData['index'] = $(this).data('index');
            getNutritionForm(nutritionData);
        });

        $(document).on('click', '.reset-nutrition-form', function(event) {
            $('.nutrition-items .nutrition-item').removeClass('active');
            getNutritionForm();
        });

        $(document).on('click', '#nutrition-btn', async function(event) {
            let formData = new FormData($('#form')[0]);
            let edit = $('.nutrition-items .nutrition-item.active').length === 1;
            formData.delete('_method');
            let nutritionBtnLength = edit ? $(this).data('index') : getMaxItemIndex(".nutrition-items .nutrition-item");
            formData.append('nutritionIndex', nutritionBtnLength);
            formData.append('edit', edit);
            const addNutritionResponse = await callAjax({
                data: formData,
                url: "{{ route('programs.addNutrition') }}",
                method: 'post',
                showToaster: true,
            });
            if(addNutritionResponse){
                addNutritionToList(addNutritionResponse.data, edit);
            }
        });

        function addNutritionToList(data=null, edit=false){
            //console.log('data', data);
            let nutritionIndex = data.nutritionIndex;
            let titleVal;
            let titleLng = data.nutrition_title_{{ $lang }};
            let nutritionSort = $('[name=nutrition_sort]').val();
            let html = '<button type="button" class="btn btn-info nutrition-item" data-sort="'+nutritionSort+'" data-index="'+nutritionIndex+'">';
            html    += '   <i class="bi bi-trash-fill delete-icon"></i><i class="fa fa-copy copy-icon"></i>';
            html    += titleLng;

            html    += '    <input type="hidden" name="nutrition['+nutritionIndex+'][id]" value="'+$('[name=nutrition_id]').val()+'" />';
            html    += '    <input type="hidden" name="nutrition['+nutritionIndex+'][sort]" value="'+nutritionSort+'" />';
            html    += '    <input type="hidden" name="nutrition['+nutritionIndex+'][is_free]" value="'+$('[name=nutrition_is_free]:checked').val()+'" />';
            html    += '    <input type="hidden" name="nutrition['+nutritionIndex+'][status]" value="'+$('[name=nutrition_status]:checked').val()+'" />';
            @foreach(languages() as $language)
                titleVal = data.nutrition_title_{{ $language->local }} !== null ? data.nutrition_title_{{ $language->local }} : '';
                html += '   <input type="hidden" name="nutrition['+nutritionIndex+'][title][{{ $language->local }}]" value="'+titleVal+'" />';
            @endforeach

            html    += '    <input type="hidden" name="nutrition['+nutritionIndex+'][file]" value="'+data.file+'" />';
            html    += '</button>';
            if(edit){
                $('.nutrition-items .nutrition-item.active').remove();
                $('.nutrition-items').append(html);
                sortItems('.nutrition-items', '.nutrition-item');
                let nutritionBtn = $('#nutrition-btn');
                nutritionBtn.text("{{__('programs.add_new_nutrition')}}");
                nutritionBtn.attr('data-edit', 0);
                nutritionBtn.attr('data-index', '');
                $('.reset-nutrition-form').remove();
            }else {
                $('.nutrition-items').append(html);
                sortItems('.nutrition-items', '.nutrition-item');
            }
            resetNutritionForm();
        }

        function resetNutritionForm(){
            $('[name=nutrition_id]').val('');
            $('[name=nutrition_sort]').val('');
            $('[name=nutrition_is_free][value=no]').prop('checked', true);
            $('[name=nutrition_status][value=active]').prop('checked', true);
            $('.nutrition-title .n-title').each(function () {
                $('[name='+$(this).attr('name')+']').val('');
            });
            $('[name=nutrition_file]').val('');
            $('.nutrition-form-wrapper .imag-wrapper').empty();
        }

        $(document).on('click', '.nutrition-items .delete-icon', function(event) {
            event.stopPropagation(); // Event bubbles up. Use .stopPropagation() to stop it from moving to parent.
            $('.nutrition-items .nutrition-item').removeClass('active');
            $(this).closest('.nutrition-item').remove();
            getNutritionForm();
        });

        $(document).on('click', '.nutrition-items .copy-icon', function(event) {
            event.stopPropagation(); // Event bubbles up. Use .stopPropagation() to stop it from moving to parent.
            $('.nutrition-items .nutrition-item').removeClass('active');
            let btn = $(this).closest('.nutrition-item');
            let inputs = btn.find('[name^=nutrition]');
            let nutritionIndex = getMaxItemIndex('.nutrition-items .nutrition-item');
            let nutritionSort = getMaxItemSort('.nutrition-items .nutrition-item');
            let btnText = btn.text();

            let html = '<button type="button" class="btn btn-info nutrition-item" data-sort="'+nutritionSort+'" data-index="'+nutritionIndex+'">';
            html    += '   <i class="bi bi-trash-fill delete-icon"></i><i class="fa fa-copy copy-icon"></i>';
            html    +=     btnText;
            for (let j=0; j<inputs.length; j++){
                let inputName = inputs[j].name;
                let inputValue = inputs[j].value;
                const regex = /\[[\d]+\]/i;
                let newName = inputName.replace(regex, `[${nutritionIndex}]`);
                //console.log(newName, inputs[j]);
                if(newName.includes('[id]')){
                    html += '<input type="hidden" name="'+newName+'" value="" />';
                }else if(newName.includes('[sort]')){
                    html += '<input type="hidden" name="'+newName+'" value="'+nutritionSort+'" />';
                }else{
                    html += '<input type="hidden" name="'+newName+'" value="'+inputValue+'" />';
                }
            } //end of for
            html += '</button>';
            $('.nutrition-items').append(html);
        });

        function getMaxItemIndex(wrapper=".training-days .day"){
            let num = $(wrapper).map(function() {
                return $(this).data('index');
            }).get();//get all data values in an array

            let highest = num.length > 0 ? Math.max.apply(Math, num) : -1;//find the highest value from them
            //console.log(num, highest)
            return highest + 1;
        }

        function getMaxItemSort(wrapper=".training-days .day"){
            let num = $(wrapper).map(function() {
                return $(this).data('sort');
            }).get();//get all data values in an array
            let highest = num.length > 0 ? Math.max.apply(Math, num) : -1;//find the highest value from them
            return highest + 1;
        }

        function sortItems(wrapper='.training-days', item='.day'){
            let $wrapper = $(wrapper);
            $wrapper.find(item).sort(function (a, b) {
                return +a.dataset.sort - +b.dataset.sort;
            }).appendTo( $wrapper );
        }
    </script>
    {{-- end nutrition --}}
@endsection