@extends('layouts.back-end.body')

@section('content')
  <div class="app-content pt-3 p-md-3 p-lg-4">
    <div class="container-xl">
      <h1 class="app-page-title"><svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill="currentColor"
          class="bi bi-tags-fill" viewBox="0 0 16 16">

          <path
            d="M2 2a1 1 0 0 1 1-1h4.586a1 1 0 0 1 .707.293l7 7a1 1 0 0 1 0 1.414l-4.586 4.586a1 1 0 0 1-1.414 0l-7-7A1 1 0 0 1 2 6.586V2zm1 1.5a.5.5 0 1 0 0-1 .5.5 0 0 0 0 1zm4.004 7.646a.5.5 0 0 0 .708 0L14 7.707l-3.353-3.354L4.354 11.354a.5.5 0 0 0 0 .708l1.646 1.647z" />

        </svg><span class="sub-navicate">{{ __('message.category') }} <svg xmlns="http://www.w3.org/2000/svg"
            width="16" height="16" fill="currentColor" class="bi bi-chevron-double-right" viewBox="0 0 16 16">

            <path fill-rule="evenodd"
              d="M3.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L9.293 8 3.646 2.354a.5.5 0 0 1 0-.708z" />

            <path fill-rule="evenodd"
              d="M7.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L13.293 8 7.646 2.354a.5.5 0 0 1 0-.708z" />

          </svg> {!! $title !!}</span></h1>
      <form class="form-horizontal" id="form-category" method="POST"
        action="{{ !isset($row) ? route('category.store') : route('category.update', $row->id) }}"
        enctype="multipart/form-data">
        @csrf
        @if (isset($row))
          <input name="_method" type="hidden" value="PUT">
        @endif
        <div class="app-card app-card-notification shadow-sm mb-4">
          <div class="app-card-body p-4 input-p-4">
            <div class="col-lg-12 col-md-12 col-sm-12 row middle-decoration slide-padding">

              <div class="col-lg-6 col-md-6 col-sm-12 tab-language">
                <label>{{ __('message.name') }}<span class="red">*</span></label>
                <input type="text" class="form-control require-input" name="name"
                  value="{{ isset($row['name']) ? $row['name'] : '' }}" placeholder="{{ __('message.please input') }}">
              </div>

              <div class="col-lg-6 col-md-6 col-sm-12">
                <div class="image-upload-wrap">
                  <input class="file-upload-input" type='file' name="original_file" id="original_file"
                    onchange="readURL(this);" accept="image/*" />
                  <div class="drag-text">
                    <h3> {{ __('message.please select an image') }}</h3>
                  </div>
                </div>
                <div class="file-upload-content img-container">
                  <img class="file-upload-image" id="file-upload-image" src="#" alt="your image" />
                  <button class="btn" type="button" onclick="removeUpload()"><svg xmlns="http://www.w3.org/2000/svg"
                      width="16" height="16" fill="currentColor" class="bi bi-x-square" viewBox="0 0 16 16">

                      <path
                        d="M14 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h12zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2z" />

                      <path
                        d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z" />

                    </svg></button>
                </div>
              </div>
              @if (isset($row->thumbnail))
                <div class="col-lg-2 col-md-2 col-sm-12 resize-img thumbnail-img" id="x36-remove">
                  <span id="span36-remove"></span>
                  <input type="hidden" id="thumbnail" name="thumbnail" value="" />
                  <img id="thumbnail-preview" style="width: 100px; height: 100px; "
                    src="{{ isset($row->thumbnail) ? asset('storage/' . $row->thumbnail) : '' }}" />
                </div>
              @else
                <div class="col-lg-2 col-md-2 col-sm-12 resize-img thumbnail-img" id="x36-remove" style="display:none;">
                  <span id="span36-remove">36 x 36</span>
                  <input type="hidden" id="thumbnail" name="thumbnail" value="" />
                  <img id="thumbnail-preview" src="" style="width: 100px; height: 100px; " />
                </div>
              @endif

              <div class="col-lg-12 col-md-12 col-sm-12" style="padding-top: 15px;">
                <label style="margin-bottom: 0px;">{{ __('message.description') }}</label>

                <textarea class="text-area" rows="6" id="description" name="description" placeholder="" style="margin-top: 10px;">{{ isset($row->description) ? $row->description : '' }}</textarea>

              </div>

              <div class="col-lg-12 col-md-12 col-sm-12 input-next">
                <div class="form-check">
                  <input class="form-check-input" type="checkbox" name="is_active"
                    value="{{ isset($row['is_active']) ? $row['is_active'] : '1' }}" id="flexCheckApprove">
                  <label class="form-check-label" for="flexCheckApprove">
                    {{ __('message.approve') }}
                  </label>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="btn-save-change">
          <button type="submit" class="btn app-btn-primary float-right"><svg xmlns="http://www.w3.org/2000/svg"
              width="16" height="16" fill="currentColor" class="bi bi-shield-check" viewBox="0 0 16 16">

              <path
                d="M5.338 1.59a61.44 61.44 0 0 0-2.837.856.481.481 0 0 0-.328.39c-.554 4.157.726 7.19 2.253 9.188a10.725 10.725 0 0 0 2.287 2.233c.346.244.652.42.893.533.12.057.218.095.293.118a.55.55 0 0 0 .101.025.615.615 0 0 0 .1-.025c.076-.023.174-.061.294-.118.24-.113.547-.29.893-.533a10.726 10.726 0 0 0 2.287-2.233c1.527-1.997 2.807-5.031 2.253-9.188a.48.48 0 0 0-.328-.39c-.651-.213-1.75-.56-2.837-.855C9.552 1.29 8.531 1.067 8 1.067c-.53 0-1.552.223-2.662.524zM5.072.56C6.157.265 7.31 0 8 0s1.843.265 2.928.56c1.11.3 2.229.655 2.887.87a1.54 1.54 0 0 1 1.044 1.262c.596 4.477-.787 7.795-2.465 9.99a11.775 11.775 0 0 1-2.517 2.453 7.159 7.159 0 0 1-1.048.625c-.28.132-.581.24-.829.24s-.548-.108-.829-.24a7.158 7.158 0 0 1-1.048-.625 11.777 11.777 0 0 1-2.517-2.453C1.928 10.487.545 7.169 1.141 2.692A1.54 1.54 0 0 1 2.185 1.43 62.456 62.456 0 0 1 5.072.56z" />

              <path
                d="M10.854 5.146a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708 0l-1.5-1.5a.5.5 0 1 1 .708-.708L7.5 7.793l2.646-2.647a.5.5 0 0 1 .708 0z" />

            </svg> {{ __('message.save change') }}</button>

          <button type="button" onclick="redirect_back();" class="btn btn-warning float-right cancel-margin"><svg
              xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
              class="bi bi-arrow-left" viewBox="0 0 16 16">

              <path fill-rule="evenodd"
                d="M15 8a.5.5 0 0 0-.5-.5H2.707l3.147-3.146a.5.5 0 1 0-.708-.708l-4 4a.5.5 0 0 0 0 .708l4 4a.5.5 0 0 0 .708-.708L2.707 8.5H14.5A.5.5 0 0 0 15 8z" />

            </svg> {{ __('message.go back') }}</button>
        </div>
      </form>
    </div>
  </div>
  <style>
    .resize-img {
      /* height: 36px;
          width: 36px;
          margin: 20px; */
      border: 3px dashed #c2cac6;
      text-align: center;
      font-size: 12px;
      padding-top: 0px;
    }
  </style>

  <script type="text/javascript">
    function readURL(input) {
      if (input.files && input.files[0]) {
        var fileReader = new FileReader();
        fileReader.onload = function(e) {
          $('.image-upload-wrap').hide();
          $('.file-upload-image').attr('src', e.target.result);
          $('.file-upload-content').show();
          $('.image-title').html(input.files[0].name);

          var image = new Image();
          image.onload = function() {
            var canvas = document.createElement("canvas");
            var context = canvas.getContext("2d");


            var finalSize = 512;
            canvas.width = finalSize;
            canvas.height = finalSize;


            var aspectRatio = image.width / image.height;
            var cropX = 0,
              cropY = 0,
              cropSize;

            if (aspectRatio > 1) {

              cropSize = image.height;
              cropX = (image.width - cropSize) / 2;
            } else {

              cropSize = image.width;
              cropY = (image.height - cropSize) / 2;
            }

            context.drawImage(image, cropX, cropY, cropSize, cropSize, 0, 0, finalSize, finalSize);

            var preview = document.getElementById("thumbnail-preview");
            preview.src = canvas.toDataURL('image/jpeg', 1.0);

            document.getElementById("thumbnail").value = canvas.toDataURL('image/jpeg', 1.0);

            $('#x36-remove').show();
          }

          // image.onload = function() {
          //   var canvas = document.createElement("canvas");
          //   var context = canvas.getContext("2d");
          //   canvas.width = 512;
          //   canvas.height = 512;
          //   context.drawImage(image, 0, 0, canvas.width, canvas.height);

          //   document.getElementById("thumbnail-preview").src = canvas.toDataURL('image/jpeg', 1.0);
          //   document.getElementById("thumbnail").value = canvas.toDataURL('image/jpeg', 1.0);

          //   $('#x36-remove').show();
          // }
          image.src = e.target.result;
        };
        fileReader.readAsDataURL(input.files[0]);

      } else {
        removeUpload();
      }
    }

    function removeUpload() {
      $('.file-upload-input').replaceWith($('.file-upload-input').clone());
      $('.file-upload-content').hide();
      $('.image-upload-wrap').show();
      document.getElementById("thumbnail-preview").src = "";
      document.getElementById("thumbnail").value = "";
      $('#x36-remove').hide();
    }

    $(document).ready(function() {
      var description = `{{ isset($row->description) ? $row->description : '' }}`;
      $('#description').val(description);
    });

    // check user is approve or padding
    var is_approve = $('#flexCheckApprove').val();
    if (is_approve == 1) {
      $('#flexCheckApprove').attr('checked', true);
    } else {
      $('#flexCheckApprove').attr('checked', false);
    }
    $('#form-category :checkbox').change(function() {
      if (this.checked) {
        $('#flexCheckApprove').val(1);
        $('#flexCheckApprove').attr('checked', true);
      } else {
        $('#flexCheckApprove').val(0);
        $('#flexCheckApprove').attr('checked', false);
      }
    });

    // redirect back to listing page
    function redirect_back() {
      location.href = '{{ url('/admin/category') }}';
    }
  </script>
@endsection