@extends('layouts.ponte')
@section('content')
<div class="card">
    <div class="card-body">
        <button class="btn btn-success" data-toggle="modal" data-target="#cidade-info">Adicionar</button>
        <table id="example2" class="table table-striped table-bordered">
            <thead>
                <tr>
                    <th>Código</th>
                    <th>Nome do item</th>
                    <th>Valor</th>
                    <th>Ordenar</th>
                    <th>Ações</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Shad Decker</td>
                    <td>Regional Director</td>
                    <td>AC</td>
                    <td>51</td>
                    <td class="clientes-acoes">
                        <button class="btn btn-primary"><i class="fa fa-eye"></i></button>
                        <button class="btn btn-warning"><i class="fa fa-pencil"></i></button>
                        <button class="btn btn-danger"><i class="fa fa-trash"></i></button>
                    </td>
                </tr>
                <tr>
                    <td>Michael Bruce</td>
                    <td>Javascript Developer</td>
                    <td>AC</td>
                    <td>29</td>
                    <td class="clientes-acoes">
                        <button class="btn btn-primary"><i class="fa fa-eye"></i></button>
                        <button class="btn btn-warning"><i class="fa fa-pencil"></i></button>
                        <button class="btn btn-danger"><i class="fa fa-trash"></i></button>
                    </td>
                </tr>
                <tr>
                    <td>Donna Snider</td>
                    <td>Customer Support</td>
                    <td>AC</td>
                    <td>27</td>
                    <td class="clientes-acoes">
                        <button class="btn btn-primary"><i class="fa fa-eye"></i></button>
                        <button class="btn btn-warning"><i class="fa fa-pencil"></i></button>
                        <button class="btn btn-danger"><i class="fa fa-trash"></i></button>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

<div class="modal fade" id="cidade-info" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalCenterTitle">Adicionar cidade</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form>
                    <div class="form-group">
                        <label for="codigo">Código</label>
                        <select class="js-example-basic-single">
                            <option></option>
                            <option value="France">Cidade</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="nome">Nome</label>
                        <input type="text" class="form-control" id="nome" placeholder="Nome">
                    </div>
                    <div class="form-group">
                        <label for="valor">Valor</label>
                        <input type="text" class="form-control" id="valor" placeholder="Valor">
                    </div>
                    <div class="form-group">
                        <label for="ordenar">Ordenar</label>
                        <input type="password" class="form-control" id="ordenar" placeholder="Ordenar">
                    </div>
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Fechar </button>
                    <button type="submit" class="btn btn-primary">Cadastrar</button>
                </form>
            </div>
        </div>
    </div>
</div>

@endsection