@extends('layouts/layoutMaster')

@section('title', 'Batch Material Requests')
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
    body:not(.modal-open) .select2-container--open {
        z-index: 99;
    }
</style>

<!-- batchOrder 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'
    ])
@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'
    ])
@endsection
@section('content')

<div class="invoice-print p-8">
  <div class="card invoice-preview-card w-100 p-sm-12 p-8 shadow">
      <div class="card-body invoice-preview-header rounded-4 p-1">
          <div class="d-flex justify-content-between align-items-center mb-2">
              <div>
              </div>
          </div>
          {{-- {{ dd($batchMaterialReqNN) }} --}}
          <div class="row g-6 ms-3 me-3">
              <div class="col md-3">
                <div class="form-floating form-floating-outline">
                  <input type="text" name="batch_no" id="batch_no" class="form-control batch_no" placeholder="Batch No" value="{{ $batchMaterialReqNN->batchOrder->batch_no }}" readonly/>
                  <label for="batch_no">Batch No</label>
                </div>
              </div>
              <div class="col-md-3">
                <div class="form-floating form-floating-outline">
                  <input type="text" class="form-control" id="product_name" name="product_name"  value="{{ $batchMaterialReqNN->batchOrder->product->name }}" readonly>
                  <label for="product_name">Product Name</label>
                </div>
              </div>
              <div class="col-md-3">
                <div class="form-floating form-floating-outline">
                  <input type="text" class="form-control" id="requested_by" name="requested_by"  value="{{ $batchMaterialReqNN->user->name }}" readonly>
                  <label for="requested_by">Requested By</label>
                </div>
              </div>
              <div class="col-md-3">
                <div class="form-floating form-floating-outline">
                  <input type="text" class="form-control" id="created_at" name="created_at"  value="{{ \Carbon\Carbon::parse($batchMaterialReqNN->created_at)->format('d-m-Y') }}" readonly>
                  <label for="created_at">Created At</label>
                </div>
              </div>
          </div>
          <br>
          <div class="table-responsive border rounded-4 p-3">
            <table class="table m-0">
                <thead>
                    <tr class="table-primary">
                      <th>Material</th>
                      <th>Batch Order</th>
                      <th>Batch Process</th>
                      <th>Total KG</th>
                      <th>Available Qty</th>
                      <th>Action</th>
                    </tr>
                </thead>
                <tbody class="table-border-bottom-0">
                    @foreach($batchMaterialReq as $item)
                    <tr>
                      <form action="{{ route('material.debit') }}" method="POST" class="debit-form">
                      @csrf
                        <input type="hidden" name="material_id" value="{{ $item->material_id }}">
                        <input type="hidden" name="total_kg" value="{{ $item->total_kg }}">
                        <input type="hidden" name="batch_material_req_id" value="{{ $item->id }}">
                        <td>{{ $item->material->name }}</td>
                        <td>{{ $item->batchOrder->batch_no }}</td>
                        <td>{{ $item->batchProcess->process_name ?? 'Packing Request' }}</td>
                        <td>{{ $item->total_kg }}</td>
                        @php
                            $totalQty = \App\Models\MaterialInventor::where('material_id', $item->material_id)
                                ->where('status', 'approved')
                                ->sum('available_stock');
                            $stock = \App\Models\MaterialInventor::with('material')->where('material_id', $item->material_id)
                                ->where('status', 'approved')->get();
                                // dd($stock);
                        @endphp
                        @if($item->total_kg < $totalQty)
                        <td><button type="button" class="btn btn-outline-success"  data-bs-toggle="modal" data-bs-target="#stockModal" data-stock="{{ $stock->map(fn($s) => ['name' => $s->material->name, 'available_stock' => $s->available_stock, 'expiry_date' => $s->expiry_date, 'status' => $s->status, 'batch_no' => $s->batch_no]) }}">{{ $totalQty }}</button></td>
                        @else
                        <td><button type="button" class="btn btn-outline-danger"  data-bs-toggle="modal" data-bs-target="#stockModal" data-stock="{{ $stock->map(fn($s) => ['name' => $s->material->name, 'available_stock' => $s->available_stock, 'expiry_date' => $s->expiry_date, 'status' => $s->status, 'batch_no' => $s->batch_no]) }}">{{ $totalQty }}</button></td>
                        @endif
                        @php
                          $isDebited = \App\Models\MaterialInventor::where('material_id', $item->material_id)
                              ->where('transction_type', 'dr')->where('batch_material_req_id',$item->id)
                              ->exists();
                        @endphp
                        {{-- <td>{{ $stock }}</td> --}}
                        @if($isDebited)
                          <td><button type="submit" class="btn btn-outline-secondary" disabled>Debited</button></td>
                        @else
                          <td><button type="submit" class="btn btn-outline-primary">Debit</button></td>
                        @endif
                      </form>
                    </tr>
                    @endforeach
                </tbody>
            </table>
          </div>
        </div>

      </form>
  </div>
</div>

{{-- <div class="modal-dialog modal-xs">
  <div class="modal-content">
    <div class="modal-header">
      <h5 class="modal-title">Batch Material Request Details</h5>
      <button type="button" class="close" data-dismiss="modal" aria-label="Close">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
    <div class="table-responsive border rounded-4 p-3">
    <div class="modal-body">
      <table class="table m-0">
        <thead>
            <tr class="table-primary">
              <th>Material ID</th>
              <th>Batch Order ID</th>
              <th>Batch Process ID</th>
              <th>Total KG</th>
            </tr>
        </thead>
        <tbody>
            @foreach ($batchMaterialReq as $item)
              <tr>
                <td>{{ $item->material->name }}</td>
                <td>{{ $item->batchOrder->batch_no }}</td>
                <td>{{ $item->batchProcess->process_name }}</td>
                <td>{{ $item->total_kg }}</td>
              </tr>
            @endforeach
        </tbody>
      </table>
    </div>
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
    </div>
  </div>
</div> --}}
<div class="modal fade" id="stockModal" tabindex="-1" aria-labelledby="stockModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="stockModalLabel">Stock Details</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <table class="table table-bordered">
          <thead>
            <tr>
              <th>Material Name</th>
              <th>Available Stock</th>
              <th>Batch No</th>
              <th>Expiry Date</th>
              <th>Status</th>
            </tr>
          </thead>
          <tbody id="stockTableBody">
            <!-- Data will be dynamically populated -->
          </tbody>
        </table>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>


<script>
document.addEventListener('DOMContentLoaded', function () {
  const stockModal = document.getElementById('stockModal');
  const stockTableBody = document.getElementById('stockTableBody');

  stockModal.addEventListener('show.bs.modal', function (event) {
    const button = event.relatedTarget; // Button that triggered the modal
    const stockData = JSON.parse(button.getAttribute('data-stock')); // Parse the stock data

    // Clear previous table rows
    stockTableBody.innerHTML = '';

    // Function to format date in dd mm yyyy format
    function formatDate(dateString) {
      if (!dateString) return 'N/A'; // If no expiry date is present
      const date = new Date(dateString);
      const day = ("0" + date.getDate()).slice(-2);  // Ensure two digits
      const month = ("0" + (date.getMonth() + 1)).slice(-2);  // Months are 0-based
      const year = date.getFullYear();  // Full 4-digit year
      return `${day}-${month}-${year}`;
    }

    // Populate the table with stock data
    stockData.forEach(stockItem => {
      const row = `
        <tr>
          <td>${stockItem.name}</td>
          <td>${stockItem.available_stock}</td>
          <td>${stockItem.batch_no}</td>
          <td>${formatDate(stockItem.expiry_date)}</td>
          <td>${stockItem.status}</td>
        </tr>`;
      stockTableBody.insertAdjacentHTML('beforeend', row);
    });
  });
});

</script>

@endsection