@extends('layouts/layoutMaster')

@section('title', 'Daftar Pembelian - Pages')

@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'
])
@endsection

@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/bootstrap5.js'
])
@endsection

@section('page-script')
@vite(['Modules/Stockist/resources/assets/js/purchase.js'])
@endsection

@section('content')

<div class="card">
  <div class="card-datatable table-responsive">
    <table class="datatables-purchases table table-hover">
      <thead>
        <tr>
          <th></th>
          <th>#</th>
          <th hidden>ID</th>
          <th>Nama Item</th>
          <th>Jenis Item</th>
          <th>Jumlah</th>
          <th>Harga</th>
          <th>Vendor</th>
          <th>Gudang</th>
          <th>Status</th>
          <th>Tanggal Pembelian</th>
          <th>Tanggal Kadaluarsa</th>
          <th>Aksi</th>
        </tr>
      </thead>
      <tbody>
        @foreach ($purchases as $purchase)
        <tr>
          <td></td>
          <td>{{$loop->index + 1}}</td>
          <td hidden>{{ $purchase->id }}</td>
          <td>{{ $purchase->ingredient ? $purchase->ingredient->name : $purchase->item_name }}</td>
          <td>{{ $purchase->ingredient ? ($purchase->ingredient->category == 'raw-material' ? 'Bahan Baku' :
            'Peralatan') : 'Non-Bahan Baku' }}</td>
          <td>{{ rtrim(rtrim(number_format($purchase->quantity, 8, '.', ','), '0'), '.') ?? '-' }} {{
            $purchase->unit->code ?? '-' }}</td>
          <td>{{ rupiah_format($purchase->price, 2) }}</td>
          <td>{{ $purchase->vendor->name ?? 'N/A' }}</td>
          <td>{{ $purchase->warehouse->name ?? 'N/A' }}</td>
          <td>
            <select class="form-select purchase-status text-nowrap" data-id="{{ $purchase->id }}"
              style="padding-right: 2.5rem; min-width: 120px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; appearance: none;">
              <option value="dipesan" {{ $purchase->status == 'dipesan' ? 'selected' : '' }}>Dipesan</option>
              <option value="diterima" {{ $purchase->status == 'diterima' ? 'selected' : '' }}>Diterima</option>
              <option value="tertunda" {{ $purchase->status == 'tertunda' ? 'selected' : '' }}>Tertunda</option>
            </select>
          </td>
          <td>{{ $purchase->purchase_date ? formatTanggalIndonesia($purchase->purchase_date) : '-' }}</td>
          <td>{{ $purchase->expiry_date ? formatTanggalIndonesia($purchase->expiry_date) : '-' }}</td>
          <td class="text-center">
            <button class="btn btn-sm btn-icon edit-record btn-text-primary rounded-pill waves-effect"
              data-id="{{ $purchase->id }}">
              <i class="ri-edit-box-line ri-20px"></i>
            </button>
            <button class="btn btn-sm btn-icon delete-record btn-text-primary rounded-pill waves-effect"
              data-id="{{ $purchase->id }}">
              <i class="ri-delete-bin-line ri-20px"></i>
            </button>
          </td>
        </tr>
        @endforeach
      </tbody>
    </table>
  </div>

  <!-- Offcanvas to add new purchase -->
  <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasAddPurchase"
    aria-labelledby="offcanvasAddPurchaseLabel">
    <div class="offcanvas-header border-bottom">
      <h5 id="offcanvasAddPurchaseLabel" class="offcanvas-title">Tambah Pembelian</h5>
      <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
    </div>
    <div class="offcanvas-body mx-0 flex-grow-0 h-100">
      <form class="addPurchaseForm pt-0" id="addNewPurchaseForm" enctype="multipart/form-data">
        <input type="hidden" id="purchase_id" name="id" value="">

        <!-- Pilihan jenis item: Bahan Baku atau Non-Bahan Baku -->
        <div class="form-floating form-floating-outline mb-4">
          <select class="form-select select2" id="purchase-item-type" name="item_type">
            <option value="" hidden></option>
            <option value="ingredient">Bahan Baku</option>
            <option value="equipment">Peralatan</option>
            {{-- <option value="non_ingredient">Non-Bahan Baku</option> --}}
          </select>
          <label for="purchase-item-type">Jenis Item</label>
        </div>

        <!-- Jika bahan baku -->
        <div id="ingredient-selection" class="form-floating form-floating-outline mb-4" style="display:none;">
          <select class="form-select select2" id="purchase-ingredient" name="ingredient_id">
            <option value="">Pilih Bahan Baku</option>
            @foreach($ingredients as $ingredient)
            <option value="{{ $ingredient->id }}">{{ $ingredient->name }}</option>
            @endforeach
          </select>
          <label for="purchase-ingredient">Bahan Baku</label>
        </div>
        <!-- Jika Peralatan -->
        <div id="equipment-selection" class="form-floating form-floating-outline mb-4" style="display:none;">
          <select class="form-select select2" id="purchase-equipment" name="equipment_id">
            <option value="">Pilih Peralatan</option>
            @foreach($equipments as $equipment)
            <option value="{{ $equipment->id }}">{{ $equipment->name }}</option>
            @endforeach
          </select>
          <label for="purchase-equipment">Peralatan</label>
        </div>
        <!-- Jika non-bahan baku -->
        <div id="non-ingredient-name" class="form-floating form-floating-outline mb-4" style="display:none;">
          <input type="text" class="form-control" id="purchase-item-name" name="item_name" placeholder="Nama Item" />
          <label for="purchase-item-name">Nama Item</label>
        </div>

        <div class="form-floating form-floating-outline mb-4">
          <select class="form-select select2" id="purchase-unit" name="unit_id">
            <option value="">Pilih Satuan</option>
            @foreach($units as $unit)
            <option value="{{ $unit->id }}">{{ $unit->name }}</option>
            @endforeach
          </select>
          <label for="purchase-unit">Satuan</label>
        </div>

        <div class="form-floating form-floating-outline mb-4">
          <input type="number" class="form-control" id="purchase-quantity" name="quantity" placeholder="Jumlah" />
          <label for="purchase-quantity">Jumlah</label>
        </div>

        <div class="form-floating form-floating-outline mb-4">
          <input type="number" class="form-control" id="purchase-price" name="price" placeholder="Harga" />
          <label for="purchase-price">Harga</label>
        </div>

        <div class="form-floating form-floating-outline mb-4">
          <select class="form-select select2" id="purchase-vendor" name="vendor_id">
            <option value="">Pilih Vendor (Opsional)</option>
            @foreach($vendors as $vendor)
            <option value="{{ $vendor->id }}">{{ $vendor->name }}</option>
            @endforeach
          </select>
          <label for="purchase-vendor">Vendor (Opsional)</label>
        </div>

        <div class="form-floating form-floating-outline mb-4">
          <select class="form-select select2" id="purchase-warehouse" name="warehouse_id">
            <option value="">Pilih Gudang</option>
            @foreach($warehouses as $warehouse)
            <option value="{{ $warehouse->id }}">{{ $warehouse->name }}</option>
            @endforeach
          </select>
          <label for="purchase-warehouse">Gudang</label>
        </div>

        <!-- Tanggal Pembelian -->
        <div class="form-floating form-floating-outline mb-4">
          <input type="date" class="form-control" id="purchase-date" name="purchase_date" />
          <label for="purchase-date">Tanggal Pembelian</label>
        </div>

        <!-- Tanggal Kadaluarsa -->
        <div class="form-floating form-floating-outline mb-4">
          <input type="date" class="form-control" id="purchase-expiry-date" name="expiry_date" />
          <label for="purchase-expiry-date">Tanggal Kadaluarsa</label>
        </div>

        <button type="submit" class="btn btn-primary me-sm-3 me-1 data-submit">Submit</button>
        <button type="reset" class="btn btn-outline-secondary" data-bs-dismiss="offcanvas">Cancel</button>
      </form>
    </div>
  </div>
</div>
@endsection