@extends('pwa::layouts.master')

@section('content')
    <div class="w-full mx-auto py-6 px-4 flex justify-between align-center">
        <div class="flex items-center space-x-2">
            <a href="#" id="profile-sidebar">
                <svg class="fill-gray-600 h-8 w-8" xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path d="M480-497q-81 0-137.5-56.5T286-691q0-81 56.5-137T480-884q81 0 137.5 56T674-691q0 81-56.5 137.5T480-497ZM126-109v-148q0-43.3 22.7-79.6 22.69-36.3 60.3-55.4 65-32 132.96-48.5Q409.92-457 480-457q72 0 140 16t131 48q37.61 18.96 60.3 54.98Q834-302 834-257.05V-109H126Zm126-126h456v-17q0-10.03-5.5-18.24-5.5-8.2-14.5-12.76-48-23-100-35.5T480-331q-54 0-108 12.5T272-283q-9 4.56-14.5 12.76-5.5 8.21-5.5 18.24v17Zm227.96-388Q508-623 528-642.96q20-19.97 20-48 0-28.04-19.96-47.54-19.97-19.5-48-19.5Q452-758 432-738.32T412-691q0 28.05 19.96 48.03 19.97 19.97 48 19.97Zm.04-68Zm0 456Z"/></svg>
            </a>
            <span class="font-extrabold px-0 text-grey-800 text-2xl">More</span>
        </div>
        <!-- <a href="#" id="notification" class="no-underline flex items-center justify-center space-x-1">
            <svg class="fill-gray-600 h-8 w-8" xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path d="M126-166v-126h68v-246q0-96 55.5-173T397-811v-20q0-34.58 24.21-58.79T480-914q34.58 0 58.79 24.21T563-831v20q93 23 148 99.5T766-538v246h68v126H126Zm354-329Zm1 460q-37.95 0-64.98-26.73Q389-88.46 389-126h183q0 38-26.73 64.5T481-35ZM320-292h320v-246q0-66-47-113t-113-47q-66 0-113 47t-47 113v246Z"/></svg>
            <span class="font-extrabold px-0 text-grey-800 text-2xl hidden">Notification</span>
        </a> -->
    </div>
    <div class="w-full px-4 pt-2 min-h-screen">
        <!-- Grid Menu -->
        <div class="flex flex-wrap justify-center max-[400px]:space-x-2 max-[400px]:space-y-2 space-x-4 space-y-4 mt-4">
            <!-- Attendance start -->
            <div id="attendance_click" class="flex flex-col w-1/2 max-[400px]:max-w-36 max-w-42 max-[400px]:h-36 h-42 justify-center align-items-center bg-white rounded-xl shadow-xl">
                <div class="flex justify-center mb-2">
                    <svg class="fill-teal-500 font-extrabold w-14 h-14" xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path d="M200-200v-560 454-85 191Zm0 80q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v320h-80v-320H200v560h280v80H200Zm494 40L552-222l57-56 85 85 170-170 56 57L694-80ZM320-440q17 0 28.5-11.5T360-480q0-17-11.5-28.5T320-520q-17 0-28.5 11.5T280-480q0 17 11.5 28.5T320-440Zm0-160q17 0 28.5-11.5T360-640q0-17-11.5-28.5T320-680q-17 0-28.5 11.5T280-640q0 17 11.5 28.5T320-600Zm120 160h240v-80H440v80Zm0-160h240v-80H440v80Z"/></svg>
                </div>
                <p class="text-center text-lg font-extrabold">Attendance</p>
            </div>
            <!-- Attendance end -->
            
            <!-- Regularization start -->
            <div id="regularization_click" class="flex flex-col w-1/2 max-[400px]:max-w-36 max-w-42 max-[400px]:h-36 h-42 justify-center align-items-center bg-white rounded-xl shadow-xl">
                <div class="flex justify-center">                
                    <svg class="fill-teal-500 font-extrabold w-14 h-14" xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path d="M279.98-407q14.02 0 23.52-9.48t9.5-23.5q0-14.02-9.48-23.52t-23.5-9.5q-14.02 0-23.52 9.48t-9.5 23.5q0 14.02 9.48 23.52t23.5 9.5Zm0-160q14.02 0 23.52-9.48t9.5-23.5q0-14.02-9.48-23.52t-23.5-9.5q-14.02 0-23.52 9.48t-9.5 23.5q0 14.02 9.48 23.52t23.5 9.5ZM360-410h360v-60H360v60Zm0-160h360v-60H360v60Zm-30 450v-80H140q-24 0-42-18t-18-42v-520q0-24 18-42t42-18h680q24 0 42 18t18 42v520q0 24-18 42t-42 18H630v80H330ZM140-260h680v-520H140v520Zm0 0v-520 520Z"/></svg>
                </div>
                <p class="text-center text-lg font-extrabold">Regularization</p>
            </div>
            <!-- Regularization end -->

        </div>
            
        <div class="flex flex-wrap justify-center max-[400px]:space-x-2 max-[400px]:space-y-2 space-x-4 space-y-4 mt-2">
            <!-- Leave start -->
            <div id="leave_click" class="flex flex-col w-1/2 max-[400px]:max-w-36 max-w-42 max-[400px]:h-36 h-42 justify-center align-items-center bg-white rounded-xl shadow-xl">
                <div class="flex justify-center">
                    <svg class="fill-teal-500 font-extrabold w-14 h-14" xmlns="http://www.w3.org/2000/svg"  viewBox="0 -960 960 960"><path d="M596.82-220Q556-220 528-248.18q-28-28.19-28-69Q500-358 528.18-386q28.19-28 69-28Q638-414 666-385.82q28 28.19 28 69Q694-276 665.82-248q-28.19 28-69 28ZM180-80q-24 0-42-18t-18-42v-620q0-24 18-42t42-18h65v-60h65v60h340v-60h65v60h65q24 0 42 18t18 42v620q0 24-18 42t-42 18H180Zm0-60h600v-430H180v430Zm0-490h600v-130H180v130Zm0 0v-130 130Z"/></svg>
                </div>
                <p class="text-center text-lg font-extrabold">Leave</p>
            </div>
            <!-- Leave end -->

            <!-- Team start -->
            <div id="team_click" class="flex flex-col w-1/2 max-[400px]:max-w-36 max-w-42 max-[400px]:h-36 h-42 justify-center align-items-center bg-white rounded-xl shadow-xl">
                <div class="flex justify-center">
                    <svg class="fill-teal-500 font-extrabold w-14 h-14" xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path d="M1-94v-183q0-43 30.5-73t72.5-30h137q23 0 37.5 7t23.5 21q31 44 77.5 68T480-260q54 0 101-24t78-68q9-14 23.5-21t36.5-7h138q43 0 73 30t30 73v183H634v-100q-35 19-74 29.5T480-154q-40 0-79-10.5T327-194v100H1Zm479-226q-33 0-62.5-15.5T368-378q-23-33-55-47.5T241-440q32-35 104-59t135-24q63 0 135.5 24T720-440q-40 0-72 14t-55 48q-19 27-49 42.5T480-320ZM160-460q-54 0-92-38t-38-92q0-54 38-92t92-38q54 0 92 38t38 92q0 54-38 92t-92 38Zm640 0q-54 0-92-38t-38-92q0-54 38-92t92-38q54 0 92 38t38 92q0 54-38 92t-92 38ZM480-603q-54 0-92-38t-38-92q0-54 38-92t92-38q54 0 92 38t38 92q0 54-38 92t-92 38Z"/></svg>
                </div>
                <p class="text-center text-lg font-extrabold">Team</p>
            </div>
            <!-- Team end -->
        </div>
    </div>

    <x-pwa::pwa-profile-sidebar />
    <x-pwa::pwa-footer currentPage="more" />

@endsection

@section('custom-js')
    <script>
        $('document').ready(function() {
            $('#attendance_click').click(function() {
                let currentWeekStart = moment().startOf('week'); // Start of the current week (Sunday)
                localStorage.setItem("attendance_date", currentWeekStart.format('YYYY-MM-DD'));
                window.location.href = "{{ url('/pwa/attendance') }}";
            });

            $('#regularization_click').click(function() {
                window.location.href = "{{ url('/pwa/regularization') }}";
            });

            $('#leave_click').click(function() {
                window.location.href = "{{ url('/pwa/leave') }}";
            });
            
            $('#team_click').click(function() {
                let currentWeekStart = moment().startOf('week'); // Start of the current week (Sunday)
                localStorage.setItem("team_attendance_date", currentWeekStart.format('YYYY-MM-DD'));
                window.location.href = "{{ url('/pwa/team') }}";
            });
        });
    </script>
@endsection