@php

    @endphp
@extends("template.layouts.simple.master")
@section('content')
    <div class="page-body">
        @include("master.notification")
        <div class="container-fluid calendar-basic">

            <div class="card">
                <div class="col-sm-12">
                    <div class="card">
                        @can("user searching in calender view")
                            <div class="card-header">
                                <form action="{{route("user-vise-attendance-searching")}}" method="post">
                                    @csrf
                                    <div class="row">
                                        <div class="col-sm-3">
                                            <label for="">Select User</label>
                                            <select name="user_id" id="users" class="form-select">
                                                <option value=""></option>
                                                @foreach($users as $u)
                                                    <option value="{{$u->id}}"
                                                            @if($id == $u->id) selected @endif>{{$u->name}}
                                                        ({{$u->code}})
                                                    </option>
                                                @endforeach
                                            </select>
                                        </div>
                                        <div class="col-sm-1 mt-4">
                                            <button class="btn-primary btn "
                                            >
                                                Search
                                            </button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        @endcan
                    </div>
                </div>
                <div class="card-body">
                    <div class="row" id="wrap">
                        <div class="col-xxl-3 box-col-12">
                            <div class=" overflow-scroll">
                                <div class="row">
                                    <div class="col-sm-12">
                                        <div class="md-sidebar mb-3"><a class="btn btn-primary md-sidebar-toggle"
                                                                        href="javascript:void(0)">calendar filter</a>
                                            <div class="md-sidebar-aside job-left-aside custom-scrollbar">
                                                <div id="external-events">
                                                    <div class="d-flex justify-content-start">
                                                        <h4>Holidays</h4>
                                                        <div class=""
                                                             style="background-color: #b111d1;width: 100px;padding:10px;margin: 5px"></div>
                                                    </div>

                                                    <div id="external-events-list" class="holiday_list_con">
                                                    </div>
                                                    <p>
                                                        {{--                                            <input class="checkbox_animated" id="drop-remove" type="checkbox">--}}
                                                        {{--                                            <label for="drop-remove">remove after drop</label>--}}
                                                    </p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-sm-12">
                                        <div class="md-sidebar mb-3"><a class="btn btn-primary md-sidebar-toggle"
                                                                        href="javascript:void(0)">calendar filter</a>
                                            <div class="md-sidebar-aside job-left-aside custom-scrollbar">
                                                <div id="external-events">
                                                    <div class="d-flex justify-content-start">
                                                        <h4>Leaves</h4>
                                                        <div class=""
                                                             style="background-color: #1f76e0;width: 100px;padding:10px;margin: 5px"></div>
                                                    </div>

                                                    <div id="external-events-list" class="leave_list_con">
                                                    </div>
                                                    <p>
                                                        {{--                                            <input class="checkbox_animated" id="drop-remove" type="checkbox">--}}
                                                        {{--                                            <label for="drop-remove">remove after drop</label>--}}
                                                    </p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-sm-12">
                                        <div class="md-sidebar mb-3"><a class="btn btn-primary md-sidebar-toggle"
                                                                        href="javascript:void(0)">calendar filter</a>
                                            <div class="md-sidebar-aside job-left-aside custom-scrollbar">
                                                <div id="external-events">
                                                    <div class="d-flex justify-content-start">
                                                        <h4>Daily Time Period</h4>

                                                    </div>
                                                    <div>
                                                        <div class="d-flex justify-content-between">
                                                            <div class="fw-bold">Absent</div>
                                                            <div class=""
                                                                 style="background-color: #fa555d;width: 100px;padding:10px;margin: 5px"></div>
                                                        </div>
                                                        <div class="d-flex justify-content-between">
                                                            <div class="fw-bold">Half Day</div>
                                                            <div class=""
                                                                 style="background-color: #f7983e;width: 100px;padding:10px;margin: 5px"></div>
                                                        </div>
                                                        <div class="d-flex  justify-content-between">
                                                            <div class="fw-bold">Full Day</div>
                                                            <div class=""
                                                                 style="background-color: #22ab4b;width: 100px;padding:10px;margin: 5px"></div>
                                                        </div>

                                                    </div>
                                                    <div id="external-events-list" class="time_period_list_con">
                                                    </div>

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

                        </div>
                        <div class="col-xxl-9 box-col-12">
                            <div class="calendar-default" id="calendar-container">
                                <div id="calendar"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="modal fade" id="edit_holiday_modal" tabindex="-1" role="dialog"
             aria-labelledby="exampleModalCenter1"
             aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h4 class="modal-title" id="myExtraLargeModal">Edit Holiday </h4>
                        <button class="btn-close py-0" type="button" data-bs-dismiss="modal"
                                aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <form class="row g-3 needs-validation" action="{{route("holiday-update")}}" method="post" id=""
                              novalidate="">
                            @csrf
                            <input type="text" name="id" id="holiday_id" class="d-none">
                            <div class="col-xl-6 col-sm-4">
                                <label class="form-label">Date </label>
                                <input class="form-control" name="holiday_date" id="holiday_date" type="date" required>
                            </div>
                            <div class="col-xl-6 col-sm-4">
                                <label class="form-label">Holiday Title </label>
                                <input class="form-control" name="holiday_title" id="holiday_title" type="text"
                                       required>
                            </div>
                            <div class="col-xl-12 col-sm-4">
                                <label class="form-label">Description </label>
                                <input class="form-control" name="holiday_description" id="holiday_description"
                                       type="text">
                            </div>

                            <div class="col-12">
                                <button class="btn btn-primary" id="add_schedule_btn">Submit</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@section("scripts")
    @include("master.notification_show_hide")
    <script>
        $(document).ready(function () {
            $(".fc-today-button").click();
            let holidays = [];
            @if(isset($holidays))
                holidays = null;
            render_holiday(holidays);
            render_holiday_list(holidays);
            @endif

            let leaves = [];
            @if(isset($leaves))
                leaves = null;
            render_leaves(leaves);
            render_leave_list(leaves);
            @endif



            let time_period = [];
            @if(isset($time_period))
                time_period = null;
            render_time_period(time_period);
            @endif

            function render_holiday(data) {
                let td = $(".fc-daygrid-day");
                data.forEach((obj) => {
                    td.each((element) => {
                        let d = $(td[element]).data("date");
                        if (d == obj.date) {
                            let event_con = $(td[element]).find(".fc-daygrid-day-events .fc-daygrid-day-bottom");
                            $("<li />", {
                                text: obj.title,
                                class: "text-white"
                            }).appendTo(event_con)
                            $(td[element]).css({
                                "background-color": "#b111d1"
                            });
                        }
                    })
                })
                td.each((e) => {
                    // $("<div />" , {html : "<button class='btn'>add</button><button class='btn btn-primary'>add</button>" }).addClass("button_con").appendTo($(td[e]).find(".fc-daygrid-day-frame"));
                })
            }

            function render_holiday_list(data = "") {
                if (data !== "") {
                    $(".holiday_list_con").children().remove();
                    data.forEach((obj) => {
                        let list = `
                                <div style="background-color: #ebe9e6" class="p-2 m-1">
                                     <div class="fc-event-main">
                                    <i class="fa fa-birthday-cake me-2 d-none"></i>
                                    <i class="fa fa-edit edit_btn d-none" data-id="${obj.id}"> </i>
                                    <i class="fa fa-trash delete_btn d-none" data-id="${obj.id}"> </i>
                                         <span class="fw-bold "> ${obj.title}</span> <span style="font-size: 12px">(${obj.date})</span>
                                     </div>
                                </div>                    `
                        $(".holiday_list_con").append(list);
                    })
                } else {
                    $(".holiday_list_con").children().remove();
                }
            }

            function render_leaves(data) {
                let td = $(".fc-daygrid-day");
                data.forEach((obj) => {
                    td.each((element) => {
                        let d = $(td[element]).data("date");
                        var startDate = new Date(obj.leave_date);
                        var endDate = new Date(obj.to_date);
                        var datesInRange = [];
                        for (var currentDate = startDate; currentDate <= endDate; currentDate.setDate(currentDate.getDate() + 1)) {
                            var formattedDate = currentDate.toISOString().split('T')[0];
                            datesInRange.push(formattedDate);
                        }
                        if (datesInRange.length != 0) {
                            datesInRange.forEach((date) => {
                                if (d == date) {
                                    let event_con = $(td[element]).find(".fc-daygrid-day-events .fc-daygrid-day-bottom");
                                    $("<li />", {
                                        text: obj.get_master_leave.name,
                                        class: "text-white"
                                    }).appendTo(event_con)
                                    $(td[element]).css({
                                        "background-color": "#1f76e0"
                                    });
                                }
                            })
                        } else {
                            if (d == obj.leave_date) {
                                let event_con = $(td[element]).find(".fc-daygrid-day-events .fc-daygrid-day-bottom");
                                $("<li />", {
                                    text: obj.get_master_leave.name,
                                    class: "text-white"
                                }).appendTo(event_con)
                                $(td[element]).css({
                                    "background-color": "#1f76e0"
                                });
                            }
                        }

                    })
                })

            }

            function render_leave_list(data = "") {
                if (data !== "") {
                    $(".leave_list_con").children().remove();
                    data.forEach((obj) => {
                        let list = `
                                <div style="background-color: #ebe9e6" class="p-2 m-1">
                                     <div class="fc-event-main">
                                    <i class="fa fa-birthday-cake me-2 d-none"></i>
                                    <i class="fa fa-edit edit_btn d-none" data-id="${obj.id}"> </i>
                                    <i class="fa fa-trash delete_btn d-none" data-id="${obj.id}"> </i>
                                         <span class="fw-bold"> ${obj.get_master_leave.name}</span>  <span style="font-size: 12px">(${obj.leave_date} - ${obj.to_date}) </span>
                                     </div>
                                </div>                    `
                        $(".leave_list_con").append(list);
                    })
                } else {
                    $(".holiday_list_con").children().remove();
                }
            }

            // this is for render dailr time period
            function render_time_period(data) {
                let td = $(".fc-daygrid-day");
                data.forEach((obj) => {
                    td.each((element) => {
                        let status = "";
                        let color = "";
                        let d = $(td[element]).data("date");
                        if (d == obj.date) {
                            let event_con = $(td[element]).find(".fc-daygrid-day-events .fc-daygrid-day-bottom");
                            if (obj.day_status == 1) {
                                status = "Full Day";
                                color = "#22ab4b";
                            } else if (obj.day_status == 2) {
                                status = "Half Day";
                                color = "#f7983e";
                            } else if (obj.day_status == 3) {
                                status = "Absent";
                                color = "#fa555d";
                            }
                            $("<li />", {
                                text: status,
                                class: "text-white"
                            }).appendTo(event_con);

                            $(td[element]).css({
                                "background-color": color
                            });
                        }
                    })
                })

            }


            $(".fc-prev-button").click(function (e) {
                $(".fc-daygrid-event-harness").addClass('d-none');
                getHolidays($("#fc-dom-1").text())

            })

            $(".fc-next-button").click(function (e) {
                $(".fc-daygrid-event-harness").addClass('d-none');
                getHolidays($("#fc-dom-1").text())
            });

            function getHolidays(month_year) {
                $.ajax({
                    url: "{{route('attendance-searching')}}",
                    type: "POST",
                    data: {
                        "_token": "{{ csrf_token() }}", // Add the CSRF token to the data
                        "month_year": month_year,
                        "id": {{$id}}
                    },
                    success: function (data) {
                        if (data.response != 0) {
                            render_holiday(data.holidays);
                            render_holiday_list(data.holidays);
                            render_leaves(data.leaves);
                            render_leave_list(data.leaves);
                            render_time_period(data.time_period);
                        } else {
                            render_holiday_list()
                            // render_holiday();
                        }

                    }
                })

            }

        });

    </script>

@endsection