@extends("layouts.master")

@section("title")
Working area
@endsection

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

        <!--breadcrumb-->
        <div class="row">
            <div class="col-lg-6">
                <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">Working area</li>
                            </ol>
                        </nav>
                    </div>
                </div>
            </div>
        </div>




        <h6 class="mb-0 text-uppercase">Working area</h6>

        <!-- filters -->
        <div class="card mt-2">
            <div class="card-body">
                <div class="container">
                    <div class="row ">
                        <div class="col-xl-4 col-lg-4 col-md-12 col-sm-12 col-xs-12 mb-2">
                            <label class="fw-bold mb-1" style="font-size: 12px">Search by name</label>
                            <input type="search" id="search" class=" form-control " placeholder="Search by name...">
                        </div>
                        <div class="col-xl-4 col-lg-4 col-md-12 col-sm-12 col-xs-12 mb-2">
                            <label class="fw-bold mb-1" style="font-size: 12px">Search by city</label>
                            <input type="search" id="filterCity" class=" form-control " placeholder="Search by 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> {{__('Area 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 Working Area 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>
    <!--end row-->


</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");
            var filterCity=$("#filterCity").val();


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

            function areaCount(){
                setFilters()
                contentPagination.twbsPagination('destroy');
                $.ajax({
                    url: '/api/area-count/',
                    type: "get",
                    data:{filterTitle:filterTitle,filterLength:filterLength,filterCity:filterCity},
                    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 areas(offset,filterLength){
                setFilters()
                $("#divLoader").css('display','block')
                $("#divData").css('display','none')
                $("#divNotFound").css('display','none')
                $("#divData").html('');
                $.ajax({
                    url: '/api/areas/',
                    type: "get",
                    data:{
                        filterTitle:filterTitle,
                        filterLength:filterLength,
                        offset:offset,
                        filterCity:filterCity,
                    },
                    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").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) {
                            areas((page === 1 ? page - 1 : ((page - 1) * filterLength)),filterLength);
                        }
                    });
                }else{
                    contentPagination.hide();
                    contentFound.hide();
                    contentNotFound.show();
                }
            }

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


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

            $(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 Working Area!",
                    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-area/'+id,
                                type: "delete",
                                dataType: "JSON",
                                success: function (response) {

                                    if (response["status"] == "fail") {
                                        Swal.fire("Failed!", "Failed to delete Area.", "error");
                                    } else if (response["status"] == "success") {
                                        Swal.fire("Deleted!", "Working Area has been deleted.",
                                            "success");
                                        areaCount()
                                    }
                                },
                                error: function (error) {
                                    console.log(error);
                                },
                                async: false
                            });
                        } else {
                            Swal.close();
                        }
                    });
            });
        });

    </script>

@endsection