@extends('layout.administrator.index')
@section('title', 'Usuarios del sistema')

@section('style')
<style>
  .style-chooser .vs__search {
    height: 2.573rem !important;
  }
</style>
@endsection

@section('content')
<div class="content-wrapper" id="createUser">
  <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 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 action="{{route('administrator.customers.users.store')}}" 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" required>
                  @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')}}" 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="{{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')}}" required>
                <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')}}" required>
                <small class="text-danger">{{ $errors->first('cellphone') }}</small>
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col-md-6">
              <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-6">
              <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>
          <div class="row">
            <div class="col-md-12">
              <button type="submit" class="btn btn_admin btn-block">Guardar</button>
            </div>
          </div>
        </form>
      </div>
    </div>
  </section>
</div>
@endsection

@section('js')

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

  new Vue({
    el: '#createUser',
    data() {
      return {
        selectedCountry: '',
        selectedCity: '',
        countries: [],
        cities: []
      }
    },
    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;
      }
    },
    mounted() {
      this.loadCountries();
    }

  });
</script>
@endsection