@extends('front.layouts.app')

@section('content')

    <div class="main-content-box categorize-store pb-4">
        <div class="height-counter d-flex  justify-content-between flex-column">
            <div class="d-flex  justify-content-between flex-column @if(!empty($detail->review_pages) && !in_array(3,$detail->review_pages)) from-overlayer @endif">
                <div class="login-box pad-t">
                    <div class="container">
                        <div class="row">
                            @include('front.common.review-alert',['number'=>3])
                            <div class="col-sm-12  pad-x-100">
                                <div class="login-box-des">
                                    <div class="login-title">
                                        {{__('Please provide categories & subcategories of your')}}
                                        <br> {{__('E-commerce Store.')}}
                                    </div>
                                    <h4 class="cat-title">
                                        {{__('Enter your categories and subcategories')}}
                                    </h4>
                                    <div class="login-des">
                                        {{__('Please provide categories and sub-categories to sort your products for example if you are selling products such as Tv\'s, Refrigerates and Washing Machines then category in that case will be "Electronics" and sub-category will be "Refrigerators", "Refrigerators" and "Washing Machines"')}}
                                    </div>
                                </div>
                            </div>

                            <div class="col-sm-12 pad-x-100 mb-3">
                                <div class="input-add ">
                                    <form id="create-category-form" action="{{route('front.category.submit')}}"
                                          method="post"
                                          class="category-form">
                                        @csrf
                                        <div class="d-flex justify-content-between align-items-center login-box">
                                            <div class="field">
                                                <div class="input-style mb-0">
                                                    <label>{{__('Category')}}<span class="text-danger"> * {{__('(Mandatory)')}}</span></label>
                                                    <input type="text" placeholder="{{__('Category')}}" class="ctm-input"
                                                           name="name" oninvalid="this.setCustomValidity('{{__('This field is required.')}}')" required>
                                                    <input hidden name="parent" value="0">
                                                    <input hidden name="language_id" value="{{$languageId}}">
                                                    @include('front.common.alert',['input' => 'name'])
                                                </div>
                                            </div>
                                            <button type="submit" id="create-category-button"
                                                    class="btn login-des pl-2 pr-0 pt-3">
                                                {{__('Add')}}
                                            </button>
                                        </div>

                                    </form>
                                </div>
                            </div>
                            <div class="col-sm-12 pad-x-100">
                                <div class="cate-subcate-block">
                                    <div class="cat-head d-flex">
                                        <div class="title">{{__('Category')}}</div>
                                        <div class="title">{{__('Subcategories')}}</div>
                                    </div>
                                    <div class="cat-content-main">
                                        @forelse($categories as $category)
                                            <div class="cat-content d-flex">
                                                <div class="category">
                                                    <div class="cate-title">
                                                        {{$category->translation->name}}
                                                    </div>
                                                </div>
                                                <div class="sub-category w-100">
                                                    <div class="input-add ">
                                                        <form id="create-subcategory-form-{{$category->id}}"
                                                              action="{{route('front.category.submit')}}" method="post"
                                                              class="login-box d-flex justify-content-between align-items-center">
                                                            @csrf
                                                            <div class="field">
                                                                <div class="input-style mb-0">
                                                                    <input type="text"
                                                                           placeholder="{{__('Subcategory')}}"
                                                                           class="ctm-input" name="name" oninvalid="this.setCustomValidity('{{__('This field is required.')}}')" required>
                                                                    <input hidden name="parent"
                                                                           value="{{$category->id}}">
                                                                    <input hidden name="language_id"
                                                                           value="{{$languageId}}">
                                                                    @include('front.common.alert',['input' => 'name'])
                                                                </div>
                                                            </div>
                                                            <button type="submit" id="create-subcategory-button-{{$category->id}}"
                                                                    {{--                                                                    onclick="disableAndSubmitSubcategory(this, {{$category->id}})" --}}
                                                                    class="btn login-des pl-2 pr-0">
                                                                {{__('Add')}}
                                                            </button>
                                                        </form>
                                                    </div>
                                                    <ul class="sub-cat-ul d-flex mb-0 flex-wrap">
                                                        @forelse($category->subcategories as $subcategory)
                                                            <li class="cat-items d-flex  align-items-center">
                                                                {{$subcategory->translation['name']}}
                                                                <a class="remove-sub-cat delete-category-button"
                                                                   href="javascript:void(0)"
                                                                   data-url="{{route('front.category.delete', $subcategory->id)}}"
                                                                   title="Delete Subcategory">
                                                                    <i class="fas fa-times"></i>
                                                                </a>
                                                                {{--                                                        <button class="remove-sub-cat"><i class="fas fa-times"></i></button>--}}
                                                            </li>
                                                        @empty
                                                        @endforelse
                                                    </ul>
                                                </div>

                                                <ul class="mian-cat-action d-flex align-items-center justify-content-between">
                                                    <li class="item">
                                                        <a href="#exampleModal" data-toggle="modal" id="open-edit-model"
                                                           data-target="#exampleModal"
                                                           data-url="{{route('front.category.edit', $category->id)}}"
                                                           data-id="{{$category->id}}"
                                                           data-title="{{$category->translation->name}}"
                                                           class="btn trash-icon"
                                                           onclick="openEditModel(this)">
                                                            <i class="fas fa-edit"></i>
                                                        </a>
                                                    </li>
                                                    <li class="item">
                                                        <a class="btn trash-icon delete-category-button"
                                                           href="javascript:void(0)"
                                                           data-url="{{route('front.category.delete', $category->id)}}"
                                                           title="Delete Category">
                                                            <i class="fas fa-trash-alt"></i>
                                                        </a>
                                                    </li>
                                                </ul>
                                            </div>
                                            @push('script-page-level-validate')
                                                <script>
                                                    $("#create-subcategory-form-{{$category->id}}").validate({
                                                        submitHandler: function(form) {
                                                            $('#create-subcategory-button-{{$category->id}}').attr('disabled', true);
                                                            $(form).submit();
                                                        }
                                                    });
                                                </script>
                                            @endpush
                                            @empty
                                        @endforelse
                                    </div>

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <form id="step-form" action="{{route('front.step.three.submit')}}" method="post">
                @csrf
                @include('front.common.step-pages')
            </form>
        </div>
    </div>



    <!-- Modal -->
    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
         aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <form id="edit-category-form" action="" method="post">
                    @csrf

                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel">{{__('Edit Category Name')}}</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <div class="container">
                            <div class="row">
                                <div class="col-sm-12">
                                    <div class="input-add ">
                                        <div class="field py-2">
                                            <div class="input-style mb-0">
                                            <!-- <label>{{__('Category')}}<span class="text-danger"> *  {{__('(Mandatory)')}}</span></label> -->
                                                <input type="text" placeholder="{{__('Category')}}" class="ctm-input"
                                                       name="name" id="category-edit-input" required>
                                                <input hidden name="language_id" value="{{$languageId}}">
                                                @include('front.common.alert',['input' => 'name'])
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="site-btn" data-dismiss="modal">{{__('Close')}}</button>
                        <button type="submit" class="site-btn">{{__('Save changes')}}</button>
                    </div>
                </form>

            </div>
        </div>
    </div>

@endsection

@push('script-page-level')
    <script src="{{asset('assets/front/js/jquery-3.5.1.min.js')}}"></script>
    <script>
        $('.delete-category-button').on('click', function (e) {

            var url = $(this).data('url');

            swal({

                    title: "{{__('Are you sure to delete this?')}}",

                    type: "warning",

                    showCancelButton: true,

                    confirmButtonColor: "#DD6B55",

                    confirmButtonText: "{{__('Delete')}}",

                    cancelButtonText: "{{__('No')}}",

                    closeOnConfirm: true,

                    closeOnCancel: true

                },

                function (isConfirm) {

                    if (isConfirm) {

                        $.ajax({

                            type: 'get',

                            url: url,

                            dataType: 'json',

                            headers: {

                                'X-CSRF-TOKEN': window.Laravel.csrfToken

                            }

                        })

                            .done(function (res) {
                                // toastr.success("You have deleted inquiry successfully!"); location.reload();
                                location.reload();
                            })

                        // .fail(function(res){ toastr.success("You have deleted inquiry successfully!"); t.reload();  });

                    } else {

                        swal("{{__('Cancelled')}}", "{{__('Your Delete Request is Cancelled')}}", "error");

                    }

                });

        });

        function openEditModel(selector) {
            var action = selector.dataset.url;
            var name = selector.dataset.title;
            $('#edit-category-form').attr('action', action);
            $('#category-edit-input').val(name);
        }


    </script>
@endpush

@push('script-page-level-validate')
    <script>
        $("#edit-category-form").validate();
        $("#create-category-form").validate({
            submitHandler: function(form) {
                $('#create-category-button').attr('disabled', true);
                $(form).submit();
            }
        })

        // $("#create-subcategory-form").validate({
        //     submitHandler: function(form) {
        //         $('#create-subcategory-button').attr('disabled', true);
        //         $(form).submit();
        //     }
        // });



        // $('#create-category-button').on('click', function (){
        //     $('#create-category-button').attr('disabled', true);
        //     // $('#create-category-form').find('[type="submit"]').trigger('click');
        //     $('#create-category-form').submit();
        //     return true;
        // });

        // function disableAndSubmitSubcategory(selector, id){
        //     selector.setAttribute('disabled', true);
        //     // selector.click();
        //     // $('#create-subcategory-form-'+id).find('[type="submit"]').trigger('click');
        //     $('#create-subcategory-form-'+id).submit();
        //     return true;
        // }
        // $('#create-subcategory-button').on('click', function (){
        //
        // });





    </script>
@endpush