@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 class="bg-secondary text-white">
                            <tr>
                                <th><b><i class="fa fa-calendar"></i> DATA</b></th>
                                <th><b>VEICULO</b></th>
                                <th><b>MARCA</b></th>
                                <th><b>PLACA</b></th>
                                <th><b>ANO</b></th>
                                <th><b>RENAVAM</b></th>
                                <th><b>CNPJ</b></th>
                                <th><b>EDIT.</b></th>
                                <th><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>{{ $vehicle->invoice }}</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 }}"
                                        data-invoice="{{ $vehicle->invoice }}"><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 class="card-header">
                @if (isset($filters))
                {!! $vehicles->appends($filters)->links() !!}
                @else
                {!! $vehicles->links() !!}
                @endif
            </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="row mt-2">
                            <div class="col-md-12">
                                <label class="control-label">Veículo relacionado ao CNPJ/CPF: 

                                </label>
                                <select name="invoice" class="form-control">
                                    <option value='Ricardo ME - 30.821.999/0001-09'>Ricardo ME - 30.821.999/0001-09</option>
                                    <option value='Ricardo CPF - 403.538.728-22'>Ricardo CPF - 403.538.728-22 </option>
                                    <option value='Camila ME - 29.205.847/0001-94'>Camila ME - 29.205.847/0001-94</option>
                                    <option value='Camila CPF - 430.902.138-77'>Camila CPF - 430.902.138-77</option>
                                    <option value='Valdir CPF - 051.196.208-84'>Valdir CPF - 051.196.208-84</option>
                                    <option value='Silvia CPF - 089.819.088-69'>Silvia CPF - 089.819.088-69</option>
                                </select>
                                @error('invoice')
                                <div class="text-danger">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        
                        <div class="modal-footer">
                            <div class="col-sm-12">
                                <button type="button" class="btn btn-danger" data-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="row mt-2">
                            <div class="col-md-12">
                                <label class="control-label">Veículo relacionado ao CNPJ: 

                                </label>
                                <select name="invoice" id="invoice" class="form-control">
                                    <option value='Ricardo ME - 30.821.999/0001-09'>Ricardo ME - 30.821.999/0001-09</option>
                                    <option value='Camila ME - 29.205.847/0001-94'>Camila ME - 29.205.847/0001-94</option>
                                </select>
                                @error('invoice')
                                <div class="text-danger">{{ $message }}</div>
                                @enderror
                            </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 a todos os botões de edição
            var editButtons = document.querySelectorAll('.edit-btn');
            editButtons.forEach(function (button) {
                button.addEventListener('click', function () {
                    // Obtenha os valores dos atributos de dados do botão de edição clicado
                    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');
                    var invoice = this.getAttribute('data-invoice');

                    // 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;
                    document.getElementById('invoice').value = invoice;
                });
            });
        });
    </script>

</div>
@stop