@extends('admin.template.layout')

@section('title', 'vagas')

@section('conteudo')

    @if (Auth::check())
        @php
            $userRoles = Auth::user()->roles;
            $activeRole = session('active_role', $userRoles->first()->name ?? null);
        @endphp
    @endif

    @if ($banner)
        <div id="carouselExample" class="carousel slide mb-4" data-bs-ride="carousel">
            <div class="carousel-inner">

                @foreach ($banner as $index => $item)
                    @if ($item->isBanner)
                        <div class="carousel-item {{ $index === 0 ? 'active' : '' }}">
                            <img src="{{ asset('storage/vacancy/banner/' . $item->image) }}" class="d-block w-100"
                                alt="{{ $item->name }}">
                        </div>
                    @endif
                @endforeach

            </div>
            <button class="carousel-control-prev" type="button" data-bs-target="#carouselExample" data-bs-slide="prev">
                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                <span class="visually-hidden">Anterior</span>
            </button>
            <button class="carousel-control-next" type="button" data-bs-target="#carouselExample" data-bs-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="visually-hidden">Próximo</span>
            </button>

        </div>
    @endif

    <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="#offcanvasFiltros" aria-controls="offcanvasFiltros">
                <i class="fa fa-filter"></i> filtros
            </button>
        </div>
        <div class="">
            <a class="btn-limpar-filtros btn-sm-brown-900 text-sm" type="button"><i class="fa-solid fa-rotate-left"></i>
                limpar filtros</a>
        </div>

    </div>

    <form id="form-search-principal" action="{{ route('dashboard') }}" method="get">

        <div class="offcanvas-md offcanvas-start" tabindex="-1" id="offcanvasFiltros"
            aria-labelledby="offcanvasFiltrosLabel">

            <div class="offcanvas-header border-bottom">
                <h5 class="offcanvas-title" id="offcanvasFiltrosLabel"><i class="fa fa-filter"></i> Filtros</h5>
                <button type="button" class="btn-close" data-bs-dismiss="offcanvas"
                    data-bs-target="#offcanvasFiltros"></button>
            </div>

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

                    <div class="col">
                        <label class="form-label">Vaga</label>
                        <div class="input-icon">
                            <i class="fa fa-search"></i>
                            <input type="text" name="vacancy" class="form-control borda-preta"
                                placeholder="Digite o nome da vaga...">
                        </div>
                    </div>

                    <div class="col">
                        <label class="form-label">Cidade</label>
                        <div class="input-icon">
                            <i class="fa fa-map-marker-alt"></i>
                            <input type="text" name="city" class="form-control borda-preta"
                                placeholder="Digite a cidade...">
                        </div>
                    </div>

                    <div class="col">
                        <label class="form-label">Empresa</label>
                        <div class="input-icon">
                            <i class="fa fa-building"></i>
                            <input type="text" name="company" class="form-control borda-preta"
                                placeholder="Digite o nome da empresa...">
                        </div>
                    </div>

                    <div class="col">
                        <label class="form-label">Tipo da vaga</label>
                        <select class="form-select select2-dashboard" 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">Modalidade</label>
                        <select class="form-select select2-dashboard" name="vacancyModel">
                            <option value="">Selecione...</option>
                            @foreach ($vacancyModel as $value => $label)
                                <option value="{{ $value }}">
                                    {{ $label }}
                                </option>
                            @endforeach
                        </select>
                    </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-limpar-filtros btn-sm-orange-dark text-sm" type="button"><i
                                    class="fa-solid fa-rotate-left"></i> limpar filtros</a>
                        </div>
                    </div>



                </div>
                <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="#offcanvasFiltros"><i class="fa-solid fa-magnifying-glass"></i> pesquisar</button>
                </div>
            </div>
        </div>
    </form>

    <div class="container mt-5" style="max-width: 1300px; min-height: 100vh;">
        <div class="container text-center">


            <div id="result-dashboard">

                @include('partials.result')
            </div>

        </div>
    </div>



@endsection

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

        const form = document.getElementById('form-search-principal');
        const result = document.getElementById('result-dashboard');
        const clearButtons = document.querySelectorAll('.btn-limpar-filtros');

        // Função para mostrar/esconder os botões de limpar
        function toggleClearButtons() {
            let hasValue = false;
            const inputs = form.querySelectorAll('input, select');
            inputs.forEach(input => {
                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 => {
                        input.value = '';
                });
                // limpa selects
                form.querySelectorAll('select').forEach(select => {
                    select.value = '';
                });
                // atualiza tela
                search();

            });

        });

        // Executa uma vez ao carregar
        toggleClearButtons();

    });
</script>