@extends('layouts/layoutMaster')

@section('title', 'Vendor List - 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/datatables-checkboxes-jquery/datatables.checkboxes.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/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'
])
@endsection

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

@section('content')

<div class="card">
  <div class="card-datatable table-responsive">
    <table class="datatables-vendor table table-hover">
      <thead>
        <tr>
          <th></th>
          <th hidden>ID</th>
          <th>#</th>
          <th>Nama Vendor</th>
          <th>BANK</th>
          <th>No Rekening</th>
          <th>Email</th>
          <th>Telepon</th>
          <th>Alamat</th>
          <th class="text-center">Actions</th>
        </tr>
      </thead>
      <tbody>
        @foreach ($vendors as $vendor)
          <tr>
            <td></td>
            <td hidden>{{ $vendor->id }}</td>
            <td>{{$loop->index + 1}}</td>
            <td>{{ $vendor->name }}</td>
            <td>{{ $vendor->bank }}</td>
            <td>{{ $vendor->bank_account }}</td>
            <td>{{ $vendor->email }}</td>
            <td>{{ $vendor->phone_number }}</td>
            <td>{{ $vendor->address }}</td>
            <td class="text-center">
              <button class="btn btn-sm btn-icon edit-record btn-text-primary rounded-pill waves-effect"><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"><i class="ri-delete-bin-line ri-20px"></i></button>
            </td>
          </tr>
        @endforeach
      </tbody>
    </table>
  </div>

  <!-- Offcanvas to add new vendor -->
  <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasAddVendor" aria-labelledby="offcanvasAddVendorLabel">
    <div class="offcanvas-header border-bottom">
      <h5 id="offcanvasAddVendorLabel" class="offcanvas-title">Tambah Vendor</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="addVendorForm pt-0" id="addNewVendorForm" enctype="multipart/form-data">
        <input type="hidden" id="vendor_id" name="id" value="">
        <div class="form-floating form-floating-outline mb-4">
          <input type="text" class="form-control" id="vendor-name" name="name" placeholder="Nama Vendor" />
          <label for="vendor-name">Nama Vendor</label>
        </div>
        <div class="form-floating form-floating-outline mb-4">
          <input type="text" class="form-control" id="vendor-bank" name="bank" placeholder="Nama Bank" />
          <label for="vendor-name">Nama Bank</label>
        </div>
        <div class="form-floating form-floating-outline mb-4">
          <input type="text" class="form-control" id="vendor-account-number" name="account_number" placeholder="Nomor Rekening" />
          <label for="vendor-name">Nomor Rekening</label>
        </div>
        <div class="form-floating form-floating-outline mb-4">
          <input type="email" class="form-control" id="vendor-email" name="email" placeholder="Email Vendor" />
          <label for="vendor-email">Email</label>
        </div>
        <div class="form-floating form-floating-outline mb-4">
          <input type="text" class="form-control" id="vendor-phone" name="phone_number" placeholder="Telepon Vendor" />
          <label for="vendor-phone">Telepon</label>
        </div>
        <div class="form-floating form-floating-outline mb-4">
          <textarea class="form-control" id="vendor-address" name="address" placeholder="Alamat Vendor"></textarea>
          <label for="vendor-address">Alamat</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