@extends('backend.admin.layouts.app')

@section('content')
<style>

</style>
    <div class="row">
        {{-- add category modal --}}
        <div class="modal fade" id="subcategoryAddModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
            aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel">Create Sub Category</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <form action="{{ route('admin.subcategory.submit') }}" method="post" id="subcategoryCreate"
                            enctype="multipart/form-data">
                            @csrf

                            <div class="form-group">
                                <label for="status">Select Category <span style="color: red; font-weight:bold">*</span></label>
                                <select class="form-control" name="category" id="category">
                                    @foreach ($cats as $cat )
                                    <option value="{{$cat->id}}">{{$cat->name}}</option>
                                    @endforeach


                                </select>
                            </div>

                            <div class="form-group">
                                <label for="name">Sub Category Name <span style="color: red; font-weight:bold">*</span></label>
                                <input name="sub_cate_name" id="sub_cate_name" class="rounded form-control" placeholder="Enter question sub category name">
                                <span class="text-danger error-message" id="cate_name-error"></span>
                            </div>

                            <div class="form-group">
                                <label for="status">Status</label>
                                <select class="form-control" name="status" id="status">
                                    <option value="1">Active</option>
                                    <option value="0">Inactive</option>
                                </select>
                            </div>
                            <button type="submit"
                                style="float:right; margin-bottom:8px; padding-left:25px; padding-right:25px; font-size:15px; margin-top:25px"
                                class="btn btn-success">Submit</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>


        {{-- end category modal --}}
        {{-- edit category modal --}}
        <div class="modal fade" id="categoryEditModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
            aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel">Edit Category</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <form action="{{route('admin.subcate.edit')}}" method="post" id="subcategoryEdit"
                            enctype="multipart/form-data">
                            @csrf

                            <input type="hidden" id="sub_cat_id" name="sub_cat_id">
                            <div class="form-group">
                                <label for="status">Select Category <span style="color: red; font-weight:bold">*</span></label>
                                <select class="form-control" name="up_category" id="up_category">
                                    @foreach ($cats as $cat )
                                    <option value="{{$cat->id}}">{{$cat->name}}</option>
                                    @endforeach


                                </select>
                                <span class="text-danger error-message" id="up_category-error"></span>
                            </div>
                            <div class="form-group">
                                <label for="name">Category Name <span style="color: red; font-weight:bold">*</span></label>
                                <input name="up_sub_cate_name" id="up_sub_cate_name" class="rounded form-control" placeholder="">
                                <span class="text-danger error-message" id="up_sub_cate-error"></span>
                            </div>

                            <div class="form-group">
                                <label for="status">Status</label>
                                <select class="form-control" name="up_status" id="up_status">
                                    <option value="1">Active</option>
                                    <option value="0">Inactive</option>
                                </select>
                            </div>
                            <button type="submit"
                                style="float:right; margin-bottom:8px; padding-left:25px; padding-right:25px; font-size:15px; margin-top:25px"
                                class="btn btn-success">Submit</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>


        {{-- end edit category modal --}}






        <div class="col-md-12 col-sm-12 p-4">
            <section class="content">
                <!-- Default box -->
                <div class="card">
                    <div class="card-header">
                        <h3 class="card-title">Category List</h3>
                        <a href="" class="float-right btn btn-primary btn-sm" data-toggle="modal"
                            data-target="#subcategoryAddModal"> <i class="fas fa-plus-circle"></i> Add SubCategory</a>
                    </div>
                    <!-- /.card-header -->
                    <div style="overflow-y:auto"  class="card-body">
                        <table class="table table-bordered table-striped subcats_table">
                            <thead>
                                <tr>
                                    <th>SL</th>
                                    <th>Category Name</th>
                                    <th>Sub Category Name</th>
                                    <th>Status</th>
                                    <th>Action</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                    <!-- /.card-body -->
                </div>
                <!-- /.card-body -->
                <!-- /.card -->
            </section>
        </div>
    </div>
@endsection

@push('js')
    <script>

        $(document).ready(function(){

            $.ajaxSetup({
          headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
        });


        $(function() {

var table = $('.subcats_table').DataTable({

    dom: "lBfrtip",
    buttons: ["copy", "csv", "excel", "pdf", "print"],

    pageLength: 25,
    processing: true,
    serverSide: true,
    searchable: true,
    "ajax": {
        "url": "{{ route('admin.subcategory.add.page') }}",
        "datatype": "json",
        "dataSrc": "data",
        "data": function(data) {

        }
    },

    drawCallback: function(settings) {

        $('#is_check_all').prop('checked', false);

    },

    columns: [{
            name: 'DT_RowIndex',
            data: 'DT_RowIndex',
            sWidth: '5%'
        },

        {
            data: 'cat_name',
            name: 'cat_name',
            sWidth: '30%'
        },
        {
            data: 'name',
            name: 'name',
            sWidth: '30%'
        },

        {
            data: 'status',
            name: 'status',
            sWidth: '15%'
        },

        {
            data: 'action',
            name: 'action',
            sWidth: "20%",
            orderable: false,
            searchable: false
        },

    ],
    lengthMenu: [
        [10, 25, 50, 100, 500, 1000, -1],
        [10, 25, 50, 100, 500, 1000, "All"]
    ],
});
table.buttons().container().appendTo('#exportButtonsContainer');

$(document.body).on('click', '#is_check_all', function(event) {
    alert('Checkbox clicked!');
    var checked = event.target.checked;
    if (true == checked) {
        $('.check1').prop('checked', true);
    }
    if (false == checked) {
        $('.check1').prop('checked', false);
    }
});

$('#is_check_all').parent().addClass('text-center');

$(document.body).on('click', '.check1', function(event) {

    var allItem = $('.check1');

    var array = $.map(allItem, function(el, index) {
        return [el]
    })

    var allChecked = array.every(isSameAnswer);

    function isSameAnswer(el, index, arr) {
        if (index === 0) {
            return true;
        } else {
            return (el.checked === arr[index - 1].checked);
        }
    }

    if (allChecked && array[0].checked) {
        $('#is_check_all').prop('checked', true);
    } else {
        $('#is_check_all').prop('checked', false);
    }
});

//Submit filter form by select input changing
$(document).on('change', '.submitable', function() {

    table.ajax.reload();

});


});



            $('#subcategoryCreate').on('submit', function(e) {
                e.preventDefault();

                var formData = new FormData(this);
                var form = this;

                $.ajax({
                    url: $(this).attr('action'),
                    type: $(this).attr('method'),
                    data: formData,
                    contentType: false,
                    processData: false,
                    success: function(res) {
                        console.log(res);
                        $('.error-message').html('');
                        if (res.errors) {
                            $.each(res.errors, function(key, value) {
                                $('#' + key + '-error').html(value[0]);
                            });
                        }
                        if (res.status == 'success') {
                            toastr.success(res.message);
                            $('.subcats_table').DataTable().draw(false);
                            $('#subcategoryAddModal').modal('hide');
                            form.reset();
                        }
                    },
                    error: function(xhr) {
                        var errors = xhr.responseJSON.errors;
                        $.each(errors, function(key, value) {
                            $('#' + key + '-error').text(value[0]);
                        });
                    }
                });
            });

            $(document).on('click', '.editSubCat', function(){

                let id = $(this).data('id');
                let category = $(this).data('category');
                let name = $(this).data('name');
                let status = $(this).data('status');


                $('#sub_cat_id').val(id);
                $('#up_category').val(category);
                $('#up_sub_cate_name').val(name);
                $('#up_status').val(status);

                $('#categoryEditModal').modal('show');

            });


            $(document).on('submit', '#subcategoryEdit', function(e) {
                e.preventDefault();

                var formData = new FormData($(this)[0]);

                $.ajax({
                    url: $(this).attr('action'),
                    type: $(this).attr('method'),
                    data: formData,
                    cache: false,
                    contentType: false,
                    processData: false,
                    success: function(res) {

                        console.log(res);
                        $('.error-message').html('');
                        if (res.errors) {
                            $.each(res.errors, function(key, value) {
                                $('#' + key + '-error').html(value[0]);
                            });
                        }
                        if (res.status == 'success') {
                            toastr.success(res.message);
                            $('.subcats_table').DataTable().draw(false);
                            $('#categoryEditModal').modal('hide');
                        }




                    },
                    error: function(error) {
                        console.log(error);
                    }
                });
            });


            $(document).on('click', "#subcats_delete", function(e){
    e.preventDefault();
    let id = $(this).data('id');


    $.confirm({
        title: 'Delete Confirmation',
        content: 'Are you sure?',
        buttons: {
            cancel: {
                text: 'No',
                btnClass: 'btn-primary',
                action: function () {

                }
            },
            confirm: {
                text: 'Yes',
                btnClass: 'btn-danger',
                action: function () {

                    $.ajax({
                        url: "{{ route('admin.subcat.delete') }}",
                        type: 'post',
                        data: {
                            id: id
                        },
                        success: function (response) {
                            if (response.status == "success") {
                                toastr.success(response.message);
                                $('.subcats_table').DataTable().draw(false);
                            }
                        },
                        error: function (error) {
                            // Show Toastr error message
                            toastr.error(error.responseJSON.message);
                        }
                    });
                }
            }
        }
    });
});






        });





    </script>
@endpush