@extends('fronted.layout.main')
@section('adcontent')
@if($message = Session::get("LeaveSuccess"))
<link href='https://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
<script>
    Swal.fire({
        icon: 'success',
        title: "Attendace",
        text: '{{$message}}',
    })
</script>
@endif
@if($message = Session::get("LeaveError"))
<script>
    Swal.fire({
        icon: "warning",
        title: "Attendace",
        text: "{{$message}}",
    })
</script>
@endif
<style>
    .switch {
        position: relative;
        display: inline-block;
        width: 60px;
        height: 30px;
    }

    /* Hide default HTML checkbox */
    .switch input {
        opacity: 0;
        width: 0;
        height: 0;
    }

    /* The slider */
    .slider {
        position: absolute;
        cursor: pointer;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #ccc;
        -webkit-transition: .4s;
        transition: .4s;
    }

    .slider:before {
        position: absolute;
        content: "";
        height: 22px;
        width: 22px;
        left: 4px;
        bottom: 4px;
        background-color: white;
        -webkit-transition: .4s;
        transition: .4s;
    }

    input:checked+.slider {
        background-color: orange;
    }

    input:focus+.slider {
        box-shadow: 0 0 1px #2196F3;
    }

    input:checked+.slider:before {
        -webkit-transform: translateX(26px);
        -ms-transform: translateX(26px);
        transform: translateX(26px);
    }

    /* Rounded sliders */
    .slider.round {
        border-radius: 34px;
    }

    .slider.round:before {
        border-radius: 50%;
    }

    #calendar {
        margin-left: auto;
        margin-right: auto;
        width: 320px;
        font-family: 'Lato', sans-serif;
    }

    #calendar_weekdays div {
        display: inline-block;
        vertical-align: top;
    }

    #calendar_content,
    #calendar_weekdays,
    #calendar_header {
        position: relative;
        width: 320px;
        overflow: hidden;
        float: left;
        z-index: 10;
    }

    #calendar_weekdays div,
    #calendar_content div {
        width: 40px;
        height: 40px;
        overflow: hidden;
        text-align: center;
        background-color: #FFFFFF;
        color: #787878;
    }

    #calendar_content {
        -webkit-border-radius: 0px 0px 12px 12px;
        -moz-border-radius: 0px 0px 12px 12px;
        border-radius: 0px 0px 12px 12px;
    }

    #calendar_content div {
        float: left;
    }

    #calendar_content div:hover {
        background-color: #F8F8F8;
    }

    #calendar_content div.blank {
        background-color: #E8E8E8;
    }

    #calendar_header,
    #calendar_content div.today {
        zoom: 1;
        filter: alpha(opacity=70);
        opacity: 0.7;
    }

    #calendar_content div.today {
        color: #FFFFFF;
    }

    #calendar_header {
        width: 100%;
        height: 37px;
        text-align: center;
        background-color: #FF6860;
        padding: 18px 0;
        -webkit-border-radius: 12px 12px 0px 0px;
        -moz-border-radius: 12px 12px 0px 0px;
        border-radius: 12px 12px 0px 0px;
    }

    #calendar_header h1 {
        font-size: 1.5em;
        color: #FFFFFF;
        float: left;
        width: 70%;
    }

    i[class^=icon-chevron] {
        color: #FFFFFF;
        float: left;
        width: 15%;
        border-radius: 50%;
    }
</style>
<div class="container-fluid">
    <div class="modal fade" id="MarkAttendance" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="MarkAttendanceLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header border-0">
                    <h5 class="modal-title" id="MarkAttendanceLabel">Mark Attendance</h5>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-6">
                            <p>Last check in time</p>
                        </div>
                        <div class="col-6">
                            <div class="container">
                                <img class="img-responsive" style="width:100%;height:100%" src="{{asset('assets/images/attendanceImg.jpg')}}" alt="">
                            </div>
                        </div>
                    </div>
                    <div class="d-flex justify-content-start">
                        <button class="btn btn-warning me-2" id="MarkEmpId">Mark Attendance</button>
                        <button type="button" class="btn btn-success" data-bs-dismiss="modal" aria-label="Close">Close</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="AddLeaveType" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="AddLeaveTypeLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="AddLeaveTypeLabel">Add Leave Type</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form action="{{route('AddLeaveTypes')}}" method="post">
                        @csrf
                        <div class="form-group">
                            <label class="form-label" for="LeaveType">Leave Type</label>
                            <input class="form-control" type="text" name="leaveName" id="LeaveType" required>
                        </div>
                        <div class="form-group">
                            <button class="btn btn-warning mt-2" type="submit" id="LeaveTypeAddBtn">Add Type</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="UpdateLeaveType" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="UpdateLeaveTypeLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="UpdateLeaveTypeLabel">Update Leave Type</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form action="{{route('UpdateLeaveMaster')}}" method="post">
                        @csrf
                        <input type="hidden" name="LeaveId" id="HiddenLeaveID">
                        <div class="form-group">
                            <label class="form-label" for="updateLeaveType">Leave Type</label>
                            <input class="form-control" type="text" name="leaveName" id="updateLeaveType" required>
                        </div>
                        <div class="form-group">
                            <button class="btn btn-warning mt-2" type="submit" id="UpdateLeaveTypeAddBtn">Add Type</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <div class="container">
        <div class="d-flex justify-content-between align-items-center">
            <button class="btn btn-warning" type="button" data-bs-toggle="modal" data-bs-target="#AddLeaveType">Leave Types</button>
            <button class="btn btn-warning" type="button" data-bs-toggle="modal" data-bs-target="#MarkAttendance">Mark Attendance</button>
        </div>
    </div>
    <div class="container mt-2">
        <div class="row">
            <div class="col-lg-4 col-md-5 col-sm-12">
                <div class="table-responsive dataTable">
                    <table class="table align-middle text-center roomSeatTable">
                        <thead>
                            <tr>
                                <th>S.No</th>
                                <th>Leave Type</th>
                                <th>Status</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            @php
                            $empData = DB::table("leave_masters")->get();
                            $leaveCount = 1;
                            @endphp
                            @forelse($empData as $empDatas)
                            <tr>
                                <td>{{$leaveCount++}}</td>
                                <td>{{$empDatas->leave_type}}</td>
                                <td>{{$empDatas->leave_status}}</td>
                                <td>
                                    <div class="flex justify-content-center align-items-center">
                                        <button class="btn btn-sm mx-2 my-0 DeleteLeaveType p-0" data-leave="{{$empDatas->id}}" type="button" data-bs-toggle="tooltip" data-bs-placement="top" title="Delete Leave Type"><i class="fa-solid fa-trash-can text-danger"></i></button>
                                        <button class="btn btn-sm m-0 p-0 UpdateLeaveType" data-leave="{{$empDatas->id}}" data-leavetype="{{$empDatas->leave_type}}" type="button" data-bs-toggle="tooltip" data-bs-placement="top" title="Update leave Type"><i class="fa-regular fa-pen-to-square"></i></button>
                                        <button class="btn btn-sm">
                                            <label class="switch">
                                                <input type="checkbox" data-id="{{ $empDatas->id }}" value="{{$empDatas->leave_status}}" @if($empDatas->leave_status == 1) checked @endif onchange="LeaveStatusChange(this)">
                                                <span class="slider round"></span>
                                            </label>
                                        </button>
                                    </div>
                                </td>
                            </tr>
                            @empty
                            <tr>
                                <td colspan="3">Leave Types is not Created !</td>
                            </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="col-lg-8 col-md-6 col-sm-12">
                <div class="table-responsive dataTable">
                    <table class="table align-middle text-center roomSeatTable">
                        <thead>
                            <tr>
                                <th>S.No</th>
                                <th>Emp Name</th>
                                <th>Leave Type</th>
                                <th>From Date</th>
                                <th>To Date</th>
                                <th>Descrioption</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <!-- <div class="col-lg-12">
                <div id="calendar">
                    <div id="calendar_header">
                        <i class="fa-solid fa-chevron-left icon-chevron-left"></i>
                        <h1></h1>
                        <i class="fa-solid fa-chevron-right icon-chevron-right"></i>
                    </div>
                    <div id="calendar_weekdays"></div>
                    <div id="calendar_content"></div>
                </div>
            </div> -->
        </div>
    </div>
</div>
<script>
    $(document).ready(function() {
        $("#LeaveTypeAddBtn").on("click", function(e) {
            if ($("#LeaveType").val() === "") {
                e.preventDefault();
                $("#LeaveType").addClass("is-invalid");
            }
        });
        $("#UpdateLeaveTypeAddBtn").on("click", function(e) {
            if ($("#updateLeaveType").val() === "") {
                e.preventDefault();
                $("#LeaveType").addClass("is-invalid");
            }
        });

        $(".DeleteLeaveType").on("click", function() {
            var id = $(this).data("leave");
            Swal.fire({
                title: 'Are you sure?',
                text: "You won't be able to revert this!",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Yes, delete it!'
            }).then((result) => {
                if (result.isConfirmed) {
                    $.ajax({
                        url: "DeleteLeaveType",
                        data: {
                            id: id,
                        },
                        success: function(response) {
                            Swal.fire(
                                'Attendace System',
                                'Leave Type has been deleted.',
                                'success'
                            )
                            setInterval(() => {
                                location.reload();
                            }, 2000);
                        },
                        error: function(response) {
                            Swal.fire(
                                'Attendace System',
                                'Somthing Wrong, Try Again.',
                                'warning'
                            )
                        }
                    });
                }
            })
        });
        $(".UpdateLeaveType").on("click", function() {
            var id = $(this).data("leave");
            var value = $(this).data("leavetype");
            $("#UpdateLeaveType").on('shown.bs.modal', function() {
                $("#updateLeaveType").val(value);
                $("#HiddenLeaveID").val(id);
            }).modal("show");
        });
    });

    function LeaveStatusChange(input) {
        var id = $(input).data('id'); // Get the data-id attribute
        var value = $(input).val()

        $.ajax({
            url: "LeaveStatusChange",
            data: {
                id: id,
                leaveStatus: value,
            },
            success: function(response) {
                location.reload();
            },
            error: function(response) {
                Swal.fire({
                    icon: 'warning',
                    title: "Attendace",
                    text: 'Leave Status is not change, try Again..',
                })
            }

        });
    };

    $("#MarkEmpId").on("click",function(){
        $.ajax({
            url:"{{ route('StoreAttendance') }}",
            method:"get",
            success:function(response){
                alert("Success");
            },
            error:function(xhr,stutus,error){
                var errorMessage = xhr.responseJSON.userError;
                console.error("Error: " + errorMessage);
                Swal.fire({
                    icon:"warning",
                    title:"Attendance",
                    text:errorMessage,
                });
            }
        })
    });
</script>
<script>
    $(function() {
        function c() {
            p();
            var e = h();
            var r = 0;
            var u = false;
            l.empty();
            while (!u) {
                if (s[r] == e[0].weekday) {
                    u = true
                } else {
                    l.append('<div class="blank"></div>');
                    r++
                }
            }
            for (var c = 0; c < 42 - r; c++) {
                if (c >= e.length) {
                    l.append('<div class="blank"></div>')
                } else {
                    var v = e[c].day;
                    var m = g(new Date(t, n - 1, v)) ? '<div class="today">' : "<div>";
                    l.append(m + "" + v + "</div>")
                }
            }
            var y = o[n - 1];
            a.css("background-color", y).find("h1").text(i[n - 1] + " " + t);
            f.find("div").css("color", y);
            l.find(".today").css("background-color", y);
            d()
        }

        function h() {
            var e = [];
            for (var r = 1; r < v(t, n) + 1; r++) {
                e.push({
                    day: r,
                    weekday: s[m(t, n, r)]
                })
            }
            return e
        }

        function p() {
            f.empty();
            for (var e = 0; e < 7; e++) {
                f.append("<div>" + s[e].substring(0, 3) + "</div>")
            }
        }

        function d() {
            var t;
            var n = $("#calendar").css("width", e + "px");
            n.find(t = "#calendar_weekdays, #calendar_content").css("width", e + "px").find("div").css({
                width: e / 7 + "px",
                height: e / 7 + "px",
                "line-height": e / 7 + "px"
            });
            n.find("#calendar_header").css({
                height: e * (1 / 7) + "px"
            }).find('i[class^="icon-chevron"]').css("line-height", e * (1 / 7) + "px")
        }

        function v(e, t) {
            return (new Date(e, t, 0)).getDate()
        }

        function m(e, t, n) {
            return (new Date(e, t - 1, n)).getDay()
        }

        function g(e) {
            return y(new Date) == y(e)
        }

        function y(e) {
            return e.getFullYear() + "/" + (e.getMonth() + 1) + "/" + e.getDate()
        }

        function b() {
            var e = new Date;
            t = e.getFullYear();
            n = e.getMonth() + 1
        }
        var e = 480;
        var t = 2013;
        var n = 9;
        var r = [];
        var i = ["JANUARY", "FEBRUARY", "MARCH", "APRIL", "MAY", "JUNE", "JULY", "AUGUST", "SEPTEMBER", "OCTOBER", "NOVEMBER", "DECEMBER"];
        var s = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
        var o = ["#16a085", "#1abc9c", "#c0392b", "#27ae60", "#FF6860", "#f39c12", "#f1c40f", "#e67e22", "#2ecc71", "#e74c3c", "#d35400", "#2c3e50"];
        var u = $("#calendar");
        var a = u.find("#calendar_header");
        var f = u.find("#calendar_weekdays");
        var l = u.find("#calendar_content");
        b();
        c();
        a.find('i[class^="icon-chevron"]').on("click", function() {
            var e = $(this);
            var r = function(e) {
                n = e == "next" ? n + 1 : n - 1;
                if (n < 1) {
                    n = 12;
                    t--
                } else if (n > 12) {
                    n = 1;
                    t++
                }
                c()
            };
            if (e.attr("class").indexOf("left") != -1) {
                r("previous")
            } else {
                r("next")
            }
        })
    })
</script>
@endsection