@extends('superadmin.layouts.app')

@if (isset($user))
@section('title', 'Utente #' . $user->id)
@else
@section('title', 'Nuova Utente')
@endif

@section('content')
@component('components.superadmin.form')
@if (isset($user))
{{ Form::model($user, ['route' => ['superadmin.users.update', $user->id], 'method' => 'PATCH', 'enctype' => 'multipart/form-data']) }}
@else
{{ Form::open(['route' => 'superadmin.users.store', 'enctype' => 'multipart/form-data']) }}
@endif
<!-- General user data -->
<fieldset class="form-group">
  <legend class="col-form-label col-12">General</legend>
  <div class="form-row">
    <div class="form-group col-2 text-center">
      <div class="avatar-wrapper">
        @if (isset($user) && $user->profile_picture)
          <img src="{{ asset('storage/' . $user->profile_picture) }}" class="avatar avatar-128" />
        @else
          <img src="{{ asset('img/user.svg') }}" alt="Avatar" class="avatar avatar-128" />
        @endif
        <input type="hidden" name="profile_picture" disabled="disabled" />
        <div class="reset d-none">
          <i class="fa fa-trash"></i>
        </div>
      </div>
    </div>
    <div class="form-group col-10">
      <div id="avatar-dropzone" class="dropzone">
        <div class="dz-message needsclick">
          <button type="button" class="dz-button">Trascina l'avatar qui o fai clic per caricarlo.</button><br>
        </div>
        <div class="preview d-none"></div>
      </div>
    </div>
  </div>
  <div class="form-row">
    <div class="form-group col-4">
      {{ Form::label('first_name', 'Nome') }}
      {{ Form::text('first_name', null, ['class' => 'form-control', 'placeholder' => 'Nome']) }}
    </div>
    <div class="form-group col-4">
      {{ Form::label('last_name', 'Cognome') }}
      {{ Form::text('last_name', null, ['class' => 'form-control', 'placeholder' => 'Cognome']) }}
    </div>
    <div class="form-group col-4">
      {{ Form::label('username', 'Nome utente') }}
      {{ Form::text('username', null, ['class' => 'form-control', 'placeholder' => 'Nome utente']) }}
    </div>
  </div>
  <div class="form-row">
    <div class="form-group col-4">
      {{ Form::label('code', 'Codice') }}
      {{ Form::text('code', null, ['class' => 'form-control', 'placeholder' => 'Codice']) }}
    </div>
    <div class="form-group col-4">
      {{ Form::label('email', 'Email') }}
      {{ Form::email('email', null, ['class' => 'form-control', 'placeholder' => 'Email']) }}
    </div>
    <div class="form-group col-4">
      {{ Form::label('password', 'Password') }}
      {{ Form::password('password', ['class' => 'form-control', 'placeholder' => 'Password']) }}
    </div>
  </div>
  <div class="form-row">
    <div class="form-group col-6">
      {{ Form::label('nation_id', 'Nazionalità') }}
      {{ Form::select('nation_id', $nationalities->pluck('name_it', 'id'), null, ['class' => 'form-control', 'placeholder' => 'Nazionalità']) }}
    </div>
    <div class="form-group col-6">
      {{ Form::label('phone', 'Telefono') }}
      {{ Form::text('phone', null, ['class' => 'form-control', 'placeholder' => 'Telefono']) }}
    </div>
  </div>
  <div class="form-row">
    <div class="form-group col-6">
      {{ Form::label('vat', 'P. IVA') }}
      {{ Form::text('vat', null, ['class' => 'form-control', 'placeholder' => 'P. IVA']) }}
    </div>
    <div class="form-group col-6">
      {{ Form::label('eurobonus', 'Eurobonus') }}
      {{ Form::number('eurobonus', isset($user) ? $user->eurobonus : 0, ['class' => 'form-control', 'placeholder' => 'Eurobonus', 'min' => 0]) }}
    </div>
  </div>
  <div class="form-row">
    <div class="form-group col-4">
      <div class="custom-control custom-switch pl-5">
        {{ Form::checkbox('is_active', 1, isset($user) ? $user->is_active : 1, ['class' => 'custom-control-input', 'id' => 'is_active']) }}
        {{ Form::label('is_active', 'Active', ['class' => 'custom-control-label pl-3']) }}
      </div>
    </div>
  </div>
</fieldset>
<!-- / General user data -->

{{ Form::button('<i class="fa fa-save mr-2"></i> Save', ['type' => 'submit', 'class' => 'btn btn-block btn-optovista p-3']) }}
{{ Form::close() }}
@endcomponent
@endsection

@push('scripts')
<script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.7.2/min/dropzone.min.js" integrity="sha512-9WciDs0XP20sojTJ9E7mChDXy6pcO0qHpwbEJID1YVavz2H6QBz5eLoDD8lseZOb2yGT8xDNIV7HIe1ZbuiDWg==" crossorigin="anonymous"></script>
<script type="text/javascript">
  Dropzone.autoDiscover = false;

  $(document).ready(function() {

    let initializeDropzone = function(selector, previewSelector) {
      let $target = $(selector);
      let $preview = $(previewSelector);
      let $thumbnail = $preview.find('img');
      let $resetBtn = $preview.find('.reset');
      let $input = $preview.find('input[type=hidden]');

      let dropzone = new Dropzone(selector, {
        url: "{{ route('superadmin.users.index') }}",
        acceptedFiles: "image/*",
        autoProcessQueue: false,
        previewsContainer: [selector, '.preview'].join(' '),
        uploadMultiple: false
      });

      let reset = function() {
        $input.val('');
        $input.attr('disabled', true);
        $thumbnail.attr('src', $thumbnail.data('original'));
        $thumbnail.removeAttr('data-original');
        $resetBtn.addClass('d-none');
        $resetBtn.off('click');
        dropzone.removeAllFiles(true);
      };

      dropzone.on("thumbnail", function(thumbnail, dataURL) {
        $thumbnail.data('original', $thumbnail.attr('src'));
        $thumbnail.attr('src', dataURL);
        $input.val(thumbnail.dataURL);
        $input.attr('disabled', false);
        $resetBtn.on("click", reset);
        $resetBtn.removeClass('d-none');
      });
    };

    initializeDropzone('#avatar-dropzone', '.avatar-wrapper');
  });
</script>
@endpush

@push('styles')
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.7.2/dropzone.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.7.2/basic.min.css" integrity="sha512-MeagJSJBgWB9n+Sggsr/vKMRFJWs+OUphiDV7TJiYu+TNQD9RtVJaPDYP8hA/PAjwRnkdvU+NsTncYTKlltgiw==" crossorigin="anonymous" />
@endpush