@extends('layout.administrator.index')
@section('title', 'Usuarios del sistema')
@section('style')
<style>
        .myclose:hover{
            color:black !important;
            cursor:pointer;
        }


</style>

@endsection
@section('content')
    <div class="content-wrapper">
        <section class="content-header">
            {{-- <h1>Usuarios del sistema</h1> --}}
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{ route('administrator.dashboard') }}"><i class="fa fa-dashboard"></i>
                        Inicio</a></li>
                <li class="breadcrumb-item"><a href="{{ route('administrator.customers.users.index') }}"> Usuarios</a></li>
                <li class="breadcrumb-item active">Crear</li>
            </ol>
        </section>

        <section class="content">
            @if (session('success'))
                <div class="alert alert-success alert-dismissible fade show" role="alert">
                    {{ session('success') }}
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
            @endif
            @if (session('danger'))
                <div class="alert alert-danger alert-dismissible fade show" role="alert">
                    {{ session('danger') }}
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
            @endif
            <div id="app" class="box">
                <div class="box-header with-border">
                    <div class="row align-items-center">
                        <div class="col-12">
                            <h4 class="box-title">Usuarios del sistema</h4>
                        </div>
                    </div>
                </div>
                <div class="box-body">
                    <form id="updateForm" action="{{ route('administrator.customers.users.update', [$user->uuid]) }}" method="post"
                        files="true" enctype="multipart/form-data">
                        @method('put')
                        @csrf
                        <div class="row">
                            <div class="col-md-4">
                                <label for="customer_id" class="control-label">Cliente *</label>
                                @if (Auth::user()->id_role != 3)
                                    <select class="form-control hg_select select2" id="customer_id" name="customer_id"
                                        required>
                                        @foreach ($customers as $customer)
                                            <option value="{{ $customer->id }}"
                                                {{ $customer->id == $user->customer_id ? 'selected' : '' }}>
                                                {{ $customer->company }}</option>
                                        @endforeach
                                    </select>
                                    <small class="text-danger">{{ $errors->first('customer_id') }}</small>
                                @else
                                    <input type="hidden" name="customer_id" value="{{ $user->customer_id }}">
                                    <input type="text" class="form-control" value="{{ $user->getCustomer->company }}"
                                        readonly>
                                @endif
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="document_type" class="control-label">Tipo de documento *</label>
                                    <select class="form-control hg_select select2" id="document_type" name="document_type"
                                        required>
                                        @foreach ($documentTypes as $documentType)
                                            <option value="{{ $documentType->id }}"
                                                {{ $documentType->id == $user->document_type ? 'selected' : '' }}>
                                                {{ $documentType->reference }} - {{ $documentType->name }}</option>
                                        @endforeach
                                    </select>
                                    <small class="text-danger">{{ $errors->first('document_type') }}</small>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="document" class="control-label">Documento *</label>
                                    <input type="text" id="document" name="document" placeholder="Documento"
                                        autocomplete="off" class="form-control input-number" value="{{ $user->document }}"
                                        required>
                                    <small class="text-danger">{{ $errors->first('document') }}</small>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="username" class="control-label">Usuario *</label>
                                    <input type="text" id="username" name="username" placeholder="Usuario"
                                        autocomplete="off" class="form-control" value="{{ $user->username }}" required>
                                    <small class="text-danger">{{ $errors->first('username') }}</small>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="name" class="control-label">Nombre *</label>
                                    <input type="text" id="name" name="name" placeholder="Nombre" autocomplete="off"
                                        class="form-control" value="{{ $user->name }}" required>
                                    <small class="text-danger">{{ $errors->first('name') }}</small>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="lastName" class="control-label">Apellidos</label>
                                    <input type="text" id="lastName" name="last_name" placeholder="Apellidos"
                                        autocomplete="off" class="form-control" value="{{ $user->last_name }}" required>
                                    <small class="text-danger">{{ $errors->first('last_name') }}</small>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="email" class="control-label">Correo *</label>
                                    <div class="input-group">
                                        <input type="email" id="email" name="email" placeholder="Correo" autocomplete="off"
                                            class="form-control" value="{{ $user->email }}" required>
                                            <div class="input-group-append">
                                                <button type="button" @click="addNew" class="btn btn-info ">Agregar mas</button>
                                            </div>

                                    </div>
                                    <div class="d-flex flex-row flex-wrap">
                                        <span v-for="(email,index) in emails" class="d-flex justify-content-center badge badge-pill badge-info mt-2 mybadge ml-1" style="width:30%; height:30px">
                                            <input   :id="index"  v-model="emails[index]" style="color:white;border:none;background-color: transparent; width:80%" size="1" v-text="email" type="email">

                                            <i @click="remove(index)" class="text-white myclose mt-1" style="width:20px; height:20px;">x</i>
                                        </span>

                                    </div>

                                    <small class="text-danger">{{ $errors->first('email') }}</small>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="cellphone" class="control-label">Celular principal *</label>
                                    <input type="text" id="cellphone" name="cellphone" placeholder="Celular"
                                        autocomplete="off" class="form-control input-number" value="{{ $user->cellphone }}"
                                        required>
                                    <small class="text-danger">{{ $errors->first('cellphone') }}</small>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="password" class="control-label">Contraseña *</label>
                                    <input type="password" id="password" name="password" placeholder="Contraseña"
                                        autocomplete="off" class="form-control">
                                    <small class="text-danger">{{ $errors->first('password') }}</small>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="password_confirmation" class="control-label">Repetir contraseña *</label>
                                    <input type="password" id="password_confirmation" name="password_confirmation"
                                        placeholder="Repetir contraseña" autocomplete="off" class="form-control">
                                    <small class="text-danger">{{ $errors->first('password_confirmation') }}</small>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <label for="state" class="control-label">Estado *</label>
                                <select class="form-control" id="state" name="state" required>
                                    @foreach (Config::get('constants.states') as $id => $value)
                                        <option value="{{ $id }}">{{ $value['name'] }}</option>
                                    @endforeach
                                </select>
                                <small class="text-danger">{{ $errors->first('state') }}</small>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12">
                                <button type="button" id="btn-save" class="btn btn_admin btn-block">Guardar</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </section>
    </div>
@endsection
@section('js')
    <script>

        var app = new Vue({
            el: '#app',
            data: {
               emails:[],
               last:null,
               id:'{{$user->uuid}}',
               token:document.querySelector('meta[name="csrf-token"]').content
            },
            methods: {
                async getOtherEmails(){
                    let req=await fetch('/administrator/customer/getDataUser/'+this.id)
                    let res=await req.json()
                    let emails=JSON.parse(res.data.others_emails);
                    if(Array.isArray(emails)){
                        this.emails=emails.map(item=>item.email);
                        this.last=emails[emails.length-1].email;
                    }
                },
                addNew(){
                    if(!this.emails.length){
                        this.emails.push("")
                    }else{
                        if(!this.emails[this.emails.length-1]){
                            return alert("Debes ingresar un email para agregar otro")
                        }else{
                            if(this.emailValidation(this.last)){
                                this.emails.push("")
                            }else{
                                return alert("Debe Escribir un email valido")
                            }
                        }
                    }

                },
                emailValidation(email){
                    if(/^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/.test(email))
                        return true;
                    return false;
                },
                remove(i){
                    console.log('hola',i);
                    this.emails.splice(i,1)

                },
                async saveEmails(){

                    let emails=this.emails.map((item)=>{
                       if(item)
                        return {email:item}
                    });
                    emails=JSON.stringify({id:this.id,emails})
                        let req = await fetch('/administrator/customer/saveEmails', {
                        method: 'post',
                        headers: {
                            'X-CSRF-TOKEN':this.token ,
                            'Content-Type': 'application/json',
                            'accept': 'application/json'
                        },
                        body:emails
                        })
                        let res= await req.json()

                        if(req.ok){
                             return true
                        }
                        else{
                            alert('Problemas de internet')
                        }
                },



            }
            ,
            watch:{
                emails(oldEmail,newEmail){
                    this.current=newEmail[newEmail.length-1]
                }

            },
            updated:function(){
                  document.getElementById(`${this.emails.length-1}`).focus();
            }
            ,
            mounted: function () {
                this.getOtherEmails();
            }
        })


        $('#btn-save').click(function(){
            console.log('hola');
            app.saveEmails().then(function(data){
                console.log(data);

            if(data==true){
                document.getElementById('updateForm').submit();

            }
            })
        })


    </script>
@endsection