@extends('includes.main')

@section('pageSpecificStyles')
    <style type="text/css">

    </style>
@endsection
@section('pageSpecificContent')

<div class="card m-b-20">
    <div class="card-body">
        <div class="row pb-2 mt-3">
            <div class="col-md-12">
                <button onclick="$('#saveModal').modal('show')" class="btn btn-info float-right mt-n4"><span
                            class="fa fa-plus"></span>  {{__('common.Add new')}}
                </button>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <div class="table-rep-plugin">
                    <div class="table table-responsive b-0" data-pattern="priority-columns">
                        <table id="dataTable" class="table"
                               cellspacing="0"
                               width="100%">
                            <thead>
                            <tr>
                                <th scope="col">{{__('common.COMPANY')}}</th>
                                <th scope="col">{{__('common.NAME')}} (EN)</th>
                                <th scope="col">{{__('common.NAME')}} (DE)</th>
                                <th scope="col">{{__('common.PARENT')}}</th>
                                <th scope="col">{{__('common.OPTION')}}</th>
                            </tr>
                            </thead>
                            <tbody id="tBody">
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

 <!-- modal start -->
 <div class="modal fade" id="saveModal" tabindex="-1"
 role="dialog"
 aria-labelledby="mySmallModalLabel" aria-hidden="true">
<div class="modal-dialog modal-md">
    <div class="modal-content">
        <div class="modal-header">
            <h5 class="modal-title mt-0">{{__('common.Add New')}}</h5>
            <button type="button" class="close" data-dismiss="modal"
                    aria-hidden="true">×
            </button>
        </div>
        <div class="modal-body">
            <form class="form-horizontal" id="saveForm" role="form">

                <div class="row">

                    <div class="form-group col-md-12">
                        <label for="company" class="control-label">{{ __('common.Company') }} </label>
                            <div class="input-group">
                                <select id="company" onchange="getParentCategories(this.value)" name="company" class="form-control saveModal">
                                    <option value="" selected disabled>Select company</option>
                                    @if(isset($companies) && $companies != null)
                                        @foreach($companies as $company)
                                            <option value="{{$company->id}}">{{$company->name}}</option>
                                        @endforeach
                                    @endif
                                </select>

                            </div>
                    </div>

                    <div class="form-group col-md-12">
                        <label for="parent" class="control-label">{{ __('common.Parent') }} </label>
                            <div class="input-group">
                                <select id="parent" name="parent" class="form-control select2 saveModal">
                                    <option value="" selected ><-- No parent --></option>
                                    {{-- @if(isset($categories) && $categories != null)
                                        @foreach($categories as $category)
                                            <option value="{{$category->id}}">{{$category->full_breadcrump}}</option>
                                        @endforeach
                                    @endif --}}
                                </select>

                            </div>
                    </div>

                    <div class="form-group col-md-12">
                        <label for="name">{{ __('common.Name') }} (EN)</label>
                        <div>

                            <input autocomplete="off" type="text" class="form-control saveModal"
                                   oninput="setCustomValidity('')"
                                   oninvalid="this.setCustomValidity('Please enter some text')"
                                   placeholder="Enter some text here"
                                   name="name_en"
                                   id="name_en">
                        </div>
                    </div>

                    <div class="form-group col-md-12">
                        <label for="name">{{ __('common.Name') }} (DE)s</label>
                        <div>

                            <input autocomplete="off" type="text" class="form-control saveModal"
                                   oninput="setCustomValidity('')"
                                   oninvalid="this.setCustomValidity('Please enter some text')"
                                   placeholder="Enter some text here"
                                   name="name_de"
                                   id="name_de">
                        </div>
                    </div>

                    <div class="form-group col-md-6 pt-4">
                        <button type="submit" form="saveForm" id="saveBtn"
                                class="btn btn-primary btn-block ">{{ __('common.Save') }}</button>
                    </div>
                    <div class="form-group col-md-6 pt-md-4">
                        <button type="submit" onclick="$('#saveModal').modal('hide');clearAll('.saveModal');event.preventDefault();"
                                class="btn btn-danger btn-block ">{{ __('common.Cancel') }}</button>
                    </div>

                </div>
            </form> <!-- /form -->
        </div>
    </div>
</div>
</div>
<!-- modal end -->

 <!-- modal start -->
 <div class="modal fade" id="updateModal" tabindex="-1"
 role="dialog"
 aria-labelledby="mySmallModalLabel" aria-hidden="true">
<div class="modal-dialog modal-md">
    <div class="modal-content">
        <div class="modal-header">
            <h5 class="modal-title mt-0">Update</h5>
            <button type="button" class="close" data-dismiss="modal"
                    aria-hidden="true">×
            </button>
        </div>
        <div class="modal-body">
            <form class="form-horizontal" id="updateForm" role="form">
                <input type="hidden" name="id" id="updateId" class="updateModal">
                <input type="hidden" id="updateUrl" class="updateModal">
                <input type="hidden" id="selectedParent" class="updateModal">

                <div class="row">

                    <div class="form-group col-md-12">
                        <label for="companyU" class="control-label">{{ __('common.Company') }} </label>
                            <div class="input-group">
                                <select id="companyU" disabled onchange="getParentCategoriesUpdate(this.value)" name="company" class="form-control updateModal">
                                    <option value="" selected disabled>Select company</option>
                                    @if(isset($companies) && $companies != null)
                                        @foreach($companies as $company)
                                            <option value="{{$company->id}}">{{$company->name}}</option>
                                        @endforeach
                                    @endif
                                </select>

                            </div>
                    </div>

                    <div class="form-group col-md-12">
                        <label for="parentU" class="control-label">{{ __('common.Parent Category') }} </label>
                            <div class="input-group">
                                <select id="parentU" name="parent" class="form-control select2 saveModal">
                                    <option value="" selected ><-- No parent --></option>
                                    {{-- @if(isset($categories) && $categories != null)
                                        @foreach($categories as $category)
                                            <option value="{{$category->id}}">{{$category->full_breadcrump}}</option>
                                        @endforeach
                                    @endif --}}
                                </select>
                            </div>
                    </div>

                    <div class="form-group col-md-12">
                        <label for="name_enU">{{ __('common.Name') }} (EN)</label>
                        <div>

                            <input autocomplete="off" type="text" class="form-control updateModal"
                                   oninput="setCustomValidity('')"
                                   oninvalid="this.setCustomValidity('Please enter some text')"
                                   placeholder="Enter some text here"
                                   name="name_en"
                                   id="name_enU">
                        </div>
                    </div>

                    <div class="form-group col-md-12">
                        <label for="name_deU">{{ __('common.Name') }} (DE)</label>
                        <div>

                            <input autocomplete="off" type="text" class="form-control updateModal"
                                   oninput="setCustomValidity('')"
                                   oninvalid="this.setCustomValidity('Please enter some text')"
                                   placeholder="Enter some text here"
                                   name="name_de"
                                   id="name_deU">
                        </div>
                    </div>

                    <div class="form-group col-md-6 pt-4">
                        <button type="submit" form="updateForm"
                                class="btn btn-primary btn-block ">{{ __('common.Update') }}</button>
                    </div>
                    <div class="form-group col-md-6 pt-md-4">
                        <button type="submit" id="updateBtn" onclick="$('#updateModal').modal('hide');clearAll('.updateModal');event.preventDefault();"
                                class="btn btn-danger btn-block ">{{ __('common.Cancel') }}</button>
                    </div>

                </div>
            </form> <!-- /form -->
        </div>
    </div>
</div>
</div>
<!-- modal end -->

@endsection
@section('pageSpecificScript')
    <script language="JavaScript" type="text/javascript">
    let table;
      $(document).ready(function () {
          showTable();
          getParentCategories();

            $("#saveForm").on("submit", function (event) {
                event.preventDefault();

                $('#saveBtn').attr('disabled',true);//disable button till ajax response for prevent form double submit
                clearAlerts();//initialize alert and variables

                    $.ajax({
                        url: "{{route('category.store',app()->getLocale())}}",
                        type: 'POST',
                        data: $(this).serialize(),
                        success: function (data) {

                            showControllerErrors(data);
                            if (data.success != null) {
                                $('#saveModal').modal('hide');
                                clearAll('.saveModal');
                                table.ajax.reload();
                                showSuccess(data.success);//show success alert
                            }
                            $('#saveBtn').attr('disabled',false);//reactivate submit button

                        },
                        error: function (data) {
                            $('#saveBtn').attr('disabled',false);//reactivate submit button
                            showRequestErrors(data);
                        }
                    })
            });

            $("#updateForm").on("submit", function (event) {
                event.preventDefault();
                let url = $('#updateUrl').val();

                $('#updateBtn').attr('disabled',true);//disable button till ajax response for prevent form double submit
                clearAlerts();//initialize alert and variables

                    $.ajax({
                        url: url,
                        type: 'PUT',
                        data: $(this).serialize(),
                        success: function (data) {
                            showControllerErrors(data);
                            if (data.success != null) {
                                $('#updateModal').modal('hide');
                                clearAll('.updateModal');
                                table.ajax.reload();
                                showSuccess(data.success);//show success alert
                            }
                            $('#updateBtn').attr('disabled',false);//reactivate submit button
                        },
                        error: function (data) {
                            $('#updateBtn').attr('disabled',false);//reactivate submit button
                            showRequestErrors(data);
                        }
                    })
            });



        });

        function showTable(){
            table =  $('#dataTable').DataTable({
                processing: true,
                serverSide: true,
                ajax: "{{ route('category.view',app()->getlocale()) }}",
                columns: [
                    { data: 'company', name: 'company' },
                    { data: 'name_en', name: 'name_en' },
                    { data: 'name_de', name: 'name_de' },
                    { data: 'breadcrump', name: 'breadcrump'},
                    { data: 'action', name: 'action' },
                ]
            });
        }

        function getParentCategories(company_id = null){
            $('#parent').html($('<option>', {
                                value: "",
                                text : "<-- No parent -->"
                            }));
            if(company_id){
                $.ajax({
                    url: 'get_categories/'+company_id,
                    type: 'GET',
                    success: function (data) {
                        showControllerErrors(data);
                        if (data.success != null) {

                            $.each(data.success, function (i, item) {
                                $('#parent').append($('<option>', {
                                    value: item.idcategory,
                                    text : item.full_breadcrump
                                }));
                            });
                        }
                    },
                    error: function (data) {
                        showRequestErrors(data);
                    }
                })
            }
        }

        function getParentCategoriesUpdate(company_id = null){
            $('#parentU').html($('<option>', {
                                value: "",
                                text : "<-- No parent -->"
                            }));
            if(company_id){
                $.ajax({
                    url: 'get_categories/'+company_id,
                    type: 'GET',
                    success: function (data) {
                        showControllerErrors(data);
                        if (data.success != null) {

                            $.each(data.success, function (i, item) {
                                $('#parentU').append($('<option>', {
                                    value: item.idcategory,
                                    text : item.full_breadcrump
                                }));
                            });
                            $('#parentU').val($('#selectedParent').val()).trigger('change');
                        }
                    },
                    error: function (data) {
                        showRequestErrors(data);
                    }
                })
            }
        }


        function destroy(url) {
                    swal.fire({
                        title: '{{__('common.Delete')}}?',
                        icon: 'warning',
                        showCancelButton: true,
                        confirmButtonText: `Delete`,
                        confirmButtonClass: `deleteBtn`,
                        buttonsStyling: true,
                    }).then((result) => {
                        /* Read more about isConfirmed, isDenied below */
                        if (result.isConfirmed) {
                            $.ajax({
                            url: url,
                            type: 'DELETE',
                            success: function (data) {
                                showControllerErrors(data);
                                if (data.success != null) {
                                    table.ajax.reload();
                                    showSuccess(data.success);//show success alert
                                }
                            },
                            error: function (data) {
                                showRequestErrors(data);
                            }
                        });
                        } else if (result.isDenied) {
                            Swal.fire('Process terminated', '', 'info')
                        }
                        });
        }

        function showUpdateModal(id,url) {
            $('#updateId').val(id);
            $('#updateUrl').val(url);
            $('#parentU').val($('#update' + id).attr('data-parent')).trigger('change');
            $('#selectedParent').val($('#update' + id).attr('data-parent'));
            $('#name_enU').val($('#update' + id).attr('data-en'));
            $('#name_deU').val($('#update' + id).attr('data-de'));
            $('#companyU').val($('#update' + id).attr('data-companyId')).trigger('change');
            $('#updateModal').modal('show');
        }
    </script>
@endsection