@extends('layouts.app')

@section('content')
<section class="section">
    <div class="section-header">
        <h3 class="page__heading">Costo Rutas</h3>    
    </div>

   

    <div class="section-body">
        <div class="row">
                <div class="col-md-6">
                    <div class="container mt-3">
                    <h5>INGRESE SUS RUTAS DISPONIBLES</h5>
                    </div>

                    <div class="card">
                        <div class="card-body">     
                                                                      
                        @if ($errors->any())                                                
                            <div class="alert alert-dark alert-dismissible fade show" role="alert">
                            <strong>¡Revise los campos!</strong>                        
                                @foreach ($errors->all() as $error)                                    
                                    <span class="badge badge-danger">{{ $error }}</span>
                                @endforeach                        
                            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                            </div>
                        @endif

                    <form action="{{ route('ruta-form') }}" method="post">
                        @csrf
                        <div class="row align-items-center">
                        <div class="col-md-4">
                                <div class="form-group">
                                   <label>Salida</label>
                                   <input type="text" name="salida" class="form-control">
                                </div>
                            </div>

                        <div class="col-md-4">
                                <div class="form-group">
                                   <label>Destino</label>
                                   <input type="text" name="destino" class="form-control">
                                </div>
                            </div>

                            <div class="col-md-4">
                                <div class="form-group">
                                   <label>Costo x día (USD)</label>
                                   <input type="number" name="costoDia" class="form-control">
                                </div>
                            </div>

                            
                        </div>  

                        <div class="row">
                            <div class="col-md-4">
                                <div class="form-group">
                                   <label>Aeronave</label>
                                   <input type="text" name="aeronave" class="form-control">
                                </div>
                            </div>

                            <div class="col-md-4">
                                <div class="form-group">
                                   <label>Fecha</label>
                                   <input type="date" name="fecha" class="form-control">
                                </div>
                            </div>

                        </div>
                      
                        <div class="row">
                            <div class="col-md-6">
                            <button type="submit" class="btn btn-primary">Agregar</button> 
                            </div>
                        </div>
                    </form>                   
                        </div>
                    </div>
                </div>

                <div class="col-md-6">
                    <div class="container mt-3">
                        <h5>MIS RUTAS</h5>
                    </div>

                    <div class="card">
                        <div class="card-body">
                        <div class="table-responsive">
                        <table class="table table-striped mt-2">
                                <thead style="background-color:#48494a">                                     
                                    <th style="color:#fff;">Salida</th>
                                    <th style="color:#fff;">Destino</th>
                                    <th style="color:#fff;">Costo x día (USD)</th>                                    
                                    <th style="color:#fff;">Aeronave</th>        
                                    <th style="color:#fff;">Fecha</th>    
                                    <th style="color:#fff;">Action</th>                                                           
                              </thead>
                              <tbody>
                           @foreach($rutas as $ruta)
                            <tr>
                                <td>{{$ruta->salida}}</td>
                                <td>{{$ruta->destino}}</td>
                                <td>{{$ruta->costoDia}}</td>
                                <td>{{$ruta->aeronave}}</td>
                                <td>{{$ruta->fecha}}</td>
                                <td>                                  
                                    <a href="#" class="btn" onClick="funcEditarRuta('{{$ruta->id}}', '{{$ruta->salida}}', '{{$ruta->destino}}', '{{$ruta->costoDia}}', '{{$ruta->aeronave}}', '{{$ruta->fecha}}')"><button class="btn btn-warning dropdown-item">Editar</button></a>                                   
                                    <a href="#" class="btn"><button class="btn btn-danger dropdown-item">Borrar</button></a>   
                                </td> 
                            </tr>
                           @endforeach
                            </tbody>
                        </table>
                        </div>                      
                        </div>
                    </div>    
                </div>

                </div> 
            </div>
</section>

<!--Modal Editar Ruta-->
<div id="modalEditarRuta" class="modal fade" role="dialog">
    <div class="modal-dialog">
        <!-- Modal content-->
        <div class="modal-content">

            <div class="modal-header">
                <h5 class="modal-title">Editar la Ruta</h5>
                <button type="button" aria-label="Close" class="close outline-none" data-dismiss="modal">×</button>
            </div>

            <div class="container m-2">
              
            <form action="{{ route('editar-ruta') }}" method="post">
                        @csrf
                        <div class="row align-items-center">
                        <div class="col-md-4">
                                <div class="form-group">
                                   <label>Salida</label>
                                   <input type="text" name="salida" id="salida" class="form-control">
                                   <input type="hidden" name="id" id="id" class="form-control">
                                </div>
                            </div>

                        <div class="col-md-4">
                                <div class="form-group">
                                   <label>Destino</label>
                                   <input type="text" name="destino" id="destino" class="form-control">
                                </div>
                            </div>

                            <div class="col-md-4">
                                <div class="form-group">
                                   <label>Costo x día (USD)</label>
                                   <input type="number" name="costoDia" id="costoDia" class="form-control">
                                </div>
                            </div>

                            
                        </div>  

                        <div class="row">
                            <div class="col-md-4">
                                <div class="form-group">
                                   <label>Aeronave</label>
                                   <input type="text" name="aeronave" id="aeronave" class="form-control">
                                </div>
                            </div>

                            <div class="col-md-4">
                                <div class="form-group">
                                   <label>Fecha</label>
                                   <input type="date" name="fecha" id="fecha" class="form-control">
                                </div>
                            </div>

                        </div>
                      
                        <div class="row">
                            <div class="col-md-6">
                            <button type="submit" class="btn btn-primary">Agregar</button> 
                            </div>
                        </div>
                    </form>                           
            </div>
        </div>
    </div>
</div>

<script>
 function funcEditarRuta(id, salida, destino, costoDia, aeronave, fecha){
    jQuery('#id').val(id);
    jQuery('#salida').val(salida);
    jQuery('#destino').val(destino);
    jQuery('#costoDia').val(costoDia);
    jQuery('#aeronave').val(aeronave);
    jQuery('#fecha').val(fecha);
    jQuery("#modalEditarRuta").modal('show');
 }
</script>
@endsection