@extends('layouts.dashboardnew')

@section('content')

<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-body">
                    
                    
                    <div class="row">
                        
                        <div class="col-3">
                            <div class="form-group">
                                <a class="btn btn-info btn-block text-white" data-toggle="modal" data-target="#cargarimagenes">Agregar Nuevos Avatares</a>
                            </div>
                        </div>
                        
                        <div class="col-3">
                            <div class="form-group">
                                <a class="btn btn-info btn-block text-white" data-toggle="modal" data-target="#cambiarimagenes">Cambiar Avatares</a>
                            </div>
                        </div>
                        
                    </div>
                    
                    
                    
                    <div class="col-12">
                        <div class="form-group">
                            <div class="row">    
                                
                                <div class="col-3 text-center">
                                    <h4>Avatar Mujer Activa</h4>
                                    <img src="{{ asset('/arbol/'.$avatares->activo_mujer)}}" class="img-thumbnail" alt="Avatar Mujer Activa" style="max-width: 100px; height: 100px;">
                                </div>
                                
                                <div class="col-3 text-center">
                                    <h4>Avatar Hombre Activo</h4>
                                    <img src="{{ asset('/arbol/'.$avatares->activo_hombre)}}" class="img-thumbnail" alt="Avatar Hombre Activo" style="max-width: 100px; height: 100px;">
                                </div>
                                
                                
                                <div class="col-3 text-center">
                                    <h4>Avatar Mujer Inactiva</h4>
                                    <img src="{{ asset('/arbol/'.$avatares->inactivo_mujer)}}" class="img-thumbnail" alt="Avatar Mujer Inactiva" style="max-width: 100px; height: 100px;">
                                </div>
                                
                                <div class="col-3 text-center">
                                    <h4>Avatar Hombre Inactivo</h4>
                                    <img src="{{ asset('/arbol/'.$avatares->inactivo_hombre)}}" class="img-thumbnail" alt="Avatar Hombre Inactivo" style="max-width: 100px; height: 100px;">
                                </div>
                                
                            </div>    
                        </div>
                    </div>
                    
                    
                    
                </div>
            </div>
        </div>
    </div>
</div>



<div class="modal fade" id="cargarimagenes" style="display: none;" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Agregar Nuevos Avatar</h5>
          <button type="button" class="close" data-dismiss="modal"><span>×</span></button>
          </div>
            <div class="modal-body">
                
            <form action="{{route('setting-agregar-avatar')}}" method="post" enctype="multipart/form-data">
             {{ csrf_field() }}
             
            <div class="row">
              
              
                <div class="col-sm-12 mb-2">
                    <div class="input-group mt-3">
                        <div class="custom-file">
                            <input type="file" class="custom-file-input" name="avatar[]" accept="image/x-png" required>
                            <label class="custom-file-label">Agregar Avatar</label>
                        </div>
                    </div>
                </div>
           
              <div class="col-md-12">
                <div class="form-group">
                  <button type="submit" class="btn btn-info btn-block">Aceptar</button>
                </div>  
              </div>
           

            </div>

            </form>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>



<div class="modal fade" id="cambiarimagenes" style="display: none;" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Cambiar Avatares</h5>
          <button type="button" class="close" data-dismiss="modal"><span>×</span></button>
          </div>
            <div class="modal-body">
                
            <form action="{{route('setting-cambiar-avatar')}}" method="post">
             {{ csrf_field() }}
             
            <div class="row">
              
              <input type="hidden" class="form-control" name="id" id="id">

              <div class="col-md-12">
                <div class="form-group">
                    <label>Avatar Mujer Activa</label>
                    <select name="activo_mujer" class="form-control chosen">
                        @foreach($avatares->avatar as $avata)
                        <option value="{{$avata->avatar}}" data-img-src="{{ asset('/arbol/'.$avata->avatar)}}" @if($avatares->activo_mujer == $avata->avatar) selected="selected"  @else @endif</option> Seleccione el avatar</option>
                        @endforeach
                    </select>
                </div>
              </div>
           
              <div class="col-md-12">
                <div class="form-group">
                    <label>Avatar Hobre Activo</label>
                    <select name="activo_hombre" class="form-control chosen">
                        @foreach($avatares->avatar as $avata)
                        <option value="{{$avata->avatar}}" data-img-src="{{ asset('/arbol/'.$avata->avatar)}}" @if($avatares->activo_hombre == $avata->avatar) selected="selected"  @else @endif> Seleccione el avatar</option>
                        @endforeach
                    </select>
                </div>
              </div>
              
              
              <div class="col-md-12">
                <div class="form-group">
                    <label>Avatar Mujer Inactiva</label>
                    <select name="inactivo_mujer" class="form-control chosen">
                        @foreach($avatares->avatar as $avata)
                        <option value="{{$avata->avatar}}" data-img-src="{{ asset('/arbol/'.$avata->avatar)}}" @if($avatares->inactivo_mujer == $avata->avatar) selected="selected"  @else @endif> Seleccione el avatar</option>
                        @endforeach
                    </select>
                </div>
              </div>
           
              <div class="col-md-12">
                <div class="form-group">
                    <label>Avatar Hobre Inactivo</label>
                    <select name="inactivo_hombre" class="form-control chosen">
                        @foreach($avatares->avatar as $avata)
                        <option value="{{$avata->avatar}}" data-img-src="{{ asset('/arbol/'.$avata->avatar)}}" @if($avatares->inactivo_hombre == $avata->avatar) selected="selected"  @else @endif> Seleccione el avatar</option>
                        @endforeach
                    </select>
                </div>
              </div>
           
              <div class="col-md-12">
                <div class="form-group">
                  <button type="submit" class="btn btn-info btn-block">Aceptar</button>
                </div>  
              </div>
           

            </div>

            </form>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
@endsection


@push('script')
<script type="text/javascript">

 $(document).ready(function(){
    $(".chosen").chosen({width: "100%"});
 });
 
</script>
@endpush