@extends('layouts.app')

@section('conteudo')

<style>
    .campos-visiveis {
        display: inline-block;
        margin: 25px;
    }

    .table-responsive {
        overflow-x: auto;
    }

    .table th, .table td {
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        max-width: 150px;
        font-size: 12px;
        padding: 5px;
    }

    .table th {
        background-color: #f2f2f2;
    }

    .table td {
        word-wrap: break-word;
    }

    .footer {
        position: fixed;
        bottom: 0;
        width: 100%;
        background-color: #f8f9fa;
        text-align: center;
        padding: 10px 0;
    }
</style>

<div class="content content-full">
    <h1>Relatório de Responsáveis</h1>

    <br><br>
    <div class="block-options">
        <form id="printForm" method="post" action="/imprimir_responsaveis_relatorio">
            @csrf
            <input type="hidden" name="projeto_id" value="{{ $request->input('projeto_id') }}">
            <input type="hidden" name="funcionario_id" value="{{ $request->input('funcionario_id') }}">
            <input type="hidden" name="turma_id" value="{{ $request->input('turma_id') }}">
            <input type="hidden" name="data_inicial" value="{{ $request->input('data_inicial') }}">
            <input type="hidden" name="data_final" value="{{ $request->input('data_final') }}">
            <input type="hidden" name="ano" value="{{ $request->input('ano') }}">
            <input type="hidden" name="page" value="{{ $responsaveis->currentPage() }}">
            <button type="submit" class="btn-block-option">
                <i class="si si-printer me-1"></i> Imprimir Relatório
            </button>
        </form>
    </div>

    <form action="{{ route('relatorio_responsaveis') }}" method="get">
        @csrf
        <div class="row mb-4">
            <div class="col-12 col-sm-3 col-lg-3" style="display: none; margin-top:3%;">
                <label class="form-label" for="example-select">Organização</label>
                <select class="form-select" id="select1" name="organizacao_id">
                    @foreach($options1 as $item)
                    <option value="{{$item->id}}" {{ request('organizacao_id') == $item->id ? 'selected' : '' }}>
                        {{$item->nome}}
                    </option>
                    @endforeach
                </select>
            </div>
            <div class="col-6">
                <label for="projeto">Projeto</label>
                <select name="projeto_id" id="select2" class="form-select">
                    <option value="">Todos</option>
                    @foreach ($projetos as $projeto)
                        <option value="{{ $projeto->id }}" {{ request('projeto_id') == $projeto->id ? 'selected' : '' }}>
                            {{ $projeto->descricao }}
                        </option>
                    @endforeach
                </select>
            </div>
            <div class="col-6">
                <label for="prestador">Prestador</label>
                <select name="funcionario_id" id="select4" class="form-select">
                    <option value="">Todos</option>
                    @foreach($funcionarios as $funcionario)
                        <option value="{{ $funcionario->id }}" {{ request('funcionario_id') == $funcionario->id ? 'selected' : '' }}>
                            {{ $funcionario->nome_completo }}
                        </option>
                    @endforeach
                </select>
            </div>
            <div class="col-6">
                <label for="turma">Turma</label>
                <select name="turma_id" id="select3" class="form-select">
                    <option value="">Todas</option>
                    @foreach ($turmas as $turma)
                        <option value="{{ $turma->id }}" {{ request('turma_id') == $turma->id ? 'selected' : '' }}>
                            {{ $turma->descricao }}
                        </option>
                    @endforeach
                </select>
            </div>
            <div class="col-6">
                <label for="data_inicial">Data Inicial</label>
                <input type="date" name="data_inicial" id="data_inicial" class="form-control" value="{{ request('data_inicial') }}">
            </div>
            <div class="col-6">
                <label for="data_final">Data Final</label>
                <input type="date" name="data_final" id="data_final" class="form-control" value="{{ request('data_final') }}">
            </div>
            <div class="col-6">
                <label for="ano">Ano</label>
                <input type="number" name="ano" id="ano" class="form-control" value="{{ request('ano') }}">
            </div>
        </div>
        <button type="submit" class="btn btn-primary">Filtrar</button>
        <a href="/relatorio_responsaveis" class="btn btn-danger">
            <i class="bi bi-x-circle"></i> Remover Filtros
        </a>
    </form>

    <div class="table-responsive mt-4">
        <table class="table table-bordered">
            <thead class="bg-body">
                <tr>
                    <th>Beneficiário</th>
                    <th>Nome do Responsável</th>
                    <th>CPF Responsável</th>
                    <th>RG Responsável</th>
                    <th>Telefone/WhatsApp</th>
                    <th>Pai do Beneficiário</th>
                    <th>Mãe do Beneficiário</th>
                </tr>
            </thead>
            <tbody>
                @foreach($responsaveis as $responsavel)
                <tr>
                    <td>{{ $responsavel->nome ?? '---' }}</td>
                    <td>{{ $responsavel->responsavel_para_tirar1_nome }}</td>
                    <td>{{ $responsavel->cpf_responsavel_para_legal }}</td>
                    <td>{{ $responsavel->rg }}</td>
                    <td>{{ $responsavel->telefone_emergencia }}</td>
                    <td>{{ $responsavel->pai ?? '---' }}</td>
                    <td>{{ $responsavel->mae ?? '---' }}</td>
                </tr>
                @endforeach
                <tr>
                    <td colspan="6" class="fw-bold text-uppercase text-end bg-body-light">Total Por Página</td>
                    <td class="fw-bold text-end bg-body-light">{{ $responsaveis->count() }}</td>
                </tr>
                <tr>
                    <td colspan="6" class="fw-bold text-uppercase text-end bg-body-light">Total Geral</td>
                    <td class="fw-bold text-end bg-body-light">{{ $responsaveis->total() }}</td>
                </tr>
            </tbody>
        </table>
    </div>
    <div class="footer">
        <p class="text-muted">Relatório de responsáveis da AMIS.</p>
    </div>
</div>

{{ $responsaveis->appends(request()->query())->links() }}

@include('incl.linha_filtros_selects')

<script>
    window.addEventListener('load', function() {
        const organizacaoId = document.querySelector('#select1').value;
        const projetoId = document.querySelector('#select2').value;
        const funcionarioId = document.querySelector('#select4').value;
        const turmaId = document.querySelector('#select3').value;

        // console.log(turmaId)

        // Popular o select2 (Projeto) com base na organização selecionada
        if (organizacaoId) {
            fetch('{{ route('selects.filter_projetos_por_organizacao') }}', {
                method: 'POST',
                body: JSON.stringify({
                    _token: '{{ csrf_token() }}',
                    value: organizacaoId
                }),
                headers: {
                    'Content-Type': 'application/json'
                }
            })
            .then(response => response.json())
            .then(data => {
                let select2 = document.querySelector('#select2');
                select2.innerHTML = '<option value="">Todos</option>';

                data.forEach(function(item) {
                    let option = document.createElement('option');
                    option.value = item.id;
                    option.text = item.descricao;
                    select2.appendChild(option);
                });

                if (projetoId) {
                    select2.value = projetoId;
                }
            });
        }

        // Popular o select4 (Funcionário) com base no projeto selecionado
        if (projetoId) {
            fetch('{{ route('selects.filter_funcionarios_por_projeto') }}', {
                method: 'POST',
                body: JSON.stringify({
                    _token: '{{ csrf_token() }}',
                    value: projetoId
                }),
                headers: {
                    'Content-Type': 'application/json'
                }
            })
            .then(response => response.json())
            .then(data => {
                let select4 = document.querySelector('#select4');
                select4.innerHTML = '<option value="">Todos</option>';

                data.forEach(function(item) {
                    let option = document.createElement('option');
                    option.value = item.id;
                    option.text = item.nome_completo;
                    select4.appendChild(option);
                });

                if (funcionarioId) {
                    select4.value = funcionarioId;
                }
            });
        }

        // Popular o select3 (Turma) com base no funcionário selecionado
        if (funcionarioId) {
            fetch('{{ route('selects.filter_turmas_por_funcionario') }}', {
                method: 'POST',
                body: JSON.stringify({
                    _token: '{{ csrf_token() }}',
                    value: funcionarioId
                }),
                headers: {
                    'Content-Type': 'application/json'
                }
            })
            .then(response => response.json())
            .then(data => {
                let select3 = document.querySelector('#select3');
                select3.innerHTML = '<option value="">Todas</option>';

                data.forEach(function(item) {
                    let option = document.createElement('option');
                    option.value = item.id;
                    option.text = item.descricao;
                    select3.appendChild(option);
                });

                if (turmaId) {
                    select3.value = turmaId;
                }
            });
        }
    });
</script>

@endsection