@extends(backpack_view('layouts.plain'))
@section('content')
    <div class="row justify-content-center mt-0">
        <div class="col-12 col-sm-12 col-md-10 col-lg-8 p-0 mt-3 mb-5">
            <div class=" px-0 pt-4 pb-0 mt-3 mb-3">
                <div class="row">
                    <div class="col-md-12 mx-0">
                        <div class="card card-style">
                             <div class="card-header  d-flex justify-content-between align-items-center">
                                    Work Schedule
                                   <div>
                                     {{-- <span id="filter" class="btn btn-light btn-sm"><i class="nav-icon la la-sort"></i> Sort By </span> --}}
                                     <span id="loadMore" class="btn btn-light btn-sm"><i class="nav-icon la la-angle-double-right"></i> Load More</span>
                                   </div>
                                </div>
                              {{--  <div class="card-body container-fluid">

                              </div>  --}}

                        </div>
                        <div id="workschedule" class="mb-5">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
<style>
    .card-style {
        overflow: hidden;
        border-radius: 20px;
        border: none;
        box-shadow: 0 4px 24px 0 rgb(0 0 0 / 5%);
    }
</style>
@include('client.layout.footer')
@endsection
@section('after_scripts')
    <script>
        var ENDPOINT = "{{ Request::url()}}";
        var BASEURL = "{{ url('/') }}";
        let page = 1;

        $(document).ready(function() {
            loadWorkSchedule(page);
            $('.app-footer').empty();
        });

        $("#loadMore").click(function(){
            loadWorkSchedule(page);
        })

    function loadWorkSchedule(page){
        $.ajax({
            url: ENDPOINT + "?page=" + page + `&workschedule=true`,
            datatype: "JSON",
            type: "get",
        })
        .done(function (response) {
            if (response.data.length  == 0) {
                new Noty({
                    text: 'no more data to loads',
                    type: "error"
                }).show();
            }
            //APPEND DATA TO HTML
            response.data.map((data) => {

                let date =  data.created_at.substring(0, data.created_at.indexOf('T'));

                console.log(getWeekday(data.end_date ,'start_date'))
                {{--  console.log(data.start_date)  --}}
                $( `<div class="card card-style">
                        <div class="card-header ">
                            <div class="d-block ">
                                <h5 class="font-weight-normal mb-0"> ${data.scope_of_work}</h5>
                            </div>
                            <div class="border-top border-color my-0"></div>
                            <div class="d-block ">
                                <small>
                                <span class="m-0">From :  ${getWeekday(data.start_date, "start_date")}</span>
                                <div class="my-0"></div>
                                <span class="m-0">to :    ${getWeekday(data.end_date, "end_date")}</span>
                                </small>
                            </div>
                        </div>
                     </div>
                `).appendTo(`#workschedule`)
            })
            //  INCREMENT PAGE NUMBER
            page++
        })
        .fail(function (jqXHR, ajaxOptions, thrownError) {
            console.log('Server error occured');
        });
    }
    getWeekday = (s,type)  => {

        const [yyyy, mm, dd] = s.split('-'),

             date = new Date(
              parseInt(yyyy),
              parseInt(mm) - 1,
              parseInt(dd)
            );
            let day =  date.getDay();
            //make month not worng in JS

            //IF DATE NOT MONDAY
            if(day != 0 && type == "start_date"){
                date.setDate(date.getDate() - day + 1);
            }
            console.log(mm);
            //IF DATE NOT SUNDAY (START DATE)
            if(day != 0 && type == "end_date"){
                let sundayLength = 7 - day;
                date.setDate(date.getDate() + sundayLength  );
            }
            return date.toLocaleDateString('en-SG', {day:"numeric", weekday:"long", year:"numeric", month:"short", })
    }

    </script>
@endsection