@extends('layouts/layoutMaster')

@section('title', 'View Bom')
    <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/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'])
  @vite(['resources/assets/js/forms-extras.js'])
  {{-- @vite(['resources/js/bom-edit.js']) --}}
@endsection

@section('content')
    <!-- Site List Table -->
    <form class="card-body" id="material_form" action="{{ route('bom-list.update', $bom->id) }}" method="POST">
      @csrf
      @method('PUT')
      <div class="card mb-6">
        <h5 class="card-header">View Batch Master</h5>
          {{-- <div class="row g-6 ms-3 me-3">
              <div class="col-md-12">
                <div class="form-floating form-floating-outline">
                  <input type="hidden" name="bom_id" value="{{ $bom->id }}">
                  <input type="text" id="batch_name" name="batch_name" class="form-control" placeholder="Batch Name" value="{{ old('batch_name', $bom->batch_name ?? '') }}" readonly>
                  <label for="batch_name">Batch Name</label>
                </div>
              </div>
          </div> --}}
          <br>
          <div class="row g-6 ms-3 me-3">
              <div class="col-md-6">
                  <div class="form-floating form-floating-outline">
                      <select name="product_id" id="product_id" class="select2 form-select" data-placeholder="Category" data-allow-clear="true">
                          <option></option>
                          @foreach ($products as $product)
                              <option value="{{ $product->id }}" {{ old('product_id', $bom->product_id ?? '') == $product->id ? 'selected' : '' }} readonly>{{ $product->name }}</option>
                          @endforeach
                      </select>
                      <label for="product_id">Select Product</label>
                  </div>
              </div>
              <div class="col-md-6">
                <div class="form-floating form-floating-outline">
                    <input type="text" id="generic_name" name="generic_name" class="form-control" placeholder="Generic Name" value="{{ $bom->product->genric_name }}" readonly>
                    <label for="generic_name">Generic Name</label>
                </div>
              </div>
          </div>
          <br>
          <div class="row g-6 ms-3 me-3">
            <div class="col-md-2">
              <div class="form-floating form-floating-outline">
                  <input type="text" id="btach_size" name="btach_size" class="form-control numeral-mask" placeholder="Batch Size / Qty" value="{{ old('btach_size', $bom->batch_size ?? '') }}" readonly>
                  <label for="btach_size">Batch Size / Qty</label>
              </div>
            </div>
            <div class="col-md-3">
              <div class="form-floating form-floating-outline">
                <select name="department" id="department" class="select2 form-select" data-placeholder="Select Department" data-allow-clear="true" readonly>
                  <option value="Tablet" {{ old('department', $bom->department ?? '') == 'Tablet' ? 'selected' : '' }}>Tablet</option>
                  <option value="Capsule" {{ old('department', $bom->department ?? '') == 'Capsule' ? 'selected' : '' }}>Capsule</option>
                  <option value="Syrup" {{ old('department', $bom->department ?? '') == 'Syrup' ? 'selected' : '' }}>Syrup</option>
                </select>
                <label for="department">Select Department</label>
              </div>
            </div>
            <div class="col-md-2">
              <div class="form-floating form-floating-outline">
                  <input type="text" id="avg_weight" name="avg_weight" class="form-control avg_weight-mask" placeholder="Average Weight" value="{{ old('avg_weight', $bom->avg_weight ?? '') }}" readonly>
                  <label for="avg_weight">Average Weight</label>
              </div>
            </div>
            <div class="col-md-2">
              <div class="form-floating form-floating-outline">
                  <select name="weight_uom" id="weight_uom" class="select2 form-select" data-placeholder="Select Uom" data-allow-clear="true" readonly>
                      {{-- <option value="Mg">Mg</option>
                      <option value="Ml">Ml</option> --}}
                      <option value="Mg" {{ old('weight_uom', $bom->weight_uom ?? '') == 'Mg' ? 'selected' : '' }}>Mg</option>
                      <option value="Ml" {{ old('weight_uom', $bom->weight_uom ?? '') == 'Ml' ? 'selected' : '' }}>Ml</option>
                      {{-- <option value="Syrup" {{ old('department', $bom->department ?? '') == 'Syrup' ? 'selected' : '' }}>Syrup</option> --}}
                  </select>
                  <label for="weight_uom">Select Uom</label>
              </div>
            </div>
            <div class="col-md-3">
              <div class="form-floating form-floating-outline">
                  <input type="text" id="total_batch_weight" name="total_batch_weight" class="form-control batch_weight-mask" placeholder="Total Batch Weight" value="{{ old('total_batch_weight', $bom->total_batch_weight ?? '') }}" readonly>
                  <label for="total_batch_weight">Total Batch Weight</label>
              </div>
            </div>
          </div>
          <br>
        </div>
        @php
            $count_row = 1; // Initialize row count
        @endphp
        @foreach ($bom_process as $process)
          <div class="bomProcessContainer" id="bomProcessCardsContainer">
              <div class="card mb-6 mainBomContainer bomProcessContainer bomProcessContainer_1">
                  <hr class="mt-0">
                  <h5 class="card-header">View Bom Process</h5><br>
                  <div id="mainBomContainer" class="card-body">
                      <!-- Existing BOM process container -->
                      <div class="bom-process-template bomProcessContainer1" id="bomProcessContainer">
                          <div class="row g-6 ms-3 me-3">
                              <!-- Process Name -->
                              <div class="col-md-6">
                                  <div class="form-floating form-floating-outline">
                                      <input type="hidden" name="bom_process_id[{{ $count_row }}][]" value="{{ old('process_name', $process->id ?? '') }}">
                                      <input type="text" name="process_name[{{ $count_row }}][]" class="form-control" placeholder="Process Name" value="{{ old('process_name', $process->process_name ?? '') }}" readonly>
                                      <label for="process_name">Process Name</label>
                                  </div>
                              </div>
                              <!-- Process Time in min -->
                              <div class="col-md-6">
                                  <div class="form-floating form-floating-outline">
                                      <input type="text" name="process_time_in_min[{{ $count_row }}][]" class="form-control" placeholder="Process time in min" value="{{ old('process_time_in_min', $process->process_time ?? '') }}" readonly>
                                      <label for="process_time_in_min">Process time in min</label>
                                  </div>
                              </div>
                          </div>
                          <br>

                          <!-- Material selection -->
                          <div class="row g-6 ms-3 me-3">
                              <div class="col-md-12">
                                  <div class="form-floating form-floating-outline">
                                      <select name="material_id[{{ $count_row }}][]" id="material_id" class="select2 form-select material_id material_id_1" data-id="0" data-placeholder="Material" data-allow-clear="true">
                                          <option></option>
                                          @foreach ($materials as $material)
                                              <option value="{{ $material->id }}" data-name="{{ $material->name }}">{{ $material->name }}</option>
                                          @endforeach
                                      </select>
                                      <label for="material_id">Select Material</label>
                                  </div>
                              </div>
                          </div>
                          <br>

                          <!-- Material Table -->
                          <div class="card-datatable table-responsive ms-5 me-5">
                              <table class="table" id="materialsTable">
                                  <thead>
                                      <tr>
                                          <th>Id</th>
                                          <th>Material Name</th>
                                          <th>Qty / Tab</th>
                                          {{-- <th>Uom</th> --}}
                                          <th>Qty Std Batch Size</th>
                                          <th>Qty With Overage</th>
                                          <th>Total</th>
                                          {{-- <th>Uom</th> --}}
                                          {{-- <th>Actions</th> --}}
                                      </tr>
                                  </thead>
                                  <tbody class="materialsTableBody" id="materialsTableBody">
                                      <!-- Loop through the materials for this BOM process -->
                                      @if(!empty($bom_materials))
                                        @php $counterMT = 1; @endphp
                                        @foreach ($bom_materials->where('bom_process_id', $process->id) as $material)
                                        {{-- {{ dd($material) }} --}}
                                        <tr>
                                          <td>{{ $counterMT++ }}<input type="hidden" name="material_id_tbl[{{ $count_row }}][]" value="{{ $material->material_id }}" /></td>
                                          <td>{{ $material->material->name }}</td>
                                          <td>
                                              <div class="input-group">
                                                <input type="number" name="qty_tab[{{ $count_row }}][]" class="form-control qty_tab" placeholder="Qty / Tab" value="{{ $material->qty_tab }}" />
                                                <select name="uom[{{ $count_row }}][]" class="select2 form-select uom" data-placeholder="Select Uom" data-allow-clear="true" style="max-width: 110px;">
                                                  {{-- <option value="">Select</option>
                                                  <option value="Mg">Mg</option>
                                                  <option value="Ml">Ml</option> --}}
                                                  <option value="Mg" {{ old('uom', $material->uom ?? '') == 'Mg' ? 'selected' : '' }}>Mg</option>
                                                  <option value="Ml" {{ old('uom', $material->uom ?? '') == 'Ml' ? 'selected' : '' }}>Ml</option>
                                                </select>
                                              </div>
                                          </td>
                                          <td>
                                            <div class="input-group">
                                              <input type="number" name="std_batch_size[{{ $count_row }}][]" class="form-control std_batch_size" placeholder="Qty Std Batch Size" value="{{ $material->std_batch_size }}" readonly />
                                              <input type="text" name="uom_std[{{ $count_row }}][]" class="form-control uom_std" placeholder="Uom" value="{{ $material->uom_std }}" readonly style="max-width: 70px;" />
                                            </div>
                                          </td>
                                          <td>
                                              <div class="input-group">
                                                <input type="number" name="qty_overage[{{ $count_row }}][]" value="{{ $material->qty_overage }}" class="form-control qty_overage" placeholder="" />
                                                <span class="input-group-text">%</span>
                                                <input type="text" name="qty_overage_percent[{{ $count_row }}][]" class="form-control qty_overage_percent" value="{{ $material->qty_overage_percent }}" placeholder="" readonly style="max-width: 90px;" />
                                              </div>

                                          </td>
                                          <td>
                                            <div class="input-group">
                                              <input type="text" name="total_kg[{{ $count_row }}][]" class="form-control total_kg" value="{{ $material->total }}" placeholder="" readonly />
                                              <input type="text" class="form-control uom_std_new" placeholder="{{ $material->uom == 'Mg' ? 'Kg' : ($material->uom == 'Ml' ? 'L' : 'Uom') }}" readonly style="max-width: 70px;" />
                                            </div>
                                          </td>
                                        </tr>
                                        @endforeach
                                      @endif
                                  </tbody>
                              </table>
                          </div>

                          <br>
                          <div class="card-datatable table-responsive ms-5 me-5">
                            <table class="table" id="subProcessTable">
                                <thead>
                                    <tr>
                                        <th>Id</th>
                                        <th>Sub Process</th>
                                        {{-- <th>Actions</th> --}}
                                    </tr>
                                </thead>
                                <tbody class="subProcessTableBody" id="subProcessTableBody">
                                  @if(!empty($bom_sub_processes))
                                      @php $counterSP = 1; @endphp
                                      @foreach ($bom_sub_processes->where('bom_process_id', $process->id) as $subProcess)
                                          <tr>
                                              <td>{{ $counterSP++ }}</td>
                                              <td>
                                                  <input type="hidden" name="sub_process_id[{{ $count_row }}][]" value="{{ $subProcess->id }}">
                                                  <input type="text" name="sub_process[{{ $count_row }}][]" class="form-control" placeholder="Sub Process" value="{{ $subProcess->sub_process }}" />
                                              </td>
                                              {{-- <td>
                                                  <button type="button" class="btn btn-danger btn-sm" onclick="removeRow(this)">Remove</button>
                                              </td> --}}
                                          </tr>
                                      @endforeach
                                    @endif
                                </tbody>
                            </table>
                            {{-- <button type="button" id="addSubProcessBtn" class="btn btn-primary mt-3"><i class="ri-add-line me-2 addSubProcessBtn addSubProcessBtn_1"></i>Add Sub Process</button> --}}

                            {{-- <button type="button" id="removeTestingBtn" class="btn btn-danger mt-3"><i class="ri-add-line me-2 removeTestingBtn removeTestingBtn_1"></i>Remove BOM</button> --}}
                          </div>
                          <br>
                          <!-- Testing Table -->
                          <div class="card-datatable table-responsive ms-5 me-5">
                              <table class="table" id="testingTable">
                                  <thead>
                                      <tr>
                                          <th>Id</th>
                                          <th>Test Description</th>
                                          <th>Standards</th>
                                          <th>Test By</th>
                                          {{-- <th>Actions</th> --}}
                                      </tr>
                                  </thead>
                                  <tbody class="testingTableBody" id="testingTableBody">
                                      <!-- Loop through the testing data for this BOM process -->
                                      @if(!empty($bom_testings))
                                        @php $counterBT = 1; @endphp
                                        @foreach ($bom_testings->where('bom_process_id', $process->id) as $testing)
                                            <tr>
                                                <td>{{ $counterBT++ }}</td>
                                                <td>
                                                    <input type="hidden" name="test_id" value="{{ $testing->id }}">
                                                    <input type="text" name="test_description[{{ $count_row }}][]" class="form-control" placeholder="Test Description" value="{{ $testing->test_description }}" readonly />
                                                </td>
                                                <td>
                                                    <input type="text" name="standards[{{ $count_row }}][]" class="form-control" placeholder="Standards" value="{{ $testing->standards }}" readonly />
                                                </td>
                                                <td>
                                                    <input type="text" name="frequency[{{ $count_row }}][]" class="form-control" placeholder="Test By" value="{{ $testing->frequency }}" readonly />
                                                </td>
                                                {{-- <td>
                                                    <button type="button" class="btn btn-danger btn-sm">Remove</button>
                                                </td> --}}
                                            </tr>
                                        @endforeach
                                      @endif
                                  </tbody>
                              </table>
                              {{-- <button type="button" id="addTestingBtn" class="btn btn-primary mt-3 addTestingBtn addTestingBtn_{{ $count_row }}">
                                  <i class="ri-add-line me-2 addTestingBtn addTestingBtn_1"></i>Add Testing
                              </button> --}}
                              {{-- <button type="button" class="btn btn-primary mt-3 addTestingBtn addTestingBtn_{{ $count_row }}">Add Testing</button> --}}
                          </div>
                          <hr class="mt-0">
                      </div>
                  </div>
              </div>
          </div>
          @php
            $count_row++; // Increment the row count for the next process
          @endphp
        @endforeach

        <div>
          {{-- <button type="button" id="addBomProcessBtn" class="btn btn-primary mt-3 mb-3 addBomProcessBtn">
            <i class="ri-add-line me-2"></i>Add BOM Process
          </button> --}}
          <input type="hidden" name="count_row" class="count_row" value="{{ $count_row }}">
        </div>

      <div class="pt-6">
          {{-- <button type="submit" class="btn btn-primary me-4 waves-effect waves-light">Update</button> --}}
          <a href="{{ route('bomManage') }}" class="btn btn-outline-secondary waves-effect">Back</a>
      </div>
    </form>
    @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
@endsection