@extends('layouts.stores_dashboard_layout')

@section('title')
{{trans('stores_dashboard.product_additives')}}

@endsection
@section('style')
<style>
    .addition{
        position:relative;
    }
    .remove-button{
        position: absolute;
        top: -25px;
        left: 0;
        z-index: 9;
    }
    .add-button{
        margin:15px;
    }
</style>
@endsection

@section('content')

    <div  class="table-cont p-2 ">
                <div class="row align-items-center">
                    <div class="dash-title col-md p-0 mt-0">
                        <h6 class="bold">{{trans('stores_dashboard.product_additives')}}</h6>
                        <p class="mb-1">{{trans('stores_dashboard.product_additives_desc')}}</p>
                    </div>
                </div>


                <form id="postForm">
                   @csrf
                    <div class="m-auto round7 p-3 pl-4 pr-4 form-cont">
                        <div class="border-bottom align-items-center">
                            <div>
                                <h6 class="bold  pt-2 pb-2 mb-3">{{trans('stores_dashboard.additive_info')}}</h6>
                            </div>
                        </div>
                        <div class="time-cont">
                                <a type="button" class="button1 material-button add-button" onclick="addAddition()" ><i class="fa fa-plus"></i></a>
                                <input type="hidden" name="product_id" value="{{$product->id}}">
                                <div class="additions-cont">
                                    @if(count($additions)!=0)
                                        @foreach($additions as $addition)
                                            <div class="container addition round7 mt-3 mb-3">
                                                <div class="row">
                                                    <div class="col-md p-1">
                                                        <div class="form-group">
                                                            <label class="bold font14" for="exampleInputEmail1"> {{trans('stores_dashboard.name_in_ar')}}  <span style="color: #ff3333;margin: auto 20px;"> * </span></label>
                                                            <input type="text" value="{{$addition->getTranslation('name', 'ar')}}" name="name_ar[]" class="form-control" aria-describedby="emailHelp" placeholder="{{trans('stores_dashboard.name_in_ar')}} ">
                                                        </div>
                                                    </div>
                                                    <div class="col-md p-1">
                                                        <div class="form-group">
                                                            <label class="bold font14" for="exampleInputEmail1"> {{trans('stores_dashboard.name_in_en')}}  <span style="color: #ff3333;margin: auto 20px;"> * </span></label>
                                                            <input type="text" value="{{$addition->getTranslation('name', 'en')}}" name="name_en[]" class="form-control" aria-describedby="emailHelp" placeholder="{{trans('stores_dashboard.name_in_ar')}} ">
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="row">
                                                    <div class="col-md p-1">
                                                        <div class="form-group">
                                                            <label class="bold font14" for="exampleInputEmail1"> {{trans('stores_dashboard.price')}}  <span style="color: #ff3333;margin: auto 20px;"> * </span></label>
                                                            <input type="number" name="price[]" value="{{$addition->price}}" class="form-control" aria-describedby="emailHelp" placeholder="{{trans('stores_dashboard.price')}}">
                                                        </div>
                                                    </div>
                                                    <div class="col-md p-1">
                                                        <div class="form-group">
                                                            <label class="bold font14" for="exampleInputEmail1"> {{trans('stores_dashboard.category')}} <span style="color: #ff3333;margin: auto 20px;"> * </span></label>
                                                            <select name="product_additive_category_id[]" class="form-control">
                                                                <option selected disabled>{{trans('stores_dashboard.category_req')}}</option>
                                                                @foreach($categories as $category)
                                                                    <option {{$addition->product_additive_category_id==$category->id?'selected':''}} value="{{$category->id}}" >{{$category->name}}</option>
                                                                @endforeach
                                                            </select>
                                                        </div>
                                                    </div>
                                                </div>
                                                <a type="button" class="button-error material-button remove-button" onclick="removeAddition(this)" ><i class="fa fa-times"></i></a>
                                            </div>
                                        @endforeach
                                    @endif
                                </div>
                            </div>
                    </div>
                    <button id="postbtn" class="button1 w-100 mt-3 material-button" >{{trans('stores_dashboard.confirm')}}</button>
               </form>

        </div>

@endsection
@section('scripts')
    <script>
                document.getElementById('form').onsubmit = function(event){
                event.preventDefault();
                // $$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$
                Swal.fire({
                icon: 'success',
                title: '<h5 class="bold">{{trans("stores_dashboard.added_successfully")}}</h5>',
                html : '<a href="#" class="button1 w-100 d-block">{{trans("stores_dashboard.confirm")}}</a>',
                showConfirmButton: false,
                timer: 1500
            });
        }
    </script>

         <script>


        function addAddition(){
            const cont = document.querySelector('.additions-cont');
            // let content = cont.innerHTML;
            let additions =  '<div class="container addition round7 mt-3 mb-3">'+
                                 '<a type="button" style="display:block" class="button-error material-button remove-button" onclick="removeAddition(this)" ><i class="fa fa-times"></i></a>'+
                                 '<input type="hidden" name="product_id" value="{{$product->id}}">'+
                                 '<div class="row">'+
                                      '<div class="col-md p-1">'+
                                            '<div class="form-group">'+
                                                '<label class="bold font14" for="exampleInputEmail1"> {{trans("stores_dashboard.name_in_ar")}}  <span style="color: #ff3333;margin: auto 20px;"> * </span></label>'+
                                                '<input name="name_ar[]" type="text" class="form-control" aria-describedby="emailHelp" placeholder="{{trans("stores_dashboard.name_in_ar")}}">'+
                                            '</div>'+
                                      '</div>'+
                                      '<div class="col-md p-1">'+
                                            '<div class="form-group">'+
                                                  '<label class="bold font14" for="exampleInputEmail1"> {{trans("stores_dashboard.name_in_en")}}  <span style="color: #ff3333;margin: auto 20px;"> * </span></label>'+
                                                  '<input name="name_en[]" type="text" class="form-control" aria-describedby="emailHelp" placeholder="{{trans("stores_dashboard.name_in_en")}} ">'+
                                            '</div>'+
                                      '</div>'+
                                 '</div>'+
                                 '<div class="row ">'+
                                       '<div class="col-md p-1">'+
                                             '<div class="form-group">'+
                                                   '<label class="bold font14" for="exampleInputEmail1"> {{trans("stores_dashboard.price")}}  <span style="color: #ff3333;margin: auto 20px;"> * </span></label>'+
                                                   '<input name="price[]" type="number" class="form-control" aria-describedby="emailHelp" placeholder="{{trans("stores_dashboard.price")}}">'+
                                             '</div>'+
                                       '</div>'+
                                       '<div class="col-md p-1">'+
                                             '<div class="form-group">'+
                                                   '<label class="bold font14" for="exampleInputEmail1"> {{trans("stores_dashboard.category")}} <span style="color: #ff3333;margin: auto 20px;"> * </span></label>'+
                                                   '<select name="product_additive_category_id[]" class="form-control">'+
                                                            '<option selected disabled>{{trans("stores_dashboard.category_req")}}</option>'+
                                                            '@foreach($categories as $category)'+
                                                            '<option value="{{$category->id}}" >{{$category->name}}</option>'+
                                                            '@endforeach'+
                                                   '</select>'+
                                             '</div>'+
                                       '</div>'+
                                 '</div>'+
                            '</div>';
                                // cont.innerHTML += content;
            $(cont).append(additions);
            let times = document.getElementsByClassName('addition');
            for(let i = 0 ;i < times.length ;i++){
                times[i].querySelector('.add-button').classList.add('d-none');
                times[i].querySelector('.remove-button').classList.remove('d-none');
            }
            times[times.length-1].querySelector('.add-button').classList.remove('d-none');
            times[times.length-1].querySelector('.remove-button').classList.add('d-none');
        }

        function removeAddition(rmButton){
            $(rmButton).parent(".addition").remove();
        }


    </script>
    <script>
        $("#postbtn").on('click',function(e){
            e.preventDefault();
            var form = $('#postForm').get(0);
            var formData = new FormData(form);
            var oldText = $(this).text();
            $(this).prop('disabled', true).css({
                opacity:'0.5'
            }).text("{{trans('stores_dashboard.loading')}}");

            $.ajax({
                url:"{{route('stores_dashboard.post_addition')}}",
                type:"POST",
                data: formData,
                dataType: "json",
                processData: false,
                contentType: false,
                cache: false,
                success:function(data){
                    $('#postbtn').removeAttr("disabled").css({
                        opacity:'1'
                    }).text(oldText);
                    if(data.key =='success'){
                        location.assign(data.url);
                    }else{
                        Swal.fire({
                            title: data.msg,
                            position:'top',
                            timer: 3000,
                            type:'error',
                            showCloseButton: false,
                            showConfirmButton:false,
                            animation: true
                        })
                    }
                }
            });
        });
</script>
@endsection