@extends("layouts.master")

@section("title")
    User list
@endsection

@section("content")
    <div class="page-wrapper">
        <div class="page-content">

            <!--breadcrumb-->
            <div class="page-breadcrumb d-none d-sm-flex align-items-center mb-3">
                <div class="breadcrumb-title pe-3"> <a href="{{ url('dashboard')}}">Home</a> </div>
                <div class="ps-3">
                    <nav aria-label="breadcrumb">
                        <ol class="breadcrumb mb-0 p-0">
                            <li class="breadcrumb-item active" aria-current="page">document list</li>
                        </ol>
                    </nav>
                </div>
            </div>

            <h6 class="mb-0 text-uppercase">Document list</h6>
            <!-- filters -->
            <div class="card mt-2 shadow-none">
                <div class="card-body">
                    <div class="container">
                        <div class="row ">
                            <div class="col-8 mb-2">
                                <label class="fw-bold mb-1" style="font-size: 12px">Search by username</label>
                                <input type="search" id="search" class=" form-control " placeholder="Search by user name...">
                            </div>

                            <div class="col-xl-2 col-lg-2 col-md-6 col-sm-6 col-xs-6 mb-2 mt-3">
                                <button type="button" id="btnFilter" class="btn btn-outline-success btn-block mt-2"
                                        style="width:100% !important;">Filter</button>
                            </div>
                            <div class="col-xl-2 col-lg-2 col-md-6 col-sm-6 col-xs-6 mb-2 mt-3">
                                <button type="button" id="btnReset" class="btn btn-success btn-block mt-2"
                                        style="width:100% !important;">Reset</button>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <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>

            <div class="col-lg-12">
                <div id="divPagination" class="text-center">
                    <ul id="content-pagination" class="pagination-sm justify-content-end" style="display:none;"></ul>
                </div>
            </div>
        </div>
    </div>
@endsection

@section("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 filterTitle=$("#search").val();
            var contentPagination = $("#content-pagination");
            var contentNotFound = $("#divNotFound");
            var contentFound = $("#divData");

            function setFilters(){
                filterTitle=$("#search").val()
                filterLength= 10 ;
            }
            documentCount();

            function documentCount(){
                setFilters()
                contentPagination.twbsPagination('destroy');
                $.ajax({
                    url: '/api/document-count/',
                    type: "get",
                    data:{filterTitle:filterTitle,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 documents(offset,filterLength){
                $("#divData").html('')
                setFilters()
                $("#divLoader").css('display','block')
                $("#divData").css('display','none')
                $("#divNotFound").css('display','none')
                $("#divData").html('');
                $.ajax({
                    url: '/api/documents/',
                    type: "get",
                    data:{
                        filterTitle:filterTitle,
                        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')
                            $("#content-pagination").css('display','none')
                        } else if (response["status"] == "success") {
                            $("#divNotFound").css('display','none')
                            $("#divLoader").css('display','none')
                            $("#divData").css('display','flex')
                            $("#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) {
                            documents((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');
                documentCount()
            });
            $(document).on('click','#btnFilter',function (e){
                setFilters()
                $("#divData").html('')
                contentPagination.twbsPagination('destroy');
                documentCount()
            })


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

            $(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 document.", "error");
                                    } else if (response["status"] == "success") {
                                        Swal.fire("Deleted!", "Document hour has been deleted.",
                                            "success");
                                        documentCount()
                                    }
                                },
                                error: function (error) {
                                    console.log(error);
                                },
                                async: false
                            });
                        } else {
                            Swal.close();
                        }
                    });
            });
            $(document).on('click','.fileDownload',function (e){
                e.preventDefault();  //stop the browser from following
                var fileUrl = $(this).attr('fileURL');

                fetch('https://allens.baramdatsol.com//uploads/content/'+fileUrl)
                    .then(resp => resp.blob())
                    .then(blob => {
                        const url = window.URL.createObjectURL(blob);
                        const a = document.createElement('a');
                        a.style.display = 'none';
                        a.href = url;
                        // the filename you want
                        a.download = $(this).attr('fileName');
                        document.body.appendChild(a);
                        a.click();
                        window.URL.revokeObjectURL(url);
                    })

            });
        });

    </script>
@endsection