@extends('layouts.template')


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

        <div class="welcome-msg">
            <p>Application for Leave</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 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">

                    <form action="submit_leave" method="POST">
                        @csrf
                        <div class="form">

                            <table class="table table-bordered">
                                <tr>
                                    <th class="align-middle">Name</th>
                                    <td>{{ Auth::user()->name }}
                                    </td>
                                </tr>
                                    <input type="text" name="user_name" class="form-control"
                                            value="{{ Auth::user()->name }}" hidden>
                                   
                                
                                <tr>
                                    <th class="align-middle">Leave Type</th>
                                    <td>
                                        <!-- Example single danger button -->
                                        <select class="form-select" aria-label="Default select example" name="type"
                                            required>
                                            <option selected>Select from List</option>
                                            <option value="Casual">Casual</option>
                                            <option value="Annual">Annual</option>
                                            <option value="Medical">Medical</option>
                                        </select>
                                    </td>
                                </tr>
                                <tr>
                                    <th class="align-middle">Leave Category</th>
                                    <td>
                                        <!-- Example single danger button -->
                                        <select class="form-select " aria-label="" name="category" required>
                                            <option selected>Select from List</option>
                                            <option value="Full Day">Full Day</option>
                                            <option value="Half Day">Half Day</option>
                                            <option value="Short Leave">Short Leave</option>
                                        </select>
                                    </td>
                                </tr>

                                <tr>
                                    <th class="align-middle">From</th>
                                    <td><input class="form-control" type="date" name="leave_from" id=""
                                            required>
                                    </td>
                                </tr>

                                <tr>
                                    <th class="align-middle">To</th>
                                    <td><input class="form-control" type="date" name="leave_to" id=""
                                            required></td>
                                </tr>

                                <tr>
                                    <th class="align-middle">Department</th>
                                    <td>{{ Auth::user()->department }}</td>
                                    <input type="text" name="department" id=""
                                            value="{{ Auth::user()->department }}" class="form-control" hidden>
                                </tr>

                                <tr>
                                    <th class="align-middle">Acting Officer</th>
                                    <td>
                                        <select class="form-select " aria-label="" name="acting_officer">
                                            <option selected>Select from List</option>
                                            @foreach ($data as $item)
                                                <option value="{{ $item['id'] }}">{{ $item['name'] }}</option>
                                            @endforeach
                                        </select>
                                    </td>
                                </tr>



                                <tr>
                                    <th class="align-middle">Approve Officer</th>
                                    <td>
                                        <select class="form-select " aria-label="" name="approve_officer">
                                            <option selected>Select from List</option>
                                            <option value="Samantha Nanayakkara">Samantha Nanayakkara</option>
                                            <option value="Yuraji Mahindadasa">Yuraji Mahindadasa</option>

                                        </select>
                                    </td>
                                </tr>



                                <tr>
                                    <th class="align-middle">Reason for Application</th>
                                    <td>
                                        <textarea class="form-control" name="reason" id="" cols="30" rows="4"></textarea>
                                    </td>
                                </tr>


                            </table>
                        </div>

                        <div class="submit-reset d-flex">
                            <button type="submit" class="btn btn-success">Submit Application</a>
                        </div>
                </div>

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