@extends('layouts.template')

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

        <div class="welcome-msg">
            <p class="py-auto">Hello! <span style="color: rgb(245, 252, 245);">{{ Auth::user()->name }}</span> </p>
        </div>



        {{-- Mobile Navigation --}}

        <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">

                                       {{$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>




        {{-- Desktop Navigation --}}
        <div class="row pt-4 border-1">

            <div class="profile">

            </div>

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

                <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="row flex-column-reverse flex-lg-row flex-md-row">

                    <div class="col-md-8">
                        <table class="table table">
                            <tr>
                                <th>Name</th>
                                <td>{{ Auth::user()->name }}</td>
                            </tr>
                            <tr>
                                <th>Full Name</th>
                                <td>Rubasinghe Kankanamge Vimukthi Malinda Rupasinghe</td>
                            </tr>
                            <tr>
                                <th>Email</th>
                                <td>{{ Auth::user()->email }} </td>
                            </tr>

                            <tr>
                                <th>Mobile Nu</th>
                                <td>0704702850</td>
                            </tr>

                            <tr>
                                <th>Birthday</th>
                                <td>1996 - 03 - 04</td>
                            </tr>

                            <tr>
                                <th>EPF Number</th>
                                <td>0367</td>
                            </tr>

                            <tr>
                                <th>Age</th>
                                <td>27</td>
                            </tr>

                            <tr>
                                <th>Address</th>
                                <td>350/1A School lane, Kalapaluwawa, Rajagiriya</td>
                            </tr>


                        </table>

                        <div class="container border-2 pt-2">
                            <div class="row">
                                <div class="reports">

                                    <p class="text-center mb-3"
                                        style="color:rgb(10, 10, 10); background-color: rgb(200, 204, 200); padding:5px; letter-spacing:1.5px;">
                                        Reports</p>
                                </div>

                                {{-- <div class="col-6 d-flex justify-content-center">
                                    <a href="" style="text-decoration: none; color:black;">
                                        <div class="leave-reports">
                                            <img src="{{ asset('css/icon/exit.png') }}" alt=""
                                                style="width: 50px; height:60px">
                                        </div>
                                        <p class="report-heading text-center">Leave Report</p>
                                    </a>
                                </div>


                                <div class="col-6 d-flex justify-content-center">
                                    <a href="" style="text-decoration: none; color:black;">
                                        <div class="attendence-report">
                                            <img src="{{ asset('css/icon/attendance.png') }}" alt=""
                                                style="width: 50px; height:60px">
                                        </div>
                                        <div class="report-heading d-flex justify-content-center text-center">
                                            <p>Attendence Reports</p>
                                        </div>
                                    </a>
                                </div> --}}

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

                    <div class="col-md-4">
                        <div class="user-image">
                            <img src="https://img.freepik.com/free-photo/bohemian-man-with-his-arms-crossed_1368-3542.jpg?w=740&t=st=1691472298~exp=1691472898~hmac=7b94617207abbb95b20309d237b2eeda5e174770a572e25848324b82bab6773e"
                                alt="">
                        </div>
                        <div class="position pt-3">
                            <p>Management Assisstant - GIII</p>
                        </div>


                        <div class="notifications g-0 pt-3">
                            <div class="leave-summery text-center">
                                <p>Leave Summery of 2023</p>
                            </div>
                            <table class="table table-bordered">
                                <tr>
                                    <td>Casual leave</td>
                                    <td class="text-center">4</td>
                                </tr>
                                <tr>
                                    <td>Medical leave</td>
                                    <td class="text-center"></td>
                                </tr>
                                <tr>
                                    <td>Total leave</td>
                                    <td class="text-center">4</td>
                                </tr>
                                <tr>
                                    <td style="color: green;">Available leave</td>
                                    <td style="color: green;" class="text-center">41</td>
                                </tr>
                            </table>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
@endsection