@php($title = 'Контакты')

@extends('layouts.app')
@section('content')
    <div class="">
        <form class=" d-flex flex-row mb-3 sticky-top bg-light rounded-3" method="GET" action="{{ route('clients.table') }}">
            <div class="col-12 col-md-auto p-2 border rounded-3 border-1 p-1 bg-white">
                <input type="radio" class="btn-check" name="status" value="all" id="option5" autocomplete="off"
                    onclick="this.form.submit()" {{ $status == 'all' ? 'checked' : '' }}>
                <label class="btn p-2 fs-5" for="option5">Все</label>

                <input type="radio" class="btn-check" name="status" value="unique" id="option6" autocomplete="off"
                    onclick="this.form.submit()" {{ $status == 'unique' ? 'checked' : '' }}>
                <label class="btn p-2 fs-5" for="option6">Уникальные</label>

                <input type="radio" class="btn-check" name="status" value="not unique" id="option7" autocomplete="off"
                    onclick="this.form.submit()" {{ $status == 'not unique' ? 'checked' : '' }}>
                <label class="btn p-2 fs-5" for="option7">Не
                    уникальные</label>
            </div>
            <div class="d-none d-md-flex flex-fill"></div>
            <div class="ms-auto p-2 d-none d-md-block">
                <button type="button" class="btn btn-primary py-2 px-3 fs-5" data-bs-toggle="modal"
                    data-bs-target="#createClientModal">
                    <i class="bi bi-person-plus"></i> <span class="d-inline d-none d-md-inline">Добавить клиента</span>
                </button>
            </div>
            <div class="d-block d-md-none position-fixed bottom-0 end-0">
                <button type="button" class="shadow btn btn-secondary p-2 fs-3 rounded-pill"
                    style="margin-bottom:90px;width:4rem;height:4rem" data-bs-toggle="modal"
                    data-bs-target="#createClientModal">
                    <i class="bi bi-person-plus"></i>
                </button>
            </div>
        </form>
        @if (!$status || $status == 'all' || $status == 'unique')
            <h4 class="fw-bold mt-5 mb-3">Уникальные</h4>
            <div class="fs-5 bg-light   mb-2">
                @livewire('clientsTable', ['status' => 'UNIQUE'])
            </div>
        @endif

        @if (!$status || $status == 'all' || $status == 'not unique')
            <h4 class="fw-bold mt-5 mb-3">Не уникальные</h4>
            <div class="fs-5 bg-light   mb-2">
                @livewire('clientsTable', ['status' => 'NOT UNIQUE'])
            </div>
        @endif
    </div>

    <!-- Modal -->
    <div class="modal fade" id="createClientModal" tabindex="-1" aria-labelledby="createAgentModalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Добавить клиента</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body" style="">
                    <livewire:ClientCreator />
                </div>
            </div>
        </div>
    </div>
@endsection