@extends('site.layouts.new.app')

@php
    $resetUrl = route('site.propositions', ['id' => $meeting->id, 'front_layout' => 'new']);
    $hasAdvancedFilters = filled(request('start_date')) || filled(request('end_date')) || filled(request('number')) || filled(request('text'));
@endphp

@section('site_content')
    <div>
        <section class="sl-materials-surface">
            <div class="sl-materials-tabs">
                @include('site.components.materials-tab', ['label' => 'Proposições', 'href' => $resetUrl, 'active' => true])
            </div>

            <form method="GET" action="{{ route('site.propositions', $meeting->id) }}" class="space-y-4" data-propositions-search-form>
                <input type="hidden" name="front_layout" value="new">
                <input type="hidden" name="start_date" value="{{ request('start_date') }}">
                <input type="hidden" name="end_date" value="{{ request('end_date') }}">
                <input type="hidden" name="number" value="{{ request('number') }}">
                <input type="hidden" name="text" value="{{ request('text') }}">

                <div class="sl-materials-toolbar">
                    <div class="sl-materials-filters sl-propositions-filters">
                        @include('site.components.materials-filter-field', [
                            'id' => 'type',
                            'label' => 'Tipo',
                            'name' => 'type',
                            'type' => 'select',
                            'options' => $documentTypes,
                            'value' => request('type'),
                            'className' => 'sl-propositions-filter-field--type',
                        ])
                    </div>

                    <div class="sl-materials-toolbar__actions">
                        <button type="button" class="sl-materials-button is-light" data-modal-open="propositions-advanced-filters">
                            <svg viewBox="0 0 24 24" aria-hidden="true">
                                <path d="M4 7h16M7 12h10M10 17h4" fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="1.8" />
                            </svg>
                            <span>Filtros</span>
                            @if ($hasAdvancedFilters)
                                <span class="sl-materials-button__badge"></span>
                            @endif
                        </button>

                        <button type="button" class="sl-materials-button is-light is-disabled" disabled title="Exportação em preparação">
                            <svg viewBox="0 0 24 24" aria-hidden="true">
                                <path d="M12 4v9m0 0 3.5-3.5M12 13 8.5 9.5M5 15.5v1.75A1.75 1.75 0 0 0 6.75 19h10.5A1.75 1.75 0 0 0 19 17.25V15.5" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" />
                            </svg>
                            <span>Exportar</span>
                        </button>
                    </div>
                </div>

                <div class="sl-materials-actions">
                    <a href="{{ $resetUrl }}" class="sl-materials-button is-light">
                        <span>Limpar filtros</span>
                        <svg viewBox="0 0 16 16" aria-hidden="true">
                            <path d="M5.5 3.5 10 8l-4.5 4.5" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.7" />
                        </svg>
                    </a>
                    <button type="submit" class="sl-materials-button is-primary">
                        <svg viewBox="0 0 24 24" aria-hidden="true">
                            <circle cx="11" cy="11" r="6.5" fill="none" stroke="currentColor" stroke-width="1.9"></circle>
                            <path d="m16 16 4 4" fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="1.9"></path>
                        </svg>
                        <span>Pesquisar</span>
                    </button>
                </div>
            </form>

            @component('site.components.modal', [
                'id' => 'propositions-advanced-filters',
                'title' => 'Filtro de busca avançada',
                'panelClass' => 'sl-modal__dialog--narrow sl-modal__dialog--filters',
            ])
                <form method="GET" action="{{ route('site.propositions', $meeting->id) }}" class="space-y-4 sl-advanced-filters-form" data-propositions-advanced-form id="propositions-advanced-form">
                    <input type="hidden" name="front_layout" value="new">
                    <input type="hidden" name="type" value="{{ request('type') }}">

                    <div class="sl-advanced-search-grid is-dates">
                        <div class="sl-materials-filter-field">
                            <label for="propositions_start_date">De</label>
                            <input id="propositions_start_date" type="date" name="start_date" value="{{ request('start_date') }}" class="sl-materials-control">
                        </div>

                        <div class="sl-materials-filter-field">
                            <label for="propositions_end_date">Até</label>
                            <input id="propositions_end_date" type="date" name="end_date" value="{{ request('end_date') }}" class="sl-materials-control">
                        </div>
                    </div>

                    <div class="sl-materials-filter-field">
                        <label for="propositions_number">Número</label>
                        <input id="propositions_number" type="text" name="number" value="{{ request('number') }}" class="sl-materials-control" placeholder="Ex.: 245">
                    </div>

                    <div class="sl-materials-filter-field">
                        <label for="propositions_text">Que contenha (texto):</label>
                        <textarea id="propositions_text" name="text" class="sl-materials-control sl-materials-control--textarea" placeholder="Digite um trecho para localizar nas proposições">{{ request('text') }}</textarea>
                    </div>

                    @slot('footer')
                        <a href="{{ $resetUrl }}" class="sl-materials-button is-light">Limpar tudo</a>
                        <button type="button" class="sl-materials-button is-light" data-modal-close>Cancelar</button>
                        <button type="submit" class="sl-materials-button is-primary" form="propositions-advanced-form">Aplicar filtros</button>
                    @endslot
                </form>
            @endcomponent

            @include('site.components.propositions-table', ['records' => $records, 'meeting' => $meeting])

            @if (method_exists($records, 'links'))
                <div class="sl-materials-pagination-wrap">
                    @include('site.components.materials-pagination', ['records' => $records])
                </div>
            @endif
        </section>
    </div>
@endsection