@extends('dashboard.layouts.app')

@section('content')
    <div class="container mt-5">
        <!-- Success/Error Messages -->
        @if (session('success'))
            <div class="alert alert-success alert-dismissible fade show" role="alert">
                <i class="fas fa-check-circle me-2"></i>{{ session('success') }}
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        @endif
        @if ($errors->any())
            <div class="alert alert-danger alert-dismissible fade show" role="alert">
                <i class="fas fa-exclamation-circle me-2"></i>
                <ul class="mb-0">
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        @endif
        <div class="card shadow-lg border-0 rounded-3">
            <div class="card-body">
                <form method="GET" class="row g-3 mb-4">
                    <div class="col-md-12">
                        <label class="fw-bold mb-2">Folders</label>
                        <div class="row align-items-center">
                            {{-- First 3 Folders --}}
                            @foreach ($foldersList->take(3) as $folder)
                                <div class="col-md-3 mb-3">
                                    <button type="submit" name="folder_id" value="{{ $folder->id }}"
                                        class="w-100 btn btn-sm d-flex align-items-center gap-2 p-3 shadow-sm 
                                        {{ request('folder_id') == $folder->id ? 'btn-primary text-white' : 'btn-light text-dark border' }}"
                                        style="border-radius: 12px;">
                                        <i
                                            class="fas fa-folder{{ request('folder_id') == $folder->id ? '-open' : '' }}"></i>
                                        <span class="text-truncate">{{ $folder->name }}</span>
                                    </button>
                                </div>
                            @endforeach

                            {{-- More Button --}}
                            @if ($foldersList->count() > 3)
                                <div class="col-md-3 mb-3">
                                    <button type="button" id="toggle-folders"
                                        class="w-100 btn btn-sm d-flex align-items-center justify-content-center gap-2 p-3 shadow-sm btn-light text-dark border-0"
                                        style="border-radius: 12px;">

                                        <i id="toggle-icon" class="fas fa-plus-circle text-success"
                                            style="font-size: 1.7rem;"></i>
                                        <span id="toggle-text">More</span>
                                    </button>
                                </div>
                            @endif



                            {{-- Reset Button --}}
                        </div>
                        {{-- Hidden Folders --}}
                        <div id="more-folders" class="d-none w-100 mt-2">
                            <div class="row">
                                @foreach ($foldersList->skip(3) as $folder)
                                    <div class="col-md-3 mb-3">
                                        <button type="submit" name="folder_id" value="{{ $folder->id }}"
                                            class="w-100 btn btn-sm d-flex align-items-center gap-2 p-3 shadow-sm 
                                            {{ request('folder_id') == $folder->id ? 'btn-primary text-white' : 'btn-light text-dark border' }}"
                                            style="border-radius: 12px;">
                                            <i
                                                class="fas fa-folder{{ request('folder_id') == $folder->id ? '-open' : '' }}"></i>
                                            <span class="text-truncate">{{ $folder->name }}</span>
                                        </button>
                                    </div>
                                @endforeach
                            </div>
                        </div>

                        <div class="col-12 d-flex justify-content-end my-3">
                            <a href="{{ route('share-center-all') }}"
                                class="btn d-flex align-items-center gap-2 px-4 py-3 shadow-sm btn-danger text-white fw-semibold"
                                style="border-radius: 14px; font-size: 1rem; min-width: 150px; justify-content: center; transition: all 0.2s ease;">
                                <i class="fas fa-undo" style="font-size: 1.5rem;"></i>
                                <span>Reset</span>
                            </a>
                        </div>






                    </div>
                </form>
                <!-- Table -->
                @if ($centers->isNotEmpty())
                    <div class="table-responsive">
                        <table class="table table-bordered align-middle">
                            <thead class="table-light">
                                <tr>
                                    <th>Name</th>
                                    <th>Attachment Type</th>
                                    <th>Folder Name</th>
                                    <th>Attachment</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($centers as $center)
                                    <tr>
                                        <td>{{ $center->name }}</td>
                                        <td>{{ $center->attachment_type }}</td>
                                        <td>{{ optional($center->shared_center_folder)->name }}</td>
                                        <td>
                                            @if ($center->attachment && in_array($center->attachment_type, ['image']))
                                                <a href="{{ asset($center->attachment) }}" target="_blank">
                                                    <img src="{{ asset($center->attachment) }}" alt="Attachment"
                                                        class="img-thumbnail"
                                                        style="width: 80px; height: 80px; object-fit: cover; cursor:pointer;">
                                                </a>
                                            @elseif ($center->attachment && $center->attachment_type === 'pdf')
                                                <a href="{{ asset($center->attachment) }}"
                                                    target="_blank" class="btn btn-sm btn-outline-danger">
                                                    <i class="fas fa-file-pdf"></i> PDF
                                                </a>
                                            @elseif ($center->attachment && $center->attachment_type === 'video')
                                            <a href="{{ asset($center->attachment) }}" target="_blank">
                                                <video width="120" height="80" controls>
                                                    <source
                                                        src="{{ asset($center->attachment) }}"
                                                        type="video/mp4">
                                                    Your browser does not support the video tag.
                                                </video>
                                            </a>
                                            @else
                                                N/A
                                            @endif
                                        </td>
                                    </tr>
                                @endforeach
                                <div class="modal fade" id="attachmentModal{{ $center->id }}" tabindex="-1"
                                    aria-labelledby="attachmentModalLabel{{ $center->id }}" aria-hidden="true">
                                    <div class="modal-dialog modal-dialog-centered modal-lg">
                                        <div class="modal-content">
                                            <div class="modal-header">
                                                <h5 class="modal-title" id="attachmentModalLabel{{ $center->id }}">
                                                    Attachment Preview</h5>
                                                <button type="button" class="btn-close" data-bs-dismiss="modal"
                                                    aria-label="Close"></button>
                                            </div>
                                            <div class="modal-body text-center">
                                                <img src="{{ asset('/' . $center->attachment) }}" alt="Attachment"
                                                    class="img-fluid rounded">
                                            </div>
                                        </div>
                                    </div>
                                </div>

                            </tbody>
                        </table>
                        <div class="mt-3">
                            {{ $centers->appends(request()->except('page'))->links('pagination::bootstrap-5') }}
                        </div>
                    </div>
                @else
                    <div class="text-center py-4">
                        <p class="text-muted"><i class="fas fa-info-circle me-2"></i>No Shared Centers found.</p>
                    </div>
                @endif
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        $(document).ready(function() {
            $('.select2').select2({
                allowClear: true,
                width: '100%'
            });
            $('#share_department_id').on('change', function() {
                let departmentId = $(this).val();
                let staffSelect = $('#share_staff_id');
                staffSelect.empty().append('<option value="">Loading...</option>');
                if (departmentId) {
                    $.ajax({
                        url: "{{ url('/departments') }}/" + departmentId + "/staff",
                        type: "GET",
                        success: function(data) {
                            staffSelect.empty().append('<option value="">All Staff</option>');
                            $.each(data, function(key, staff) {
                                staffSelect.append('<option value="' + staff.id + '">' +
                                    staff.full_name + '</option>');
                            });
                            staffSelect.trigger('change');
                        }
                    });
                } else {
                    staffSelect.empty().append('<option value="">All Staff</option>');
                }
            });
        });
    </script>
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            const toggleBtn = document.getElementById("toggle-folders");
            const toggleIcon = document.getElementById("toggle-icon");
            const toggleText = document.getElementById("toggle-text");
            const moreFolders = document.getElementById("more-folders");

            if (toggleBtn) {
                toggleBtn.addEventListener("click", function() {
                    if (moreFolders.classList.contains("d-none")) {
                        moreFolders.classList.remove("d-none");
                        toggleIcon.className = "fas fa-minus-circle text-success";
                        toggleText.textContent = "Less";
                    } else {
                        moreFolders.classList.add("d-none");
                        toggleIcon.className = "fas fa-plus-circle text-success";
                        toggleText.textContent = "More";
                    }
                });
            }
        });
    </script>
@endpush