@section('title', 'Fila: ' . $situacao)
@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">{{$situacao}}</h1>
    
    @foreach ($clientes as $cli)

    <div class="row mt-5">
        <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: </span>
        </div>
        <div class="col-md-2">
            <span>Codigo: </span><br>
            <span>Produto: </span><br>
            <span>Vencimento: </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)
        --}}
            <a class="me-3" href="/dashboard/clientes/edit/{{ $cli->id }}"><img src="/images/svg/info.svg"></a>
           {{--  @if ($cli != null)
                <a href="/dashboard/clientes/edit/filas/{{ $cli->id }}" class="btn me-3" data-bs-toggle="modal" data-bs-target="#staticBackdrop">
                <img src="/images/svg/clip1.svg">
            </a>
            @endif --}}
            
            {{-- Arrumar para quando não há nenhum cliente na aba para informar um erro ao invés de a página não carregar --}}

            <a class="me-3" href="?k={{ $cli->id }}"><img src="/images/svg/reparo.svg"></a>
            <a class="me-3" href="?k={{ $cli->id }}"><img src="/images/svg/paper.svg"></a>
            <a class="me-3" href="?k={{ $cli->id }}"><img src="/images/svg/financeiro.svg"></a>
            <a class="me-3" href="?k={{ $cli->id }}"><img src="/images/svg/bloqueio.svg"></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