@extends('fronted.layout.main')
@section('adcontent')
@php

@endphp
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.4.0/fullcalendar.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.4.0/fullcalendar.css" />
<style>
    #calendar {
        background-color: #fff;
        width: 100%;
        height: 400px;
        padding: 5px;
        overflow: auto;
        /* color: #fff; */
    }

    .slick-prev {
        left: -11px;
    }

    .slick-next {
        right: -11px;
    }

    .fc-today {
        color: #333;
    }

    .fc-day-header {
        /* background-color: #333; */
        /* color: #fff; */
        font-weight: bold;
    }

    #attendanceView .card {
        text-align: center;
        min-width: 120px;
        min-height: 90px;
    }

    #attendanceView .card::after {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        width: 20px;
        height: 20px;
        opacity: 0.7;
    }

    #attendanceView .card:first-child::after {
        background-color: green;
    }

    #attendanceView .card:nth-child(2):after {
        background-color: orange;
    }

    #attendanceView .card:nth-child(3):after {
        background-color: red;
    }

    #attendanceView .card:last-child:after {
        background: linear-gradient(120deg, green 50%, orange 50%);
    }
</style>
@if ($dataNotFound)
<p>Data not found</p>
@else
<div class="container-fluid mt-2">
    <div class="container">
        <div id="attendanceView" class="d-flex justify-content-between align-items-center mt-2">
            <div class="card border-0 shadow">
                <div class="card-body">
                    <h6>Present</h6>
                    <h4 class="text-center">{{$persent}}</h4>
                </div>
            </div>
            <div class="card border-0 shadow">
                <div class="card-body">
                    <h6>Absent</h6>
                    <h4 class="text-center">{{$absent}}</h4>
                </div>
            </div>
            <div class="card border-0 shadow">
                <div class="card-body">
                    <h6>leave</h6>
                    <h4 class="text-center">{{$leaves}}</h4>
                </div>
            </div>
            <div class="card border-0 shadow">
                <div class="card-body">
                    <h6>Half Days</h6>
                    <h4 class="text-center">{{$halfdays}}</h4>
                </div>
            </div>
        </div>
    </div>
    <div class="container my-2 p-2">
        <div class="container">
            <div class="row autoplay">
                <div class="col-3">
                    <div class="card m-0 p-0 shadow-sm">
                        <div class="card-body p-0">
                            <img class="d-block rounded-0" src="{{asset('assets/images/poster1.jpg')}}">
                        </div>
                    </div>
                </div>
                <div class="col-3">
                    <div class="card m-0 p-0">
                        <div class="card-body p-0">
                            <img class="d-block rounded-0" src="{{asset('assets/images/poster2.jpg')}}">
                        </div>
                    </div>
                </div>
                <div class="col-3">
                    <div class="card m-0 p-0">
                        <div class="card-body p-0">
                            <img class="d-block rounded-0" src="{{asset('assets/images/poster3.jpg')}}">
                        </div>
                    </div>
                </div>
                <div class="col-3">
                    <div class="card m-0 p-0 ">
                        <div class="card-body p-0 border-0">
                            <img class="d-block rounded-0" src="{{asset('assets/images/poster4.jpg')}}">
                        </div>
                    </div>
                </div>
                <div class="col-3">
                    <div class="card m-0 p-0  ">
                        <div class="card-body p-0 border-0">
                            <img class="d-block rounded-0" src="{{asset('assets/images/poster5.jpg')}}">
                        </div>
                    </div>
                </div>
                <div class="col-3">
                    <div class="card m-0 p-0  ">
                        <div class="card-body p-0 border-0">
                            <img class="d-block rounded-0" src="{{asset('assets/images/poster6.jpg')}}">
                        </div>
                    </div>
                </div>
                <div class="col-3">
                    <div class="card m-0 p-0  ">
                        <div class="card-body p-0 border-0">
                            <img class="d-block rounded-0" src="{{asset('assets/images/poster7.jpg')}}">
                        </div>
                    </div>
                </div>
                <div class="col-3">
                    <div class="card m-0 p-0  ">
                        <div class="card-body p-0 border-0">
                            <img class="d-block rounded-0" src="{{asset('assets/images/poster8.jpg')}}">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="container mt-3">
        <div class="row">
            <div class="col-lg-6">
                <div class="card h-100 shadow">
                    <div class="card-body">
                        @php
                        $imgPath = "assets/uploads/".$employeeDetails->candidate_photo;
                        @endphp
                        <h5 class="text-center">Employee Details</h5>
                        <img src="{{asset($imgPath)}}" class="mx-auto d-block rounded-circle" alt="emp img" width="100px" height="100px">
                        <div class="container mt-2" style="border:2px solid black;border-radius:5px">
                            <div class="d-flex justify-content-between align-items-center">
                                <span class="shadow p-3 rounded-0">
                                    Id #{{ $employeeDetails->form_no }}
                                </span>
                                <span class="shadow p-3 rounded-0">
                                    Reg Date: {{ date('d-M-Y', strtotime($employeeDetails->registration_date)) }}
                                </span>
                            </div>

                            <div class="container shadow my-3 p-3">
                                <div class="d-flex justify-content-around flex-column align-items-start">
                                    <h6 class="text-warning text-capitalize mx-2 my-2"><i class="fa-solid fa-circle-user me-5"></i>{{ $employeeDetails->candidate_name }}</h6>
                                    <h6 class="text-warning mx-2 my-2 "><i class="fa-solid fa-envelope me-5"></i>{{ $employeeDetails->email }}</h6>
                                    <h6 class="text-warning mx-2 my-2"><i class="fa-solid fa-phone-volume me-5"></i>{{ $employeeDetails->mobile }}</h6>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-6">
                <div id="calendar" class="shadow p-1"></div>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="AttendaceModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="AttendaceModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="AttendaceModalLabel">Modal title</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <label class="form-label" for="">what Do you Want?</label>
                <select class="form-select" name="attendance" id="changeAttendance">
                    <option value="P">Make Present</option>
                    <option value="A">Make Absent</option>
                    <option value="L">Make Leave</option>
                    <option value="H">Make Half Day</option>
                </select>
            </div>
            <div class="modal-footer">
                <button type="button" id="makeAttendacebtn" class="btn btn-warning">Chnage</button>
            </div>
        </div>
    </div>
</div>
<script>
    $(document).ready(function() {
        var events = @json($attendance);
        var currentDate = new Date();
        setScrollSlide(5);
        var calendar = $('#calendar').fullCalendar({
            height: "100%",
            contentHeight: "100%",
            expandRows: true,
            editable: true,
            header: {
                left: 'prev, next today',
                center: 'title',
                right: 'month',
            },
            events: events,
            eventAfterRender: function(event, element) {
                console.log('Event rendered:', event.title);
                if (event.title === "P") {
                    element.css({
                        'background-color': '#198754'
                    });
                } else if (event.title === "A") {
                    element.css({
                        'background-color': '#ffc107'
                    });
                } else if (event.title === "H") {
                    element.css({
                        'background-image': 'linear-gradient(120deg, #198754 50%, #ffc107 50%)'
                    });
                } else if (event.title === "L") {
                    element.css({
                        'background-color': 'Red'
                    });
                } else {
                    element.css({
                        'background-color': 'blue'
                    });
                }
            },
            validRange: {
                end: currentDate
            },
            selectable: true,
            selectHelper: true,
            select: function(start, end, allDay) {
                $("#AttendaceModal").modal("show");
                $("#makeAttendacebtn").on("click", function() {
                    var attendance = $("#changeAttendance").val();
                    var date = moment(start).format("YYYY-MM-DD");
                    $.ajax({
                        url: "{{ route('update')}}",
                        type: "post",
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        },
                        data: {
                            empid: ,
                            status: attendance,
                            date: date,
                        },
                        success: function() {
                            Swal.fire({
                                icon: "success",
                                title: "Attendace",
                                text: "Attendace has been taken successfully",
                            })
                            location.reload();
                        },
                        error: function() {
                            Swal.fire({
                                icon: "warning",
                                title: "Attendace",
                                text: "Attendace has not been taken",
                            })
                        }
                    });
                });

            },
            editable: false,
            eventClick: function(event) {
                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) {
                        console.log(moment(event.start).format("YYYY-MM-DD"));
                        var recordId = ;
                        var recordDate = moment(event.start).format("YYYY-MM-DD");
                        $.ajax({
                            url: '{{ route("delete.record", [":id", ":date"]) }}'.replace(':id', recordId).replace(':date', recordDate),
                            type: 'DELETE',
                            headers: {
                                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                            },
                            dataType: 'json',
                            success: function(response) {
                                Swal.fire({
                                    icon: "success",
                                    title: "Attendace",
                                    text: response.message,
                                })
                                location.reload();
                            },
                            error: function(error) {
                                Swal.fire({
                                    icon: "warning",
                                    title: "Attendace",
                                    text: "Attendace Recored has not been deleted",
                                })
                            }
                        });

                    }
                })
            },

        });
    });
</script>

@endif
@endsection