@extends('v2-cms::layouts.app', ['title' => 'Membros da Diretoria'])

@section('page-breadcrumbs')
    @include('v2-cms::partials.breadcrumb', ['items' => [
        ['label' => 'Membros da Diretoria'],
    ]])
@endsection

@section('page-actions')
    @v2can('SobreNos', 'write')
    <button type="button" class="btn btn-outline-secondary btn-sm" data-bs-toggle="modal" data-bs-target="#bienniumModal">
        <i class="bi bi-calendar-range me-1"></i> Configurar Biênios
    </button>
    <a href="{{ route('v2.sobrenos.cms.members.create') }}" class="btn btn-primary btn-sm">
        <i class="bi bi-plus-lg me-1"></i> Novo Membro
    </a>
    @endv2can
@endsection

@section('content')
<div class="card">
    <div class="card-body">
        @if(session('created_item'))
        <div class="alert alert-success alert-dismissible fade show" role="alert">
            <i class="bi bi-check-circle me-1"></i>
            <strong>{{ session('created_item')['type'] }}</strong>
            &ldquo;{{ session('created_item')['title'] }}&rdquo; criado com sucesso.
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
        @endif

        @if($members->count() > 0)
        <div class="table-responsive">
            <table class="table table-hover align-middle" aria-label="Membros">
                <thead class="table-light">
                    <tr>
                        <th>Foto</th>
                        <th>Nome</th>
                        <th>Cargo</th>
                        <th>Biênio</th>
                        <th>Ativo</th>
                        <th>Ordem</th>
                        <th width="160">Ações</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($members as $member)
                    <tr>
                        <td>
                            @php $photoFullUrl = $member->getPhotoFullUrl(); @endphp
                            @if($photoFullUrl)
                            <img src="{{ $photoFullUrl }}" alt="{{ $member->name }}"
                                 style="width:40px;height:40px;object-fit:cover;border-radius:50%;">
                            @else
                            <div style="width:40px;height:40px;border-radius:50%;background:#e9ecef;display:flex;align-items:center;justify-content:center;">
                                <i class="bi bi-person text-muted"></i>
                            </div>
                            @endif
                        </td>
                        <td class="fw-semibold">{{ $member->name }}</td>
                        <td>{{ $member->position }}</td>
                        <td>
                            @if($member->biennium)
                            <span class="badge bg-info">{{ $member->biennium->label }}</span>
                            @else
                            <span class="text-muted">—</span>
                            @endif
                        </td>
                        <td>
                            @include('v2-cms::partials.status-badge', ['active' => $member->is_active])
                        </td>
                        <td>{{ $member->sort_order }}</td>
                        <td>
                            @v2can('SobreNos', 'write')
                            <a href="{{ route('v2.sobrenos.cms.members.edit', $member->id) }}"
                               class="btn btn-sm btn-outline-primary">
                                <i class="bi bi-pencil"></i>
                            </a>
                            <form action="{{ route('v2.sobrenos.cms.members.destroy', $member->id) }}"
                                  method="POST" class="d-inline"
                                  onsubmit="return confirm('Remover {{ $member->name }}?');">
                                {{ csrf_field() }}
                                {{ method_field('DELETE') }}
                                <button type="submit" class="btn btn-sm btn-outline-danger" aria-label="Excluir">
                                    <i class="bi bi-trash"></i>
                                </button>
                            </form>
                            @endv2can
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>

        <div class="d-flex justify-content-center mt-3">
            {{ $members->appends(request()->query())->links('v2-cms::partials.pagination') }}
        </div>
        @else
        <div class="text-center py-5">
            <i class="bi bi-people display-4 text-muted mb-3 d-block"></i>
            <h6 class="text-muted">Nenhum membro cadastrado</h6>
            <p class="text-muted small">Clique em "Novo Membro" para adicionar o primeiro.</p>
        </div>
        @endif
    </div>
</div>

{{-- Modal de Biênios — renderizado via stack no final do body --}}
@push('modals')
<div class="modal fade" id="bienniumModal" tabindex="-1" role="dialog" aria-labelledby="bienniumModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="bienniumModalLabel">
                    <i class="bi bi-calendar-range me-2"></i> Gerenciar Biênios
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Fechar"></button>
            </div>
            <div class="modal-body">
                <div class="mb-3">
                    <label class="form-label fw-semibold">Biênios cadastrados</label>
                    @if($bienniums->count() > 0)
                    <div class="table-responsive">
                        <table class="table table-sm table-bordered" aria-label="Membros">
                            <thead class="table-light">
                                <tr>
                                    <th>Label</th>
                                    <th>Ano Início</th>
                                    <th>Ano Fim</th>
                                    <th>Atual</th>
                                    <th width="120">Ações</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($bienniums as $b)
                                <tr>
                                    <td>{{ $b->label }}</td>
                                    <td>{{ $b->start_year }}</td>
                                    <td>{{ $b->end_year }}</td>
                                    <td>
                                        @include('v2-cms::partials.status-badge', ['active' => $b->is_current])
                                    </td>
                                    <td>
                                        @v2can('SobreNos', 'write')
                                        <button type="button" class="btn btn-sm btn-outline-primary"
                                                onclick="editBiennium('{{ $b->id }}', '{{ $b->label }}', '{{ $b->start_year }}', {{ $b->is_current ? 'true' : 'false' }})"
                                                title="Editar">
                                            <i class="bi bi-pencil"></i>
                                        </button>
                                        <form action="{{ route('v2.sobrenos.cms.bienniums.destroy', $b->id) }}"
                                              method="POST" class="d-inline"
                                              onsubmit="return confirm('Remover biênio {{ $b->label }}?');">
                                            {{ csrf_field() }}
                                            {{ method_field('DELETE') }}
                                            <button type="submit" class="btn btn-sm btn-outline-danger" title="Excluir">
                                                <i class="bi bi-trash"></i>
                                            </button>
                                        </form>
                                        @endv2can
                                    </td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                    @else
                    <p class="text-muted small mb-0">Nenhum biênio cadastrado ainda.</p>
                    @endif
                </div>

                @v2can('SobreNos', 'write')
                <hr>
                <form action="{{ route('v2.sobrenos.cms.bienniums.store') }}" method="POST" id="bienniumForm">
                    {{ csrf_field() }}
                    <input type="hidden" name="biennium_id" id="biennium_id" value="">
                    <input type="hidden" name="_method" id="biennium_method" value="POST">

                    <label class="form-label fw-semibold" id="bienniumFormLabel">Novo Biênio</label>
                    <div class="row g-2">
                        <div class="col-md-5">
                            <input type="text" name="label" id="biennium_label" class="form-control form-control-sm"
                                   placeholder="Ex: Biênio 2026-2027" required>
                        </div>
                        <div class="col-md-3">
                            <input type="number" name="start_year" id="biennium_start_year" class="form-control form-control-sm"
                                   placeholder="Ano início" min="1900" max="2100" required>
                        </div>
                        <div class="col-md-2">
                            <div class="form-check mt-2">
                                <input type="checkbox" name="is_current" id="biennium_is_current" class="form-check-input" value="1">
                                <label class="form-check-label small" for="biennium_is_current">Atual</label>
                            </div>
                        </div>
                        <div class="col-md-2 d-flex gap-1">
                            <button type="submit" class="btn btn-sm btn-primary" id="bienniumSubmitBtn">
                                <i class="bi bi-check-lg"></i> Salvar
                            </button>
                            <button type="button" class="btn btn-sm btn-outline-secondary d-none" id="bienniumCancelBtn"
                                    onclick="resetBienniumForm()" aria-label="Cancelar">
                                <i class="bi bi-x-lg"></i>
                            </button>
                        </div>
                    </div>
                </form>
                @endv2can
            </div>
        </div>
    </div>
</div>
@endpush
@endsection

@push('scripts')
<script>
    function editBiennium(id, label, startYear, isCurrent) {
        document.getElementById('biennium_id').value = id;
        document.getElementById('biennium_label').value = label;
        document.getElementById('biennium_start_year').value = startYear;
        document.getElementById('biennium_is_current').checked = isCurrent;

        var form = document.getElementById('bienniumForm');
        form.action = '{{ url("cms/institucional/sobre-nos/bienniums/update") }}/' + id;
        document.getElementById('biennium_method').value = 'PUT';
        document.getElementById('bienniumFormLabel').textContent = 'Editar Biênio';
        document.getElementById('bienniumSubmitBtn').innerHTML = '<i class="bi bi-check-lg"></i> Atualizar';
        document.getElementById('bienniumCancelBtn').classList.remove('d-none');
    }

    function resetBienniumForm() {
        document.getElementById('biennium_id').value = '';
        document.getElementById('biennium_label').value = '';
        document.getElementById('biennium_start_year').value = '';
        document.getElementById('biennium_is_current').checked = false;

        var form = document.getElementById('bienniumForm');
        form.action = '{{ route("v2.sobrenos.cms.bienniums.store") }}';
        document.getElementById('biennium_method').value = 'POST';
        document.getElementById('bienniumFormLabel').textContent = 'Novo Biênio';
        document.getElementById('bienniumSubmitBtn').innerHTML = '<i class="bi bi-check-lg"></i> Salvar';
        document.getElementById('bienniumCancelBtn').classList.add('d-none');
    }
</script>
@endpush