@extends('layouts.adminapp')

@section('content')

{{-- LeaveIssue --}}

<div class="container grid px-6 mx-auto">
    <h2 class="my-6 text-2xl font-semibold text-gray-700 dark:text-gray-200">
      {{__('lng.LeaveIssue')}}
    </h2>
    <a
      class="flex items-center justify-between p-4 mb-8 text-sm font-semibold text-purple-100 bg-purple-600 rounded-lg shadow-md focus:outline-none focus:shadow-outline-purple"
      href="{{route('LeaveIssue.create')}}">
      <div class="flex items-center">
        <span class="mr-2 text-lg" ><i class="fas fa-plus"></i></span>
        <span>{{__('lng.AddNewLeave')}}</span>
      </div>
      <span> &RightArrow;</span>
    </a>

   <!-- With actions -->
    <h4 class="mb-5 text-lg font-semibold text-gray-600 dark:text-gray-300">
      {{__('lng.LeaveIssueDetails')}}
    </h4>
    
    {{-- <input
      oninput="LeaveIssueNameSearch()"
      class="mb-6 w-full pl-8 pr-2 text-sm text-gray-700 placeholder-gray-600 bg-gray-100 border-0 rounded-md dark:placeholder-gray-500 dark:focus:shadow-outline-gray dark:focus:placeholder-gray-600 dark:bg-gray-700 dark:text-gray-200 focus:placeholder-gray-500 focus:bg-white focus:border-purple-300 focus:outline-none focus:shadow-outline-purple form-input"
      type="text"
      placeholder="Search for LeaveIssues by name or admission no."
      aria-label="Search" id="LeaveIssueSearch" name="LeaveIssuesearch"
      autocomplete="off"
    /> --}}
    <div id="hint_tbl">
    </div>
        
    <div class="w-full overflow-hidden rounded-lg shadow-xs">
      <div class="w-full overflow-x-auto">
        <table class="w-full whitespace-no-wrap">
          <thead>
            <tr class="text-xs font-semibold tracking-wide text-left text-gray-500 uppercase border-b dark:border-gray-700 bg-gray-50 dark:text-gray-400 dark:bg-gray-800">
            <th class="px-4 py-3">{{__('lng.SiNo')}}</th>
              <th class="px-4 py-3">{{__('lng.Date')}}</th>
              <th class="px-4 py-3">{{__('lng.Student')}}</th>
              <th class="px-4 py-3">{{__('lng.Teacher')}}</th>
              <th class="px-4 py-3">{{__('lng.Reson')}}</th>
              <th class="px-4 py-3">{{__('lng.Actions')}}</th>
            </tr>
          </thead>
          <tbody class="bg-white divide-y dark:divide-gray-700 dark:bg-gray-800" id="search_tbl">
            @php $si = 0; @endphp
            @foreach($LeaveIssues as $LeaveIssue)
            
            <tr class="text-gray-700 dark:text-gray-400">
              <td class="px-4 py-3">
                {{++$si}}
              </td>
              <td class="px-4 py-3 text-sm">
                @php $Date =  date("m-d-Y",strtotime($LeaveIssue->date));@endphp
                {{$Date}}
              </td>
              <td class="px-4 py-3 text-sm">
                {{$LeaveIssue->student->name ?? ''}}
              </td>
              <td class="px-4 py-3 text-sm">
                {{$LeaveIssue->employee->user->name ?? ''}}
              </td>
              <td class="px-4 py-3 text-sm">
                {{$LeaveIssue->reson}}
              </td>
              <td class="px-4 py-3">
                <div class="flex items-center space-x-4 text-sm">
                  <a href="{{route('LeaveIssue.edit',$LeaveIssue->id)}}" class="flex items-center justify-between px-2 py-2 text-sm font-medium leading-5 text-purple-600 rounded-lg dark:text-gray-400 focus:outline-none focus:shadow-outline-gray" aria-label="Edit">
                    <svg
                      class="w-5 h-5"
                      aria-hidden="true"
                      fill="currentColor"
                      viewBox="0 0 20 20"
                    >
                      <path
                        d="M13.586 3.586a2 2 0 112.828 2.828l-.793.793-2.828-2.828.793-.793zM11.379 5.793L3 14.172V17h2.828l8.38-8.379-2.83-2.828z"
                      ></path>
                    </svg>
                  </a>
                  <form method="POST" action="{{route('LeaveIssue.destroy',$LeaveIssue->id)}}" Id="form-delete-{{$LeaveIssue->id}}">
                    @csrf
                    @method('delete')
                  <button class="flex items-center justify-between px-2 py-2 text-sm font-medium leading-5 text-purple-600 rounded-lg dark:text-gray-400 focus:outline-none focus:shadow-outline-gray" aria-label="Delete"
                    onclick="event.preventDefault();
                    if(confirm('All the data related to this LeaveIssue will be removed!!! Are you sure delete this?'))
                    {
                        document.getElementById('form-delete-{{$LeaveIssue->id}}').submit();
                    }">
                    <svg
                      class="w-5 h-5"
                      aria-hidden="true"
                      fill="currentColor"
                      viewBox="0 0 20 20"
                    >
                      <path
                        fill-rule="evenodd"
                        d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z"
                        clip-rule="evenodd"
                      ></path>
                    </svg>
                  </button>
                  </form>
                  {{-- <a href="{{route('LeaveIssue.show',$LeaveIssue->id)}}" class="flex items-center justify-between px-2 py-2 text-sm font-medium leading-5 text-purple-600 rounded-lg dark:text-gray-400 focus:outline-none focus:shadow-outline-gray">
                    <svg 
                    class="w-5 h-5"
                    aria-hidden="true"
                    fill="currentColor"
                    viewBox="0 0 20 20">
                    <path d="M19.471,8.934L18.883,8.34c-2.096-2.14-4.707-4.804-8.903-4.804c-4.171,0-6.959,2.83-8.996,4.897L0.488,8.934c-0.307,0.307-0.307,0.803,0,1.109l0.401,0.403c2.052,2.072,4.862,4.909,9.091,4.909c4.25,0,6.88-2.666,8.988-4.807l0.503-0.506C19.778,9.737,19.778,9.241,19.471,8.934z M9.98,13.787c-3.493,0-5.804-2.254-7.833-4.3C4.182,7.424,6.493,5.105,9.98,5.105c3.536,0,5.792,2.301,7.784,4.332l0.049,0.051C15.818,11.511,13.551,13.787,9.98,13.787z"></path>
                    <circle cx="9.98" cy="9.446" r="1.629"></circle>
                    </svg>
                  </a> --}}
                </div>
              </td>
            </tr>
            @endforeach
          </tbody>
        </table>
      </div>
      <div
        class="grid px-4 py-3 text-xs font-semibold tracking-wide text-gray-500 uppercase border-t dark:border-gray-700 bg-gray-50 sm:grid-cols-9 dark:text-gray-400 dark:bg-gray-800"
      >
        <span class="flex items-center col-span-3">
           {{__('lng.Showing')}} {{$LeaveIssues->count()}}
        </span>
        
      </div>
    </div>
  </div>

{{-- <script>
  function LeaveIssueNameSearch() {
    hint_tbl.style.display ="block";
    var items = document.getElementById("LeaveIssueSearch").value;

    $.ajax({
      url: '{{ route('LeaveIssueNameSearch') }}',
      method: "get",
      data: {_token: '{{ csrf_token() }}',searchitems:items },
      success: function (response){   
        document.getElementById('hint_tbl').innerHTML=response; 
      }
    });
  }

  function clickSelect(ID,Name) {
    hint_tbl.style.display ="none";
    document.getElementById('LeaveIssueSearch').value=Name;

    $.ajax({
          url: '{{ route('LeaveIssueList') }}',
          method: "get",
          data: {_token: '{{ csrf_token() }}',user_id:ID },
          success: function (response){   
            document.getElementById('search_tbl').innerHTML=response; 
          }
        });
  }
</script> --}}

@endsection