@extends('modules.head') @section('contenido')
<h3><a class="ruta" class="" href="{{url('/deliveryMan')}}">{{Lang::get('messages.screen_add_deliveryMan_tag1')}} </a>
  <span class="separador-ruta">|</span><a class="ruta" class="" href="{{url('/deliveryMan/edit/'.$deliveryM->id)}}">{{
      Lang::get('messages.screen_edit_deliveryMan_tag1')}} </a>
</h3>

<div class="box">
  <div class="box-header with-border">
    <h3 class="box-title">{{Lang::get('messages.screen_edit_deliveryMan_tag1')}}</h3>

    <!-- /.box-tools -->
  </div>
  <!-- /.box-header -->
  <div class="box-body box-profile">
    @if($info->photo == null)
    <img class="media-object media-object-big" id="photo-user" src="{{ asset('img/user.png') }}" alt="User profile picture">
    @else
    <img class="media-object media-object-big" id="photo-user" src="{{ config('filesystems.disks.s3.url') }}/deliveryman/{{$info->photo}}" alt="User profile picture">
    @endif
  </div>
  <div class="content-btn-file">
    <span class="btn btnAdd btn-file">
      <i class="fa  fa-camera"> </i>{{Lang::get('messages.screen_edit_deliveryMan_tag3')}} <input type="file" accept="image/*" id="photo" name="photo" data-id="{{$deliveryM->id}}">
    </span>

  </div>
  <div class="box-body">

    <form role="form" id="editDeliveryMan" data-toggle="validator">
      <div class="row">
        <div class="col-4 col-md-4">
          <div class="form-group">
            <label for="first_name">{{Lang::get('messages.screen_add_deliveryMan_tag3')}}</label>
            <input type="text" class="form-control" value="{{$deliveryM->first_name}}" name="first_name" required>
          </div>
        </div>
        <div class="col-4 col-md-4">
          <div class="form-group">
            <label for="last_name">{{Lang::get('messages.screen_add_deliveryMan_tag4')}}</label>
            <input type="text" class="form-control" value="{{$deliveryM->last_name}}" name="last_name" required>
          </div>
        </div>
        <div class="col-4 col-md-4">
          <div class="form-group">
            <label for="email">{{Lang::get('messages.screen_add_deliveryMan_tag5')}}</label>
            <input type="text" class="form-control" id="email" value="{{$deliveryM->email}}" name="email" placeholder="" required disabled>
          </div>
        </div>

      </div>
      <div class="row">
        <div class="col-4 col-md-4">
          <div class="form-group">
            <label for="document">{{Lang::get('messages.screen_add_deliveryMan_tag6')}}</label>
            <input type="text" class="form-control" value="{{$deliveryM->document}}" name="document" required>
          </div>


        </div>
        <div class="col-2 col-md-2">

          <div class="form-group">
            <label for="phone">{{Lang::get('messages.screen_add_deliveryMan_tag7')}}</label>
            <input type="text" class="form-control" name="phone" value="{{$deliveryM->phone}}" required>
          </div>
        </div>
        <div class="col-2 col-md-2">
          <div class="form-group">
            <label for="plate">{{Lang::get('messages.screen_add_deliveryMan_tag8')}}</label>
            <input type="text" class="form-control" name="plate" value="{{$info->plate}}" required>
          </div>
        </div>
        <div class="col-4 col-md-4">
          <div class="form-group">
            <label for="courier_company_id">{{Lang::get('messages.screen_add_deliveryMan_tag9')}}</label>
            <Select name="courier_company_id" class="form-control">
              <option value="">-- Seleccionar</option>
              @foreach($courier as $c)
              @if($c->id == $info->courier_company_id)
              <option value="{{$c->id}}" selected="selected">{{$c->name}} </option>
              @else
              <option value="{{$c->id}}">{{$c->name}} </option>
              @endif

              @endforeach
            </Select>
          </div>
        </div>
      </div>


      <div class="row">

        <div class="col-4 col-md-4">
          <div class="form-group">
            <label for="sucursal_id">{{Lang::get('messages.screen_add_deliveryMan_tag10')}}</label>
            <Select name="sucursal_id" class="form-control">
              <option value="">-- Seleccionar</option>
              @foreach($sucursals as $sucursal)
              @if($sucursal->id == $info->sucursal_id)
              <option value="{{$sucursal->id}}" selected="selected">{{$sucursal->name}} </option>
              @else
              <option value="{{$sucursal->id}}">{{$sucursal->name}} </option>
              @endif

              @endforeach
            </Select>
          </div>
        </div>

        <div class="col-4 col-md-4">
          <div class="form-group">
            <label for="password">{{Lang::get('messages.screen_add_deliveryMan_tag11')}} {{ Lang::get('messages.optional')}}</label>
            <input id="password" type="text" class="form-control" name="password">
          </div>
        </div>
        <div class="col-4 col-md-4">
          <div class="form-group">
            <label for="confirmPassword">{{Lang::get('messages.screen_add_deliveryMan_tag12')}} {{ Lang::get('messages.optional')}}</label>
            <input id="confirmPassword" type="text" class="form-control" name="confirmPassword">
          </div>
        </div>
      </div>
      <button onClick="editDeliveryMan()" id="btn-edit-deliveryMan" data-id="{{$deliveryM->id}}" class="btn btnBox pull-right">{{Lang::get('messages.screen_edit_deliveryMan_tag2')}}</button>
      {{ csrf_field() }}
    </form>
  </div>
  <!-- /.box-body -->
</div>

@include('modules.modal_loading')

<script src="{{ asset('js/jQuery/jquery-2.2.3.min.js') }}"></script>
<script src="{{ asset('js/users.js') . '?v=' . time() }}"></script>
<script src="{{ asset('js/ux.js') . '?v=' . time() }}"></script>
<script src="{{ asset('js/bootstrap/js/bootstrap.min.js') }}"></script>
<script type="text/javascript">
  //input file
  $(document).on('change', ':file', function() {
    var input = $(this),
      numFiles = input.get(0).files ? input.get(0).files.length : 1,
      label = input.val().replace(/\\/g, '/').replace(/.*\//, '');

    input.trigger('fileselect', [numFiles, label]);
  });
  $(document).ready(function() {
    $(':file').on('fileselect', function(event, numFiles, label) {
      console.log(numFiles);
      console.log(label);
      var img = document.getElementById("photo");
      if (img != null) {
        id = $("#photo").attr('data-id');


        var fImage = img
        fImage = fImage.files[0];
        if (fImage) {
          $('#modalLoader').modal('show');
          $('#modalLoader').css('display', 'flex');
          var formData = new FormData();
          formData.append("id", id);
          formData.append("photo", fImage);

          $.ajax({
            type: 'POST',
            dataType: 'json',
            processData: false,
            contentType: false,
            headers: {
              'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            data: formData,
            url: '/user/updateImage',
            success: function(r) {

              if (r.r) {
                $('#modalLoader').modal('hide');
                $('#modalLoader').css('display', 'none');

                swal(r.m, {
                  icon: "success",
                  buttons: {
                    Ok: true,
                  }
                }).then((val) => {
                  if (val == "Ok") {
                    console.log(r.file);
                    $('#photo-user').attr('src', r.file);

                  }
                });

              } else {
                swal("Ok", "¡Error al guardar imagen!", "error");
                $('#modalLoader').modal('hide');
                $('#modalLoader').css('display', 'none');

              }

            },
            error: function(e) {
              swal("Ok", "¡Error al guardar imagen!", "error");
              $('#modalLoader').modal('hide');
              $('#modalLoader').css('display', 'none');

            }
          });
        }
      } else {
        swal("Error", 'Seleccione una imagen', "error");
      }
    });
  });
</script>


@endsection