@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" id="createUser">

        <section class="content-header">
            {{-- <h1>Usuarios</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 active">Usuarios</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="boxfilter" class="box box-solid bg_dark hide">
                <div class="box-header with-border">
                    <div class="row align-items-center">
                        <div class="col-12">
                            <h4 class="box-title">Busqueda</h4>
                        </div>
                    </div>
                </div>
                <div class="box-body">
                    @php
                        $isClientScopedRoute = request()->routeIs('administrator.customers.client.show');
                        $filtersAction = $isClientScopedRoute
                            ? route('administrator.customers.client.show', $id)
                            : route('administrator.customers.users.index');
                    @endphp
                    <form method="GET" action="{{ $filtersAction }}">
                        <div class="row mb-3">

                            <div class="col-md-3 form-group">
                                <label>Documento</label>
                                <input type="text" name="document" class="form-control" value="{{ request('document') }}">
                            </div>

                            <div class="col-md-3 form-group">
                                <label>Nombre</label>
                                <input type="text" name="name" class="form-control" value="{{ request('name') }}">
                            </div>

                            <div class="col-md-3 form-group">
                                <label>Correo</label>
                                <input type="text" name="email" class="form-control" value="{{ request('email') }}">
                            </div>

                            <div class="col-md-3 form-group">
                                <label>Celular</label>
                                <input type="text" name="cellphone" class="form-control"  value="{{ request('cellphone') }}">
                            </div>

                            <div class="col-md-3 form-group">
                                <label>Cliente</label>
                                <input type="text" name="customer" class="form-control" value="{{ request('customer') }}">
                            </div>

                            <div class="col-md-3 form-group">
                                <label>Estado</label>
                                <select name="state" class="form-control">
                                    <option value="">Todos</option>
                                    @foreach (Config::get('constants.states') as $key => $state)
                                        <option value="{{ $key }}"
                                            {{ request('state') == $key ? 'selected' : '' }}>
                                            {{ $state['name'] }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>

                        </div>

                        <div class="row">
                            <div class="col-md-6">
                                <a href="{{ $filtersAction }}" class="btn btn-danger">
                                    <i class="fa fa-refresh"></i> Limpiar
                                </a>
                            </div>
                            <div class="col-md-6 text-right">
                                <button type="submit" class="btn btn-info">
                                    <i class="fa fa-search"></i> Buscar
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
            <div class="box">
                <div class="box-header with-border">
                    <div class="row align-items-center">
                        <div class="col-6">
                            <h4 class="box-title">Usuarios</h4>
                        </div>
                        <div class="col-6">
                            <div class="box-controls pull-right">
                                <div class="box-header-actions">
                                    <button data-toggle="modal" data-target="#modalCreate" class="btn btn-sm btn-success"><i class="fa fa-plus"></i> Agregar</button>
                                    <button type="button" class="btn btn-sm btn-info" id="filtro"><i class="fa fa-filter"></i> Filtro</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="box-body">
                    <table class="table table-sm table-hover table-responsive">
                        <thead>
                            <tr>
                                <th class="text-center">Número de identificación</th>
                                <th class="text-center">Nombre</th>
                                <th class="text-center">Correo</th>
                                <th class="text-center">Celular</th>
                                <th class="text-center">Cliente</th>
                                <th class="text-center">Estado</th>
                                <th class="text-center">Acción</th>
                            </tr>
                        </thead>
                        <tbody class="text-center">
                            @if (count($users) > 0)
                                @foreach ($users as $user)
                                    <tr>
                                        <td style="vertical-align:middle;" class="font-weight-bold">
                                            {{ $user->document }}
                                        </td>
                                        <td>{{ $user->name }} {{ $user->last_name }}</td>
                                        <td>{{ $user->email }}</td>
                                        <td>{{ $user->cellphone }}</td>
                                        <td>{{ $user->getCustomer->company }}</td>
                                        <td>
                                            <span
                                                class="badge badge-{{ Config::get('constants.states')[$user->state]['type'] }}">{{ Config::get('constants.states')[$user->state]['name'] }}</span>
                                        </td>
                                        <td>
                                            <a href="{{ route('administrator.customers.users.components', [$user->uuid]) }}"
                                                class="btn btn-warning btn-xs"><i class="fa fa-lock"
                                                    aria-hidden="true"></i></a>
                                            <button type="button" data-toggle="modal"
                                                data-target="#User{{ $user->uuid }}" class="btn btn-info btn-xs"><i
                                                    class="fa fa-pencil" aria-hidden="true"></i></button>
                                            <a href="javascript:;"
                                                onclick="openValidate('{{ $user->uuid }}', '{{ $user->name . ' ' . $user->last_name }}')"
                                                class="btn btn-danger btn-xs"><i class="fa fa-trash"
                                                    aria-hidden="true"></i></a>
                                        </td>
                                    </tr>
                                @endforeach
                            @else
                                <tr>
                                    <td colspan="6">No se encontraron usuarios</td>
                                </tr>
                            @endif
                        </tbody>
                    </table>
                </div>
                <div class="box-footer clearfix">
                    {{ $users->links() }}
                </div>
            </div>
        </section>

        <!-- Modal -->
        <div class="modal fade" id="modalCreate" tabindex="-1" role="dialog" aria-labelledby="modelTitleId"
            aria-hidden="true">
            <div class="modal-dialog modal-lg" style="min-width:90% !important" role="document">
                <div id="createUser" class="modal-content" style="min-width:90% !important">
                    <div class="modal-header">
                        <h5 class="modal-title">Crear Usuarios</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <div v-show="formError != null" class="alert alert-danger alert-dismissible fade show"
                            id="alert-validate" role="alert">
                            <p class="m-0" v-for="(error,i) in formError" :key="i">-
                                @{{ error[0] }}</p>
                        </div>



                        <div class="alert alert-danger alert-dismissible hide" role="alert" id="alert-email">
                            <p class="m-0" id="msg-email"></p>
                        </div>
                        <form action="{{ route('administrator.customers.users.store') }}" id="formCreateUser"
                            method="post" files="true" enctype="multipart/form-data">
                            @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>
                                            <option value="" selected disabled>Seleccione un cliente</option>
                                            @foreach ($customers as $customer)
                                                <option value="{{ $customer->id }}">{{ $customer->company }}</option>
                                            @endforeach
                                        </select>
                                        <small class="text-danger">{{ $errors->first('customer_id') }}</small>
                                    @else
                                        <input type="hidden" name="customer_id" value="{{ Auth::user()->id }}">
                                        <input type="text" class="form-control" value="{{ Auth::user()->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">
                                            @foreach ($documentTypes as $documentType)
                                                <option value="{{ $documentType->id }}">{{ $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="{{ old('document') }}">
                                        <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="{{ old('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="{{ old('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="{{ old('last_name') }}"
                                            required>
                                        <small class="text-danger">{{ $errors->first('last_name') }}</small>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label for="country" class="control-label">País</label>
                                        <v-select placeholder="Seleccione un país" :options="countries" label="name"
                                            v-model="selectedCountry"></v-select>
                                        <small class="text-danger">{{ $errors->first('country') }}</small>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label for="city" class="control-label">Ciudad</label>
                                        <input type="hidden" name="city" id="city">
                                        <v-select placeholder="Seleccione una ciudad" :options="cities"
                                            label="name" v-model="selectedCity"></v-select>
                                        <small class="text-danger">{{ $errors->first('city') }}</small>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label for="address" class="control-label">Dirección</label>
                                        <input type="text" id="address" name="address" placeholder="Dirección"
                                            autocomplete="off" class="form-control" value="{{ old('address') }}">
                                        <small class="text-danger">{{ $errors->first('address') }}</small>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="email" class="control-label">Correo *</label>
                                        <input type="email" id="email" name="email" placeholder="Correo"
                                            autocomplete="off" class="form-control" value="{{ old('email') }}"
                                            required>
                                        <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="{{ old('cellphone') }}">
                                        <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" required>
                                        <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"
                                            required>
                                        <small class="text-danger">{{ $errors->first('password_confirmation') }}</small>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="reportType" class="control-label">Tipo de reporte</label>
                                        <select name="reportType" class="form-control select2" id="reportType">
                                            <option value="2">Estandar</option>
                                            <option value="1">Premium</option>
                                        </select>
                                        <small class="text-danger">{{ $errors->first('reportType') }}</small>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-12">
                                    <button type="button" @click="sendUserForm()"
                                        class="btn btn_admin btn-block">Guardar</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>

    </div>

    @if (count($users) > 0)
        <div id="updates">
            @foreach ($users as $user)
                <div class="modal fade" id="User{{ $user->uuid }}" tabindex="-1" role="dialog"
                    aria-labelledby="modelTitleId" aria-hidden="true">
                    <div class="modal-dialog modal-lg" style="min-width:90% !important" role="document">
                        <div class="modal-content" style="min-width:90% !important">
                            <div class="modal-header">
                                <h5 class="modal-title">Editar Usuarios</h5>
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                    <span aria-hidden="true">&times;</span>
                                </button>
                            </div>
                            <div class="modal-body">
                                @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
                                <form id="updateFormu{{ $user->id }}"
                                    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" 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" 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>
                                                <input-pills ref="u{{ $user->id }}" :id-user="`{{ $user->uuid }}`"
                                                    :user-email="`{{ $user->email }}`" />
                                                <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" 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" 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" 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-3">
                                            <div class="form-group">
                                                <label for="reportType" class="control-label">Tipo de reporte</label>
                                                <select name="reportType" class="form-control select2" id="reportType">
                                                    <option value="2">Estandar</option>
                                                    <option value="1">Premium</option>
                                                </select>
                                                <small class="text-danger">{{ $errors->first('reportType') }}</small>
                                            </div>
                                        </div>
                                        <div class="col-md-3">
                                            <div class="form-group">
                                                <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>
                                    <div class="row">
                                        <div class="col-md-12">
                                            <button type="button" @click="save(`u{{ $user->id }}`)"
                                                class="btn  btn_admin btn-block">Guardar</button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>
    @endif

@endsection

@section('js')
    <script>
        function openValidate(id, name) {
            swal({
                title: "Estás seguro?",
                text: "El cliente " + name + " sera eliminado!",
                type: "warning",
                showCancelButton: true,
                confirmButtonColor: "#DD6B55",
                confirmButtonText: "Si, Eliminar!",
                cancelButtonText: 'Cancelar',
                closeOnConfirm: false
            }, function() {
                deleteCustomer(id);
            });
        }

        function deleteCustomer(id) {
            var urlPath = urlHost + "/administrator/customers/users/delete";
            $.ajax({
                type: 'delete',
                url: urlPath,
                data: {
                    "id": id
                },
                dataType: 'json',
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                beforeSend: function() {
                    // $('#loader_content').removeClass('hidden');
                },
                success: function(response) {
                    if (response.state == 1) {
                        swal({
                            title: "Eliminado!",
                            text: response.message,
                            type: "success",
                        }, function() {
                            location.reload();
                        });
                    } else if (response.state == 2) {
                        swal("Oops!", response.message, "warning");
                    } else {
                        swal("Oops!", "Hemos tenido problemas, intenta nuevamente", "warning");
                    }
                },
                error: function(xhr) {
                    swal("Oops!", "Hemos tenido problemas, intenta nuevamente", "warning");
                }
            });
        }
    </script>

    <script>
        Vue.component('v-select', VueSelect.VueSelect);

        new Vue({
            el: '#createUser',
            data() {
                return {
                    selectedCountry: '',
                    selectedCity: '',
                    countries: [],
                    cities: [],
                    token: document.querySelector('meta[name="csrf-token"]').content,
                    formError: null,
                    success: null
                }
            },
            watch: {
                selectedCountry() {
                    this.loadCities();
                },
                selectedCity() {
                    this.setCity();
                }
            },
            methods: {
                async loadCountries() {
                    $(".content_loading").fadeIn("slow");
                    let req = await fetch(`/options/countries`);
                    let res = await req.json();
                    this.countries = res.data;
                    $(".content_loading").fadeOut("slow");

                },
                async loadCities() {
                    $(".content_loading").fadeIn("slow");
                    let req = await fetch(`/options/cities/${this.selectedCountry.code}`);
                    let res = await req.json();
                    this.cities = res.data;
                    $(".content_loading").fadeOut("slow");

                },
                setCity() {
                    document.getElementById('city').value = this.selectedCity.id;
                },
                async sendUserForm() {
                    $('#alert-validate, #alert-email').hide();


                    $(".content_loading").fadeIn("slow");
                    let form = new FormData(document.getElementById('formCreateUser'));
                    let req = await fetch('{{ route('administrator.customers.users.store') }}', {
                        method: 'post',
                        headers: {
                            'X-CSRF-TOKEN': this.token,
                            'accept': 'application/json'
                        },
                        body: form
                    })
                    let res = await req.json();
                    $(".content_loading").fadeOut("slow");

                    if (req.status == 422) {
                        this.formError = res.errors;
                        $('#alert-validate').show();
                    }
                    if (res[0] == 'existe' || res[0] == 'suspendido') {
                        $('#alert-email').hide().show();
                        $('#msg-email').text(res[1]);
                    } else {
                        if (req.status == 200) {
                            this.success = true;
                            swal({
                                title: "Creado",
                                text: "Usuario creado correctamente",
                                type: "success",
                            }, function() {
                                $(".content_loading").fadeIn("slow");
                                location.reload();
                            });
                        }
                    }
                }
            },
            mounted() {
                this.loadCountries();
            }
        });
    </script>

    <script>
        Vue.component('inputPills', {
            props: ['idUser', 'userEmail'],
            data() {
                return {
                    emails: [],
                    last: null,
                    token: document.querySelector('meta[name="csrf-token"]').content
                }
            },
            methods: {
                async getOtherEmails() {
                    let req = await fetch('/administrator/customer/getDataUser/' + this.idUser)
                    let res = await req.json()
                    let emails = JSON.parse(res.data.others_emails);
                    if (Array.isArray(emails)) {
                        if (emails.length > 0) {
                            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.idUser,
                    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() {
            if (this.emails.length - 1 > 0) document.getElementById(`${this.emails.length-1}`).focus();
        },
        mounted: function() {
            this.getOtherEmails();
        },
        template: `
      <div>
      <div class="input-group">
      <input type="email" id="email" name="email" placeholder="Correo" autocomplete="off"
      class="form-control" :value="userEmail" 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>
      </div>
      `
        })
        var myVue = new Vue({
            el: '#updates',
            methods: {
                save(ref) {
                    typeof ref
                    this.$refs[ref].saveEmails().then(function(data) {
                        if (data == true) {
                            document.getElementById('updateForm' + ref).submit();
                        }
                    })
                }
            }
        })
    </script>

    <script>
        $('#filtro').click(() => {
            $("#boxfilter").slideToggle("slow");
        });
    </script>
@endsection