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

@extends('layouts.app')
@section('content')
    <div class="">
        <div class=" d-flex gap-2 p-1 flex-row mb-3 sticky-top bg-light rounded-3" method="GET" action="{{ route('clients.table') }}">
            <div class="w-100">
                @livewire('clients.search.input' , [
                    'filter.status' => 'UNIQUE'
                ])
            </div>
            <div class="ms-auto p-0 d-none d-md-block">
                <button type="button" class="btn btn-primary h-100 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">Добавить клиента</span>
                </button>
            </div>
            <div class="d-block d-md-none position-fixed bottom-0 end-0 me-3" style="margin-bottom:90px;">
                <button type="button" class="shadow btn btn-primary p-2 fs-3 rounded-pill"
                    style="width:4rem;height:4rem" data-bs-toggle="modal"
                    data-bs-target="#createClientModal">
                    <i class="bi bi-person-plus"></i>
                </button>
            </div>
        </div>
            <div class="fs-5 mb-2">
                @livewire('clientsTable')
            </div>
    </div>

    <!-- Modal -->
    <div class="modal fade" id="createClientModal" tabindex="-1" aria-labelledby="createAgentModalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-dialog-scrollable modal-fullscreen-sm-down">
            <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>
    <style>
        .clients-table_complexes {
            top:0;
            left:0;
            height:28px;
            overflow: hidden;
            cursor:pointer;
        }
        .clients-table_complexes:hover {
            position: absolute;
            top: 0;
            left: 0;
            height: auto;
            background-color: #e9e9e9;
            z-index: 3;
            width: 100%;
            box-shadow: 0 0 4px #0000005c;
            .table_complexes_complexes_main {
                display:none;
            }
        }
    </style>
@endsection