@extends('admin.layouts.app')

@section('content')
<div class="container-fluid py-4">
  @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.update', $item->id) }}">
            @csrf
            @method('PUT')
              <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" name="item_title" value="{{ @$item->item_title }}" required>
                                      </div>
                                      @error('item_title')
                                      <div class="text-danger">{{ $message }}</div>
                                      @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="{{ @$item->item_code }}" readonly>
                                      </div>
                                      @error('item_code')
                                      <div class="text-danger">{{ $message }}</div>
                                      @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="" readonly="" value="">Select</option>
                                            @foreach ($categories as $category)
                                                <option value="{{ $category->id }}"@if ($category->id === $item->category_id) selected @endif>{{ $category->category_name }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    @error('category_id')
                                    <div class="text-danger">{{ $message }}</div>
                                    @enderror
                                  </div>
                                  <div class="col-md-6">
                                    <label>Brand Type</label>
                                    <div class="mb-3">
                                        <select class="form-select w-100" id="validationCustom05" name="brand_type">
                                            <option selected="" readonly="" value="">Select</option>
                                            @foreach ($brands as $brand)
                                                <option value="{{ $brand->id }}" @if ($brand->id == $item->brand_type) selected @endif>{{ $brand->brand_name }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    @error('brand_type')
                                    <div class="text-danger">{{ $message }}</div>
                                    @enderror
                                </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="validationCustom04" name="sub_category_id" required>
                                                      <option selected="" readonly="" value="">Select</option>
                                                      @foreach ($subCategories as $subcategory)
                                                        <option value="{{ $subcategory->id }}" @if ($subcategory->id == $item->sub_category_id) selected @endif>{{ $subcategory->sub_category_name }}</option>
                                                      @endforeach
                                                  </select>
                                              </div>
                                              @error('sub_category_id')
                                              <div class="text-danger">{{ $message }}</div>
                                              @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" value="{{ @$item->model }}" required>
                                              </div>
                                              @error('model')
                                              <div class="text-danger">{{ $message }}</div>
                                              @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">{{ @$item->definition }}</textarea>
                                      </div>
                                      @error('definition')
                                      <div class="text-danger">{{ $message }}</div>
                                      @enderror
                                  </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" value="{{ @$item->tonnage }}" required>
                                      </div>
                                      @error('tonnage')
                                      <div class="text-danger">{{ $message }}</div>
                                      @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" value="{{@$item->uqm }}" required>
                                      </div>
                                      @error('uqm')
                                      <div class="text-danger">{{ $message }}</div>
                                      @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" value="{{ @$item->serial_no }}" required>
                                    </div>
                                    @error('serial_no')
                                    <div class="text-danger">{{ $message }}</div>
                                    @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" value="{{ @$item->unit_type }}" required>
                                    </div>
                                    @error('unit_type')
                                    <div class="text-danger">{{ $message }}</div>
                                    @enderror
                                </div>

                                  <div class="col-md-6">
                                      <label>Status</label>
                                      <div class="mb-3">
                                          <select class="form-select w-100" id="validationCustom00" name="status" required>
                                              <option value="1" {{ $item->status == '1' ? 'selected' : '' }}>Active</option>
                                              <option value="0" {{ $item->status == '0' ? 'selected' : '' }}>InActive</option>
                                          </select>
                                      </div>
                                      @error('status')
                                      <div class="text-danger">{{ $message }}</div>
                                      @enderror
                                  </div>
                                  <div class="col-12">
                                    <input type="submit" value="Update" 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.7.0.js"></script>

<script>
$(document).ready(function () {
    // Disable the Subcategory select by default
    $('#validationCustom04').prop('readonly', true);

    // Event handler for Category selection change
    $('#categorySelect').on('change', function () {
        var selectedCategoryId = $(this).val();

        // Disable and clear the Subcategory select
        $('#validationCustom04').prop('readonly', true);
        $('#validationCustom04').empty().append('<option selected readonly value="">Subcategory</option>');

        // Enable or disable the Subcategory select based on Category selection
        if (selectedCategoryId) {
            // Get the CSRF token from the meta tag
            var csrfToken = $('meta[name="csrf-token"]').attr('content');

            // Send the selected category_id as data in the AJAX request
            $.ajax({
                url: '{{ route("admin.item.sub-category.fetch") }}', // Replace with your backend route
                method: 'POST',
                data: {
                    category_id: selectedCategoryId
                },
                dataType: 'json',
                headers: {
                    'X-CSRF-TOKEN': csrfToken // Include the CSRF token in the headers
                },
                success: function (data) {
                    // Clear existing options
                    $('#validationCustom04').empty();

                    // Populate the Subcategory select with new options
                    $.each(data.subcategories, function (index, subcategory) {
                        $('#validationCustom04').append('<option value="' + subcategory.id + '">' + subcategory.sub_category_name + '</option>');
                    });

                    // Enable the Subcategory select
                    $('#validationCustom04').prop('readonly', false);
                },
                error: function (xhr, status, error) {
                    console.error(xhr.responseText);
                    // Handle error as needed
                }
            });
        }
    });
});


</script>

@endsection