@extends('layouts.template')


@section('content')
    <div class="container">
        <div class="welcome-msg">
            <p>My leave details</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">

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

        <div class="row pt-4 mb-5">

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

                    <div class="refresh mb-2 d-flex">
                        <a href="leave_details"><i class="fa-solid fa-rotate"></i></a>
                    </div>

                    <p>All leave details</p>

                    <div class="table-responsive">
                        <table class="table table-sm table-bordered text-center" id="table">
                            <thead class="table-light">
                                <th>Leave Type</th>
                                <th>Day/s</th>
                                <th>From</th>
                                <th>To</th>
                                <th>Acting</th>
                                <th>Status</th>
                                <th>Approve by</th>
                                <th>Status</th>
                                <th>Remark</th>
                            </thead>

                            @foreach ($items as $row)
                                <tbody>
                                    @if ($row->user_name === Auth::user()->name)
                                        <td>{{ $row->type }}</td>
                                        <td>{{ $row->category }}</td>
                                        <td>{{ $row->leave_from }}</td>
                                        <td>{{ $row->leave_to }}</td>
                                        <td>{{ $row->users->name }}</td>

                                        @if ($row->acting_status === 'pending')
                                            <td><span class="badge bg-warning" style="font-weight: 300">Pending </span></td>
                                        @elseif ($row->acting_status === 'approved')
                                            <td><span class="badge bg-success" style="font-weight: 300">Approved </span>
                                            </td>
                                        @else
                                            <td><span class="badge bg-danger" style="font-weight: 300">Rejected </span></td>
                                        @endif

                                        <td>{{ $row['approve_officer'] }}</td>


                                        @if ($row->approve_status === 'pending')
                                            <td><span class="badge bg-warning" style="font-weight: 300">Pending </span></td>
                                        @elseif ($row->approve_status === 'approved')
                                            <td><span class="badge bg-success" style="font-weight: 300">Approved </span>
                                            </td>
                                        @else
                                            <td><span class="badge bg-danger" style="font-weight: 300">Rejected </span>
                                            </td>
                                        @endif

                                        @if ($row->acting_status === 'pending')
                                            <td><a href="{{ url('delete_record/' . $row->id) }}"><i
                                                        class="fa-solid fa-trash" style="color: red;"></i></a></td>
                                        @else
                                            <td></td>
                                        @endif
                                    @endif
                                </tbody>
                                </tbody>
                            @endforeach
                        </table>

                        <div class="pagination">
                            {{-- {{ $data->links() }} --}}
                        </div>

                    </div>











                </div>


            </div>




        </div>
    @endsection