@extends("layouts.master")

@section("title")
    Area Working hour 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">Area Working hour</li>
                        </ol>
                    </nav>
                </div>
            </div>

            <h6 class="mb-0 text-uppercase">Area Working hour list</h6>

            <!-- filters -->
            <div class="card mt-2 shadow-none">
                <div class="card-body">
                    <div class="container">
                        <div class="row">
                            <div class="col-xl-8 col-lg-8 col-md-12 col-sm-12 col-xs-12 mb-2">
                                <label class="fw-bold mb-1" style="font-size: 12px">Search by first name</label>
                                <input type="search" id="search" class=" form-control " placeholder="Search by user name...">
                            </div>

                            {{--                            <div class="col-xl-2 col-lg-4 col-md-12 col-sm-12 col-xs-12 mb-2">--}}
                            {{--                                <select id="filter" name="role" required class="form-select">--}}
                            {{--                                    <option selected>Choose department</option>--}}
                            {{--                                    <option>...</option>--}}
                            {{--                                </select>--}}
                            {{--                            </div>--}}

                            {{--                            <div class="col-xl-2 col-lg-4 col-md-12 col-sm-12 col-xs-12 mb-2">--}}
                            {{--                                <select id="inputState" name="role" required class="form-select">--}}
                            {{--                                    <option selected>Choose woking area</option>--}}
                            {{--                                    <option>...</option>--}}
                            {{--                                </select>--}}
                            {{--                            </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> {{__('User Working Hours 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 User Working Hour Found')}} !</h6>
            </div>

            <div class="col-lg-12">
                <div id="divPagination" class="justify-content-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://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
    <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");

            //----filterDate----
            var filterFromDate = $("#filterFromDate").val();
            var filterToDate = $("#filterToDate").val();
            var filterDate = $("#filterDate").val();
            var filterUser=$("#filterUser").val();

            // Date Filter
            var start = moment().subtract(29, 'days');
            var end = moment();
            function cb(start, end) {
                $('#filterDate span').html(start.format('YYYY-MM-DD') + ' - ' + end.format('YYYY-MM-DD'));
                filterFromDate = start.format('YYYY-MM-DD');
                filterToDate = end.format('YYYY-MM-DD');
                $("#filterFromDate").val(filterFromDate)
                $("#filterToDate").val(filterToDate)
            }
            $('#filterDate').daterangepicker({
                startDate: start,
                endDate: end,
                ranges: {
                    'Today': [moment(), moment()],
                    'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
                    'Last 7 Days': [moment().subtract(6, 'days'), moment()],
                    'Last 30 Days': [moment().subtract(29, 'days'), moment()],
                    'This Month': [moment().startOf('month'), moment().endOf('month')],
                    'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
                }
            }, cb );
            cb(start, end);

            function dateFilters(){
                filterFromDate = $("#filterFromDate").val();
                filterToDate = $("#filterToDate").val();
                filterDate = $("#filterDate").val();
                filterUser=$("#filterUser").val();

            }

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

            function workingHourCount(){
                setFilters()
                contentPagination.twbsPagination('destroy');
                $.ajax({
                    url: '/api/working-hour-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 workingHours(offset,filterLength){
                setFilters()
                $("#divLoader").css('display','block')
                $("#divData").css('display','none')
                $("#divNotFound").css('display','none')
                $("#divData").html('');
                $.ajax({
                    url: '/api/working-hours/',
                    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','row')
                        } 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) {
                            workingHours((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');
                workingHourCount()
            });
            $(document).on('click','#btnFilter',function (e){
                setFilters()
                $("#divData").html('')
                contentPagination.twbsPagination('destroy');
                workingHourCount()
            })


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

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

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

        });

    </script>
@endsection