@extends('template')

@section('content')
    <div class=" container pt-5  h-screen inter  flex-column ">
        <div class="card  p-4 p-1 mt-5 mb-5" style="background-color: #ececec!important;">
            <div class=" d-lg-flex d-block w-100 justify-content-between ">
                <div>
                    <h1 class="text-green-dark">Dokumentasi</h1>
                    <div class="d-flex flex-row ">
                        <a class="button-outline m-2 {{ Request::route('id') == 1 ? 'active' : '' }}"
                            href="{{ route('dokumen', 1) }}">Dokumen</a>
                        <a class="button-outline m-2 {{ Request::route('id') == 2 ? 'active' : '' }}"
                            href="{{ route('dokumen', 2) }}">Foto</a>
                        <a class="button-outline m-2 {{ Request::route('id') == 3 ? 'active' : '' }}"
                            href="{{ route('dokumen', 3) }}">Video</a>
                    </div>
                </div>
                <div class="d-flex ">
                    <form class="d-flex m-3  form-search" action="{{ route('search') }}" method="POST">
                        @csrf
                        <input class="rounded-left border-0 mt-lg-5 m-0"style="height:30px;" type="text" name="search">
                        <input type="hidden" name="jenis" value="{{ Request::route('id') }}">
                        <button
                            class="rounded-right button-green mt-lg-5 m-0 border-0 px-3"style="height:30px;">Cari</button>
                    </form>
                    <form class="m-lg-3 mt-3 " method="POST" action="{{ route('filter') }}">
                        @csrf
                        <input type="hidden" name="jenis" value="{{ Request::route('id') }}">
                        <button
                            class="button-green border-0 rounded px-lg-3 px-1 py-lg-1 p-0 mt-lg-5 m-0"style="height:30px;"><i
                                class="bi d-lg-block d-none bi-funnel"></i></button>
                    </form>
                </div>

            </div>
            <div class=" d-flex justify-content-lg-center align-items-lg-center " style="overflow-x:auto;">
                <table class="table tbl table-borderless m-lg-3 m-0 mb-3">
                    <thead class="thead">
                        <tr>
                            <th class="p-3 p-0">Deskripsi</th>
                            <th class="p-3 p-0 ">Diupload Oleh</th>
                            <th class="p-3 p-0">Tanggal</th>
                            <th class="p-3 p-0">Diunduh</th>
                            <th class="p-3 p-0">Extensi</th>
                            <th class="p-3 p-0 ">Ukuran</th>
                            <th class="p-3 p-0 text-center">Action</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($document as $item)
                            <tr class="table-card shadow mb-3 text-green">
                                <td class="p-3 ">{{ $item->deskripsi }}</td>
                                <td class="p-3 text-center  ">{{ $item->admin->username }}</td>
                                <td class="p-3 text-center">{{ $item->tanggal }}</td>
                                <td class="p-3 text-center">{{ $item->jumlah_download }}</td>
                                <td class="p-3 text-center">{{ $item->ekstensi }}</td>
                                <td class="p-3 text-center ">{{ $item->ukuran }}Kb</td>
                                <td class="p-3 text-center">
                                    @if ($item->jenis == 1)
                                        <form
                                            action="{{ route('download', ['filename' => $item->name, 'jenis' => $item->jenis]) }}"method="get"
                                            class="h-100">
                                            @csrf
                                            <button id="download" class=" btn btn-light w-100  "
                                                style="background-color: #ffffff!important; color:#0b4238!important; font-weight:700;">download</button>
                                        </form>
                                    @elseif($item->jenis == 2)
                                        <form
                                            action="{{ route('download', ['filename' => $item->name, 'jenis' => $item->jenis]) }}"method="get"
                                            class="h-100">
                                            @csrf
                                            <button id="download" class=" btn btn-light w-100  "
                                                style="background-color: #ffffff!important; color:#0b4238!important; font-weight:700;">download</button>
                                        </form>
                                    @else
                                        <form
                                            action="{{ route('download', ['filename' => $item->name, 'jenis' => $item->jenis]) }}"method="get"
                                            class="h-100">
                                            @csrf
                                            <button id="download" class=" btn btn-light w-100  "
                                                style="background-color: #ffffff!important; color:#0b4238!important; font-weight:700;">download</button>
                                        </form>
                                    @endif
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
            <div class="center">

                {{ $document->links('pagination::bootstrap-4') }}
            </div>
        </div>

        <div class="card p-4" style="background-color: #ececec!important;">
            <h1 class="text-green-dark">Terakhir Didownload</h1>
            <div class="d-flex justify-content-lg-center align-items-lg-center" style="overflow-x:auto;">
                <table class="table tbl table-borderless m-lg-3 m-0 mb-3">
                    <thead class="thead">
                        <tr>
                            <th class="p-3">Deskripsi</th>
                            <th class="p-3">Diupload Oleh</th>
                            <th class="p-3">Tanggal</th>
                            <th class="p-3">Diunduh</th>
                            <th class="p-3 ">Extensi</th>
                            <th class="p-3 ">Ukuran</th>

                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($latest as $item)
                            <tr class="table-card shadow mb-3 text-green">
                                <td class="p-3 ">{{ $item->deskripsi }}</td>
                                <td class="p-3 text-center ">{{ $item->admin->username }}</td>
                                <td class="p-3 text-center">{{ $item->tanggal }}</td>
                                <td class="p-3 text-center">{{ $item->jumlah_download }}</td>
                                <td class="p-3 text-center ">{{ $item->ekstensi }}</td>
                                <td class="p-3 text-center">{{ $item->ukuran }}Kb</td>

                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    @push('script-modal')
        <script>
            document.addEventListener('DOMContentLoaded', function() {
                var downloadButtons = document.querySelectorAll('#download');

                downloadButtons.forEach(button => {
                    button.addEventListener('click', function(event) {
                        setTimeout(function() {
                            location.reload();
                        }, 500);
                    });
                });
            });
        </script>
    @endpush
@endsection