@extends('admin.layout')
@section('title', 'SubCategory')
@section('header')

<link rel="stylesheet" type="text/css" href="{{ asset('/assets') }}/css/datatable/dataTables.bootstrap5.min.css">
<link rel="stylesheet" type="text/css" href="{{ asset('/assets') }}/css/datatable/responsive.bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="{{ asset('/assets') }}/css/datatable/buttons.dataTables.min.css">

@endsection
@section('content')

<div class="container-fluid page-wrapper">


  <div class="row">
    <div class="">
      <h3 class="page-top-heading">Create SubCategory</h3>
    </div>
  </div>

  <form action="{{ route('add_subcategory') }}" method="POST" enctype="multipart/form-data">
    @csrf
    <div class="row mt-4">

      {{-- Parent Category Dropdown --}}
      <div class="col-xl-3 col-lg-3 col-md-4 col-sm-6 col-6 mb-2">
        <label class="mb-2">Select Category</label>
        <select name="category_id" class="form-control">
          <option value="">-- Select Category --</option>
          @foreach($categories as $category)
          <option value="{{ $category->category_id }}">{{ $category->category_name }}</option>
          @endforeach
        </select>

      </div>

      {{-- Subcategory Name --}}
      <div class="col-xl-3 col-lg-3 col-md-4 col-sm-6 col-6 mb-2">
        <label class="mb-2">Subcategory Name</label>
        <input type="text" class="form-control" name="subcategory_name" placeholder="Subcategory Name">
      </div>

      <div class="col-xl-3 col-lg-3 col-md-4 col-sm-6 col-6 mb-2">
        <label class="mb-2">துணை வகை பெயர்</label>
        <input type="text" class="form-control" name="subcat_name" placeholder="துணை வகை பெயர் உள்ளிடவும்">
      </div>


      <div class="col-xl-3 col-lg-3 col-md-4 col-sm-6 col-6 mb-2">
        <div class="category-upload-wrapper" id="category-upload-wrapper">
          <div id="icon-upload-conditions" class="icon-upload-conditions text-center">
            <div><i class="fa-solid fa-file-arrow-up upload-icon"></i></div>
            <p class="text-center click-to-upload">Click to Upload</p>
            <div class="file-size-UHGHH">( Max file size: 1 MB )</div>
            <img src="" id="category-icon-view" class="img-responsive">
          </div>
          <input class="upload-icon" type="file" name="image" id="upload-category-icon" style="display: none;">

        </div>
      </div>
      {{-- Submit --}}
      <div class="col-xl-3 col-lg-3 col-md-4 col-sm-6 col-6 mb-2 d-flex align-items-end">
        <button type="submit" class="btn btn-primary feature-btn"><i class="fa-solid fa-plus me-2"></i>Add
          Subcategory</button>
      </div>
    </div>
  </form>


  <div class="row mt-4">
    <div class="col-lg-12">
      <div class="card datatable-card">
        <div class="card-body">
          <table id="data-table" class="table nowrap align-middle" style="width:100%">


            <thead>
              <tr>
                <th>SN</th>
                <th>CATEGORY NAME</th>
                <th>SUBCATEGORY NAME</th>
                <th>SUBCATEGORY NAME IN TAMIL</th>
                <th>PREVIEW</th>
                <th>CREATED DATE</th>
                <th>ACTION</th>
              </tr>
            </thead>
            @php
            $sn = 1;
            @endphp
            <tbody>
              @foreach ($category_list as $category)
              <tr>
                <td>{{ $loop->iteration }}</td>
                <td>{{ $category->category_name}}</td>
                <td>{{ $category->subcategory_name }}</td>
                <td>{{ $category->subcat_name }}</td>
                <td>
                  @php
                  $subcategoryImageUrl = null;

                  $digitalOceanBaseUrl =
                  'https://dstone.sfo3.digitaloceanspaces.com';

                  if (
                  !empty(
                  $category->subcategory_image
                  )
                  ) {
                  $storedImage = ltrim(
                  trim(
                  $category->subcategory_image
                  ),
                  '/'
                  );

                  /*
                  |--------------------------------------------------------------------------
                  | Already full URL
                  |--------------------------------------------------------------------------
                  */
                  if (
                  str_starts_with(
                  $storedImage,
                  'http://'
                  ) ||
                  str_starts_with(
                  $storedImage,
                  'https://'
                  )
                  ) {
                  $subcategoryImageUrl =
                  $storedImage;

                  /*
                  |--------------------------------------------------------------------------
                  | New DigitalOcean path
                  |--------------------------------------------------------------------------
                  | icons/1784800073_images.jpg
                  |--------------------------------------------------------------------------
                  */
                  } elseif (
                  str_starts_with(
                  $storedImage,
                  'icons/'
                  )
                  ) {
                  $subcategoryImageUrl =
                  rtrim(
                  $digitalOceanBaseUrl,
                  '/'
                  ) .
                  '/' .
                  $storedImage;

                  /*
                  |--------------------------------------------------------------------------
                  | Old local path
                  |--------------------------------------------------------------------------
                  | assets/uploads/icons/image.png
                  |--------------------------------------------------------------------------
                  */
                  } else {
                  $subcategoryImageUrl =
                  asset($storedImage);
                  }
                  }
                  @endphp

                  @if($subcategoryImageUrl)

                  <img src="{{ $subcategoryImageUrl }}"
                    class="preview-td-img"
                    alt="{{ $category->subcategory_name ?? 'Subcategory image' }}"
                    loading="lazy"
                    onerror="
                this.style.display='none';
                this.nextElementSibling.style.display='inline';
             ">

                  <span class="text-danger"
                    style="display:none;">

                    Image not found

                  </span>

                  @else

                  <span class="text-muted">
                    Null
                  </span>

                  @endif
                </td>

                <td>{{ $category->created_at->format('Y-m-d') }}</td>
                <td>
                  <button type="button" class="btn transparent-btn me-1 updatebtn"
                    data-user-id="{{ $category->id }}"
                    data-category-id="{{ $category->category_id }}"
                    data-subcategory-name="{{ $category->subcategory_name }}"
                    data-subcategory-image="{{ $category->subcategory_image }}">
                    <i class="fa-regular fa-pen-to-square edit-icon"></i>
                  </button>

                  <button type="button" data-bs-toggle="modal" data-bs-target="#Hide2Modal"
                    class="btn transparent-btn" data-user-id="{{ $category->id }}" onclick="setCategoryId(this)">
                    @if ($category->is_active == 0)
                    <i class="fa-regular fa-eye-slash eye-icon"></i>
                    @else
                    <i class="fa-regular fa-eye eye-icon"></i>
                    @endif

                    <button type="button" data-bs-toggle="modal" data-bs-target="#Delete2Modal"
                      class="btn transparent-btn me-1" data-user-id="{{ $category->id }}"
                      onclick="setDeleteId(this)"><i class="fa-regular fa-trash-can delete-icon"></i></button>

                </td>
              </tr>
              @endforeach
            </tbody>



            <div class="modal fade zoom-in" id="EditCategoryModal" tabindex="-1" aria-labelledby="exampleModalLabel"
              aria-hidden="true">
              <div class="modal-dialog">
                <div class="modal-content">
                  <div class="modal-header">
                    <h1 class="modal-title fs-5" id="exampleModalLabel">Edit subCategory</h1>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                  </div>
                  <div class="modal-body">
                    <div class="row">
                      <div class="col-lg-12">
                        <div class="modal-card px-3">

                          <form action="{{ route('update_subcategory') }}" method="POST" enctype="multipart/form-data">
                            @csrf
                            <input type="hidden" class="form-control" id="edit-subcategory-id" name="subcategory_id">

                            <div class="form-group mb-3">
                              <label for="edit-category-id" class="pb-2">Category Name</label>

                              <select class="form-control" name="category_id" id="edit-category-id">
                                <option value="">Select Category</option>
                                @foreach ($categories as $cat)
                                <option value="{{ $cat->category_id }}">{{ $cat->category_name }}</option>
                                @endforeach
                              </select>


                            </div>

                            {{-- SUBCATEGORY NAME --}}
                            <div class="form-group mb-3">
                              <label for="edit-subcategory-name" class="pb-2">SubCategory Name</label>
                              <input type="text" class="form-control"
                                id="edit-subcategory-name" name="subcategory_name" placeholder="SubCategory Name">
                            </div>

                            <div class="form-group mb-3">
                              <label for="edit-subcategory-name" class="pb-2">SubCategory Name</label>
                              <input type="text" class="form-control"
                                id="edit-subcat-name" name="subcat_name" placeholder="SubCategory Name">
                            </div>

                            {{-- IMAGE UPLOAD --}}
                            <div class="my-3">
                              <label for="change-existing-icon" class="pb-2">SubCategory Icon</label>
                              <div id="update-category-icon-wrapper" class="category-upload-wrapper">
                                <img src="" id="edit-category-icon"
                                  class="img-responsive">
                                <input type="file" id="change-existing-icon" name="subcategory_image" class="form-control d-none">

                              </div>
                            </div>

                            <button type="submit" class="btn btn-primary full-width-btn my-3">
                              <i class="fa-solid fa-arrows-rotate me-2"></i>Update Category
                            </button>
                          </form>

                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="modal fade zoom-in" id="Hide2Modal" tabindex="-1" aria-labelledby="exampleModalLabel"
              aria-hidden="true">
              <div class="modal-dialog">
                <div class="modal-content">
                  <div class="modal-body">
                    <div class="row">
                      <div class="col-lg-12">
                        <div class="p-3">
                          <div class="text-center">
                            <img class="mb-3" src="{{ asset('/assets/images/icons/hide.svg') }}">
                            <p class="my-4 are-you-sure"></p>
                            <p class="text-muted my-2 are-you-sure-subtext">Are you sure
                              you want to hide/unhide this?</p>
                          </div>
                          <form action="{{ route('hide_subcategory') }}" method="POST" enctype="multipart/form-data">
                            @csrf
                            <input type="hidden" id="category_id" name="category_id">
                            <div class="d-flex align-items-center mt-5 mb-3">
                              <button type="button" class="btn btn-light cancel-btn me-3"
                                data-bs-dismiss="modal">Cancel</button>
                              <button type="submit" class="btn btn-primary yes-btn">
                                <i class="fa-regular fa-circle-check me-2"></i>Yes

                              </button>
                            </div>
                          </form>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>

          </table>

        </div>
      </div>
    </div>
  </div>
  <!--Delete Modal  Starts-->
  <div class="modal fade zoom-in" id="Delete2Modal" tabindex="-1" aria-labelledby="exampleModalLabel"
    aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-body">
          <div class="row">
            <div class="col-lg-12">
              <div class="p-3">
                <div class="text-center">
                  <img class="mb-3" src="{{ asset('/assets') }}/images/icons/delete-icon.svg">
                  <p class="my-4 are-you-sure"></p>
                  <p class="text-muted my-2 are-you-sure-subtext">Are you sure want to Delete this?
                  </p>
                </div>
                <form action="{{ route('delete_subcategory') }}" method="POST" enctype="multipart/form-data">
                  @csrf
                  <input type="hidden" id="delete_id" name="delete_id">
                  <div class="d-flex align-items-center mt-5 mb-3">
                    <button type="button" class="btn btn-light cancel-btn me-3"
                      data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary yes-btn">
                      <i class="fa-regular fa-circle-check me-2"></i>Yes, Delete
                    </button>
                  </div>
                </form>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!--Delete Modal Ends-->

</div>


<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
  $(document).on('click', '.updatebtn', function() {
    var id = $(this).data('user-id');
    $.ajax({
      url: './get_subcategory/' + id,
      type: 'GET',
      success: function(response) {
        console.log(response);

        $('#edit-subcategory-id').val(response.id);

        $('#edit-category-id')
          .val(response.category_id)
          .trigger('change');

        $('#edit-subcategory-name').val(response.name);
        $('#edit-subcat-name').val(response.subcat_name);
        $('#change-existing-icon').val('');

        if (response.img) {
          $('#edit-category-icon').attr(
            'src',
            response.img
          );
        } else {
          $('#edit-category-icon').attr('src', '');
        }

        $('#update-category-icon-wrapper')
          .removeClass('d-none');

        bootstrap.Modal
          .getOrCreateInstance(
            document.getElementById('EditCategoryModal')
          )
          .show();
      },
      error: function(xhr, status, error) {
        console.error(error);
      }
    });
  });
</script>
<script>
  function setDeleteId(button) {
    var deleteId = button.getAttribute('data-user-id');
    document.getElementById('delete_id').value = deleteId;
  }
</script>

<script>
  document.addEventListener("DOMContentLoaded", function() {
    const uploadInput = document.getElementById('upload-category-icon');
    const imageView = document.getElementById('category-icon-view');
    const wrapper = document.getElementById('category-upload-wrapper');
    const uploadConditions = document.querySelectorAll(
      '.icon-upload-conditions > div, .icon-upload-conditions > p, .icon-upload-conditions > .file-size-UHGHH'
    );

    wrapper.addEventListener('click', function() {
      uploadInput.click();
    });

    uploadInput.addEventListener('change', function() {
      const file = this.files[0];
      if (file) {
        const reader = new FileReader();
        reader.onload = function(e) {
          imageView.src = e.target.result;
          hideUploadConditions();
        };
        reader.readAsDataURL(file);
      } else {
        imageView.src = '';
      }
    });

    function hideUploadConditions() {
      uploadConditions.forEach(element => {
        element.style.display = 'none';
      });
    }
  });
</script>

<script>
  document.getElementById('update-category-icon-wrapper').addEventListener('click', function() {
    document.getElementById('change-existing-icon').click();
  });
  document.getElementById('change-existing-icon').addEventListener('change', function(event) {
    const file = event.target.files[0];

    if (!file) {
      return;
    }

    const reader = new FileReader();
    reader.onload = function(e) {
      document.getElementById('edit-category-icon').src = e.target.result;
    }
    reader.readAsDataURL(file);
  });
</script>


<script>
  function setCategoryId(button) {
    var categoryId = button.getAttribute('data-user-id');
    document.getElementById('category_id').value = categoryId;
  }
</script>

@endsection
@section('footer')


<script src="https://code.jquery.com/jquery-3.6.0.min.js"
  integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>

<script type="text/javascript" src="{{ asset('/assets') }}/js/datatable/dataTables.bootstrap5.min.js"></script>
<script type="text/javascript" src="{{ asset('/assets') }}/js/datatable/datatables.init.js"></script>
<script type="text/javascript" src="{{ asset('/assets') }}/js/datatable/dataTables.responsive.min.js"></script>
<script type="text/javascript" src="{{ asset('/assets') }}/js/datatable/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="{{ asset('/assets') }}/js/datatable/dataTables.buttons.min.js"></script>
<script type="text/javascript" src="{{ asset('/assets') }}/js/datatable/buttons.html5.min.js"></script>
<script type="text/javascript" src="{{ asset('/assets') }}/js/datatable/buttons.print.min.js"></script>
<script type="text/javascript" src="{{ asset('/assets') }}/js/datatable/jszip.min.js"></script>
<script type="text/javascript" src="{{ asset('/assets') }}/js/datatable/pdfmake.min.js"></script>
<script type="text/javascript" src="{{ asset('/assets') }}/js/datatable/vfs_fonts.js"></script>



@endsection