@extends('admin.layouts.app')

@section('title', 'Edit Company')
@section('stylesheets')
<link href="{{asset('creative/component/bootstrap-fileinput/css/fileinput.min.css')}}" rel="stylesheet">
<link href="{{asset('creative/component/bootstrap-fileinput/themes/explorer-fas/theme.min.css')}}" rel="stylesheet">
<link href="{{asset('creative/component/summernote/summernote-bs5.min.css')}}" rel="stylesheet">
@endsection
@section('content')
<div class="row">
    <div class="col-12">
        <div class="page-title-box d-sm-flex align-items-center justify-content-between">
            <h4 class="mb-sm-0">Company</h4>

            <div class="page-title-right">
                <ol class="breadcrumb m-0">
                    <li class="breadcrumb-item"><a href="{{route('admin.home')}}">Home</a></li>
                    <li class="breadcrumb-item"><a href="{{route('admin.site.index')}}">Company</a></li>
                    <li class="breadcrumb-item active">Edit Company</li>
                </ol>
            </div>

        </div>
    </div>
</div>
<form id="form" action="{{route('admin.site.update',['id'=>$site->id])}}" method="post" autocomplete="off">
<div class="row">
    <div class="overlay d-none">
        <div class="spinner-border" role="status">
        <span class="sr-only">Loading...</span>
        </div>
    </div>
    <div class="col-lg-8">
      <div class="card">
          <!-- <div class="card-header align-items-center d-flex">
              <h4 class="card-title mb-0 flex-grow-1">Tambah Provinsi</h4>

              <div class="flex-shrink-0">
                  <button form="form" type="submit"  class="btn btn-primary btn-icon waves-effect waves-light"><i class="ri-save-line"></i></button>
              </div>
          </div> -->
          <div class="card-body">
            {{ csrf_field() }}
            <input type="hidden" name="_method" value="put">
            <input type="text" hidden name="file_logo" id="file_logo">
            <input type="text" hidden name="file_long_logo" id="file_long_logo">
              <div class="mb-3">
                    <label for="code" class="col-form-label">Code <b class="text-danger">*</b></label>
                    <input type="text" class="form-control" id="code" name="code" placeholder="Code" required value="{{$site->code}}">
                  </div>
                <div class="mb-3">
                  <label for="name" class="col-form-label">Name <b class="text-danger">*</b></label>
                  <input type="text" class="form-control" id="name" name="name" placeholder="Name" required value="{{$site->name}}">
                </div>
                <div class="mb-3">
                  <label for="email">Email <b class="text-danger">*</b></label>
                  <div class="input-group">
                  <span class="input-group-text"><i class="ri-mail-line"></i></span>
                    <input type="email" name="email" class="form-control" id="email" required placeholder="Email" value="{{$site->email}}"/>
                  </div>
                </div>
                <div class="mb-3">
                  <label for="phone">Phone <b class="text-danger">*</b></label>
                  <div class="input-group">
                    <span class="input-group-text"><i class="ri-phone-line"></i></span>
                    <input type="text" name="phone" class="form-control" id="company_phone" required placeholder="Phone" value="{{$site->phone}}"/>
                  </div>
                </div>
                <div class="mb-3">
                  <label for="address">Address <b class="text-danger">*</b></label>
                  <textarea class="form-control" id="address" name="address" placeholder="Alamat" required style="height: 150px;">{{$site->address}}</textarea>
                </div>
                <div class="mb-3">
                    <label for="status" class="form-label">Status</label>
                    <select class="form-control" id="status" name="status">
                          <option value="0" @if($site->status == 0) selected @endif>Not Active</option>
                          <option value="1"  @if($site->status == 1) selected @endif>Active</option>
                    </select>
                </div>
                <div class="mb-3">
                      <label for="logo">Logo <b class="text-danger">*</b></label>
                      <input type="file" class="form-control" name="logo" id="logo" accept="image/*"/>
                  </div>
                  <div class="mb-3">
                    <label for="logo">Long Logo <b class="text-danger">*</b></label>
                    <input type="file" class="form-control" name="long_logo" id="long_logo" accept="image/*"/>
                </div>
            </form>
          </div>
          
        </div>
        <div class="text-end mb-4">
              <button form="form" type="submit" class="btn btn-success w-sm">Submit</button>
          </div>
      </div>
</div>
</form>
@endsection

@push('scripts')
<script src="{{asset('creative/component/validate/jquery.validate.min.js')}}"></script>
<script src="{{asset('creative/component/bootstrap-fileinput/js/fileinput.min.js')}}"></script>
<script src="{{asset('creative/component/bootstrap-fileinput/themes/explorer-fas/theme.min.js')}}"></script>
<script>
  $(document).ready(function(){
    $("input[name=code]").inputmask("Regex", {
            regex: "[a-z]*"
    });
    $("#logo").fileinput({
      browseClass: "btn btn-danger",
          showRemove: false,
          showUpload: false,
          showDrag:false,
          allowedFileExtensions: ["png"],
          dropZoneEnabled: false,
          @if(Storage::exists($site->logo))
          initialPreview: '<img src="{{Storage::url($site->logo)}}" class="kv-preview-data file-preview-image">',
          @endif
          initialPreviewAsData: false,
          initialPreviewFileType: 'image',
          @if(Storage::exists($site->logo))
          initialPreviewConfig: [
          {caption: "{{$site->logo}}", downloadUrl: "{{Storage::url($site->logo)}}", size:"{{ @Storage::size($site->logo)}}",url: false}
          ],
          @endif
          theme:'explorer-fas'
      }).on('filecleared', function() {
          // Set input dengan name file_logo menjadi "0" ketika tombol remove diklik
          $('input[name="file_logo"]').val("1");
      });
      $("#long_logo").fileinput({
      browseClass: "btn btn-danger",
          showRemove: false,
          showUpload: false,
          showDrag:false,
          allowedFileExtensions: ["png"],
          dropZoneEnabled: false,
          @if(Storage::exists($site->long_logo))
          initialPreview: '<img src="{{Storage::url($site->long_logo)}}" class="kv-preview-data file-preview-image">',
          @endif
          initialPreviewAsData: false,
          initialPreviewFileType: 'image',
          @if(Storage::exists($site->long_logo))
          initialPreviewConfig: [
          {caption: "{{$site->long_logo}}", downloadUrl: "{{Storage::url($site->long_logo)}}", size:"{{ @Storage::size($site->long_logo)}}",url: false}
          ],
          @endif
          theme:'explorer-fas'
      }).on('filecleared', function() {
        // Set input dengan name file_long_logo menjadi "0" ketika tombol remove diklik
        $('input[name="file_long_logo"]').val("1");
    });
    $('#status').select2();
      $("#form").validate({
        errorElement: 'div',
        errorClass: 'invalid-feedback',
        focusInvalid: false,
        highlight: function (e) {
          $(e).closest('.form-group').removeClass('has-success').addClass('was-validated has-error');
        },

        success: function (e) {
          $(e).closest('.form-group').removeClass('has-error').addClass('has-success');
          $(e).remove();
        },
        errorPlacement: function (error, element) {
          if(element.is(':file')) {
            error.insertAfter(element.parent().parent().parent());
          }else
          if(element.parent('.input-group').length) {
            error.insertAfter(element.parent());
          }
          else
          if (element.attr('type') == 'checkbox') {
            error.insertAfter(element.parent());
          }
          else{
            error.insertAfter(element);
          }
        },
        submitHandler: function() {
          $.ajax({
            url:$('#form').attr('action'),
            method:'post',
            data: new FormData($('#form')[0]),
            processData: false,
            contentType: false,
            dataType: 'json',
            beforeSend:function(){
               $('.overlay').removeClass('d-none');
            }
          }).done(function(response){
                $('.overlay').addClass('d-none');
                if(response.status){
                  document.location = response.results;
                }
                else{
                  Swal.fire({ title: "Error!", text: response.message, icon: "error", confirmButtonClass: "btn btn-primary w-xs mt-2", buttonsStyling: !1 })
                }
                return;
          }).fail(function(response){
              $('.overlay').addClass('d-none');
              var response = response.responseJSON;
              Swal.fire({ title: "Error!", text: response.message, icon: "error", confirmButtonClass: "btn btn-primary w-xs mt-2", buttonsStyling: !1 })
          })
        }
      });
  });
</script>
@endpush