@extends('layouts.app')
@section('content')
    <div>
        <form class="d-block d-md-flex mb-3" method="GET" action="{{ route('contracts') }}">
            <div class="border rounded-3 border-1 p-1 bg-white">
                <input type="radio" class="btn-check" name="status" value="active" id="option6" autocomplete="off"
                    onclick="this.form.submit()" {{ $status == 'active' ? 'checked' : '' }}>
                <label class="btn p-2 fs-5" for="option6">Активные</label>

                <input type="radio" class="btn-check" name="status" value="finished" id="option7" autocomplete="off"
                    onclick="this.form.submit()" {{ $status == 'finished' ? 'checked' : '' }}>
                <label class="btn p-2 fs-5" for="option7">Оконченные</label>
            </div>
            <div class="ms-auto hstack gap-2">
                <div>Всего: 136 договоров</div>
                <button type="button" class="btn bg-white p-3 fw-bold border rounded-3 border-1" data-bs-toggle="modal"
                    data-bs-target="#contractFilterModal">
                    Фильтр <i class="bi bi-person-plus"></i>
                </button>
            </div>
        </form>

    </div>
    <div>
        @livewire('contracts.table')
    </div>

    <!-- Modal -->
    <div class="modal fade" id="contractFilterModal" tabindex="-1" aria-labelledby="contractFilterModalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body" style="">

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Отмена</button>
                    <input type="submit" class="btn btn-primary" value="Применить">
                </div>
            </div>
        </div>
    </div>
@endsection