@extends('admin.layout')
@section('content')
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    @php
        $locale = Session::get('locale', app()->getLocale());
    @endphp
    <div class="container-flex list-header align-items-center">
        @if (!isset($hideNewBtn))
            <div class="container-flex d-flex align-items-center gap-3">
                <h2>{{ $devEditName }}</h2>
                <a class="btn btn-success" href="new">New</a>
            </div>
        @endif
        <div class="nav container-flex d-flex align-items-center gap-3">
            <a href="{{ $localeUrl }}/admin/logout">Logout</a>
        </div>
    </div>
    <table class="table table-striped sortable">
        <thead>
            <tr>
                @if (!(isset($renderId) && $renderId == false))
                    <th scope="col" width="50px" style="text-align: center;">ID</th>
                @endif
                @foreach ($fieldKeys as $key)
                    <th scope="col">{{ $key }}</th>
                @endforeach
                @if ($devEditName == 'Images')    
                    <th scope="col">Preview</th>
                @endif
                <th scope="col" width="100px" style="text-align: center;">Actions</th>
            </tr>
        </thead>
        <tbody>
            @foreach ($renderData as $data)
                <tr>
                    @if (!(isset($renderId) && $renderId == false))
                        <td style="text-align: center;">
                            {{ $data['id'] }}
                        </td>
                    @endif
                    @foreach ($data['rows'] as $rowkey => $rowData)
                        <td>
                            {{ $rowData }}
                        </td>
                    @endforeach
                    @if ($devEditName == 'Images')
                        <td scope="col"><img style="max-width: 200px; max-height: 75px;" src="{{ $data['url'] }}" alt="{{ $data['id'] }}"></td>
                    @endif
                    <td style="text-align: center;">
                        <a href="./edit/{{ $data['id'] }}">Edit</a>
                        @if (!isset($hideDelBtn))
                            <a href="./delete/{{ $data['id'] }}"
                                onclick="return confirm('Are you sure you want to delete this?')">Delete</a>
                        @endif
                        @if ($devEditName == 'Images')
                            <a href="#" onclick="openModal(event, '{{ $data['url'] }}')">Quick View</a>

                            <a
                                href="{{ route('admin.images.download', [$locale, 'file_name' => $data['id']]) }}">Download</a>
                        @endif
                    </td>
                </tr>
            @endforeach
        </tbody>
    </table>
    <style>
        .pagination {
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 5px;
        }

        .pagination>a {
            text-decoration: none;
            color: black;
            border: solid 1px #aaa;
            border-radius: 3px;
            padding: 2px 5px;
            transition: 200ms;
        }

        .pagination>a:hover {
            text-decoration: none;
            color: black;
            border-color: #999;
            background: #ddd;
        }

        .pagination>span {
            text-decoration: underline;
        }
    </style>
    @if (isset($pageData))
        <div class="pagination">
            @if ($pageData->page > 1)
                <a href="?page={{ $pageData->page - 1 }}">
                    << /a>
                        <a href="?page=1">1</a>
                        @for ($i = max($pageData->page - 5, 2); $i < $pageData->page; $i++)
                            <a href="?page={{ $i }}">{{ $i }}</a>
                        @endfor
            @endif
            <span>{{ $pageData->page }}</span>
            @if ($pageData->page < $pageData->cnt)
                @for ($i = $pageData->page + 1; $i < min($pageData->page + 5, $pageData->cnt); $i++)
                    <a href="?page={{ $i }}">{{ $i }}</a>
                @endfor
                <a href="?page={{ $pageData->cnt }}">{{ $pageData->cnt }}</a>
                <a href="?page={{ $pageData->page + 1 }}">></a>
            @endif
        </div>
    @endif
    @if ($devEditName == 'Images')
        <div class="modal fade" id="imageModal" tabindex="-1" role="dialog" aria-labelledby="imageModalLabel"
            aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="imageModalLabel">Image Preview</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <img id="modalImage" src="" style="width: 100%;" />
                    </div>
                </div>
            </div>
        </div>
        <script>
            function openModal(event, url) {
                event.preventDefault();
                document.getElementById('modalImage').src = url;
                $('#imageModal').modal('show');
            }
        </script>
    @endif
@endsection