@extends('layouts/layoutMaster')

@section('title', 'Add Materials')
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <!-- Vendor Styles -->
    @section('vendor-style')
    @vite([
        'resources/assets/vendor/libs/datatables-bs5/datatables.bootstrap5.scss',
        'resources/assets/vendor/libs/datatables-responsive-bs5/responsive.bootstrap5.scss',
        'resources/assets/vendor/libs/datatables-buttons-bs5/buttons.bootstrap5.scss',
        'resources/assets/vendor/libs/select2/select2.scss',
        'resources/assets/vendor/libs/@form-validation/form-validation.scss',
        'resources/assets/vendor/libs/animate-css/animate.scss',
        'resources/assets/vendor/libs/sweetalert2/sweetalert2.scss',
        'resources/assets/vendor/libs/flatpickr/flatpickr.scss',
        'resources/assets/vendor/libs/bootstrap-datepicker/bootstrap-datepicker.scss',
        'resources/assets/vendor/libs/bootstrap-daterangepicker/bootstrap-daterangepicker.scss',
        'resources/assets/vendor/libs/jquery-timepicker/jquery-timepicker.scss',
        'resources/assets/vendor/libs/pickr/pickr-themes.scss'
    ])
@endsection

<!-- Vendor Scripts -->
@section('vendor-script')
    @vite([
        'resources/assets/vendor/libs/autosize/autosize.js',
        'resources/assets/vendor/libs/moment/moment.js',
        'resources/assets/vendor/libs/datatables-bs5/datatables-bootstrap5.js',
        'resources/assets/vendor/libs/select2/select2.js',
        'resources/assets/vendor/libs/@form-validation/popular.js',
        'resources/assets/vendor/libs/@form-validation/bootstrap5.js',
        'resources/assets/vendor/libs/@form-validation/auto-focus.js',
        'resources/assets/vendor/libs/cleavejs/cleave.js',
        'resources/assets/vendor/libs/cleavejs/cleave-phone.js',
        'resources/assets/vendor/libs/sweetalert2/sweetalert2.js',
        'resources/assets/vendor/libs/moment/moment.js',
        'resources/assets/vendor/libs/flatpickr/flatpickr.js',
        'resources/assets/vendor/libs/bootstrap-datepicker/bootstrap-datepicker.js',
        'resources/assets/vendor/libs/bootstrap-daterangepicker/bootstrap-daterangepicker.js',
        'resources/assets/vendor/libs/jquery-timepicker/jquery-timepicker.js',
        'resources/assets/vendor/libs/pickr/pickr.js'
    ])
@endsection

@section('page-script')
@vite(['resources/assets/js/forms-pickers.js'])
@endsection

@section('content')
    <!-- Site List Table -->
    <div class="card mb-6">
      <h5 class="card-header">{{ isset($material) ? 'Edit Material' : 'Add Material' }}</h5>
        <form class="card-body" id="material_form" action="{{ isset($material) ? route('material-list.update', $material->id) : route('material-list.store') }}" method="POST">
          @csrf
          @if(isset($material))
              @method('PUT')
          @endif
          <div class="row g-6">
              <div class="col-md-3">
                  <input type="hidden" id="id" name="id" class="form-control" value="{{ old('id', $material->id ?? '') }}">
                  <div class="form-floating form-floating-outline">
                    <input type="text" id="code" name="code" class="form-control" placeholder="Material Code" value="{{ old('code', $material->code ?? '') }}">
                    <label for="code">Material Code</label>
                </div>
              </div>
              <div class="col-md-3">
                  <div class="form-floating form-floating-outline">
                      <input type="text" id="name" name="name" class="form-control" placeholder="Material Name" value="{{ old('name', $material->name ?? '') }}">
                      <label for="name">Material Name</label>
                  </div>
              </div>
              <div class="col-md-3">
                  <div class="form-floating form-floating-outline">
                      <input type="text" id="short_name" name="short_name" class="form-control" placeholder="Short Name" value="{{ old('short_name', $material->short_name ?? '') }}">
                      <label for="short_name">Short Name</label>
                  </div>
              </div>
              <div class="col-md-3">
                <div class="form-floating form-floating-outline">
                    <input type="text" id="specification" name="specification" class="form-control" placeholder="Specification" value="{{ old('specification', $material->specification ?? '') }}">
                    <label for="specification">Specification</label>
                </div>
              </div>
          </div>
          <br>
          <div class="row g-6">
              <div class="col-md-3">
                  <div class="form-floating form-floating-outline">
                      <select name="category_id" id="category_id" class="select2 form-select" data-placeholder="Category" data-allow-clear="true">
                          <option></option>
                          @foreach ($category as $category)
                              <option value="{{ $category->id }}" {{ old('category_id', $material->category_id ?? '') == $category->id ? 'selected' : '' }}>{{ $category->name }}</option>
                          @endforeach
                      </select>
                      <label for="category_id">Select Category</label>
                  </div>
              </div>
              <div class="col-md-3">
                  <div class="form-floating form-floating-outline">
                      <select name="sub_category_id" id="sub_category_id" class="select2 form-select" data-placeholder="Sub Category" data-allow-clear="true">
                        <option></option>
                        @isset($material)
                          @foreach ($subCategories as $subCat)
                              <option value="{{ $subCat->id }}"
                                  {{ old('sub_category_id', $material->sub_category_id ?? '') == $subCat->id ? 'selected' : '' }}>
                                  {{ $subCat->name }}
                              </option>
                          @endforeach
                        @endisset
                      </select>
                      <label for="sub_category_id">Sub Category</label>
                  </div>
              </div>
              <div class="col-md-3">
                  <div class="form-floating form-floating-outline">
                      <select name="storage_condition_id" id="storage_condition_id" class="select2 form-select" data-placeholder="Storage Condition" data-allow-clear="true">
                          <option></option>
                          @foreach ($storageCondition as $storage)
                              <option value="{{ $storage->id }}" {{ old('storage_condition_id', $material->storage_condition_id ?? '') == $storage->id ? 'selected' : '' }}>{{ $storage->storagecondition }}</option>
                          @endforeach
                      </select>
                      <label for="storage_condition_id">Storage Condition</label>
                  </div>
              </div>
              {{-- <div class="col-md-3">
                <div class="form-floating form-floating-outline">
                    <select name="nature_id" id="nature_id" class="select2 form-select" data-placeholder="Nature" data-allow-clear="true">
                        <option></option>
                        @foreach ($nature as $nat)
                            <option value="{{ $nat->id }}" {{ old('nature_id', $material->nature_id ?? '') == $nat->id ? 'selected' : '' }}>{{ $nat->nature }}</option>
                        @endforeach
                    </select>
                    <label for="nature_id">Nature</label>
                </div>
              </div> --}}
          </div><br>
          <div class="row g-6">
            <div class="col-md-2">
              <div class="form-floating form-floating-outline">
                  <select name="plain_printed" id="plain_printed" class="select2 form-select" data-placeholder="Plain / Printed" data-allow-clear="true">
                      <option value="" {{ isset($material) && $material->plain_printed === '' ? 'selected' : '' }}></option>
                      <option value="yes" {{ isset($material) && $material->plain_printed === 'yes' ? 'selected' : '' }}>Yes</option>
                      <option value="no" {{ isset($material) && $material->plain_printed === 'no' ? 'selected' : '' }}>No</option>
                  </select>
                  <label for="plain_printed">Plain / Printed</label>
              </div>
            </div>
            <div class="col-md-2">
                <div class="form-floating form-floating-outline">
                    <select name="flamable" id="flamable" class="select2 form-select" data-placeholder="Flamable" data-allow-clear="true">
                        <option value="" {{ isset($material) && $material->flamable === '' ? 'selected' : '' }}></option>
                        <option value="yes" {{ isset($material) && $material->flamable === 'yes' ? 'selected' : '' }}>Yes</option>
                        <option value="no" {{ isset($material) && $material->flamable === 'no' ? 'selected' : '' }}>No</option>
                    </select>
                    <label for="flamable">Flamable</label>
                </div>
            </div>
            <div class="col-md-2">
                <div class="form-floating form-floating-outline">
                    <select name="hazardous" id="hazardous" class="select2 form-select" data-placeholder="Hazardous" data-allow-clear="true">
                        <option value="" {{ isset($material) && $material->hazardous === '' ? 'selected' : '' }}></option>
                        <option value="yes" {{ isset($material) && $material->hazardous === 'yes' ? 'selected' : '' }}>Yes</option>
                        <option value="no" {{ isset($material) && $material->hazardous === 'no' ? 'selected' : '' }}>No</option>
                    </select>
                    <label for="hazardous">Hazardous</label>
                </div>
            </div>
            {{-- <div class="col-md-6">
              <div class="form-floating form-floating-outline">
                  <input type="text" id="coa_rule" name="coa_rule" class="form-control" placeholder="COA Rule" value="{{ old('coa_rule', $material->coa_rule ?? '') }}">
                  <label for="coa_rule">COA Rule</label>
              </div>
            </div> --}}
          </div><br>
          <div class="row g-6">
              <div class="col-md-2">
                  <div class="form-floating form-floating-outline">
                      <select name="purchase_uom_id" id="purchase_uom_id" class="select2 form-select" data-placeholder="Purchase UOM" data-allow-clear="true">
                          <option></option>
                          @foreach ($uoms as $purchase)
                              <option value="{{ $purchase->id }}" {{ old('purchase_uom_id', $material->purchase_uom_id ?? '') == $purchase->id ? 'selected' : '' }}>{{ $purchase->name }}</option>
                          @endforeach
                      </select>
                      <label for="purchase_uom_id">Purchase UOM</label>
                  </div>
              </div>
              <div class="col-1 d-flex justify-content-center align-items-center">
                <strong>=</strong>
              </div>
              {{-- <div class="col-md-2">
                <div class="form-floating form-floating-outline">
                  <input type="text" id="measurement" name="measurement" class="form-control" placeholder="Measurement" value="{{ old('measurement', $material->measurement ?? '') }}">
                  <label for="measurement">Measurement</label>
                </div>
              </div> --}}
              <div class="col-md-2">
                  <div class="form-floating form-floating-outline">
                      <select name="consumption_uom_id" id="consumption_uom_id" class="select2 form-select" data-placeholder="Consumption UOM" data-allow-clear="true">
                          <option></option>
                          @foreach ($uoms as $consump)
                              <option value="{{ $consump->id }}" {{ old('consumption_uom_id', $material->consumption_uom_id ?? '') == $consump->id ? 'selected' : '' }}>{{ $consump->name }}</option>
                          @endforeach
                      </select>
                      <label for="consumption_uom_id">Consumption UOM</label>
                  </div>
              </div>
              {{-- <div class="col-md-2">
                <div class="form-floating form-floating-outline">
                  <input type="text" id="map_code" name="map_code" class="form-control" placeholder="Map Code" value="{{ old('map_code', $material->map_code ?? '') }}">
                  <label for="map_code">Map Code</label>
                </div>
              </div> --}}
              <div class="col-md-3">
                <div class="form-floating form-floating-outline">
                  <input type="text" id="hsn_code" name="hsn_code" class="form-control" placeholder="HSN Code" value="{{ old('hsn_code', $material->hsn_code ?? '') }}">
                  <label for="hsn_code">HSN Code</label>
                </div>
              </div>
              <div class="col-md-3">
                <div class="form-floating form-floating-outline">
                  <input type="text" id="name_of_manufacture" name="name_of_manufacture" class="form-control" placeholder="Name of Manufacture" value="{{ old('name_of_manufacture', $material->name_of_manufacture ?? '') }}">
                  <label for="name_of_manufacture">Name of Manufacture</label>
                </div>
              </div>
          </div><br>
          <div class="row g-6">
            <div class="col-md-4">
              <div class="form-floating form-floating-outline">
                <input type="text" id="cgst" name="cgst" class="form-control" placeholder="CGST"  value="{{ old('cgst', $material->cgst ?? '') }}">
                <label for="cgst">CGST</label>
              </div>
            </div>
            <div class="col-md-4">
              <div class="form-floating form-floating-outline">
                <input type="text" id="sgst" name="sgst" class="form-control" placeholder="SGST"  value="{{ old('sgst', $material->sgst ?? '') }}">
                <label for="sgst">SGST</label>
              </div>
            </div>
            <div class="col-md-4">
              <div class="form-floating form-floating-outline">
                <input type="text" id="igst" name="igst" class="form-control" placeholder="IGST"  value="{{ old('igst', $material->igst ?? '') }}">
                <label for="igst">IGST</label>
              </div>
            </div>
          </div>
        </br>
          <div class="row g-6">
              <div class="col-md-12">
                  <div class="form-floating form-floating-outline">
                      <textarea id="description" name="description" class="form-control h-px-100 autosize-demo" placeholder="description">{{ old('Description', $material->description ?? '') }}</textarea>
                      <label for="description">Description</label>
                  </div>
              </div>
          </div>

          <div class="pt-6">
              <button type="submit" class="btn btn-primary me-4 waves-effect waves-light">{{ isset($material) ? 'Update' : 'Submit' }}</button>
              <a href="{{ route('materialManage') }}" class="btn btn-outline-secondary waves-effect">Cancel</a>
          </div>
        </form>
    </div>
    {{-- @if (Auth()->user()->hasRole('Super Admin'))
                <div class="form-floating form-floating-outline mb-5">
                    <select class="select2 form-select" id="company_id" name="company_id" data-placeholder="Select company" data-allow-clear="true">
                        <option></option>
                        @foreach ($company as $company)
                            <option value="{{ $company->id }}">{{ $company->company_name}}</option>
                        @endforeach
                    </select>
                    <label for="company_id">Company</label>
                </div>
                @endif --}}

    <div class="card mb-6">
      {{-- <h5 class="card-header">Details</h5> --}}
      <div class="card-body">
          <!-- Nav tabs -->
          <ul class="nav nav-tabs" id="myTab" role="tablist">
              {{-- <li class="nav-item" role="presentation">
                  <a class="nav-link active" id="tab1-tab" data-bs-toggle="tab" href="#tab1" role="tab" aria-controls="tab1" aria-selected="true">QA Details</a>
              </li>
              <li class="nav-item" role="presentation">
                  <a class="nav-link" id="tab2-tab" data-bs-toggle="tab" href="#tab2" role="tab" aria-controls="tab2" aria-selected="false">Purchase Details</a>
              </li> --}}
              <li class="nav-item" role="presentation">
                  <a class="nav-link active" id="tab3-tab" data-bs-toggle="tab" href="#tab3" role="tab" aria-controls="tab3" aria-selected="true">Purchase History</a>
              </li>
              <li class="nav-item" role="presentation">
                  <a class="nav-link" id="tab4-tab" data-bs-toggle="tab" href="#tab4" role="tab" aria-controls="tab4" aria-selected="false">Consume In</a>
              </li>
              <li class="nav-item" role="presentation">
                <a class="nav-link" id="tab5-tab" data-bs-toggle="tab" href="#tab5" role="tab" aria-controls="tab5" aria-selected="false">Stock</a>
              </li>
              {{-- <li class="nav-item" role="presentation">
                <a class="nav-link" id="tab6-tab" data-bs-toggle="tab" href="#tab6" role="tab" aria-controls="tab6" aria-selected="false">Additional Info</a>
              </li> --}}
          </ul>

          <!-- Tab content -->
          <div class="tab-content" id="myTabContent">
              <div class="tab-pane fade show active" id="tab3" role="tabpanel" aria-labelledby="tab3-tab">
                <div class="card-header d-flex rounded-0 flex-wrap pb-md-0 pt-0">
                  <div class="me-5 ms-n2">
                    <div id="DataTables_Table_0_filter" class="dataTables_filter">
                      <label>
                        {{-- <input type="search" class="form-control" placeholder="Search" aria-controls="DataTables_Table_0"/> --}}
                        {{-- <input type="search" class="form-control form-control-sm" placeholder="Search" aria-controls="DataTables_Table_0"> --}}
                      </label>
                    </div>
                  </div>
                  <div class="col-4 d-flex justify-content-center align-items-center">
                    <strong></strong>
                  </div>
                  <div class="col-md-6 text-md-end mb-1">
                    {{-- <div class="dt-action-buttons d-flex align-items-center justify-content-end gap-4">
                      <div class="col-md-6 col-12 mb-6">
                        <div class="form-floating form-floating-outline">
                          <input type="text" class="form-control" placeholder="YYYY-MM-DD to YYYY-MM-DD" id="flatpickr-range" />
                          <label for="flatpickr-range">Range Picker</label>
                        </div>
                      </div>
                      <div class="col-md-3 col-12 mb-6">
                        <div class="dt-buttons btn-group flex-wrap w-100">
                          <div class="btn-group w-100">
                            <button class="btn btn-secondary dropdown-toggle btn-outline-secondary waves-effect waves-light w-100"
                                    tabindex="0" aria-controls="DataTables_Table_0"
                                    type="button" data-bs-toggle="dropdown"
                                    aria-expanded="false">
                              <span>
                                <i class="ri-upload-2-line ri-16px me-2"></i>
                                <span class="d-none d-sm-inline-block">Export</span>
                              </span>
                            </button>
                            <ul class="dropdown-menu">
                              <li><a class="dropdown-item" href="#" id="export-excel"><i class="ri-file-excel-2-line ri-20px"></i> Excel</a></li>
                              <li><a class="dropdown-item" href="#" id="export-pdf"><i class="ri-file-pdf-2-line ri-20px"></i> PDF</a></li>
                            </ul>
                          </div>
                        </div>
                      </div>
                    </div> --}}
                  </div>

                </div>
                <table class="purchase-history table">
                  <thead>
                      <tr>
                          <th></th>
                          <th>Po No.</th>
                          <th>Po Date</th>
                          {{-- <th>Pack Size</th> --}}
                          <th>Qty</th>

                          <th>Net Price</th>
                          <th>Total</th>
                          {{-- <th>Status</th> --}}
                          {{--
                          <th>Action</th> --}}
                      </tr>
                  </thead>
                  <tbody>
                    @if(isset($purchaseHistoryN) && $purchaseHistoryN->isNotEmpty())
                        @foreach($purchaseHistoryN as $history)
                            <tr>
                                @php
                                  // $po = \App\Models\Order::where('id', $history->order_id)->first();
                                  // dd($po);
                                @endphp
                                <td></td>
                                <td>{{ $history->orders->po_number }}</td>
                                <td>{{ $history->orders->po_date }}</td>
                                <td>{{ number_format($history->quantity, 2) }}</td>
                                <td>{{ number_format($history->NetPrice, 2) }}</td>
                                <td>{{ $history->Total }}</td>
                                {{-- @if($history->status == 'approved')
                                <td><span class="badge rounded-pill bg-label-success }}">Approved</span></td>
                                @elseif($history->status == 'pending')
                                <td><span class="badge rounded-pill bg-label-warning }}">Pending</span></td>
                                @else
                                <td><span class="badge rounded-pill bg-label-danger }}">Rejected</span></td>
                                @endif --}}
                                {{-- <td>
                                    <a href="#" class="btn btn-sm btn-icon edit-record btn-text-secondary rounded-pill waves-effect"><i class="ri-edit-box-line ri-20px"></i></a>
                                    <a href="#" class="btn btn-sm btn-icon edit-record btn-text-secondary rounded-pill waves-effect"><i class="ri-delete-bin-7-line ri-20px"></i></a>
                                    <a href="#" class="btn btn-sm btn-icon edit-record btn-text-secondary rounded-pill waves-effect"><i class="ri-printer-fill ri-20px"></i></a>
                                </td> --}}
                            </tr>
                        @endforeach
                    @else
                        <tr>
                            <td colspan="8" class="text-center">No purchase history available.</td>
                        </tr>
                    @endif
                </tbody>
              </table>
              </div>
              <div class="tab-pane fade" id="tab4" role="tabpanel" aria-labelledby="tab4-tab">
                {{-- <h6>Consume In</h6> --}}
                <table class="datatables-material table">
                  <thead>
                      <tr>
                          <th></th>
                          <th>Batch Order No.</th>
                          <th>Product</th>
                          <th>Consumed</th>
                          {{-- <th>MKT By</th>
                          <th>Product Code</th>
                          <th>Packing</th>
                          <th>Master Card No.</th>
                          <th>Batch Size</th>
                          <th>UOM</th>
                          <th>Req Qty</th>
                          <th>UOM</th>
                          <th>Action</th> --}}
                      </tr>
                  </thead>
                  <tbody>
                    @if(isset($batchOrderHistory) && $batchOrderHistory->isNotEmpty())
                    @foreach($batchOrderHistory as $batchHistory)
                    <tr>
                      <td></td>
                      <td>{{ $batchHistory->batchOrder->batch_no }}</td>
                      <td>{{ $batchHistory->batchOrder->product->name }}</td>
                      <td>{{ $batchHistory->total_kg }}{{ $batchHistory->material->consumptionUom->name }}</td>
                    </tr>
                    @endforeach
                    @endif
                  </tbody>
                </table>
                {{-- <div class="row g-1 mt-1">
                  <div class="col-2 d-flex justify-content-center align-items-center">
                    <strong></strong>
                  </div>
                  <div class="col-md-4">
                    <div class="form-floating form-floating-outline">
                      <input type="text" id="Product_name_consume" name="Product_name_consume" class="form-control" placeholder="Product Name">
                      <label for="Product_name_consume">Product Name</label>
                    </div>
                  </div>
                </div> --}}
              </div>
              <div class="tab-pane fade" id="tab5" role="tabpanel" aria-labelledby="tab5-tab">
                {{-- <h6>Stock</h6> --}}
                <table class="datatables-material table">
                  <thead>
                      <tr>
                          <th></th>
                          <th>Batch No</th>
                          <th>Inward No.</th>
                          <th>Pack Size</th>
                          <th>Qty</th>
                          <th>Total Qty</th>
                          <th>Available Qty</th>
                          <th>Status</th>
                          {{-- <th>Action</th> --}}
                      </tr>
                  </thead>
                  <tbody>
                    @if(isset($StockData) && $StockData->isNotEmpty())
                      @foreach($StockData as $stock)
                        <tr>
                          <td></td>
                          <td>{{ $stock->batch_no }}</td>
                          <td>{{ $stock->materialinventor_number }}</td>
                          <td>{{ $stock->pack_size }}</td>
                          <td>{{ $stock->qty }}</td>
                          <td>{{ $stock->total_qty }}</td>
                          <td>{{ $stock->available_stock }}</td>
                          @if($stock->status == 'approved')
                          <td><span class="badge rounded-pill bg-label-success }}">Approved</span></td>
                          @elseif($stock->status == 'pending')
                          <td><span class="badge rounded-pill bg-label-warning }}">Pending</span></td>
                          @elseif($stock->status == 'inprocess')
                          <td><span class="badge rounded-pill bg-label-info }}">In Process</span></td>
                          @else
                          <td><span class="badge rounded-pill bg-label-danger }}">Rejected</span></td>
                          @endif
                        </tr>
                      @endforeach
                    @endif
                  </tbody>
                </table>
                {{-- <div class="row g-1 mt-1">
                  <div class="col-2 d-flex justify-content-center align-items-center">
                    <strong></strong>
                  </div>
                  <div class="col-md-2">
                    <div class="form-floating form-floating-outline">
                      <input type="text" id="ar_no" name="ar_no" class="form-control" placeholder="AR No.">
                      <label for="ar_no">AR No.</label>
                    </div>
                  </div>
                  <div class="col-1 d-flex justify-content-center align-items-center">
                    <strong></strong>
                  </div>
                  <div class="col-md-2">
                    <div class="form-floating form-floating-outline">
                      <input type="text" id="total_usable_qty" name="total_usable_qty" class="form-control" placeholder="Total Usable Qty">
                      <label for="total_usable_qty">Total Usable Qty</label>
                    </div>
                  </div>
                  <div class="col-3 d-flex justify-content-center align-items-center">
                    <strong></strong>
                  </div>
                  <div class="col-md-2">
                    <div class="form-floating form-floating-outline">
                      <input type="text" id="retest_date" name="retest_date" class="form-control" placeholder="Retest Date">
                      <label for="retest_date">Retest Date</label>
                    </div>
                  </div>
                </div> --}}
              </div>
              <div class="tab-pane fade" id="tab6" role="tabpanel" aria-labelledby="tab6-tab">
                <h6>Additional Info</h6>
                <div class="row g-6">
                  <div class="col-md-6">
                      <input type="hidden" id="id" name="id" class="form-control">
                      <div class="form-floating form-floating-outline">
                        <input type="text" id="code" name="code" class="form-control" placeholder="Material Code" value="{{ old('code', $material->code ?? '') }}">
                        <label for="code">Material Code</label>
                    </div>
                  </div>
                  <div class="col-md-6">
                      <div class="form-floating form-floating-outline">
                          <input type="text" id="name" name="name" class="form-control" placeholder="Material Name">
                          <label for="name">Material Name</label>
                      </div>
                  </div>
                </div>
              </div>
          </div>
      </div>
    </div>

    <script>
      $(document).ready(function() {
          $('#category_id').on('change', function() {
              var categoryId = $(this).val();

              $('#sub_category_id').empty().append('<option></option>');

              if(categoryId) {
                  $.ajax({
                      url: '{{ route("get.subcategories") }}',
                      type: 'GET',
                      data: {category_id: categoryId},
                      success: function(response) {
                          if(response.length > 0) {
                              $.each(response, function(key, value) {
                                  $('#sub_category_id').append('<option value="'+ value.id +'">'+ value.name +'</option>');
                              });
                          }
                      }
                  });
              }
          });
      });

      $('#export-excel').on('click', function() {
        // Trigger Excel export logic
        table.button('.buttons-excel').trigger();
      });

      $('#export-pdf').on('click', function() {
        // Trigger PDF export logic
        table.button('.buttons-pdf').trigger();
      });

  </script>
  <script>
    document.addEventListener('DOMContentLoaded', function (e) {
      (function () {
        document.querySelectorAll('textarea').forEach(textarea => {
          if (textarea) {
            autosize(textarea);  // Apply the autosize function to each textarea
          }
      });

        const formValidationExamples = document.getElementById('material_form'),
          formValidationSelect2Ele = jQuery(formValidationExamples.querySelector('[name="formValidationSelect2"]')),
          formValidationTechEle = jQuery(formValidationExamples.querySelector('[name="formValidationTech"]')),
          formValidationLangEle = formValidationExamples.querySelector('[name="formValidationLang"]'),
          formValidationHobbiesEle = jQuery(formValidationExamples.querySelector('[name="formValidationHobbies"]'));

        const fv = FormValidation.formValidation(formValidationExamples, {
          fields: {
            name: {
              validators: {
                notEmpty: {
                  message: 'Please enter your name'
                },
              }
            },
            code: {
              validators: {
                notEmpty: {
                  message: 'Please enter your code'
                },
              }
            },
            short_name: {
              validators: {
                notEmpty: {
                  message: 'Please enter your Short Name'
                },
              }
            },
            category_id: {
              validators: {
                notEmpty: {
                  message: 'Please select Category'
                },
              }
            },
            sub_category_id: {
              validators: {
                notEmpty: {
                  message: 'Please select Sub Category'
                },
              }
            },
            storage_condition_id: {
              validators: {
                notEmpty: {
                  message: 'Please select Storage Condition'
                },
              }
            },
            purchase_uom_id: {
              validators: {
                notEmpty: {
                  message: 'Please select Storage Condition'
                },
              }
            },
            consumption_uom_id: {
              validators: {
                notEmpty: {
                  message: 'Please select Storage Condition'
                },
              }
            },
            note: {
              validators: {
                notEmpty: {
                  message: 'Please enter Note'
                },
              }
            },
            // measurement: {
            //   validators: {
            //     notEmpty: {
            //       message: 'Please enter Measurement'
            //     },
            //   }
            // },
            // map_code: {
            //   validators: {
            //     notEmpty: {
            //       message: 'Please enter Map Code'
            //     },
            //   }
            // },
            hsn_code: {
              validators: {
                notEmpty: {
                  message: 'Please enter HSN Code'
                },
              }
            },
            specification: {
              validators: {
                notEmpty: {
                  message: 'Please enter Specification'
                },
              }
            },
            // plain_printed: {
            //   validators: {
            //     notEmpty: {
            //       message: 'Please select Plain/Printed'
            //     },
            //   }
            // },
            // coa_rule: {
            //   validators: {
            //     notEmpty: {
            //       message: 'Please enter COA Rule'
            //     },
            //   }
            // },
            // nature_id: {
            //   validators: {
            //     notEmpty: {
            //       message: 'Please select Nature'
            //     },
            //   }
            // },
          },
          plugins: {
            trigger: new FormValidation.plugins.Trigger(),
            bootstrap5: new FormValidation.plugins.Bootstrap5({
              // Use this for enabling/changing valid/invalid class
              // eleInvalidClass: '',
              eleValidClass: '',
              rowSelector: function (field, ele) {
                return '.form-floating';
              }
            }),
            submitButton: new FormValidation.plugins.SubmitButton(),
            // Submit the form when all fields are valid
            defaultSubmit: new FormValidation.plugins.DefaultSubmit(),
            autoFocus: new FormValidation.plugins.AutoFocus()
          },
          init: instance => {
            instance.on('plugins.message.placed', function (e) {
              //* Move the error message out of the `input-group` element
              if (e.element.parentElement.classList.contains('input-group')) {
                // `e.field`: The field name
                // `e.messageElement`: The message element
                // `e.element`: The field element
                e.element.parentElement.insertAdjacentElement('afterend', e.messageElement);
              }
              //* Move the error message out of the `row` element for custom-options
              if (e.element.parentElement.parentElement.classList.contains('custom-option')) {
                e.element.closest('.row').insertAdjacentElement('afterend', e.messageElement);
              }
            });
          }
        });

        // Select2 (Country)
        if (formValidationSelect2Ele.length) {
          formValidationSelect2Ele.wrap('');
          formValidationSelect2Ele
            .select2({
              placeholder: 'Select country',
              dropdownParent: formValidationSelect2Ele.parent()
            })
            .on('change.select2', function () {
              // Revalidate the color field when an option is chosen
              fv.revalidateField('formValidationSelect2');
            });
        }

        //Bootstrap select
        formValidationTechEle.on('changed.bs.select', function (e, clickedIndex, isSelected, previousValue) {
          fv.revalidateField('formValidationTech');
        });
        formValidationHobbiesEle.on('changed.bs.select', function (e, clickedIndex, isSelected, previousValue) {
          fv.revalidateField('formValidationHobbies');
        });
      })();
      });

  </script>
@endsection