@extends('layouts.appv2')

@section('content')

<div class="row-sm-12">
    <div class="card" style="border-radius: 20; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);">
        <div class="card-header">
            <div class="d-flex justify-content-between align-items-center mb-0">
                <h5>Document Repository: {{ $employee->employee_first_name }} {{ $employee->employee_last_name }}</h5>
                <div class="btn-toolbar mb-2 mb-md-0">
                    <a href="{{ route('employees.viewemployee', ['employee_id' => $employee->employee_id]) }}"
                    class="btn btn-sm btn-secondary mt-1 mb-1"
                    style="width: 70px; text-align: center; border-radius: 50px;"> Back </a>
                </div>
            </div>
        </div>

        <div class="card-body">
            @if ($message = Session::get('success'))
                <div class="alert alert-success alert-dismissible fade show" role="alert">
                    {{ $message }}
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                </div>
            @endif

            @if ($message = Session::get('error'))
                <div class="alert alert-danger alert-dismissible fade show" role="alert">
                    {{ $message }}
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                </div>
            @endif

            
            <div class="d-flex justify-content-between align-items-center mb-3">
                
                <!-- <div class="d-flex">
                    <label for="entries" class="me-2 mt-1">Show</label>
                    <select id="entries" class="form-select-sm me-2" style="width: 70px;">
                        <option>10</option>
                        <option>20</option>
                        <option>50</option>
                        <option>100</option>
                    </select>

                    <label for="entries" class="me-2 mt-1">entries</label>
                    <input type="text" class="form-control form-control-sm" placeholder="Search" style="width: 200px;">

                </div> -->


                <!-- search bar -->

                <!-- <form method="GET" action="{{ route('employees.repository', ['employee_id' => $employee->employee_id]) }}" class="d-flex">

                    <label for="entries" class="me-2 mt-1">entries</label>

                    <input type="text" name="search" class="form-control form-control-sm" placeholder="Search" value="{{ request('search')}}">
                    <button type="submit" class="btn btn-sm btn-primary ms-2">Search</button>
                </form> -->


                <!-- latest -->
                <!-- <form method="GET" action="{{ route('employees.repository', ['employee_id' => $employee->employee_id]) }}"
                class="d-flex align-items-center">
                
                    <input type="text" name="search" class="form-control form-control-sm me-2"
                    placeholder="search" value="{{ request('search') }}">
                
                    <button type="submit" class="btn btn-sm btn-primary ms-2">Search</button>

                    @if(request()->has('search') && request('search') != '')
                        <a href="{{ route('employees.repository', ['employee_id' => $employee->employee_id]) }}"
                        class="btn btn-sm btn-warning ms-2">Clear</a>
                    @endif
                </form> -->

                <div class="form-group mb-3 d-flex">
                    <input type="text" id="repository-search" 
                    class="form-control" 
                    placeholder="Search documents..." 
                    onkeyup="searchRepository()">
                    <button class="btn btn-warning ms-2" onclick="clearSearch()" title="Clear search">Reset</button>
                </div>

            

                <div>
                    <a href="{{ route('employees.repository.add', ['employee_id' => $employee->employee_id]) }}"
                    class="btn-sm btn-outline-primary"
                    style="border-radius: 50px; font-weight:bolder;" 
                    title="Add repository item">
                    <i class="fa-solid fa-plus"></i> Add
                    </a>
                </div>

                
            </div>

            <div class="table-responsive">
                <table class="table table-striped table-bordered">
                    <thead class="table-dark">
                        <tr>
                            <th>No.</th>
                            <th>Title</th>
                            <th class="text-center align-middle">Category</th>
                            <th class="text-center align-middle">Actions</th>
                        </tr>
                    </thead>

                    <tbody id="repository-table">
                        @forelse($repositoryItems as $index => $item)
                        <tr>
                            <td>{{ $index + 1 }}</td>
                            <td>
                                <strong>{{ $item->repository_name }}</strong>
                            </td>
                            <td class="text-center align-middle">
                            @if($item->category)
                                <span class="badge bg-primary">{{ $item->category->category_name }}</span>
                            @else
                                <span class="badge bg-secondary">Uncategorized</span>
                            @endif
                            </td>
                            <td class="text-center align-middle">
                                <div class="btn-group">
                                
                                {{-- View Button --}}
                                 @if ($item->repository_file)
                                    @php
                                        if(str_contains($item->repository_file, 'employee_repository/')) {
                                            $filePath = $item->repository_file;
                                            $assetPath = asset('storage/' . $item->repository_file);
                                        }

                                        else {
                                            $filePath = 'employee_repository/' . $item->repository_file;
                                            $assetPath = asset('storage/employee_repository/' . $item->repository_file);
                                        }

                                        $fileExists = Storage::disk('public')->exists($filePath);

                                    @endphp

                                        @if ($fileExists)
                                            <a href="{{ route('employees.repository.view', ['repository_id' => $item->repository_id]) }}" 
                                            target="_blank" class="btn btn-primary btn-sm mt-1 mb-1" 
                                            style="width: 80px; text-align: center; border-radius: 3px;">
                                            <i class="fa-solid fa-eye"></i> View
                                            </a>

                                        @else
                                            <button class="btn btn-primary btn-sm mt-1 mb-1" disabled title="File not found">View</button>

                                        @endif


                                    @else
                                        <button class="btn btn-primary btn-sm mt-1 mb-1" disabled title="No file available">View</button>
                                    
                                    @endif

                                {{-- Edit Button --}}    
                                <a href="{{ route('employees.repository.edit', ['repository_id' => $item->repository_id]) }}" 
                                class="btn btn-info btn-sm mt-1 mb-1" 
                                style="width: 80px; text-align: center; border-radius: 3px;">
                                <i class="fa-solid fa-pen-to-square"></i> Edit
                                </a>

                                {{-- Delete Button --}}
                                <form action="{{ route('employees.repository.delete', $item->repository_id) }}"
                                method="POST"
                                style="display:inline;"
                                onsubmit="return confirm('Are you sure you want to delete this repository item?');">

                                @csrf
                                @method('DELETE')
                                    <button type="submit" class="btn btn-danger btn-sm mt-1 mb-1" style="width: 80px; text-align: center; border-radius: 3px;">
                                        <i class="fa fa-trash"></i> Delete
                                    </button>
                                </form>
                                </div>
                            </td>
                        </tr>

                        @empty
                            <tr>
                                <td colspan="4" class="text-center py-4">
                                <i class="fa-solid fa-open-folder fa-2x text-muted mb-2"></i>

                        @if(request('search'))
                            <p class="text-muted">
                                No data available for "<strong>{{ request('search') }}</strong>".
                            </p>
                        @else
                            <p class="text-muted">No repository items found.</p>
                            <a href="{{ route('employees.repository.add', ['employee_id'=>$employee->employee_id]) }}" 
                            class="btn btn-primary btn-sm">
                            Add Repository Item
                            </a>
                        @endif
                            </td>
                            </tr>
                        @endempty
                    </tbody>
                </table>
            </div>

            <div class="d-flex justify-content-between align-items-center mt-3">
                <div>
                    @if($repositoryItems->total() > 0)
                        Showing {{ $repositoryItems->firstItem() }} to {{ $repositoryItems->lastItem() }} of {{ $repositoryItems->total() }} entries

                    @else
                        Showing 0 entries
                    @endif
                </div>

                @if($repositoryItems->hasPages())
                    <nav>
                        <ul class="pagination pagination-sm">
                            {{-- Previous Page Link --}}
                            <li class="page-item {{ $repositoryItems->onFirstPage() ? 'disabled' : '' }}">
                                <a class="page-link" href="{{ $repositoryItems->previousPageUrl() }}">Previous</a>
                            </li>

                            {{-- Pagination Elements}}
                            @foreach ($repositoryItems->getUrlRange(1, $repositoryItems->lastPage()) as $page => $url)
                                <li class="page-item {{ $repositoryItems->currentPage() == $page ? 'active' : '' }}">
                                    <a class="page-link" href="{{ $url }}">{{ $page }}</a>
                                </li>
                            @endforeach

                            {{-- New Page Link --}}
                            <li class="page-item {{ !repositoryItems->hasMorePages() ? 'disabled' : ''}}">
                                <a class="page-link" href="{{ $repositoryItems->nextPageUrl() }}">Next</a>
                            </li>
                        </ul>
                    </nav>
                @endif
            </div>
        </div>
    </div>
</div>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        document.querySelectorAll('.alert .btn-close').forEach(function (btn) {
            btn.addEventListener('click', function() {
                const alert = btn.closest('.alert');
                if (alert) {
                    alert.classList.remove('show');
                    setTimeout(function () {
                        alert.style.display = 'none';
                    }, 150); 
                }
            });
        });
    });

</script>

<script>
    function clearSearch() {
        document.getElementById('repository-search').value = '';
        searchRepository(); // reload all items
    }

    function searchRepository() {
        const searchQuery = document.getElementById('repository-search').value;

        const tableBody = document.querySelector("#repository-table");
        tableBody.innerHTML = `<tr><td colspan="4" class="text-center">Loading...</td></tr>`;

        fetch(`{{ route('employees.repository', ['employee_id' => $employee->employee_id]) }}?search=${searchQuery}`, {
            headers: {
                "X-Requested-With": "XMLHttpRequest"
            }
        })
        .then(response => response.json())
        .then(data => {
            tableBody.innerHTML = "";
            if (data.data && data.data.length > 0) {
                data.data.forEach((item, index) => {
                    const viewButton = item.repository_file 
                        ? `<a href="{{ url('admins/employeerepository/view') }}/${item.repository_id}" 
                               target="_blank" 
                               class="btn btn-primary btn-sm mt-1 mb-1" 
                               style="width: 80px; text-align: center; border-radius: 3px;">
                               <i class="fa-solid fa-eye"></i> View
                           </a>`
                        : `<button class="btn btn-primary btn-sm mt-1 mb-1" disabled>No file</button>`;

                    const editButton = `
                        <a href="{{ url('admins/employeerepository/edit') }}/${item.repository_id}" 
                           class="btn btn-info btn-sm mt-1 mb-1" 
                           style="width: 80px; text-align: center; border-radius: 3px;">
                           <i class="fa-solid fa-pen-to-square"></i> Edit
                        </a>
                    `;

                    const deleteButton = `
                        <form action="{{ url('admins/employeerepository') }}/${item.repository_id}/delete" 
                              method="POST" 
                              style="display:inline;" 
                              onsubmit="return confirm('Are you sure you want to delete this repository item?');">
                            <input type="hidden" name="_token" value="{{ csrf_token() }}">
                            <input type="hidden" name="_method" value="DELETE">
                            <button type="submit" 
                                    class="btn btn-danger btn-sm mt-1 mb-1" 
                                    style="width: 80px; text-align: center; border-radius: 3px;">
                                <i class="fa fa-trash"></i> Delete
                            </button>
                        </form>
                    `;

                    const row = `
                        <tr>
                            <td>${index + 1}</td>
                            <td><strong>${item.repository_name}</strong></td>
                            <td class="text-center">
                                ${item.category 
                                    ? `<span class="badge bg-primary">${item.category.category_name}</span>` 
                                    : `<span class="badge bg-secondary">Uncategorized</span>`}
                            </td>
                            <td class="text-center">
                                ${viewButton} ${editButton} ${deleteButton}
                            </td>
                        </tr>
                    `;
                    tableBody.innerHTML += row;
                });
            } else {
                tableBody.innerHTML = `
                    <tr>
                        <td colspan="4" class="text-center py-4">
                            <i class="fa-solid fa-open-folder fa-2x text-muted mb-2"></i>
                            <p class="text-muted">No repository items found.</p>
                        </td>
                    </tr>
                `;
            }
        })
        .catch(error => {
            console.error("Error fetching data:", error);
            tableBody.innerHTML = `<tr><td colspan="4" class="text-center text-danger">Error loading data</td></tr>`;
        });
    }
</script>

@endsection