@extends('header_nuevo_generico')
@section('main')
    <div class="container-fluid pt-5 mt-5" >        
        <input type="hidden" name="_token" id="token" value="{{ csrf_token() }}">
        <div class="container py-5">
            <div>
                <h3 class = "text-fidelitas" style="text-align: center;">Administrador de Monedas</h3>
            </div>            
        </div>
        <!-- Boton para agregar una nueva moneda -->
        <div class="botonAltaMoneda float-end ">
            <button type="button" class="btn btn-fidelitas float-right " id="agregarMoneda">Agregar moneda</button>
        </div>
        <!-- Termina boton -->
        <br>
        <br>
        <!-- Tabla monedas -->
        <div class="row justify-content-center my-2" id="fancyTablaMonedas"></div>
        <!-- Termina tabla monedas -->
        <!-- Modal para editar moneda -->
        <div class="modal editarMoneda" id="editarMoneda" tabindex="-1">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title text-fidelitas">Edicion de Moneda</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <form id="frmEditarMoneda" method="POST">
                            <input type="hidden" name="_token" id="token" value="{{ csrf_token() }}" class="form-control">                       
                            <div class="mb-2">
                                <label for="moneda" class="form-label">Moneda</label>
                                <input type="text" class="form-control moneda" id="moneda" aria-describedby="" value="" readonly>                                                        
                            </div>
                            <div class="mb-2">
                                <label for="nombreMoneda" class="form-label">Nombre de la Moneda</label>
                                <input type="text" class="form-control nombreMoneda" id="nombreMoneda" aria-describedby="" value="">                                                        
                            </div>                            
                            <div class="mb-2">
                                <label for="paisMoneda" class="form-label">Pais</label>
                                <select id="paisMoneda" class="form-control paisMoneda" name="paisMoneda">
                                    <option value="">Seleccione un pais...</option>
                                    @foreach ($paises as $pais)
                                        <option value="{{$pais->country_code}}">{{ $pais->country_name }}</option>
                                    @endforeach
                                </select>                                                                                    
                            </div>                                                    
                        </form>
                        <div class="avisoCargaEditar text-center d-none" id="avisoCargaEditar">
                            <div class="spinner-border text-success" role="status">
                                <span class="sr-only"></span>                                
                            </div> 
                            <p>Cargando</p>                                
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
                            <button type="button" id="confirmarEdicionMoneda" class="btn btn-primary confirmarEdicionMoneda">Aceptar</button>
                        </div>
                    </div>                
                </div>
            </div>
        </div>
        <!-- Termina modal para editar moneda -->
        <!-- Modal para agregar moneda -->
        <div class="modal agregarMonedaModal" id="agregarMonedaModal" tabindex="-1">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title text-fidelitas">Agregar Moneda</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <form id="frmAltaMoneda">
                            <input type="hidden" name="_token" id="token" value="{{ csrf_token() }}" class="form-control">                       
                            <div class="mb-2">
                                <label for="monedaNueva" class="form-label">Moneda</label>
                                <input type="text" class="form-control monedaNueva" id="monedaNueva" name="monedaNueva" aria-describedby="" value="">                                                        
                            </div>
                            <div class="mb-2">
                                <label for="nombreMonedaNueva" class="form-label">Nombre de la Moneda</label>
                                <input type="text" class="form-control nombreMonedaNueva" id="nombreMonedaNueva" name="nombreMonedaNueva" aria-describedby="" value="">                                                        
                            </div>
                            <div class="mb-2">
                                <label for="paisMonedaNueva" class="form-label">Pais</label>
                                <select id="paisMonedaNueva" class="form-control" name="paisMonedaNueva">
                                    <option value="">Seleccione un pais...</option>
                                    @foreach ($paises as $pais)
                                        <option value="{{$pais->country_code}}">{{ $pais->country_name }}</option>
                                    @endforeach
                                </select>                                                                                    
                            </div>
                            <div class="avisoCargaAgregar text-center d-none" id="avisoCargaAgregar">
                                <div class="spinner-border text-success" role="status">
                                    <span class="sr-only"></span>                                
                                </div> 
                                <p>Cargando</p>                                
                            </div>
                            
                            <div class="modal-footer">
                                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
                                <button type="submit" id="btnAltaMoneda" class="btn btn-primary btnAltaMoneda">Aceptar</button>
                            </div>                       
                        </form>
                    </div>
                </div>                               
            </div>
        </div>
        <!-- Termina modal para agregar moneda -->
    </div>
@endsection
@section('funcionesJS')
    <script src="{{ asset('/Libreria_CA/Js/funciones_monedas.js') }}?v={{rand()}}"></script>
    <script>
        $(document).ready(function(){
        let data = '<?php echo(json_encode($tablaMonedas)); ?>';
        tablaMonedas(data);
        altaEventosMoneda();        
    });
    </script>
@endsection