@extends('admin.layouts.app')

@section('content')
<div class="container-fluid py-4">
    <nav aria-label="breadcrumb">
        <ol class="breadcrumb bg-transparent mb-0 pb-0 px-0 me-sm-6 me-5">
            <li class="breadcrumb-item text-sm"><a class="opacity-5 text-dark" href="{{ route('admin.dashboard') }}">Dashboard</a>
            </li>
            <li class="breadcrumb-item text-sm"><a class="opacity-5 text-dark" href="{{ route('admin.items.index') }}">Items</a>
            </li>
            <li class="breadcrumb-item text-sm text-dark active font-weight-bolder" aria-current="page">
                Create Item</li>
        </ol>
    </nav>
  @if(session('success'))
  <div class="alert alert-success">
      {{ session('success') }}
  </div>
@endif
@if(session('error'))
<div class="alert alert-danger">
    {{ session('error') }}
</div>
@endif
  <div class="row">
      <div class="col-12">
          <div class="row justify-content-between">
              <div class="col-md-4">
                  <a class="btn bg-gradient-info mb-3" href="{{ route('admin.items.index') }}">Back</a>
              </div>
          </div>
      </div>
  </div>
  <div class="row">
      <div class="col-12">
          <form role="form" method="POST" action="{{ route('admin.items.store') }}">
            @csrf
              <div class="row justify-content-center">
                  <div class="col-md-8 col-sm-12">
                      <div class="card pt-3 mb-4">
                          <div class="card-body pt-0 pb-2">
                              <div class="row">
                                  <div class="col-md-6">
                                      <label>Item Title <span class="requered-mark">*</span></label>
                                      <div class="mb-3">
                                          <input type="text" class="form-control" placeholder="Item Title"
                                              aria-label="title" aria-describedby="username-addon" name="item_title" required>
                                      </div>
                                       @error('item_title')
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                        @enderror
                                  </div>
                                  <div class="col-md-6">
                                      <label>Item Code</label>
                                      <div class="mb-3">
                                          <input type="text" class="form-control" placeholder="Branch-01"
                                              aria-label="Code" aria-describedby="username-addon" name="item_code" value="{{ $itemCode }}" readonly>
                                      </div>
                                       @error('item_code')
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                        @enderror
                                  </div>
                                  <div class="col-md-6">
                                    <label>Category <span class="requered-mark">*</span></label>
                                    <div class="mb-3">
                                        <select class="form-select w-100" id="categorySelect" name="category_id" required>
                                            <option selected="" disabled="" value="">Select</option>
                                            @foreach ($categories as $category)
                                                <option value="{{ $category->id }}">{{ $category->category_name }}</option>
                                            @endforeach
                                        </select>
                                         @error('category_id')
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                        @enderror
                                    </div>
                                  </div>
                                  <div class="col-md-6">
                                      <label>Brand Type <span class="requered-mark">*</span></label>
                                      <div class="mb-3">
                                          <select class="form-select w-100" id="validationCustom04" name="brand_type">
                                              <option disabled="" value="">Select</option>
                                           @foreach ($brands as $brand)
                                               <option value="{{ $brand->id }}">{{ $brand->brand_name }}</option>
                                           @endforeach
                                          </select>
                                           @error('brand_type')
                                            <span class="invalid-feedback" role="alert">
                                                <strong>{{ $message }}</strong>
                                            </span>
                                            @enderror
                                      </div>
                                  </div>
                                  <div class="col-md-6">
                                        <div class="row">
                                            <div class="col-md-12">
                                                <label>Subcategory <span class="requered-mark">*</span></label>
                                                <div class="mb-3">
                                                    <select class="form-select w-100" id="subCategorySelect" name="sub_category_id" required>
                                                        <option selected="" disabled="" value="">Select</option>
                                                    </select>   
                                                </div>
                                                 @error('sub_category_id')
                                                <span class="invalid-feedback" role="alert">
                                                    <strong>{{ $message }}</strong>
                                                </span>
                                                @enderror
                                            </div>
                                          <div class="col-md-12">
                                              <label>Model <span class="requered-mark">*</span></label>
                                              <div class="mb-3">
                                                  <input type="tel" class="form-control" placeholder="Model"
                                                      aria-label="Model" aria-describedby="username-addon" name="model" required>
                                              </div>
                                               @error('model')
                                                <span class="invalid-feedback" role="alert">
                                                    <strong>{{ $message }}</strong>
                                                </span>
                                                @enderror
                                          </div>
                                      </div>
                                  </div>
                                  <div class="col-md-6">
                                      <label>Definition</label>
                                      <div class="mb-3">
                                          <textarea style="height: 128px;" class="form-control"
                                              placeholder="Definition" name="definition"></textarea>
                                      </div>
                                  </div>
                                  <div class="col-md-6">
                                      <label>Add Tonnage <span class="requered-mark">*</span></label>
                                      <div class="mb-3">
                                          <input type="text" class="form-control" placeholder="Add Tonnage"
                                              aria-label="Tonnage" aria-describedby="username-addon" name="tonnage" required>
                                      </div>
                                       @error('tonnage')
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                        @enderror
                                  </div>
                                  <div class="col-md-6">
                                      <label>UQM <span class="requered-mark">*</span></label>
                                      <div class="mb-3">
                                          <input type="text" class="form-control" placeholder="UQM"
                                              aria-label="Email" aria-describedby="username-addon" name="uqm" required>
                                      </div>
                                       @error('uqm')
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                        @enderror
                                  </div>
                                  <div class="col-md-6">
                                    <label>Serial No <span class="requered-mark">*</span></label>
                                    <div class="mb-3">
                                        <input type="text" class="form-control" placeholder="Serial No"
                                            aria-label="Email" aria-describedby="username-addon" name="serial_no" required>
                                    </div>
                                     @error('serial_no')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                    @enderror
                                </div>
                                <div class="col-md-6">
                                    <label>Unit Type <span class="requered-mark">*</span></label>
                                    <div class="mb-3">
                                        <input type="text" class="form-control" placeholder="Unit Type"
                                            aria-label="Email" aria-describedby="username-addon" name="unit_type" required>
                                    </div>
                                     @error('unit_type')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                    @enderror
                                </div>

                                  <div class="col-md-6">
                                      <label>Status</label>
                                      <div class="mb-3">
                                          <select class="form-select w-100" id="validationCustom04" name="status">
                                              <option value="1">Active</option>
                                              <option value="0">InActive</option>
                                          </select>
                                      </div>
                                       @error('status')
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                        @enderror
                                  </div>
                                  <div class="col-12">
                                    <input type="submit" value="Save" class="btn bg-gradient-info mb-3" style="float: right;">
                                      {{-- <a class="btn bg-gradient-info mb-3" style="float: right;" role="button"
                                          data-bs-toggle="modal" data-bs-target="#exampleModal"
                                          href="">Save</a> --}}
                                  </div>
                              </div>
                          </div>
                      </div>
                  </div>
              </div>
          </form>
      </div>
  </div>

</div>

<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
      <div class="modal-content">
          <div class="modal-body pb-0">
              <h1 class="modal-title fs-5" id="exampleModalLabel">Register</h1>
              <p><span style="color: #198754;">Data Saved Successfully.</span>
              </p>
          </div>
          <div class="modal-footer border-0 pt-0">
              <!-- <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button> -->
              <a class="btn bg-gradient-info mb-0 mr-2 btn-sm" href="./manage_items.html">Ok</a>
          </div>
      </div>
  </div>
</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    $(document).ready(function () {
        var $categorySelect = $('#categorySelect');
        var $subCategorySelect = $('#subCategorySelect');

        $categorySelect.on('change', function () {
            var categoryId = $(this).val();
            $subCategorySelect.prop('disabled', true);
            $subCategorySelect.empty().append('<option selected="" disabled="" value="">Select</option>');

            if (categoryId) {
                // Get the CSRF token from the meta tag
                var csrfToken = $('meta[name="csrf-token"]').attr('content');

                // Make an AJAX POST request to retrieve subcategories based on the selected category
                $.ajax({
                    type: 'POST',
                    url: '{{ route("admin.item.sub-category.fetch") }}',
                    data: {
                        category_id: categoryId
                    },
                    dataType: 'json',
                    headers: {
                        'X-CSRF-TOKEN': csrfToken // Include the CSRF token in the headers
                    },
                    success: function (data) {
                        var subcategories = data.subcategories;

                        // Populate subcategory select with the retrieved subcategories
                        $.each(subcategories, function (key, value) {
                            $subCategorySelect.append('<option value="' + value.id + '">' + value.sub_category_name + '</option>');
                        });

                        $subCategorySelect.prop('disabled', false);
                    }
                });
            }
        });
    });
</script>

@endsection