@php
    $pageTitle = 'Editar Plano: ' . $plan->name;
@endphp

@extends('v2-cms::layouts.app', [
    'title'    => $pageTitle,
])

@section('page-breadcrumbs')
    <span class="current">Institucional</span>
    <span class="separator">›</span>
    <span class="current">Associe-se</span>
    <span class="separator">›</span>
    <span class="current">Planos</span>
    <span class="separator">›</span>
    <span class="current">Editar: {{ $plan->name }}</span>
@endsection

@section('content')
    <div class="row g-4">
        <div class="col-lg-8">
            <div class="card">
                <div class="card-body">
                    <form action="{{ route('v2.associe-se.cms.plans.update', ['id' => $plan->id]) }}" method="POST">
                        @include('v2-associese::cms.plans._form')

                        <div class="mt-4">
                            <button type="submit" class="btn btn-primary">
                                <i class="bi bi-check-lg me-1" aria-hidden="true"></i> Atualizar Plano
                            </button>
                            <a href="{{ route('v2.associe-se.cms.plans') }}" class="btn btn-outline-secondary ms-2">Cancelar</a>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <div class="col-lg-4">
            {{-- Gallery Card --}}
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title mb-0">
                        <i class="bi bi-images me-1" aria-hidden="true"></i> Galeria de Mídias
                    </h5>
                </div>
                <div class="card-body">
                    @php
                        $galleryIds = $plan->gallery->pluck('gallery_media_id')->filter()->values()->toArray();
                        $galleryUrls = [];
                        foreach ($plan->gallery as $item) {
                            if ($item->galleryMedia) {
                                $galleryUrls[] = v2_storage_url($item->galleryMedia->file_path);
                            } elseif ($item->image) {
                                $galleryUrls[] = v2_storage_url($item->image);
                            }
                        }
                    @endphp

                    @include('v2-service-media::components.media-group-input', [
                        'name' => 'associese_gallery',
                        'label' => 'Imagens e documentos do plano',
                        'accept' => 'image/*,application/pdf',
                        'ownerModule' => 'associese',
                        'existingIds' => $galleryIds,
                        'existingUrls' => $galleryUrls,
                    ])

                    <div class="mt-3">
                        <button type="button" class="btn btn-sm btn-outline-primary" id="sync-gallery-btn"
                                onclick="syncGalleryMedias()">
                            <i class="bi bi-save me-1" aria-hidden="true"></i> Salvar Galeria
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
<script>
function syncGalleryMedias() {
    var btn = document.getElementById('sync-gallery-btn');
    btn.disabled = true;
    btn.innerHTML = '<span class="spinner-border spinner-border-sm me-1"></span> Salvando...';

    var ids = [];
    $('#group-ids-container-associese_gallery input').each(function() {
        ids.push($(this).val());
    });

    $.ajax({
        url: '{{ route("v2.associe-se.cms.plans.gallery.sync", ["id" => $plan->id]) }}',
        type: 'POST',
        data: {
            _token: '{{ csrf_token() }}',
            media_ids: ids
        },
        success: function(response) {
            btn.disabled = false;
            btn.innerHTML = '<i class="bi bi-save me-1"></i> Salvar Galeria';
            if (response.success) {
                var alertHtml = '<div class="alert alert-success alert-dismissible fade show small py-2 px-3 mt-2 d-flex align-items-center" role="alert">' +
                    '<i class="bi bi-check-circle-fill me-2"></i> Galeria salva com sucesso!' +
                    '<button type="button" class="btn-close ms-auto py-2" data-bs-dismiss="alert" aria-label="Fechar"></button>' +
                    '</div>';
                $('.card-body:first').prepend(alertHtml);
                setTimeout(function() { location.reload(); }, 1500);
            } else {
                var alertHtml = '<div class="alert alert-danger alert-dismissible fade show small py-2 px-3 mt-2" role="alert">' +
                    '<i class="bi bi-exclamation-triangle-fill me-2"></i> ' + (response.message || 'Erro ao salvar galeria') +
                    '<button type="button" class="btn-close ms-auto py-2" data-bs-dismiss="alert"></button>' +
                    '</div>';
                $('.card-body:first').prepend(alertHtml);
            }
        },
        error: function() {
            btn.disabled = false;
            btn.innerHTML = '<i class="bi bi-save me-1"></i> Salvar Galeria';
            var alertHtml = '<div class="alert alert-danger alert-dismissible fade show small py-2 px-3 mt-2" role="alert">' +
                '<i class="bi bi-exclamation-triangle-fill me-2"></i> Erro de comunicação ao salvar galeria.' +
                '<button type="button" class="btn-close ms-auto py-2" data-bs-dismiss="alert"></button>' +
                '</div>';
            $('.card-body:first').prepend(alertHtml);
        }
    });
}
</script>
@endpush