@extends('dashboard.layouts.app')

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

    @php
        $activeFiltersCount = collect([
            request('search'),
            request('status'),
            request('folder_id'),
            request('share_department_id'),
            request('share_staff_id'),
            request('valid_until'),
            request('per_page'),
        ])
            ->filter(fn($value) => filled($value))
            ->count();
    @endphp

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

                <x-page-title title="Shared Centers"
                    description="Browse, filter, and manage shared centers across folders, departments, staff members, and attachment types.">
                    <a href="{{ route('share-center.create') }}" class="asset-btn asset-btn--primary">
                        + Add New Shared Center
                    </a>
                </x-page-title>


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

                            <div class="share-center-filters-controls">
                                <x-table-controls :action="route('share-center.index')" searchName="search" searchPlaceholder="Search ..."
                                    :export="true" :exportRoute="route('share-center.export')" :saveRoute="route('share-center.saveFilteredTable')" :filters="[
                                        'status' => [
                                            'active' => 'Active',
                                            'not_active' => 'Not Active',
                                        ],
                                        'folder_id' => collect($foldersList)->pluck('name', 'id')->toArray(),
                                        'share_department_id' => collect($departments)->pluck('name', 'id')->toArray(),
                                        'share_staff_id' => collect($staffs ?? [])
                                            ->mapWithKeys(function ($staff) {
                                                return [$staff->id => $staff->full_name];
                                            })
                                            ->toArray(),
                                    ]"
                                    :filterLabels="[
                                        'status' => 'Status',
                                        'folder_id' => 'Folder Name',
                                        'share_department_id' => 'Depart',
                                        'share_staff_id' => 'Staff Current Position',
                                    ]" />
                            </div>
                        </div>

                        <div class="share-center-extra-filters mt-3">
                            <form action="{{ route('share-center.index') }}" method="GET"
                                class="share-center-extra-filters-form">
                                <input type="hidden" name="search" value="{{ request('search') }}">
                                <input type="hidden" name="per_page" value="{{ request('per_page') }}">
                                <input type="hidden" name="status" value="{{ request('status') }}">
                                <input type="hidden" name="folder_id" value="{{ request('folder_id') }}">
                                <input type="hidden" name="share_department_id"
                                    value="{{ request('share_department_id') }}">
                                <input type="hidden" name="share_staff_id" value="{{ request('share_staff_id') }}">



                            </form>
                        </div>
                    </div>

                    <x-table :headers="[
                        'Center Name',
                        'Status',
                        'Valid Until',
                        'Folder',
                        'Department',
                        'Staff',
                        'Attachment',
                        'Actions',
                    ]" :paginator="$centers"
                        emptyMessage="No shared centers found matching the current filters."
                        emptyActionText="+ Create Shared Center" :emptyActionUrl="route('share-center.create')">
                        @foreach ($centers as $center)
                            @php
                                $centerStaff = $center->staff;
                                $centerStaffFullName = $centerStaff?->getRawOriginal('full_name')
                                    ?: trim(($centerStaff?->first_name ?? '') . ' ' . ($centerStaff?->getRawOriginal('last_name') ?? ''));
                                $centerStaffInitials = strtoupper(
                                    substr($centerStaff?->first_name ?? '', 0, 1) .
                                    substr($centerStaff?->getRawOriginal('last_name') ?? '', 0, 1)
                                );
                            @endphp
                            <tr class="ui-row-click"
                                onclick="window.location='{{ route('share-center.edit', $center->id) }}'"
                                id="shared-center-row-{{ $center->id }}">

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

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

                                <td class="text-center">
                                    @if ($center->valid_until)
                                        <div class="ui-muted">
                                            {{ \Carbon\Carbon::parse($center->valid_until)->format('M d, Y') }}
                                        </div>
                                        <small class="d-block text-muted">
                                            {{ \Carbon\Carbon::parse($center->valid_until)->diffForHumans() }}
                                        </small>
                                    @else
                                        <span class="ui-muted">—</span>
                                    @endif
                                </td>

                                <td class="text-center">
                                    @if (optional($center->shared_center_folder)->name)
                                        <div class="ui-title">{{ optional($center->shared_center_folder)->name }}</div>
                                    @else
                                        <span class="ui-muted">—</span>
                                    @endif
                                </td>

                                <td class="text-center">
                                    @if (optional($center->department)->name)
                                        <div class="ui-title">{{ optional($center->department)->name }}</div>
                                    @else
                                        <span class="ui-muted">—</span>
                                    @endif
                                </td>

                                <td class="text-center">
                                    @if ($centerStaff)
                                        <div class="task-staff-wrap">
                                            <div class="task-staff-avatar">
                                                {{ $centerStaffInitials }}
                                            </div>
                                            <div class="ui-title">
                                                {{ $centerStaffFullName }}
                                            </div>
                                        </div>
                                    @else
                                        <span class="ui-muted">—</span>
                                    @endif
                                </td>

                                <td class="text-center" onclick="event.stopPropagation()">
                                    @php
                                        $attachmentType = strtolower($center->attachment_type ?? '');
                                        $isImage = in_array($attachmentType, [
                                            'image',
                                            'jpg',
                                            'jpeg',
                                            'png',
                                            'gif',
                                            'webp',
                                        ]);
                                    @endphp

                                    @if ($center->attachment && $isImage)
                                        <button type="button" class="attachment-thumb-btn" data-bs-toggle="modal"
                                            data-bs-target="#attachmentModal{{ $center->id }}"
                                            title="Preview Attachment">
                                            <img src="{{ asset('/' . $center->attachment) }}" alt="Attachment"
                                                class="attachment-thumb">
                                        </button>
                                    @elseif ($center->attachment && $attachmentType === 'pdf')
                                        <a href="{{ asset('/' . $center->attachment) }}" target="_blank"
                                            class="table-action" data-bs-toggle="tooltip" title="Open PDF">
                                            <iconify-icon icon="lucide:file-text"></iconify-icon>
                                        </a>
                                    @elseif ($center->attachment && $attachmentType === 'video')
                                        <a href="{{ asset('/' . $center->attachment) }}" target="_blank"
                                            class="table-action" data-bs-toggle="tooltip" title="Open Video">
                                            <iconify-icon icon="lucide:play-circle"></iconify-icon>
                                        </a>
                                    @else
                                        <span class="ui-muted">N/A</span>
                                    @endif
                                </td>

                                <td class="text-center" onclick="event.stopPropagation()">
                                    <div class="ui-actions justify-content-center">
                                        <x-table-action type="edit" :url="route('share-center.edit', $center->id)" />

                                        <form action="{{ route('share-center.destroy', $center->id) }}" method="POST"
                                            class="d-inline"
                                            onsubmit="return confirm('Are you sure you want to delete this Shared Center?');">
                                            @csrf
                                            @method('DELETE')
                                            <button type="submit" class="delete-action-btn" data-bs-toggle="tooltip"
                                                title="Delete Shared Center">
                                                <span class="table-action table-action--danger">
                                                    <iconify-icon icon="lucide:trash-2"></iconify-icon>
                                                </span>
                                            </button>
                                        </form>
                                    </div>
                                </td>
                            </tr>
                        @endforeach
                    </x-table>
                </div>
            </div>
        </div>
    </div>

    @foreach ($centers as $center)
        @php
            $attachmentType = strtolower($center->attachment_type ?? '');
            $isImage = in_array($attachmentType, ['image', 'jpg', 'jpeg', 'png', 'gif', 'webp']);
        @endphp

        @if ($center->attachment && $isImage)
            <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 border-0 shadow-lg rounded-4 attachment-modal-content">
                        <div class="modal-header border-bottom-0">
                            <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 pt-0">
                            <img src="{{ asset('/' . $center->attachment) }}" alt="Attachment Preview"
                                class="img-fluid rounded">
                        </div>
                    </div>
                </div>
            </div>
        @endif
    @endforeach
@endsection

@push('styles')
    <style>
        .form-section__head {
            margin-bottom: 1rem;
            padding-bottom: 0.9rem;
            border-bottom: 1px solid #eef2f7;
        }

        .form-section__title {
            font-size: 1rem;
            font-weight: 700;
            color: #111827;
        }

        .form-section__sub {
            color: #6b7280;
            font-size: 0.92rem;
        }

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

        .filter-head__meta {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            flex-wrap: wrap;
        }

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

        .staff-filter-col {
            grid-column: span 3 / span 3;
        }

        .staff-filter-col--search {
            grid-column: span 6 / span 6;
        }

        .asset-label {
            display: inline-block;
            margin-bottom: 0.45rem;
            font-weight: 600;
            color: #374151;
            font-size: 0.92rem;
        }

        .asset-input,
        .asset-select {
            width: 100%;
            min-height: 44px;
            border: 1px solid #dbe2ea;
            border-radius: 12px;
            padding: 0.7rem 0.9rem;
            background: #fff;
            color: #111827;
            transition: 0.2s ease;
        }

        .asset-input:focus,
        .asset-select:focus {
            outline: none;
            border-color: #b8c4d6;
            box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.08);
        }

        .filter-search-wrap {
            position: relative;
        }

        .filter-search-icon {
            position: absolute;
            left: 14px;
            top: 50%;
            transform: translateY(-50%);
            color: #9ca3af;
            font-size: 18px;
            pointer-events: none;
        }

        .filter-search-input {
            padding-left: 2.5rem;
        }

        .filter-actions {
            display: flex;
            justify-content: flex-end;
            gap: 0.75rem;
            margin-top: 1rem;
            flex-wrap: wrap;
        }

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

        .task-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;
        }

        .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);
        }

        .table-action--danger {
            border-color: #f3d1d1;
            color: #dc3545;
        }

        .table-action--danger:hover {
            background: #fff5f5;
        }

        .delete-action-btn {
            border: none;
            background: transparent;
            padding: 0;
        }

        .attachment-thumb-btn {
            border: none;
            background: transparent;
            padding: 0;
            cursor: pointer;
        }

        .attachment-thumb {
            width: 72px;
            height: 72px;
            object-fit: cover;
            border-radius: 12px;
            border: 1px solid #e5e7eb;
            transition: 0.2s ease;
            background: #fff;
        }

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

        .attachment-modal-content {
            overflow: hidden;
        }

        @media (max-width: 1199.98px) {

            .staff-filter-col,
            .staff-filter-col--search {
                grid-column: span 6 / span 6;
            }
        }

        @media (max-width: 767.98px) {

            .staff-filter-col,
            .staff-filter-col--search {
                grid-column: span 12 / span 12;
            }

            .filter-head {
                align-items: stretch;
            }
        }
    </style>
@endpush

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

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

            $('#share_department_id').on('change', function() {
                let departmentId = $(this).val();
                let staffSelect = $('#share_staff_id');
                let selectedStaffId = "{{ request('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) {
                                let isSelected = selectedStaffId == staff.id ?
                                    'selected' : '';
                                staffSelect.append(
                                    '<option value="' + staff.id + '" ' +
                                    isSelected + '>' +
                                    staff.full_name +
                                    '</option>'
                                );
                            });

                            staffSelect.trigger('change');
                        },
                        error: function() {
                            staffSelect.empty().append('<option value="">All Staff</option>');
                        }
                    });
                } else {
                    staffSelect.empty().append('<option value="">All Staff</option>');
                }
            });

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