@include('layout.header')

<section id="content" style="background-color: #eee;">
  <div class="container pt-4 pb-4">
    <div class="row">
      <div class="col-md-12">
        <h4>{{$title}}</h4>
        <div class="ibox float-e-margins">
          <div class="ibox-content">
            <div class="row">
              <div class="col-md-8">
                <div class="file-manager">
                  <h6>Filter</h6>
                  <ul class="tag-list" style="padding: 0">
                    {{-- <li><a href="{{url('library/'.$type)}}" class="{{$department_id == null ? 'text-danger border-danger' : ''}}">Semua Departemen</a></li> --}}
                    {{-- @foreach ($department as $item)
                    <li><a href="{{url('library/'.$type.'/'.$item->id)}}" class="{{$department_id == $item->id ? 'text-danger border-danger' : ''}}">{{$item->name}}</a></li>    
                    @endforeach --}}
                    <select name="filter_department" id="filter_department" class="form-control">
                      <option {{$department_id == null ? 'selected' : ''}} value="" data-url="{{url('library/'.$type)}}">Semua Department</option>
                      @foreach ($department as $item)
                        <option {{$department_id == $item->id ? 'selected' : ''}} value="{{$item->id}}" data-url="{{url('library/'.$type.'/'.$item->id)}}">{{$item->name}}</option>
                      @endforeach
                    </select>
                  </ul>
                  <div class="clearfix"></div>
                </div>
              </div>
              <div class="col-md-4 pts-4">
                <h6>&nbsp;</h6>
                <form action="" method="get">
                  <div class="input-group">
                    <input type="text" name="search" class="form-control" placeholder="{{request()->search ?? 'Cari File'}}" aria-label="Cari File" aria-describedby="basic-addon2">
                    <div class="input-group-append">
                      @if(request()->search)
                      <button type="button" class="btn btn-danger" type="button" onclick="removeSearch()">
                        <i class="fa fa-remove"></i>
                      </button>
                      @endif
                      <button class="btn btn-outline-danger" type="button">
                        <i class="fa fa-search"></i>
                      </button>
                    </div>
                  </div>
                </form>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="col-md-12 animated fadeInRight">
        <div class="row">
          <div class="col-lg-12">

            @if (count($items) == 0)
            <div class="file-box w-100">
              <div class="file mr-0 mb-2 p-4 text-center" style="border-radius: 10px;">
                Dokumen masih kosong
              </div>
            </div>
            @endif

            @foreach ($items as $item)
            <div class="file-box">
              <div class="file">
                <a href="{{asset($item->file)}}" target="_blank">
                  <span class="corner"></span>

                  <div class="icon">
                    <i class="fa fa-file text-danger"></i>
                  </div>
                  <div class="file-name">
                    {{$item->title}}
                    <br>
                    <small>Added: {{date('M d, Y', strtotime($item->created_at))}}</small>
                  </div>
                </a>
              </div>
            </div>
            @endforeach

          </div>
        </div>
      </div>
    </div>
    {{-- <div class="row pb-4">
      <div class="col-12 col-lg-12 mt-4">
        <nav aria-label="Page navigation example text-center">
          <ul class="pagination justify-content-center">
            <li class="page-item"><a class="page-link" href="#">Previous</a></li>
            <li class="page-item"><a class="page-link" href="#">1</a></li>
            <li class="page-item"><a class="page-link" href="#">2</a></li>
            <li class="page-item"><a class="page-link" href="#">3</a></li>
            <li class="page-item"><a class="page-link" href="#">Next</a></li>
          </ul>
        </nav>
      </div>
    </div> --}}
  </div>
</section>

<script>
  const selectElement = document.querySelector("#filter_department");


  selectElement.addEventListener("change", (event) => {
    const { value } = event.target
    const selectedOption = document.querySelector(`option[value='${value}']`)

    if(selectedOption) {
      const { dataset } = selectedOption
      window.location.href = dataset.url
    }
  });

  function removeSearch() {
    const selectedOption = document.querySelector(`option[value='${selectElement.value}']`)

    if(selectedOption) {
      const { dataset } = selectedOption
      window.location.href = dataset.url
    }
  }
</script>

@include('layout.footer')