@php use Carbon\Carbon; @endphp
<style>
    .label-period {
        position: absolute;
        top: -22px;
        left: 50%;
        transform: translateX(-50%);
        background-color: white;
        color: rgb(241, 128, 30)
    }

    .period-container:before {
        content: "";
        position: absolute;
        width: 100%;
        top: -10px;
        height: 1px;
        background-color: rgb(241, 128, 30, 0.30);
    }
</style>
<nav class="bg-white shadow-lg w-full top-0 left-0 z-50">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex justify-between h-16">
            <div class="flex-1 flex items-center justify-between">
                <form method="get">
                    @csrf
                    <div class="flex space-x-4">
                        <div class="relative">
                            <select name="status" class="mt-1 block w-full py-2 pl-3 pr-8 border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-orange-500 focus:border-orange-500 sm:text-sm">
                                <option disabled selected>Situação</option>
                                <option>Completada</option>
                                <option>Em progresso</option>
                                <option>Cancelada</option>
                            </select>
                        </div>
                        <div class="relative">
                            <div class="flex justify-between relative period-container">
                                <span class="label-period">
                                    Período
                                </span>
                                <x-text-input
                                    id="start_date"
                                    name="start_date"
                                    type="date"
                                    class="mt-1 block w-full mr-2"
                                    :value="$filters['start_date'] ?? old('start_date', Carbon::now()->toDateString())"
                                    placeholder="{{ __('Início') }}"
                                />

                                <x-text-input
                                    id="end_date"
                                    name="end_date"
                                    type="date"
                                    class="mt-1 block w-full"
                                    :value="$filters['end_date'] ?? old('end_date', Carbon::now()->toDateString())"
                                    placeholder="{{ __('Fim') }}"

                                />
                            </div>
                        </div>
                        <button
                            type="submit"
                            class="px-4 py-1 border border-transparent text-sm font-medium rounded-md text-gray-700 bg-emerald-200 hover:bg-emerald-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 transition-colors duration-200"
                            aria-label="Clear all filters">
                            Aplicar filtros
                        </button>
                        <a
                            href="{{route('dashboard')}}"
                            class="px-4 py-1 border content-center border-transparent text-sm font-medium rounded-md text-gray-700 bg-gray-200 hover:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 transition-colors duration-200"
                            aria-label="Clear all filters">
                            Limpar filtros
                        </a>
                    </div>
                </form>
                <div class="flex-shrink-0 flex items-center">
                    <a href="{{route('pack.create')}}"
                       class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-orange-400 hover:bg-orange-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-orange-400 transition-all duration-200 transform hover:scale-105"
                       aria-label="Create new item">
                        <i class="fa fa-plus mr-2" aria-hidden="true"></i>
                        Novo Apontamento
                    </a>
                </div>
            </div>
        </div>
    </div>
</nav>