@extends('admin.template.layout')

@section('title', 'gerenciar candidatos')

@section('conteudo')

    <div class="container-fluid px-4 py-5">
        <div class="d-flex flex-wrap justify-content-between align-items-center mb-4">
            <div>
                <h1 class="h3 mb-2 fw-bold text-orange-dark">
                    Gerenciamento de Candidatos
                </h1>
                <p class="text-muted mb-0">Vaga: {{ $vacancyListed->name }}</p>
            </div>
            <div>
                <a href="{{ route('vacancies.index') }}" class="btn btn-light fw-semibold">
                    <i class="fas fa-folder me-2"></i>
                    Ver Vagas
                </a>

                <a href="{{ route('admin.home') }}" class="btn btn-light fw-semibold">
                    <i class="fas fa-house me-2"></i>
                    home
                </a>
            </div>
        </div>

        <div class="px-4 mb-3 d-md-none d-flex flex-wrap align-items-center justify-content-center gap-2 w-100">
            <div>
                <button class="btn-sm-orange-dark text-sm" type="button" data-bs-toggle="offcanvas"
                    data-bs-target="#offcanvasProcesses" aria-controls="offcanvasProcesses">
                    <i class="fa fa-filter"></i> filtros
                </button>
            </div>

            <div class="btn-limpar-filtros">
                <a class="btn-sm-brown-900 text-sm" href="{{ url()->current() }}">
                    <i class="fa-solid fa-rotate-left"></i> limpar filtros
                </a>
            </div>
        </div>

        <div class="shadow-lg px-4 py-3">
            <form action="{{ $formActionRoute }}" method="get" id="formProcesses">

                <div class="offcanvas-md offcanvas-start" tabindex="-1" id="offcanvasProcesses"
                    aria-labelledby="offcanvasProcessesLabel">

                    <!-- HEADER -->
                    <div class="offcanvas-header border-bottom">
                        <h5 class="offcanvas-title" id="offcanvasProcessesLabel">
                            <i class="fa fa-filter"></i> Filtros
                        </h5>

                        <button type="button" class="btn-close" data-bs-dismiss="offcanvas"
                            data-bs-target="#offcanvasProcesses"></button>
                    </div>

                    <!-- BODY -->
                    <div class="offcanvas-body">

                        <div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-3 mb-3 px-4 w-100">

                            <div class="col">
                                <label class="form-label">Candidato:</label>
                                <input type="text" name="candidate" class="form-control borda-preta"
                                    placeholder="Digite o nome do candidato">
                            </div>

                            <!-- RESPONSAVEL -->
                            <div class="col">
                                <label class="form-label">Responsável:</label>
                                <input type="text" name="responsible" class="form-control borda-preta"
                                    placeholder="Digite o nome do responsável">
                            </div>

                            <!-- CIDADE -->
                            <div class="col">
                                <label class="form-label">Cidade:</label>
                                <input type="text" name="city" class="form-control borda-preta"
                                    placeholder="Digite a cidade">
                            </div>

                            <!-- STATUS -->
                            <div class="col">
                                <label class="form-label">Status:</label>
                                <select name="status" class=" select2">
                                    <option value="">Selecione...</option>
                                    @foreach ($status as $value)
                                        <option value="{{ $value->id }}">
                                            {{ $value->name }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>

                            <!-- LIMPAR (desktop) -->
                            <div class="col d-none d-md-flex align-items-center justify-content-center ">
                                <div class="btn-danger ">
                                    <label class="form-label"></label>
                                    <a class="btn-sm-orange-dark text-sm " href="{{ url()->current() }}"><i
                                            class="fa-solid fa-rotate-left"></i> limpar filtros</a>
                                </div>
                            </div>

                        </div>

                        <!-- BOTÃO MOBILE -->
                        <div class="px-4 mt-3 d-md-none text-center">
                            <button class="btn-sm-brown-900 text-sm" type="button" data-bs-dismiss="offcanvas"
                                data-bs-target="#offcanvasProcesses"><i class="fa-solid fa-magnifying-glass"></i>
                                pesquisar</button>
                        </div>

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


        <div class="card border-0 shadow-lg rounded-3">
            <div class="card-body p-4">

                <div id="processes-result">
                    @include('admin.manange_candidates.partials.result')
                </div>


            </div>
        </div>
        @foreach ($candidates as $value)
            {{-- Modal para Agendar Entrevista --}}
            <div class="modal fade" id="agendar_entrevista-{{ $value->id }}" data-bs-backdrop="static"
                data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
                <div class="modal-dialog modal-lg">
                    <div class="modal-content">
                        @include('admin.manange_candidates.partials.modal_scheduling')
                    </div>
                </div>
            </div>

            {{-- Modal para colocar candidato sob-avaliação após entrevista --}}

            <div class="modal fade" id="inEvaluation-{{ $value->id }}" data-bs-backdrop="static" data-bs-keyboard="false"
                tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
                <div class="modal-dialog modal-lg">
                    <div class="modal-content">
                        @include('admin.manange_candidates.partials.modal_in_evaluation')
                    </div>
                </div>
            </div>

            {{-- Modal para Confirmar pré-aprovação de Candidato --}}
            <div class="modal fade" id="pre-approved-{{ $value->id }}" data-bs-backdrop="static"
                data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
                <div class="modal-dialog modal-lg">
                    <div class="modal-content">
                        @include('admin.manange_candidates.partials.modal_pre_approved')
                    </div>
                </div>
            </div>

            {{-- Modal para encerrar processo por falhar na entrevista --}}

            <div class="modal fade" id="failed_confirm-{{ $value->id }}" data-bs-backdrop="static"
                data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
                <div class="modal-dialog modal-lg">
                    <div class="modal-content">
                        @include('admin.manange_candidates.partials.modal_failed_interview')
                    </div>
                </div>
            </div>

            {{-- Modal para Confirmar aprovacao de candidato --}}

            <div class="modal fade" id="confirm-aprov-{{ $value->id }}" data-bs-backdrop="static"
                data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
                <div class="modal-dialog modal-lg">
                    <div class="modal-content">
                        @include('admin.manange_candidates.partials.modal_approved')
                    </div>
                </div>
            </div>
            {{-- Modal para Confirmar Encerramento do Processo --}}
            <div class="modal fade" id="close-{{ $value->id }}" tabindex="-1" aria-labelledby="staticBackdropLabel"
                aria-hidden="true">
                <div class="modal-dialog modal-lg">
                    <div class="modal-content">
                        @include('admin.manange_candidates.partials.modal_finish')
                    </div>
                </div>
            </div>
        @endforeach
    </div>
@endsection

<script>
    document.addEventListener('DOMContentLoaded', function() {

        const formProcesses = document.getElementById('formProcesses');
        const resultTableProcesses = document.getElementById('processes-result')


        function handleFilter() {
            clearTimeout(this.dataset.timeout);

            this.dataset.timeout = setTimeout(() => {

                const params = new URLSearchParams(new FormData(formProcesses));

                fetch(formProcesses.action + '?' + params.toString(), {
                        headers: {
                            'X-Requested-With': 'XMLHttpRequest'
                        }
                    })
                    .then(r => r.text())
                    .then(html => {
                        resultTableProcesses.innerHTML = html;
                    });

            }, 0); // pequeno delay para não disparar muitas requisições
        }

        // INPUTS TEXTO
        $('input[type="text"]').on('input', handleFilter);

        // SELECT2
        $(document).ready(function() {

            $('.select2').select2({
                dropdownParent: $('#offcanvasProcesses'),
                width: '100%',
                allowClear: true,
                placeholder: 'Selecione...'
            });

            // seu evento continua funcionando
            $('.select2').on('change', handleFilter);

        });




    });
</script>