@extends('admin.template.layout')

@section('title', 'gerenciamento de vagas')
@section('conteudo')
    <div class="container-fluid px-4 py-2">
        <div class="d-flex flex-wrap justify-content-around align-items-center mb-4">
            <div>
                <h1 class="h3 mb-2 text-orange-dark">
                    Gerenciamento de Vagas
                </h1>
                <p class="text-muted mb-3">Visualize e gerencie todas as vagas cadastradas no sistema</p>
            </div>
            <div class="mb-3">
                <a href="{{ route('vacancies.create') }}" class="btn-orange-500 text-sm">
                    <i class="fas fa-plus-circle me-2"></i>
                    Nova Vaga
                </a>

            </div>
        </div>


        <div class="px-4 mb-3 d-md-none d-flex justify-content-center gap-2">

            <button class="btn-sm-orange-dark text-sm" type="button" data-bs-toggle="offcanvas"
                data-bs-target="#offcanvasVacancyFilters" aria-controls="offcanvasVacancyFilters">

                <i class="fa fa-filter"></i> filtros
            </button>

            <button class="btn-del-filter-vacancy btn-sm-brown-900 text-sm" type="button">
                <i class="fa-solid fa-rotate-left"></i> limpar filtros
            </button>

        </div>

        <form class="w-100 mb-2" action="{{ route('vacancies.index') }}" method="get" id="formSearchVacancy">

            <div class="offcanvas-md offcanvas-start" tabindex="-1" id="offcanvasVacancyFilters"
                aria-labelledby="offcanvasVacancyFiltersLabel">

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

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

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

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

                        <!-- Nome -->
                        <div class="col">
                            <label class="form-label">Nome</label>
                            <input type="text" name="vacancy" class="form-control borda-preta">
                        </div>

                        <!-- Empresa -->
                        <div class="col">
                            <label class="form-label">Empresa</label>
                            <input type="text" name="enterprise" class="form-control borda-preta">
                        </div>

                        <!-- Responsável -->
                        <div class="col">
                            <label class="form-label">Responsável</label>
                            <input type="text" name="responsible" class="form-control borda-preta">
                        </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="vacancyActive" value="">
                                    <input class="form-check-input" type="checkbox" name="vacancyActive" value="1"
                                        {{ request('vacancyActive', '1') == '1' ? 'checked' : '' }}>
                                    Vagas ativas
                                </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="myVacancy" value="">
                                    <input class="form-check-input" type="checkbox" name="myVacancy" value="1">
                                    Relacionadas à mim
                                </label>
                            </div>
                        </div>

                        <!-- LIMPAR (desktop) -->
                        <div class="col d-none d-md-flex align-items-center justify-content-center">
                            <button type="button" class="btn-del-filter-vacancy btn-sm-brown-900 text-sm">
                                <i class="fa-solid fa-rotate-left"></i> limpar filtros
                            </button>
                        </div>
                    </div>
                    <!-- BOTÃO MOBILE -->
                    <div class="px-4 mt-4 d-md-none text-center">
                        <button class="btn-sm-brown-900 text-sm" type="button" data-bs-dismiss="offcanvas"
                            data-bs-target="#offcanvasVacancyFilters">
                            <i class="fa-solid fa-magnifying-glass"></i> pesquisar
                        </button>
                    </div>
                </div>
            </div>
        </form>


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

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

        </div>
    </div>
@endsection


<script scoped>
    document.addEventListener('DOMContentLoaded', function() {
        const form = document.getElementById('formSearchVacancy');
        const result = document.getElementById('vacancies-result')
        const clearButtons = document.querySelectorAll('.btn-del-filter-vacancy');

        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 = '';
                });
                // atualiza tela
                search();
                // opcional: fechar offcanvas
                const offcanvasEl = document.getElementById('offcanvasVacancyFilters');
                const offcanvas = bootstrap.Offcanvas.getInstance(offcanvasEl);
                if (offcanvas) offcanvas.hide();
            });

        });

        // EXECUTA AO CARREGAR
        toggleClearButtons();
    });
</script>