@extends('layouts.template')


@section('content')
    <div class="container">

        <div class="welcome-msg">
            <p>My Attendence</p>
        </div>

        <div class="container pt-3 d-block d-sm-none">

            <div class="mobile-menu-icon">
                <button class="menu-icon" type="" data-bs-toggle="offcanvas" data-bs-target="#offcanvasWithBothOptions"
                    aria-controls="offcanvasWithBothOptions">
                    <i class="fa-solid fa-bars fa-2x" data-toggle="tooltip" title="Menu"></i>
                </button>
            </div>

            <div class="offcanvas offcanvas-start" data-bs-scroll="true" tabindex="-1" id="offcanvasWithBothOptions"
                aria-labelledby="offcanvasWithBothOptionsLabel">
                <div class="offcanvas-header">
                    <h5 class="offcanvas-title" id="offcanvasWithBothOptionsLabel">Mobile Menu</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
                </div>
                <div class="offcanvas-body">
                    <ul class="navtabs pt-3">
                        <li class="mb-5"><a href="home"><span><i style="padding: 2px 10px 0 0"
                                        class="fa-regular fa-user"></i></span>User Profile</a>
                        </li>
                        <li class="mb-5"><a href="leave_details"><span><i
                                        style="padding: 2px 10px 0 0"class="fa-solid fa-calendar-days"></i></span>My leave
                                details</a> </li>

                        <li class="mb-5"><a href="apply_leave"><i style="padding: 2px 10px 0 0"
                                    class="fa-solid fa-gear"></i>Leave Application</a></li>

                        <li class="mb-5"><a href="acting_req"><span><i style="padding: 2px 10px 0 0"
                                        class="fa-solid fa-person-military-to-person"></i></span>Acting Requests <sup><span
                                        class="badge bg-danger">

                                        1</span></sup> </a></li>

                        <li class="mb-5"><a href="my_attendence"><i style="padding: 2px 10px 0 0"
                                    class="fa-solid fa-plane"></i>My Attendance</a></li>

                        <li class="mb-5"><a href="apply_warrant"><i style="padding: 2px 10px 0 0"
                                    class="fa-solid fa-train"></i>Warrant Application</a></li>
                    </ul>
                </div>
            </div>

        </div>





        <div class="row pt-4 border-1">

            <div class="profile">

            </div>



            <div class="col-md-3">

                <div class="navigation-tabs d-none d-sm-block d-md-none d-lg-block">

                    <ul class="navtabs pt-3">
                        <li class="mb-5"><a href="home"><span><i style="padding: 2px 10px 0 0"
                                        class="fa-regular fa-user"></i></span>User Profile</a>
                        </li>
                        <li class="mb-5"><a href="leave_details"><span><i
                                        style="padding: 2px 10px 0 0"class="fa-solid fa-calendar-days"></i></span>My leave
                                details</a> </li>
                        <li class="mb-5"><a href="apply_leave"><i style="padding: 2px 10px 0 0"
                                    class="fa-solid fa-gear"></i>Leave Application</a></li>

                        <li class="mb-5"><a href="acting_req"><span><i style="padding: 2px 10px 0 0"
                                        class="fa-solid fa-person-military-to-person"></i></span>Acting Requests <sup><span
                                        class="badge bg-danger">

                                        {{ $count }}</span></sup> </a></li>
                        <li class="mb-5"><a href="my_attendence"><i style="padding: 2px 10px 0 0"
                                    class="fa-solid fa-plane"></i>My Attendance</a></li>


                        <li class="mb-5"><a href="apply_warrant"><i style="padding: 2px 10px 0 0"
                                    class="fa-solid fa-train"></i>Warrant Application</a></li>
                    </ul>


                </div>


            </div>

            <div class="col-md-9">

                <div class="container pt-3">

                <p>Today Attendence <sup><span style="color: grey;">Last 30 Days</span></sup></p>

                <table class="table table-hover">
                    <thead>
                    <th>Date</th>
                    <th>In Time</th>
                    <th>Out Time</th>
                    
                </thead>
                @foreach ( $data as $item )
                <tbody>
                    <td>{{ today()->toDateString() }}</td>
                    <td><span>{{ $item->in_time }}</span></td>
                    <td>{{ $item->out_time }}</td>
                </tbody>
                @endforeach
                </table>











                </div>


            </div>


        </div>
    @endsection