Edit File: add_additive.blade.php
@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
Back to File Manager