@extends('layouts.master')

@section('title')
Documents list
@endsection

@section('content')
<style>
    .more:hover{
        cursor: pointer;
    }

</style>
<!-- PAGE-HEADER Breadcrumbs-->
<div class="page-header">
    <div>
        <h1 class="page-title">Documents List</h1>
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{{url('/dashboard')}}">Home</a></li>
            <li class="breadcrumb-item active" aria-current="page">Documents list</li>
        </ol>
    </div>

    @can('admin_section')
    <a role="button" class="btn btn-buzono" href="{{ url('/document/add')}}"> <span class="fe fe-plus fs-14"></span>
        Add Document</a>
    @endcan
</div>
<!-- PAGE-HEADER END -->

<!-- filters -->
<!-- filters -->
<div class="card">
    <div class="card-body px-3 py-2 pt-3">
        <div class="form-row align-items-center">
            <div class="col-12 col-lg-8 mb-1">
                <label for="" class="fw-bold mb-1">Search by name:</label>
                <input type="text" id="search" class="form-control" placeholder="search by name....">
            </div>
            <div class="col-12 col-lg-2 mb-1 ">
                <label for="" class="mb-1"></label>
                <button id="btnFilter" type="button" class="btn btn-buzono btn-block">Filter</button>
            </div>
            <div class="col-12 col-lg-2 mb-1 ">
                <label for="" class="mb-1"></label>
                <button id="btnReset" type="button" class="btn btn-outline-info btn-block">Reset</button>
            </div>

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

<div class="row">

    
</div>


<!-- row -->
<div class="row" id="divData">

</div>

<div id="divLoader" class="text-center pt-5" style="display:block;height:300px;">
    <span>
        <i class="bx bx-loader-circle bx-spin"></i>
        {{__('Documents are being loading.. It might take few seconds')}}.
    </span>
</div>
<div class="row text-center" id="divNotFound" style="display:none">
    <h6 class="mt-lg-5" style=""><i class="bx bx-window-close"></i> {{__('No Document Found')}} !</h6>
</div>


<!-- pagination -->
<div class="row mb-5">
    <div class="col-12">
        <div id="divPagination" class="">
            <ul id="content-pagination" class="pagination-sm justify-content-end" style="display:none;"></ul>
        </div>
    </div>
</div>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
        <div class="modal-header">
        <h5 class="modal-title fileName" id="exampleModalLabel">Detail</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
        
        <div class="modal-body" id="dataBody">
            
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        </div>
        </div>
    </div>
    </div>
@endsection
@section("bottom-script")
<script type="text/javascript"
    src="https://cdnjs.cloudflare.com/ajax/libs/twbs-pagination/1.4.2/jquery.twbsPagination.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script type="text/javascript">
    $(document).ready(function (e) {
        var filterLength = 1;
        var total = 0;
        var filterName = $("#search").val();
        var contentPagination = $("#content-pagination");
        var contentNotFound = $("#divNotFound");
        var contentFound = $("#divData");

        function setFilters() {
            filterName = $("#search").val()

            filterLength = 10;
        }
        vehicleCount();

        function vehicleCount() {
            setFilters()
            contentPagination.twbsPagination('destroy');
            $.ajax({
                url: '/api/document/count/',
                type: "get",
                data: {
                    filterName: filterName,
                    filterLength: filterLength
                },
                dataType: "JSON",
                cache: false,
                beforeSend: function () {},
                complete: function () {},
                success: function (response) {
                    // console.log(response);
                    if (response["status"] == "success") {
                        total = response["data"];
                        initPagination(Math.ceil(total / filterLength));
                    } else if (response["status"] == "fail") {
                        $("#divNotFound").css('display', 'block')
                        $("#divLoader").css('display', 'none')
                        $("#divData").css('display', 'none')
                    }
                },
                error: function (error) {
                    // console.log(error);
                }
            });
        }

        function users(offset, filterLength) {
            setFilters()
            $("#content-pagination").css('display', 'none')

            $("#divLoader").css('display', 'block')
            $("#divData").css('display', 'none')
            $("#divNotFound").css('display', 'none')
            $("#divData").html('');
            $.ajax({
                url: '/api/documents/',
                type: "get",
                data: {
                    filterName: filterName,
                    filterLength: filterLength,
                    offset: offset,
                },
                dataType: "JSON",
                cache: false,
                beforeSend: function () {

                },
                complete: function () {

                },
                success: function (response) {
                    // console.log(response);
                    if (response["status"] == "fail") {
                        $("#divLoader").css('display', 'none')
                        $("#divData").css('display', 'none')
                        $("#divNotFound").css('display', 'block')
                    } else if (response["status"] == "success") {
                        $("#divNotFound").css('display', 'none')
                        $("#divLoader").css('display', 'none')
                        $("#divData").css('display', 'flex')
                        $("#divData").html('');

                        $("#divData").append(response["rows"])
                        $("#content-pagination").css('display', 'flex')
                    }
                },
                error: function (error) {
                    // console.log(error);
                }
            });
        }

        function initPagination(totalPages) {

            if (totalPages > 0) {
                contentPagination.show();
                contentPagination.twbsPagination({
                    totalPages: totalPages,
                    visiblePages: 4,
                    onPageClick: function (event, page) {
                        users((page === 1 ? page - 1 : ((page - 1) * filterLength)), filterLength);
                    }
                });
            } else {
                contentPagination.hide();
                contentFound.hide();
                contentNotFound.show();
            }
        }

        $(document).on('keyup', '#search', function () {
            $("#divData").html('')
            setFilters()
            contentPagination.twbsPagination('destroy');
            vehicleCount()
        });
        $(document).on('click', '#btnFilter', function (e) {
            setFilters()
            $("#divData").html('')
            contentPagination.twbsPagination('destroy');
            vehicleCount()
        })


        $(document).on('click', '#btnReset', function (e) {
            $("#search").val('')
            setFilters()
            $("#divData").html('')
            contentPagination.twbsPagination('destroy');
            vehicleCount()
        })

        $(document).on('click', '.btnDelete', function (e) {
            var id = $(this).attr('id')
            Swal.fire({
                    title: "Are you sure?",
                    text: "You will not be able to recover this Document!",
                    type: "warning",
                    buttons: true,
                    confirmButtonColor: "#ff5e5e",
                    confirmButtonText: "Yes, delete it!",
                    closeOnConfirm: false,
                    dangerMode: true,
                    showCancelButton: true
                })
                .then((deleteThis) => {
                    if (deleteThis.isConfirmed) {
                        $.ajax({
                            url: '/api/delete/document/' + id,
                            type: "delete",
                            dataType: "JSON",
                            success: function (response) {

                                if (response["status"] == "fail") {
                                    Swal.fire("Failed!", "Failed to delete User.",
                                        "error");
                                } else if (response["status"] == "success") {
                                    Swal.fire("Deleted!", "Document has been deleted.",
                                        "success");
                                    vehicleCount()
                                }
                            },
                            error: function (error) {
                                // console.log(error);
                            },
                            async: false
                        });
                    } else {
                        Swal.close();
                    }
                });
        });
        
        // edit user
        $(document).on('click', '.btnEdit', function (e) {
            var document = $(this).attr('id');
            $.ajax({
                url: '/api/edit/document/' + id,
                type: "GET",
                dataType: "JSON",
                data: {
                    document: document

                },
                success: function (response) {
                    // console.log(response);
                    if (response["status"] == "fail") {
                        // toastr.error('Failed', response["msg"])
                    } else if (response["status"] == "success") {
                        // toastr.success('Success', response["msg"])
                    }
                },
                error: function (error) {
                    // console.log(error);
                },
                async: false
            });
        });

        $(document).on('click', '.ShowData', function (e) {
            var id = $(this).attr('id');
            $.ajax({
                url: '/api/document/'+id,
                type: "GET",
                dataType: "JSON",
                success: function (response) {
                    // console.log(response);
                    if (response["status"] == "fail") {
                        // toastr.error('Failed', response["msg"])
                    } else if (response["status"] == "success") {
                        $("#dataBody").html(response['data']['notes']);
                        $("#fileName").html(response['data']['name']);
                    }
                },
                error: function (error) {
                    // console.log(error);
                },
                async: false
            });
        });
    });
</script>
@endsection