@extends('layouts.app')

@section('title', 'Product Category')

@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 font-size-18">Dashboard</h4>

      <div class="page-title-right">
        <ol class="breadcrumb m-0">
          <li class="breadcrumb-item"><a href="javascript: void(0);">Dashboard</a></li>
          <li class="breadcrumb-item active">Dashboard</li>
        </ol>
      </div>

    </div>
  </div>
</div>
<div class="row mb-none-30">
  <div class="col-lg-12 mb-30">
    <div class="card">
      <div class="card-body">
        <form action="{{ route('product-category.store') }}" method="POST" enctype="multipart/form-data"
          class="needs-validation" novalidate id="productcategoryform">
          @csrf
          <div class="row">

            <div class="col-lg-6">
              <div class="form-group">
                <label for="name" class="font-weight-bold">@lang('Category Name')</label>
                <input type="text" name="name" id="name" value="{{ old('name') }}" class="form-control"
                  placeholder="@lang('Enter category name')" required>
              </div>
            </div>
            <div class="col-lg-6">
              <div class="form-group d-flex gap-2 mt-4">
                <input type="checkbox" name="sub" id="subcategory" />
                <label for="name" class="font-weight-bold">@lang('Click To Make Sub-Product Category')</label>
              </div>
            </div>
            <div class="col-lg-6 d-none catdropdown">
              <div class="form-group">
                <label for="parent_id" class="font-weight-bold">@lang('Select Parent Category (Product
                  Category)')</label>
                <select class="form-control" name="parent_id">
                  <option selected value="0">@lang('Select Category')</option>
                  @if(!empty($categories))
                  @foreach ($categories as $category)
                  <option value="{{$category->id}}">{{$category->name}}</option>
                  @endforeach
                  @endif
                </select>
              </div>
            </div>

            <div class="col-lg-6">
              <div class="form-group">
                <label for="status" class="font-weight-bold">@lang('Status')</label>
                <select class="form-control" name="status">
                  <option value="" selected disabled>Select status</option>
                  <option value="1">Active</option>
                  <option value="0">In-Active</option>
                </select>
              </div>
            </div>

            <div class="col-lg-12 ">
              <div class="form-group float-end">
                <button type="submit" class="btn btn--primary">
                  @lang('Create')</button>
              </div>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>
@endsection

@push('breadcrumb-plugins')

<div class="d-flex justify-content-between align-items-center">
  <h3>@lang('Dashboard / Add Product Category')</h3>
  <a href="{{ route('product-category.index') }}" class="btn btn-sm btn--primary box--shadow1 text--small"><i
      class="las la-angle-double-left"></i>@lang('Go Back')</a>
  @endpush

  @push('style')
  <style>
    .ck-placeholder {
      height: 190px !important;
    }

    label {
      color: black !important;
    }
  </style>
  @endpush

  @push('script')
  <script>
    $(document).ready(function() {
      $(document).on('submit', '#productcategoryform', function(e) {
        e.preventDefault();
        $('#productcategoryform').addClass('was-validated');
        if ($('#productcategoryform')[0].checkValidity() === false) {
          event.stopPropagation();
        } else {
          this.submit();
        }
      });
    });
    $(document).ready(function() {
      $('#subcategory').change(function() {
        if ($(this).is(':checked')) {
          $('label[for="name"]').text('@lang("Sub-Product Category")');
          $('.catdropdown').removeClass('d-none');
        } else {
          $('label[for="name"]').text('@lang("Category Name")');
          $('.catdropdown').addClass('d-none');
        }
      });
    });
  </script>

  @endpush