@extends('admin.template.layout')


@section('title', 'home')
@section('conteudo')

    <div class="container-fluid px-4 ">
        <div class="row justify-content-center">
            <div class="col-12" style="max-width: 1400px;">
                {{-- Cabeçalho com Boas-vindas --}}
                <div class="d-sm-flex align-items-center justify-content-between mb-4">
                    <h1 class="h3 mb-0 text-gray-800">Bem vindo, {{ Auth::user()->first_name }}</h1>
                </div>

                {{-- Botão mobile FILTROS --}}
                <div class="px-4 mb-3 d-md-none d-flex flex-wrap align-items-center justify-content-center gap-2 w-100">
                    <button class="btn-sm-orange-dark text-sm" type="button" data-bs-toggle="offcanvas"
                        data-bs-target="#offcanvasAdminFilters" aria-controls="offcanvasAdminFilters">

                        <i class="fa fa-filter"></i> filtros
                    </button>
                    <div class="">
                        <a class="btn-delete-filters btn-sm-brown-900 text-sm" type="button"><i
                                class="fa-solid fa-rotate-left"></i>
                            limpar filtros</a>
                    </div>
                </div>

                <div class="shadow-lg px-4 py-3 mb-3">
                    <form id="form-filterHome-admin" action="{{ route('admin.home') }}" method="get">

                        <div class="offcanvas-md offcanvas-start" tabindex="-1" id="offcanvasAdminFilters"
                            aria-labelledby="offcanvasAdminFiltersLabel">

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

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

                            <div class="offcanvas-body">

                                <div class="row row-cols-1 row-cols-md-3 row-cols-lg-4 g-3 px-4">
                                    <div class="col">
                                        <label class="form-label"><strong>Nome da vaga</strong></label>
                                        <input type="text" name="vacancy" class="form-control"
                                            placeholder="Digite o nome da vaga...">
                                    </div>

                                    {{-- <div class="col">
                                        <label class="form-label"><strong>Nome do cargo</strong></label>
                                        <input type="text" name="position" class="form-control"
                                            placeholder="Digite o nome do cargo...">
                                    </div> --}}

                                    <div class="col">
                                        <label class="form-label"><strong>Nome do candidato</strong></label>
                                        <input type="text" name="candidate" class="form-control"
                                            placeholder="Digite o nome do candidato...">
                                    </div>

                                    <div class="col">
                                        <label class="form-label"><strong>Empresa</strong></label>
                                        <input type="text" name="enterprise" class="form-control"
                                            placeholder="Digite o nome da empresa...">
                                    </div>

                                    {{-- <div class="col">
                                        <label class="form-label"><strong>Modalidade</strong></label>
                                        <select class="form-select text-center" name="vacancyModel">
                                            <option value="">Selecione...</option>
                                            @foreach ($vacancyModel as $value => $label)
                                                <option value="{{ $value }}">{{ $label }}</option>
                                            @endforeach
                                        </select>
                                    </div> --}}

                                    <div class="col">
                                        <label class="form-label"><strong>Tipo da vaga</strong></label>
                                        <select class="form-select text-center" name="hiringType">
                                            <option value="">Selecione...</option>
                                            @foreach ($hiringTypes as $value)
                                                <option value="{{ $value->id }}">{{ $value->name }}</option>
                                            @endforeach
                                        </select>
                                    </div>

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

                                    <div class="col d-flex align-items-center">
                                        <div class="form-check mt-3">
                                            <label class="form-check-label w-100">
                                                <input type="hidden" name="vacancyPcd" value="">
                                                <input class="form-check-input" type="checkbox" name="vacancyPcd"
                                                    value="1">

                                                PCD (Pessoas com Deficiência)
                                            </label>
                                        </div>
                                    </div>

                                    <div class="col d-flex align-items-center">
                                        <div class="form-check mt-3">
                                            <label class="form-check-label w-100">
                                                <input type="hidden" name="responsible" value="">
                                                <input class="form-check-input" type="checkbox" name="responsible"
                                                    value="1">
                                                    Meus processos
                                            </label>
                                        </div>
                                    </div>

                                    <div class="col d-none d-md-flex align-items-center justify-content-center ">
                                        <div class="">
                                            <label class="form-label"></label>
                                            <a class="btn-delete-filters btn-sm-orange-dark text-sm" type="button"><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="#offcanvasAdminFilters"><i class="fa-solid fa-magnifying-glass"></i>
                                        pesquisar</button>
                                </div>

                            </div>
                        </div>

                    </form>
                </div>

                {{-- Card Principal --}}
                <div class="card border-0 shadow-lg">
                    <div class="card-header py-3 px-4">
                        <div class="row align-items-center">
                            <div class="col-md-6">
                                <h5 class="mb-0 text-orange-dark">
                                    <i class="fas fa-folder me-2 "></i>Processos
                                </h5>

                            </div>
                            <div class="col-md-6">
                                <div class="d-flex justify-content-md-end gap-2 mt-3 mt-md-0">
                                    <button class="btn-sm-brown-900 text-sm" data-bs-target="#modalCreateProcess"
                                        data-bs-toggle="modal">
                                        <i class="fas fa-plus-circle me-2"></i>
                                        Novo Processo
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="card-body">
                        <div id="result-filterHome">
                            @include('admin.home.partials.result')
                        </div>

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


    {{-- Modal de Criação de Processo --}}
    <div class="modal fade" id="modalCreateProcess" aria-hidden="true" tabindex="-1">
        <div class="modal-dialog modal-xl ">
            <div class="modal-content border-0 shadow">
                <div class="modal-header bg-light">
                    <h5 class="modal-title">
                        <i class="fas fa-plus-circle text-orange-dark me-2"></i>
                        Adicionar processo externo
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    @component('admin.home._components.form_create_process', compact(['candidates', 'vacancies', 'categories']))
                    @endcomponent
                </div>
            </div>
        </div>
    </div>

@endsection


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

        const form = document.getElementById('form-filterHome-admin');
        const result = document.getElementById('result-filterHome');
        const clearButtons = document.querySelectorAll('.btn-delete-filters');

        function toggleClearButtons() {
            let hasValue = false;
            const inputs = form.querySelectorAll('input, select');

            inputs.forEach(input => {
                
                if (input.type === 'checkbox') {
                    if (input.checked) hasValue = true;
                } else if (input.value && input.value.trim() !== '') {
                    hasValue = true;  
                }
            });
            clearButtons.forEach(button => {
                button.classList.toggle('d-none', !hasValue);
            });
        }
        function search() {

            toggleClearButtons();

            let formData = new FormData(form);

            fetch(
                    form.action + '?' + new URLSearchParams(formData), {
                        headers: {
                            'X-Requested-With': 'XMLHttpRequest'
                        }
                    }
                )
                .then(response => response.text())
                .then(html => {

                    result.innerHTML = html;

                });

        }

        form.querySelectorAll("input").forEach(input => {

            input.addEventListener("input", function() {

                clearTimeout(input.dataset.timeout);

                input.dataset.timeout = setTimeout(() => {
                    search();
                }, 200);
            });

        });

        form.querySelectorAll("select").forEach(select => {

            select.addEventListener("change", function() {

                search();

            });

        });

        clearButtons.forEach(button => {

            button.addEventListener('click', function(e) {
                e.preventDefault();
                // limpa inputs
                form.querySelectorAll('input').forEach(input => {
                    if (input.type === 'checkbox') {
                        input.checked = false;
                    } else {
                        input.value = '';
                    }
                });
                // limpa selects
                form.querySelectorAll('select').forEach(select => {
                    select.value = '';
                });
                // limpa select2
                $('.select2-filterHome').val(null).trigger('change');
                // atualiza tela
                search();
                // opcional: fechar offcanvas
                const offcanvasEl = document.getElementById('offcanvasAdminFilters');
                const offcanvas = bootstrap.Offcanvas.getInstance(offcanvasEl);
                if (offcanvas) offcanvas.hide();
            });

        });

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

            $('.select2-filterHome').select2({
                dropdownParent: $('#offcanvasAdminFilters'),
                width: '100%',
                allowClear: true,
                placeholder: 'Selecione ou digite'
            });

            // seu evento continua funcionando
            $('.select2-filterHome').on('change', search);

        });

        // EXECUTA AO CARREGAR
        toggleClearButtons();

    });
</script>