@extends('layouts.layout')

@section('title', 'Clientes')

@section('content')

    <!-- Title -->
    <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3">
        <h1 class="title">Clientes</h1>

        <div class="btn-toolbar mb-2 mb-md-0">
            @can('Criar')
                <button type="button" class="btn btn-sm btn-client" onclick="cliente(0)">Criar Novo Cliente</button>
            @endcan
        </div>
    </div>

    <!-- Ações -->
    <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pb-2 mb-3">
        <div class="btn-group">
            <button type="button" class="btn btn-dropdown dropdown-toggle p-0" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-file-text"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path><polyline points="22 4 12 14.01 9 11.01"></polyline></svg>
                Acções
            </button>

            <div class="dropdown-menu">
                <a class="dropdown-item" href="#">Eliminar</a>
                <div class="dropdown-divider"></div>
                <a class="dropdown-item" href="#">Exportar .PDF</a>
            </div>
        </div>
    </div>

    <!-- Alertas de Sistema -->
    <div class="alert alert-sistema-success alert-dismissible fade show" role="alert" id="alert" style="display: none;">
        <span class="badge badge-pill badge-secondary alert-icon mr-3">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class=""><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path><polyline points="22 4 12 14.01 9 11.01"></polyline></svg>
        </span>
        <strong>Gravado com Sucesso.</strong>
        <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
    </div>

    <!-- Lista de Clientes -->
    <div class="card">
        <div class="card-header">

            <!-- Pesquisa -->
            <div class="mb-4">
                <div class="form-row">
                    <div class="col-7">
                        <input type="text" class="form-control" placeholder="Procurar por nome ou NIFC" id="pesquisa">
                    </div>

                    <div class="col-auto">
                        <button type="button" class="btn btn-client px-3" onclick="reload()">Ok</button>
                    </div>
                </div>
            </div>

            <!-- Separadores Empresas -->
            <ul class="nav nav-tabs card-header-tabs">
                <li class="nav-item">
                    <a class="nav-link empresa active" href="#" data-toggle="tab" data-id="">Todos os Clientes</a>
                </li>

                @foreach($empresas as $empresa)
                    <li class="nav-item">
                        <a class="nav-link empresa" href="#" data-toggle="tab" data-id="{{ $empresa->id }}">{{ $empresa->nome }}</a>
                    </li>
                @endforeach
            </ul>

            <!-- Empresa ^^ -->
            <input type="hidden" id="empresa" value="">
        </div>

        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-clientes" id="table-clientes" style="width:100%;" data-can-edit="{{ auth()->user()->can('Editar') ? 1 : 0 }}" 
                data-can-delete="{{ auth()->user()->can('Eliminar') ? 1 : 0 }}" data-path="{{ asset('clientes') }}" data-csrf="{{ csrf_token() }}">
                    <thead>
                        <tr>
                            <th scope="col"><input type="checkbox" name="select-all" id="select-all"/></th>
                            <th scope="col">Cliente</th>
                            <th scope="col">Nome</th>
                            <th scope="col">NIFC</th>
                            <th scope="col">Empresa</th>
                            <th scope="col">Valor divida</th>
                            <th scope="col" class="text-center" style="width:8%;">Estado</th>
                            <th scope="col" class="text-right"  style="width:10%;">Acções</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
        </div>
    </div>

    @include('layouts.scripts')
    <script src="{{ asset('js/custom/clientes.js') }}"></script>

@endsection