@extends('adminlte::page')

@section('title', " $title " )

@section('content')
<div class="container-fluid">

    <div class="row pt-4">
        <div class="col-md-4">
            <h4><a href="" class="btn btn-primary shadow" data-toggle="modal" data-target="#create">+ ADICIONAR NOVO VEÍCULO</a> <span class="badge badge-secondary shadow">{!! $count !!}</span></h4>
        </div>

        <div class="col-md-4"></div>

        <div class="col-md-4">
            <form action="{{ route('vehicles.search') }}" method="get" class="form form-inline float-right">
                @csrf
                <input type="text" name="vehicle" placeholder="Filtrar:" class="form-control" style="width: 450px;" value="{{ $filters['vehicle'] ?? '' }}">
                <button type="submit" class="btn btn-primary"><i class="fas fa-search"></i></button>
            </form>
        </div>

    </div>

    <div class="row border shadow mt-3">
        <div class="table table-responsive">
            <div class="card-body">

                @include('app.includes.alerts')
                <div class="table-responsive">
                    <table class="table table-striped">
                        <thead>
                            <tr>
                                <th class="bg-dark text-white"><b>DATA</b></th>
                                <th class="bg-dark text-white"><b>VEICULO</b></th>
                                <th class="bg-dark text-white"><b>MARCA</b></th>
                                <th class="bg-dark text-white"><b>PLACA</b></th>
                                <th class="bg-dark text-white"><b>ANO</b></th>
                                <th class="bg-dark text-white"><b>RENAVAM</b></th>
                                <th class="bg-dark text-white"><b>EDIT.</b></th>
                                <th class="bg-dark text-white"><b>EXC.</b></th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($vehicles as $vehicle)
                            <tr>
                                <td>{{ date('d/m/Y', strtotime($vehicle->created_at)) }}</td>
                                <td>{{ $vehicle->vehicle }}</td>
                                <td>{{ $vehicle->brand }}</td>
                                <td>{{ $vehicle->plate }}</td>
                                <td>{{ $vehicle->year }}</td>
                                <td>{{ $vehicle->reindeer }}</td>
                                <td> 
                                    <a href="#" class="btn btn-outline-success me-1 edit-btn"
                                        data-bs-toggle="modal" data-bs-target="#update"
                                        data-id="{{ $vehicle->id }}"
                                        data-veiculo="{{ $vehicle->vehicle }}"
                                        data-marca="{{ $vehicle->brand }}"
                                        data-placa="{{ $vehicle->plate }}"
                                        data-ano="{{ $vehicle->year }}"
                                        data-renavan="{{ $vehicle->reindeer }}"><i class="fas fa-edit"></i>
                                    </a>
                                </td>
                                <td>
                                    <form action="{{ route('vehicles.destroy', $vehicle->id) }}" method="POST" onsubmit="return confirm('Tem certeza que deseja deletar?')">
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit" class="btn btn-danger shadow"><i class="fas fa-trash"></i></button>
                                    </form>
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>

        </div>
    </div>
    
    <!--MODAL create-->
    <div class="modal fade" id="create" tabindex="-1" role="dialog" aria-labelledby="formUpdate">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header bg-primary">
                    <h5 class="modal-title" id="formUpdate">Cadastrar</h5>
                </div>
                <div class="modal-body">

                    <form action="{{ route('vehicles.store') }}" method="POST">

                        @csrf 
                        
                        <div class="row">
                            <div class="col-sm-6">
                                <label class="control-label">* Veículo</label>
                                <input name="vehicle" class="form-control" value="" placeholder="Digite o veiculo..." type="text" required>
                            </div>

                            <div class="col-sm-6">
                                <label class="control-label">* Marca</label>
                                <input name="brand" class="form-control" value="" placeholder="Digite a marca.." type="text" required>
                            </div>
                        </div>
                        
                        <div class="row mt-2">
                            <div class="col-sm-4">
                                <label class="control-label">* Renavam</label>
                                <input name="reindeer" class="form-control" value="" placeholder="Digite o renavan..." type="text" required>
                            </div>

                            <div class="col-sm-4">
                                <label class="control-label">* Placa</label>
                                <input name="plate" class="form-control" value="" placeholder="Digite a placa..." type="text" required>
                            </div>

                            <div class="col-sm-4">
                                <label class="control-label">* Ano</label>
                                <input name="year" class="form-control" value="" placeholder="Digite o ano..." type="text" required>
                            </div>
                        </div>
                        
                        <div class="modal-footer">
                            <div class="col-sm-12">
                                <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Fechar</button>
                                <input type="submit" class="btn btn-success" value="Cadastrar" id="saveChangesBtn" />
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    
    <!--MODAL UPDATE-->
    <div class="modal fade" id="update" tabindex="-1" role="dialog" aria-labelledby="formUpdate">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header bg-success">
                    <h5 class="modal-title" id="formUpdate">Editar</h5>
                </div>
                <div class="modal-body">

                    <form id="editForm" action="{{ route('vehicles.update') }}" method="POST">

                        @method('PUT')
                        @csrf
                        
                        <input name="id" id="id" class="form-control" value="" type="hidden" required>
                        
                        <div class="row">
                            <div class="col-sm-6">
                                <label class="control-label"> Veículo</label>
                                <input name="vehicle" id="vehicle" class="form-control" value="" type="text" required>
                            </div>

                            <div class="col-sm-6">
                                <label class="control-label"> Marca</label>
                                <input name="brand" id="brand" class="form-control" value="" type="text" required>
                            </div>
                        </div>
                        
                        <div class="row mt-2">
                            <div class="col-sm-4">
                                <label class="control-label"> Renavam</label>
                                <input name="reindeer" id="reindeer" class="form-control" value="" type="text" required>
                            </div>

                            <div class="col-sm-4">
                                <label class="control-label"> Placa</label>
                                <input name="plate" id="plate" class="form-control" value="" type="text" required>
                            </div>

                            <div class="col-sm-4">
                                <label class="control-label"> Ano</label>
                                <input name="year" id="year" class="form-control" value="" type="text" required>
                            </div>
                        </div>
                        
                        <div class="modal-footer">
                            <div class="col-sm-12">
                                <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Fechar</button>
                                <input type="submit" class="btn btn-success" value="Atualizar" id="saveChangesBtn" />
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    
    <script>
        // Aguarde o documento estar completamente carregado
        document.addEventListener('DOMContentLoaded', function () {
            // Adicione um ouvinte de evento de clique ao botão de edição
            document.querySelector('.edit-btn').addEventListener('click', function () {
                // Obtenha os valores dos atributos de dados do botão de edição
                var id = this.getAttribute('data-id');
                var veiculo = this.getAttribute('data-veiculo');
                var marca = this.getAttribute('data-marca');
                var placa = this.getAttribute('data-placa');
                var ano = this.getAttribute('data-ano');
                var renavan = this.getAttribute('data-renavan');

                // Preencha os campos do modal com os valores obtidos
                document.getElementById('id').value = id;
                document.getElementById('vehicle').value = veiculo;
                document.getElementById('brand').value = marca;
                document.getElementById('plate').value = placa;
                document.getElementById('year').value = ano;
                document.getElementById('reindeer').value = renavan;

            });
        });
    </script>

</div>
@stop