@extends('essential.main', [
    'breadcum' => 'Book Types',
    'route' => 'book_type',
])





    @section('content')
        <div class=" mt-2">
            @include('essential.buttons')
            <div class="flex flex-col w-full" id="book_type"></div>
        </div>
    @endsection

    @push('scripts')
        <script type='text/javascript'>
            $(document).ready(function() {
                $('#refresh').click(function(e) {
                    e.preventDefault();
                 
                    $search = $('#search').val("");
                    getDataTable();
                    toastr.success("Data Refreshed...");
                });

            });


            $('#add_book_type').submit(function(e) {
                e.preventDefault();
                var form_data = new FormData(this);
                $.ajax({
                    type: "POST",
                    url: "book_types",
                    data: form_data,
                    cache: false,
                    contentType: false,
                    processData: false,
                    dataType: "json",
                    success: function(response) {
                        if (response.status == true) {
                            getDataTable();
                            toggleModal('modal-add');
                            $("#add_book_type")[0].reset();
                            toastr.success(response.message);
                        } else {
                            toastr.error(response.message);
                        }
                    },
                    error: function(response) {
                        console.log(response);
                    }
                });
            });


            function getDataTable(page) {
                $('#refresh_btn').hide();
                $('#load').show();
                $search = $('#search').val();
                $page_count = $('#page_count').val();
                $.ajax({
                    type: "GET",
                    url: "book_types" + "?page=" + page,
                    data: {
                        search: $search,
                        page_count: $page_count,
                        _token: "{{ csrf_token() }}"
                    },
                    success: function(response) {
                        // toastr.success("Get User Successfully");
                        $('#book_type').html(response);
                        $('#refresh_btn').show();
                        $('#load').hide();
                    }
                });
            }

          

            function editBook($id) {
                $.ajax({
                    type: "GET",
                    url: "book_types/" + $id + "/edit",
                    success: function(response) {
                        $('#EditBookType').html(response);
                        toggleModal('modal-edit');
                    }
                });
            }

            function deleteModal($id) {
                $('#deleteID').val($id);
                toggleModal('modal-delete');
            }

      

         
            $("#deleteItem").click(function(e) {
                e.preventDefault();
                $id = $('#deleteID').val();

                $.ajax({
                    type: "DELETE",
                    url: "book_types/" + $id,
                    data: {
                        _token: "{{ csrf_token() }}"
                    },
                    success: function(response) {
                        if (response.status == true) {
                            toastr.success(response.message);
                            getDataTable();
                            toggleModal('modal-delete');
                            $("#deleteID").val('');
                        } else {
                            toastr.error(response.message);

                        }

                    }
                });
            });

        </script>
    @endpush


    @section('extras')
        @include('book_type.store')
        <div class="hidden overflow-x-hidden overflow-y-auto fixed inset-0 z-50 outline-none focus:outline-none justify-center items-center"
            id="modal-edit">
            <div id="EditBookType"></div>
        </div>
        <div class="hidden opacity-25 fixed inset-0 z-40 bg-black" id="modal-edit-backdrop"></div>

        @include('essential.delete')
    @endsection