@extends('dashboard.layouts.app')

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

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

                <x-page-title title="Shared Folders"
                    description="Manage shared folders, filter records by status and creator, and quickly access edit actions.">
                    <a href="{{ route('share-center-folders.create') }}" class="asset-btn asset-btn--primary">
                        + Add New Shared Folder
                    </a>
                </x-page-title>

                <div class="ui-card ui-card--table">
                    <div class="ui-card__header">
                        <div class="d-flex align-items-center gap-3 flex-wrap">
                            <h6 class="mb-0 font-semibold text-gray-800 mb-0 whitespace-nowrap" style="margin-right:auto ">
                                Filters</h6>


                            <x-table-controls :action="url()->current()" searchName="search" searchPlaceholder="search"
                                :export="true" :exportRoute="route('share-center-folders.export')" :saveRoute="route('share-center-folders.saveFilteredTable')" :filters="[
                                    'status' => [
                                        'active' => 'Active',
                                        'inactive' => 'Not Active',
                                    ],
                                ]" :filterLabels="[
                                    'status' => 'Status',
                                ]"
                                :date="false" formId="folders-table-controls" />
                        </div>
                    </div>


                    <x-table :headers="['Folder Name', 'Status', 'Created By', 'Actions']" :paginator="$folders"
                        emptyMessage="No shared folders found matching the current criteria."
                        emptyActionText="+ Create Shared Folder" :emptyActionUrl="route('share-center-folders.create')">

                        @foreach ($folders as $folder)
                            @php
                                $creatorName = $folder->user?->getRawOriginal('full_name');
                            @endphp
                            <tr class="ui-row-click"
                                onclick="window.location='{{ route('share-center-folders.edit', $folder->id) }}'"
                                id="folder-row-{{ $folder->id }}">

                                <td class="text-center">
                                    <div class="ui-title">{{ $folder->name }}</div>
                                </td>

                                <td class="text-center">
                                    <span class="ui-pill ui-pill--{{ $folder->status ? 'success' : 'danger' }}">
                                        {{ $folder->status ? 'Active' : 'Not Active' }}
                                    </span>
                                </td>

                                <td class="text-center">
                                    @if (optional($folder->user))
                                        <div class="folder-staff-wrap">
                                            <div class="folder-staff-avatar">
                                                {{ strtoupper(substr($creatorName ?? '', 0, 2)) }}
                                            </div>
                                            <div class="ui-title">
                                                {{ $creatorName }}
                                            </div>
                                        </div>
                                    @else
                                        <span class="ui-muted">—</span>
                                    @endif
                                </td>

                                <td class="text-center" onclick="event.stopPropagation()">
                                    <div class="ui-actions">
                                        <a href="{{ route('share-center-folders.edit', $folder->id) }}" class="table-action"
                                            data-bs-toggle="tooltip" title="Edit Shared Folder">
                                            <iconify-icon icon="lucide:edit"></iconify-icon>
                                        </a>
                                    </div>
                                </td>
                            </tr>
                        @endforeach
                    </x-table>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('styles')
    <style>
        .task-filters-panel {
            padding: 20px;
            background: #fff;
        }

        .task-filter-toggle {
            min-height: 38px;
        }

        .folder-staff-wrap {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            flex-wrap: wrap;
        }

        .folder-staff-avatar {
            width: 34px;
            height: 34px;
            border-radius: 999px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: #f3f4f6;
            border: 1px solid #e5e7eb;
            color: #374151;
            font-size: 12px;
            font-weight: 700;
            flex-shrink: 0;
            text-transform: uppercase;
        }

        .table-action {
            width: 34px;
            height: 34px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 10px;
            border: 1px solid #e5e7eb;
            background: #fff;
            color: #374151;
            transition: 0.2s ease;
            font-size: 18px;
            text-decoration: none;
        }

        .table-action:hover {
            transform: translateY(-1px);
            box-shadow: 0 8px 18px rgba(0, 0, 0, 0.08);
        }

        @media (max-width: 991.98px) {
            .task-filters-panel {
                padding: 16px;
            }
        }
    </style>
@endpush

@push('scripts')
    <script>
        $(document).ready(function() {
            $('.select2').select2({
                width: '100%'
            });

            $('[data-bs-toggle="tooltip"]').tooltip();
        });

        setTimeout(() => {
            let alert = document.getElementById('successAlert');
            if (alert) {
                let bsAlert = new bootstrap.Alert(alert);
                bsAlert.close();
            }
        }, 10000);
    </script>
@endpush