@extends('dashboard.layouts.app')

@section('content')
    @include('components.alert')

    <style>
        .shared-center-filter-card {
            padding: 1.25rem;
            border-top: 1px solid #eef2f7;
            background: #fcfdff;
        }

        .shared-center-filter-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 1rem;
            margin-bottom: 1rem;
            flex-wrap: wrap;
        }

        .shared-center-filter-title {
            font-size: 0.95rem;
            font-weight: 700;
            color: #111827;
            margin: 0;
        }

        .shared-center-filter-sub {
            margin: 0.2rem 0 0;
            color: #6b7280;
            font-size: 0.88rem;
        }

        .folder-grid {
            display: grid;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: 1rem;
        }

        .folder-filter-btn,
        .folder-toggle-btn {
            width: 100%;
            border: 1px solid #e5e7eb;
            border-radius: 16px;
            background: #fff;
            min-height: 62px;
            padding: 0.9rem 1rem;
            display: flex;
            align-items: center;
            gap: 0.75rem;
            color: #111827;
            font-weight: 600;
            transition: 0.2s ease;
            box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
        }

        .folder-filter-btn:hover,
        .folder-toggle-btn:hover {
            transform: translateY(-1px);
            border-color: #dbe2ea;
            background: #f8fafc;
        }

        .folder-filter-btn--active {
            background: #111827;
            color: #fff;
            border-color: #111827;
            box-shadow: 0 12px 30px rgba(17, 24, 39, 0.16);
        }

        .folder-filter-btn__icon,
        .folder-toggle-btn__icon {
            flex-shrink: 0;
            font-size: 1rem;
        }

        .folder-filter-btn__text,
        .folder-toggle-btn__text {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .folder-toggle-btn {
            justify-content: center;
            background: #f8fafc;
            border-style: dashed;
        }

        .folder-extra {
            margin-top: 1rem;
        }

        .attachment-thumb {
            width: 78px;
            height: 78px;
            border-radius: 14px;
            object-fit: cover;
            border: 1px solid #e5e7eb;
            box-shadow: 0 8px 20px rgba(15, 23, 42, 0.06);
        }

        .attachment-video {
            width: 120px;
            height: 80px;
            border-radius: 14px;
            object-fit: cover;
            border: 1px solid #e5e7eb;
            background: #000;
        }

        .attachment-pdf-link {
            display: inline-flex;
            align-items: center;
            gap: 0.45rem;
            padding: 0.6rem 0.85rem;
            border-radius: 12px;
            text-decoration: none;
            font-weight: 600;
            color: #b91c1c;
            background: #fff1f2;
            border: 1px solid #fecaca;
            transition: 0.2s ease;
        }

        .attachment-pdf-link:hover {
            color: #991b1b;
            background: #ffe4e6;
        }

        @media (max-width: 1199.98px) {
            .folder-grid {
                grid-template-columns: repeat(3, minmax(0, 1fr));
            }
        }

        @media (max-width: 991.98px) {
            .folder-grid {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }
        }

        @media (max-width: 575.98px) {
            .folder-grid {
                grid-template-columns: 1fr;
            }
        }
    </style>

    <div class="container-fluid app-bg">
        <div class="page-shell">
            <div class="space-y-4">

                <x-page-title
                    title="Shared Center"
                    description="Browse shared center records, filter them by folder, and preview the uploaded attachments.">
                    <a href="{{ route('share-center-all') }}" class="asset-btn asset-btn--secondary">
                        Reset
                    </a>
                </x-page-title>

                <div class="ui-card ui-card--table">
             
                    <div class="shared-center-filter-card">
                        <form method="GET" action="{{ url()->current() }}">
                            <div class="shared-center-filter-head">
                                <div>
                                    <h6 class="shared-center-filter-title">Folders</h6>
                                    <p class="shared-center-filter-sub">
                                        Select a folder to filter the table results. The first folders are shown directly, and the rest can be expanded.
                                    </p>
                                </div>
                            </div>

                            <div class="folder-grid">
                                @foreach ($foldersList->take(3) as $folder)
                                    <button
                                        type="submit"
                                        name="folder_id"
                                        value="{{ $folder->id }}"
                                        class="folder-filter-btn {{ request('folder_id') == $folder->id ? 'folder-filter-btn--active' : '' }}">
                                        <i class="fas fa-folder{{ request('folder_id') == $folder->id ? '-open' : '' }} folder-filter-btn__icon"></i>
                                        <span class="folder-filter-btn__text">{{ $folder->name }}</span>
                                    </button>
                                @endforeach

                                @if ($foldersList->count() > 3)
                                    <button type="button" id="toggle-folders" class="folder-toggle-btn">
                                        <i id="toggle-icon" class="fas fa-plus-circle folder-toggle-btn__icon"></i>
                                        <span id="toggle-text" class="folder-toggle-btn__text">More Folders</span>
                                    </button>
                                @endif
                            </div>

                            @if ($foldersList->count() > 3)
                                <div id="more-folders" class="folder-extra d-none">
                                    <div class="folder-grid">
                                        @foreach ($foldersList->skip(3) as $folder)
                                            <button
                                                type="submit"
                                                name="folder_id"
                                                value="{{ $folder->id }}"
                                                class="folder-filter-btn {{ request('folder_id') == $folder->id ? 'folder-filter-btn--active' : '' }}">
                                                <i class="fas fa-folder{{ request('folder_id') == $folder->id ? '-open' : '' }} folder-filter-btn__icon"></i>
                                                <span class="folder-filter-btn__text">{{ $folder->name }}</span>
                                            </button>
                                        @endforeach
                                    </div>
                                </div>
                            @endif
                        </form>
                    </div>

                    @if ($centers->isNotEmpty())
                        <x-table
                            :headers="['Name', 'Attachment Type', 'Folder Name', 'Attachment']"
                            :paginator="$centers"
                            emptyMessage="No Shared Centers found."
                            emptyActionText=""
                            emptyActionUrl="">
                            <tbody>
                                @foreach ($centers as $center)
                                    <tr>
                                        <td class="text-center">
                                            <div class="ui-title">{{ $center->name }}</div>
                                        </td>

                                        <td class="text-center">
                                            @php
                                                $attachmentVariant = match($center->attachment_type) {
                                                    'image' => 'success',
                                                    'video' => 'info',
                                                    'pdf' => 'danger',
                                                    default => 'neutral',
                                                };
                                            @endphp

                                            <span class="ui-pill ui-pill--{{ $attachmentVariant }}">
                                                {{ $center->attachment_type ?: '—' }}
                                            </span>
                                        </td>

                                        <td class="text-center">
                                            <div class="ui-title">
                                                {{ optional($center->shared_center_folder)->name ?? '—' }}
                                            </div>
                                        </td>

                                        <td class="text-center">
                                            @if ($center->attachment && $center->attachment_type === 'image')
                                                <a href="{{ asset($center->attachment) }}" target="_blank">
                                                    <img
                                                        src="{{ asset($center->attachment) }}"
                                                        alt="Attachment"
                                                        class="attachment-thumb">
                                                </a>
                                            @elseif ($center->attachment && $center->attachment_type === 'pdf')
                                                <a href="{{ asset($center->attachment) }}" target="_blank" class="attachment-pdf-link">
                                                    <i class="fas fa-file-pdf"></i>
                                                    <span>View PDF</span>
                                                </a>
                                            @elseif ($center->attachment && $center->attachment_type === 'video')
                                                <a href="{{ asset($center->attachment) }}" target="_blank">
                                                    <video class="attachment-video" controls>
                                                        <source src="{{ asset($center->attachment) }}" type="video/mp4">
                                                        Your browser does not support the video tag.
                                                    </video>
                                                </a>
                                            @else
                                                <span class="ui-muted">N/A</span>
                                            @endif
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </x-table>

                        <div class="text-center py-4">
                            <p class="ui-muted mb-0">
                                <i class="fas fa-info-circle me-2"></i>No Shared Centers found.
                            </p>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <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 && moreFolders) {
                toggleBtn.addEventListener('click', function () {
                    const isHidden = moreFolders.classList.contains('d-none');

                    if (isHidden) {
                        moreFolders.classList.remove('d-none');
                        toggleIcon.className = 'fas fa-minus-circle folder-toggle-btn__icon';
                        toggleText.textContent = 'Less Folders';
                    } else {
                        moreFolders.classList.add('d-none');
                        toggleIcon.className = 'fas fa-plus-circle folder-toggle-btn__icon';
                        toggleText.textContent = 'More Folders';
                    }
                });
            }
        });
    </script>
@endpush