@section('title', 'Cadastros')
@extends('site.layouts.main')
@extends('site.layouts.nav')
@extends('site.layouts.navigation')
@extends('site.layouts.modal')

@section('content')
<div class="mt-3 mb-3">

    <h1 class="text-center">Cadastro de clientes</h1>
    @foreach ($clientes as $cli)

    <div class="row mt-5 p-3">
    {{-- <div class="row border p-3"> --}}
        <div class="col-md-4 ">
            <span>
                <a href="#"><img src="/images/svg/clip.svg"></a>&nbsp;{{ $cli->nome }}&nbsp;
                <img src="/images/svg/arrow.svg">&nbsp; {{ $cli->situacao }} 
            </span>
            <br>
            <span>
                @if($cli->doc_cpf)
                    CPF: {{$cli->doc_cpf}}
                @endif
                @if($cli->doc_cnpj)
                    CNPJ: {{$cli->doc_cnpj}}
                @endif
                @if($cli->doc_rg)
                    RG: {{$cli->doc_rg}}
                @endif        
            </span><br>
            <span>Endereço: {{ $cli->rua }}, {{ $cli->numero}}, {{ $cli->complemento }}</span>
        </div>
        <div class="col-md-3">
            <span>Telefone: {{ $cli->telefone }}</span><br>
            <span>Empresa: {{ $cli->id_empresa }}</span><br>
            <span>Ativo: {{-- adicionar data de adesão --}}</span>
        </div>
        <div class="col-md-2">
            <span>Codigo: {{-- adicionar o codigo do CTO --}}</span><br>
            <span>Produto: {{-- adicionar o plano escolhido --}}</span><br>
            <span>Vencimento: {{-- adicionar vencimento das faturas --}}</span>
        </div>
        <div class="col-md-3 mt-3 text-center">
        {{-- 
            k=key 
            Criar aqui as chaves para abrir modal baseado 
            em usuário específico(provavelmente pegando 
            através da ID do banco de dados ou do CPF por
            ser UNIQUE)
        --}}

        {{-- Tornar um botão para um modal --}}
            <a class="me-3" href="/dashboard/clientes/edit/{{ $cli->id }}"><img src="/images/svg/info.svg"></a>{{-- Adicionar termo de adesão --}}
        {{--  --}}
        {{-- teste modal --}}
        {{-- <button type="button" class="btn me-3" data-bs-toggle="modal" data-bs-target="#staticBackdrop">
            <img src="/images/svg/clip1.svg">
        </button> --}}
        {{-- end teste --}}
            <a class="me-3" href="?k={{ $cli->id }}"><img src="/images/svg/reparo.svg"></a>{{-- configuração de produto/plano --}}
            <a class="me-3" href="?k={{ $cli->id }}"><img src="/images/svg/paper.svg"></a>{{-- Integrado ao edit --}}
            <a class="me-3" href="?k={{ $cli->id }}"><img src="/images/svg/financeiro.svg"></a>{{-- Cadastro do contrato --}}
            <a class="me-3" href="?k={{ $cli->id }}"><img src="/images/svg/bloqueio.svg"></a>{{-- Bloqueio --}}
            <a class="me-3" href="/boletos/{{ $cli->id }}">Ir para o boleto</a>
        </div>
    </div>

    @endforeach
    <div class="row mt-3 sticky-sm-bottom text-center d-sm-block d-md-none">
        <div class="col-sm-12 fixed-bottom start-50 translate-middle-x bg-body-tertiary border-top border-black"><a class="me-3" href="#">
            <img src="/images/svg/queue.svg"></a>
        </div>
    </div>
    <br>
</div>

@endsection