@php
    // $caminho = "../";
    // $carros = api_request('get_all_carros', 'GET')['data']['results'];
    $titulo = "Carros - SW";
    // $carro = [ 
    //     'car_modelo' => 'beleza',
    //     'car_placa' => 'concordo',
    //     'car_avaria' => 'discord',
    //     'car_id' => '1'
    // ];
    // $subtitulo = "<a class='text-primary' href='../index.php'> <i class='fas fa-arrow-left'></i></a> Lista de carros";
    // $active1 = "class='nav-link btn mr-1 btn-small active text-primary text-center bg-white' href='" . $caminho . "inicio/index.php'";
    // $active2 = "class='nav-link ml-1 mr-1 btn btn-small text-white text-center'";
    // $active3 = "class='nav-link ml-1 mr-1 btn btn-small text-white text-center'";
    // $active4 = "class='nav-link ml-1 mr-1 btn btn-small text-white text-center'";
    // $active5 = "class='nav-link ml-1 btn btn-small text-white text-center' data-toggle='modal' data-target='#logoutModal'";
@endphp




@include('components.head')
<div class="container">
    @if (session('success'))
    <div class="alert alert-success">
        {{ session('success') }}
    </div>
    @endif

    <!-- Page Heading -->
    <div class="row text-center">
    <div class="text-right mb-4">
        <button type="button" data-toggle="modal" data-target="#carroModal" class="d-sm-inline-block btn btn-primary shadow-sm text-right"><i class="fas fa-plus"></i> Novo carro</button>
    </div>
    
    <!--TABELA COM DADOS PUXANDO DO BANCO DE DADOS-->
    @if ($carros->isEmpty())
            <hr style="color: #333; background-color: #333; height: 2px; border: none;">
            <p class="text-center">Sem carros cadastrados.</p>
        @else
            <div class="table-responsive">
                <table class="table">
                    <thead>
                        <tr>
                            <th scope="col" class="text-center">Modelo</th>
                            <th scope="col" class="text-center">Placa</th>
                            <th scope="col" class="text-center">Avaria</th>
                            <th scope="col" class="text-center">Ação</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($carros as $carro)
                            <tr>
                                <td class="text-center">{{ $carro->car_modelo }}</td>
                                <td class="text-center">{{ $carro->car_placa }}</td>
                                <td class="text-center">{{ $carro->car_avaria }}</td>
                                <td class="text-center">
                                    <a href="{{ url('/carros/todos_carros/' . $carro->car_id) }}" class="btn btn-warning btn-sm "><strong>
                                        Editar
                                        </strong>
                                    </a>
                                </td>
                                {{-- <td>
                                <button href="#" class="btn btn-sm btn-primary" data-toggle="modal" data-target="#editCarModal-{{ $carro->car_id }}">
                                    Editar
                                </button>
                                
                                <div class="modal fade" id="editCarroModal" tabindex="-1" role="dialog" aria-labelledby="editCarroModalLabel" aria-hidden="true">
                                    <div class="modal-dialog modal-lg" role="document">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                        <h5 class="modal-title" id="editCarroModalLabel">Edição de Carro</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 id="editCarroForm" method="post">
                                            @csrf
                                            <input type="hidden" id="car_id" name="car_id" value="">
                                
                                            <div class="form-group">
                                            <label for="car_avaria">Avarias:</label>
                                            <input class="form-control" id="car_avaria" name="car_avaria" type="text" required>
                                            </div>
                                
                                            <label for="car_status">Status:</label>
                                            <select class="form-control custom-select" id="car_status" name="car_status">
                                            <option value="Ativo">Ativo</option>
                                            <option value="Inativo">Inativo</option>
                                            </select><br><br>
                                
                                            <div class="modal-footer">
                                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancelar</button>
                                            <button type="submit" class="btn btn-primary">Salvar Alterações</button>
                                            </div>
                                        </form>
                                        </div>
                                    </div>
                                    </div>
                                </div>
                                </td> --}}
                                <td>
                                <button href="#" class="btn btn-sm btn-primary" data-toggle="modal" data-target="#editCarroModal" data-id="{{ $carro->id }}">
                                    Editar
                                </button>
                                
                                <div class="modal fade" id="editCarroModal" tabindex="-1" role="dialog" aria-labelledby="editCarroModalLabel" aria-hidden="true">
                                    <div class="modal-dialog modal-lg" role="document">
                                        <div class="modal-content">
                                            <div class="modal-header">
                                                <h5 class="modal-title" id="editCarroModalLabel">Edição de Carro</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 id="editCarroForm" method="post">
                                                    @csrf
                                                    <input type="hidden" id="car_id" name="car_id" value="">
                                                    <div class="form-group">
                                                        <label for="car_avaria">Avarias:</label>
                                                        <input class="form-control" id="car_avaria" name="car_avaria" type="text" required>
                                                    </div>
                                                    <label for="car_status">Status:</label>
                                                    <select class="form-control custom-select" id="car_status" name="car_status">
                                                        <option value="Ativo">Ativo</option>
                                                        <option value="Inativo">Inativo</option>
                                                    </select><br><br>
                                                    <div class="modal-footer">
                                                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancelar</button>
                                                        <button type="submit" class="btn btn-primary">Salvar Alterações</button>
                                                    </div>
                                                </form>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                </td>
                                {{-- <td class="text-center">
    <button type="button" class="btn btn-primary" onclick="editarCarro({{ $carro->car_id }})">Editar</button>
</td> --}}
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        @endif
</div>


    <!-- Botão que abre a modal -->
{{-- <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#carroModal">
    Novo carro
</button> --}}

<!-- Estrutura da Modal -->
<div class="modal fade" id="carroModal" tabindex="-1" aria-labelledby="carroModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="carroModalLabel">Cadastro de Carros</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 action="{{ route('cadastroCarro') }}" method="post">
         @csrf
         
          <div class="form-group">
            <label for="car_modelo">Marca/Modelo do carro:</label>
            <input class="form-control" name="car_modelo" type="text" required>
        </div>

        <div class="form-group">
            <label for="car_placa">Placa do carro:</label>
            <input class="form-control" name="car_placa" maxlength="8" type="text" required>
        </div>

        <div class="form-group">
            <label for="car_chassi">Número do chassi:</label>
            <input class="form-control" name="car_chassi" maxlength="17" type="text">
        </div>

        <div class="form-group">
            <label for="car_renavam">RENAVAM:</label>
            <input class="form-control" name="car_renavam" maxlength="11" type="text">
        </div>

        <div class="form-group">
            <label for="car_tipo">Tipo de carro:</label>
            <input class="form-control" name="car_tipo" type="text">
        </div>

        <div class="form-group">
            <label for="car_combustivel">Combustível:</label>
            <input class="form-control" name="car_combustivel" type="text" required>
        </div>

        <div class="form-group">
            <label for="car_cor">Cor:</label>
            <input class="form-control" name="car_cor" type="text" required>
        </div>


        <div class="form-group">
            <label for="car_status">Status:</label>
            <select class="form-control custom-select" id="car_status" name="car_status">
                <option value="Ativo">Ativo</option>
                <option value="Inativo">Inativo</option>
            </select>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancelar</button>
            <button type="submit" class="btn btn-primary">Incluir carro</button>
        </div>
        </form>
      </div>
      
    </div>
  </div>
</div>
<!-- Modal de Edição de Carro -->
<script>
  // Abrir a modal automaticamente se $carroEdit existir
  @if ($carroEdit)
    $('#editCarroModal').modal('show');
  @endif
</script>

<!-- Modal de Edição de Carro -->
@if ($carroEdit)
<div class="modal fade show" id="editCarroModal" tabindex="-1" aria-labelledby="editCarroModalLabel" aria-hidden="true" style="display: block;">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="editCarroModalLabel">Editar Carro</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close" onclick="window.location.href='/carros'">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <form action="{{ url('/carros/update') }}" method="POST">
        @csrf
        <input type="hidden" name="car_id" value="{{ $carroEdit->car_id }}">
        <div class="modal-body">
            <div class="form-group">
                <label for="car_avaria">Avarias:</label>
                <input type="text" class="form-control" name="car_avaria" value="{{ $carroEdit->car_avaria }}" required>
            </div>
            <div class="form-group">
                <label for="car_status">Status:</label>
                <select class="form-control" name="car_status" required>
                    <option value="Ativo" {{ $carroEdit->car_status == 'Ativo' ? 'selected' : '' }}>Ativo</option>
                    <option value="Inativo" {{ $carroEdit->car_status == 'Inativo' ? 'selected' : '' }}>Inativo</option>
                </select>
            </div>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-secondary" onclick="window.location.href='/carros'">Cancelar</button>
            <button type="submit" class="btn btn-primary">Salvar Alterações</button>
        </div>
      </form>
    </div>
  </div>
</div>
@endif





  
@include('components.footer')
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<script>
function openEditModal(car_id) {
    // Fazer requisição AJAX para obter dados do carro
    $.ajax({
        url: "/carros/" + car_id,  // Rota para buscar os dados do carro
        type: "GET",
        success: function(response) {
            // Preencher os campos da modal com os dados do carro
            $('#car_id').val(response.car_id);
            $('#car_avaria').val(response.car_avaria);
            $('#car_status').val(response.car_status);

            // Abrir a modal
            $('#editCarroModal').modal('show');
        },
        error: function() {
            alert("Erro ao carregar os dados do carro.");
        }
    });
}

// Função para enviar o formulário via AJAX
$('#editCarroForm').submit(function(event) {
    event.preventDefault(); // Impede o envio padrão do formulário

    $.ajax({
        url: "/carros/update",  // Rota para atualizar o carro
        type: "POST",
        data: $(this).serialize(),  // Serializa os dados do formulário
        success: function(response) {
            // Fecha a modal
            $('#editCarroModal').modal('hide');

            // Atualiza os dados na tabela (ou recarrega a tabela)
            alert("Carro atualizado com sucesso!");
            location.reload();
        },
        error: function() {
            alert("Erro ao atualizar o carro.");
        }
    });
});
</script> 
<!-- Botão para abrir a modal de edição -->
<script>
    $(document).ready(function(){
        $('button[data-target="#editCarroModal"]').click(function(){
            var car_id = $(this).data('id');
            $.ajax({
                url: '/carros/' + car_id ,
                method: 'GET',
                success: function(data) {
                    $('#editCarroModal #car_id').val(data.id);
                    $('#editCarroModal #car_avaria').val(data.car_avaria);
                    $('#editCarroModal #car_status').val(data.car_status);
                    $('#editCarroModal').modal('show');
                },
                error: function() {
                    alert('Erro ao buscar os dados do carro.');
                }
            });
        });
    });
</script>

<!-- Modal de Edição -->
<div class="modal fade" id="editCarModal-{{ $carro->car_id }}" tabindex="-1" role="dialog" aria-labelledby="editCarModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <form action="{{ route('carros.update', $carro->car_id) }}" method="POST">
                @csrf
                <div class="modal-header">
                    <h5 class="modal-title" id="editCarModalLabel">Editar Carro</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <!-- Campos do formulário de edição -->
                    <div class="form-group">
                        <label for="car_avaria">Avaria:</label>
                        <input type="text" class="form-control" name="car_avaria" value="{{ $carro->car_avaria }}" required>
                    </div>
                    <div class="form-group">
                        <label for="car_status">Status:</label>
                        <select class="form-control" name="car_status">
                            <option value="Ativo" {{ $carro->car_status == 'Ativo' ? 'selected' : '' }}>Ativo</option>
                            <option value="Inativo" {{ $carro->car_status == 'Inativo' ? 'selected' : '' }}>Inativo</option>
                        </select>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancelar</button>
                    <button type="submit" class="btn btn-primary">Salvar Alterações</button>
                </div>
            </form>
        </div>
    </div>
</div>

{{-- <script>
    function openEditModal(car_id) {
        $.ajax({
            url: "/carros/" + car_id,  // Rota para buscar os dados do carro
            type: "GET",
            success: function(response) {
                $('#car_id').val(response.car_id);
                $('#car_avaria').val(response.car_avaria);
                $('#car_status').val(response.car_status);
                $('#editCarroModal').modal('show');
            },
            error: function() {
                alert("Erro ao carregar os dados do carro.");
            }
        });
    }
    
    $('#editCarroForm').submit(function(event) {
        event.preventDefault();
        $.ajax({
            url: "/carros/update",
            type: "POST",
            data: $(this).serialize(),
            success: function(response) {
                $('#editCarroModal').modal('hide');
                alert("Carro atualizado com sucesso!");
                location.reload();
            },
            error: function() {
                alert("Erro ao atualizar o carro.");
            }
        });
    });
    </script> --}}