@extends('layouts.master')

@section('title','Leave Management')
@section('content')
<!--Main layout-->
  <main class="content-body">
    <div class="page-body">
      <div class="card report-dashboard staff-dir-dashboard setting-dashbaord leave-dashboard">
        <div class="card-header">
          <div class="d-flex align-items-center justify-content-between">
            <!-- <a class="btn btn-sm btn-link text-body" href="{{route('leave-management.index')}}">
              <mat-icon role="img" class="mat-icon material-icons" aria-hidden="true">
                keyboard_arrow_left</mat-icon>
            </a> -->
            <div class="d-flex flex-column mt-2">
              <h5>Manage Employee Leaves</h5>
              <small class="mt-1">View Employees leave history. Apply leave on behalf.</small>
            </div>
            <a class="btn btn-sm btn-link text-body btn-design" href="{{ url('leave-management.index') }}">
           
                    <i class='fas fa-angle-left me-1'></i> Back
                  </a>
          </div>
        </div>
        <div class="card-block-hid">
          <div class="card-block px-4 pb-4">
            <div class="page-body">
              <div class="row mb-2 btn-tow cs-form align-items-end">
                <div class="col-md-6">
                  <div class="d-flex gap-4 align-items-center">
                    <button type="button" class="btn btn-primary text-capitalize btn-design1" data-mdb-ripple-color="dark" data-mdb-toggle="modal" data-mdb-target="#apply-employee-leave">
                      Apply for Others
                    </button>
                    <button type="button" class="btn btn-primary text-capitalize btn-design1" data-mdb-ripple-color="dark"
                      data-mdb-toggle="dropdown" id="allote-leave">
                      Allot Leaves
                    </button>
                    <ul class="dropdown-menu" aria-labelledby="allote-leave">
                      <li><a class="dropdown-item py-3" href="#" data-mdb-toggle="modal"
                          data-mdb-target="#allot-leave">Allot leave for single staff</a></li>
                      <li><a class="dropdown-item py-3" href="#" data-mdb-toggle="modal"
                          data-mdb-target="#upload-excel">Bulk-allot via spreadsheet upload</a></li>
                    </ul>
                  </div>
                </div>
                <div class="col-md-6 d-flex justify-content-end">
                  <div class="row align-items-end w-100">
                    <div class="col-md-4">
                      <label class="form-label">Department Filter </label>
                      <div class="selectMain mb-0">
                      <select name="department[]" class="custom-select" id="leave-department"><<option value="">Select Any</option>
                        @foreach($department as $dep)
                          <option  value="{{$dep->name}}">{{$dep->name}}</option>
                        @endforeach
                      </select>
                      </div>
                    </div>
                    <div class="col-md-4">
                      <label class="form-label">Staff Category </label>
                      <div class="selectMain mb-0">
                      <select name="category[]" class="custom-select" id="leave-category">  "><<option value="">Select Any</option>                
                        @foreach($category as $cat)
                          <option  value="{{$cat->name}}">{{$cat->name}}</option>
                        @endforeach
                      </select>
                      </div>
                    </div>
                    <div class="col-md-4">
                      <div class="form-outline search-box-design">
                        <input type="text" class="form-control" id="filter_search" />
                        <label class="form-label">Search</label>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="table-section mt-3">
                <div class="price-details-table overflow-auto">
                  <table class="table table-bordered" id="emp_leave_table">
                    <thead role="rowgroup">
                      <tr>
                        <th scope="col" rowspan="2" style="vertical-align: middle;"> Name </th>
                        <th scope="col" rowspan="2" style="vertical-align: middle;"> Category </th>
                        <th scope="col" rowspan="2" style="vertical-align: middle;"> Department </th>
                        @foreach($leaveType as $type)
                          <th class="text-center" colspan="3"> {{$type->name}} </th>
                        @endforeach
                      </tr>
                      <tr>
                        @foreach($leaveType as $type)
                        <th class="subheader-top"> Allotted </th>
                        <th class="subheader-top"> Used </th>
                        <th class="subheader-top"> Balance </th>
                        @endforeach
                      </tr>
                    </thead>
                    <tbody role="rowgroup">
                      @foreach($leave as $l)
                      <tr>
                        <td scope="col">
                          <div class="name-row">
                            <div class="cricle-img position-relative">
                              <div class="avatar-container">
                                <div class="avatar-content" style="background-color: #322a24;">MP</div>
                              </div>
                            </div>
                            <div class="name-text">
                              <div class="d-flex w-100">
                                <div>
                                  <a href="javascript:void(0);" data-mdb-toggle="modal"
                                    data-mdb-target="#employee-leave-history-modal" data-id="{{$l->employee_id}}" class="employee_leave_history">
                                    <span>{{$l->employee->name}} </span>
                                  </a>
                                </div>
                              </div>
                              <span class="emp-id">{{$l->employee_id}} </span>
                            </div>
                          </div>
                        </td>
                        <td scope="col">{{$l->employee->work->category->name}}</td>
                        <td scope="col">{{$l->employee->work->department->name}}</td>
                        @foreach($leaveType as $type)