@extends('AdminMaster.authMaster')

@section('content')

<style>
  .card-body {
    max-height: 400px;
    /* Set the desired height for the scrollable area */
    overflow-y: auto;
    /* Enable vertical scrolling */
  }

  .table thead {
    background-color: #f8f9fa;
    /* Optional: background color for the table header */
    position: sticky;
    /* Makes the header stick to the top */
    top: 0;
    /* Keeps the header at the top */
    z-index: 1;
    /* Ensures the header stays on top of the table body */
  }

  .file-up-data .card-body {
    padding: 0 !important;
  }
</style>

<!-- <div class="page-header">
  <h3 class="page-title"> All Documents </h3>
</div> -->
<div class="row">
  <div class="col-lg-12 grid-margin stretch-card">
    <div class="card file-up-data">
      <div class="card-body table_scroll_hidden" id="style-3">
        <div class="row">
          <div class="col-md-6">
            <h4 class="card-title">All Files</h4>
          </div>
          <div class="col-md-6">
            <div class="excel_export_dv">
            <a href="{{ route('uploadedTable.download.xls') }}" class="btn btn-success mb-3">
              <i class="fas fa-file- fa-download"></i> Excel 
            </a>
          </div>
          </div>
        </div>
        
        <!-- <p class="card-description"> Add class <code>.table</code> -->

        <!-- for csv data export -->
         
        

        </p>
        <table class="table">
          <thead>
            <tr>
              <th>Sl no.</th>
              <th>Name.</th>
              <th>Title</th>
              <th>Description</th>
              <th>Purpose</th>
              <th>Tags</th>
              <th>Image</th>
              <th>Action</th>
           
            </tr>
          </thead>
          <tbody>
            @foreach($allFiles as $key => $allFile)
            <tr>
              <td>{{ ($allFiles->currentPage() - 1) * $allFiles->perPage() + $loop->iteration }}</td>

              <td>{{$allFile->name}}</td>
              <td>{{$allFile->title}}</td>
              <td>{{ \Illuminate\Support\Str::limit($allFile->description, 20, '...') }}</td>
              <td>{{$allFile->purpose}}</td>
              <td>
                @foreach($files as $file)
                @if($allFile->id == $file->id )
                @foreach(explode(', ', $file->tags) as $tag)
                <span class="badge bg-warning">{{ $tag }}</span>
                @endforeach
                @endif
                @endforeach
              </td>
              <td>     
                  <img src="{{ asset('storage/' . $allFile->thumb_image) }}" alt="Thumbnail" style="width: 50px; height: 50px; object-fit: cover;">
              </td>
              <td>
                <div class="col-sm-6 col-md-4 col-lg-3">
                  <a href="{{ route('file.download', basename($allFile->file_path) ) }}" target="_blank">
                    <i class="mdi mdi-download" style="font-size: 20px;"></i>
                  </a>

                   <form action="{{ route('admin.file.delete', $allFile->id) }}" class="delete-form" method="POST" style="display: inline;">
                @csrf
                @method('DELETE')
                <button type="submit" class="delete-btn"  style="border: none; background: none; cursor: pointer;">
                  <i class="mdi mdi-delete" style="font-size: 20px; color: rgb(29, 116, 230);"></i>
                </button>
              </form>
                </div>
              </td>
             
              {{-- <td>{{ basename($allFile->file_path) }}</td> --}}
              


            </tr>
            @endforeach

          </tbody>
         
        </table>
        <div class="d-flex justify-content-end mt-3">
            {{ $allFiles->links('pagination::bootstrap-4') }}
          </div>
      </div>
    </div>
  </div>
</div>

<script>
  document.addEventListener('DOMContentLoaded', function () {
      const deleteButtons = document.querySelectorAll('.delete-btn');

      deleteButtons.forEach(button => {
          button.addEventListener('click', function (e) {
              e.preventDefault();
              const form = this.closest('.delete-form');
              
              Swal.fire({
                  title: 'Are you sure?',
                  text: "You won't be able to revert this!",
                  icon: 'warning',
                  showCancelButton: true,
                  confirmButtonColor: '#3085d6',
                  cancelButtonColor: '#d33',
                  confirmButtonText: 'Yes, delete it!'
              }).then((result) => {
                  if (result.isConfirmed) {
                      form.submit();
                  }
              });
          });
      });
  });
</script>

@endsection