@extends('layouts.admin.base-dashboard')

@section('title', 'Transaksi Capster')

@push('style')
<style>
/* Card layout for tablet and smaller */
@media (max-width: 768px) {
    .pos-layout { display: flex; flex-direction: column; }
    .card-products { order: 1; }
    .card-payment  { order: 2; }
    .table-responsive { display: none !important; }
    #cart-cards     { display: block !important; }
}
/* Side-by-side for desktop */
@media (min-width: 769px) {
    .pos-layout { display: flex; flex-direction: row; gap: 20px; }
    .card-products { flex: 2; }
    .card-payment  { flex: 1; }
}
/* Mobile tweaks */
@media (max-width: 400px) {
    .card-body, .table-responsive { padding: 8px !important; }
    .form-label, label           { font-size: 14px; }
    input, select                { font-size: 15px; }
    table td, table th           { font-size: 13px; padding: 6px 4px !important; }
    .modal-dialog                { max-width: 98vw !important; margin: 0 auto; }
    .modal-content               { border-radius: 12px; }
    pre                          { font-size: 12px; }
}
/* hide mobile cards by default */
#cart-cards { display: none; }
</style>
@endpush

@section('content')
<div class="container-fluid">
  <div class="card">
    <div class="card-header fw-bold bg-primary text-white">
      💈 Transaksi Capster / Barbershop
    </div>
    <div class="card-body">
      @if ($errors->any())
        <div class="alert alert-danger">
          @foreach ($errors->all() as $e)
            <div>{{ $e }}</div>
          @endforeach
        </div>
      @endif

      @if (session('error'))
        <div class="alert alert-danger">{{ session('error') }}</div>
      @endif
      @if (session('success'))
        <div class="alert alert-success">{{ session('success') }}</div>
      @endif

      <form id="trxForm" action="{{ route('capsters.cashiers.store') }}" method="POST" autocomplete="off">
        @csrf
        <div class="pos-layout">

          {{-- Produk & Keranjang --}}
          <div class="card card-products shadow-sm mb-3">
            <div class="card-body">
              {{-- Capster & Customer --}}
              <div class="row g-2 mb-3 align-items-end">
                <div class="col-12 col-md-5">
                  <label for="capster" class="form-label">Capster</label>
                  <select id="capster" name="capster_id" class="form-control" style="width:100%"></select>
                  <input type="hidden" name="capster_name" id="capster_name">
                </div>
                <div class="col-12 col-md-5 mt-2">
                  <label for="customer" class="form-label">Member / Customer</label>
                  <select id="customer" name="customer_id" class="form-control" style="width:100%"></select>
                  <input type="hidden" name="customer_name" id="customer_name">
                </div>
              </div>

              {{-- Tambah Service --}}
              <div class="row g-2 mb-3 align-items-end">
                <div class="col-12 col-md-5">
                  <label for="service" class="form-label">Layanan</label>
                  <select id="service" class="form-control" style="width:100%"></select>
                </div>
                <div class="col-12 col-md-2 d-flex">
                  <button type="button" class="btn btn-success btn-sm w-100 mt-2" id="add-service-btn">
                    Tambah
                  </button>
                </div>
              </div>

              {{-- Tambah Product --}}
              <div class="row g-2 mb-3 align-items-end">
                <div class="col-12 col-md-5">
                  <label for="product" class="form-label">Produk</label>
                  <select id="product" class="form-control" style="width:100%"></select>
                </div>
                <div class="col-12 col-md-2 d-flex">
                  <button type="button" class="btn btn-success btn-sm w-100 mt-2" id="add-product-btn">
                    Tambah
                  </button>
                </div>
              </div>
              {{-- Tabel Keranjang (desktop) --}}
              <div class="table-responsive mb-4">
                <table class="table table-bordered mb-0">
                  <thead>
                    <tr>
                      <th>Item</th><th>Harga</th><th>Qty</th><th>Diskon (Rp)</th><th>Subtotal</th><th></th>
                    </tr>
                  </thead>
                  <tbody id="cart-body"></tbody>
                  <tfoot>
                    <tr>
                      <th colspan="4" class="text-end">Total</th>
                      <th id="total-amount">Rp0</th><th></th>
                    </tr>
                  </tfoot>
                </table>
              </div>
              {{-- Card list (mobile/tablet) --}}
              <div id="cart-cards" class="mb-4"></div>
            </div>
          </div>

          {{-- Pembayaran --}}
          <div class="card card-payment shadow-sm mb-3">
            <div class="card-body">
              {{-- Total Belanja --}}
              <div class="mb-3">
                <label>Total Belanja</label>
                <input type="text" id="display-total" class="form-control" readonly value="Rp0">
              </div>
              <div class="mb-3">
                <label>Bayar Cash</label>
                <input type="text" name="cash_amount" class="form-control" autocomplete="off">
              </div>
              <div class="mb-3">
                <label>Bayar Transfer | QRIS</label>
                <input type="text" name="transfer_amount" class="form-control" autocomplete="off">
              </div>
              <div class="mb-3">
                <label>Kembalian</label>
                <input type="text" class="form-control" id="change-amount" readonly value="Rp0">
              </div>
              <input type="hidden" name="items" id="items-json">
              <button type="button" class="btn btn-primary w-100" id="btnShowModal">Cetak</button>
            </div>
          </div>

        </div>
      </form>

      {{-- Modal Konfirmasi Simpan & Cetak --}}
      <div class="modal fade" id="modalKonfirmasiSimpan" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title">Konfirmasi Simpan & Cetak</h5>
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
            </div>
            <div class="modal-body">
              <p>Apakah Anda yakin ingin menyimpan transaksi dan mencetak struk sekarang?</p>
            </div>
            <div class="modal-footer justify-content-center">
              <button type="button" class="btn btn-secondary" data-dismiss="modal">Batal</button>
              <button type="button" class="btn btn-primary" id="btnModalSimpan">Ya, Simpan & Cetak</button>
            </div>
          </div>
        </div>
      </div>

      {{-- Modal Print Struk --}}
      @if(session('struk'))
      <div class="modal fade" id="confirmPrintModal" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title">Struk Siap Dicetak</h5>
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
            </div>
            <div class="modal-body">
              <pre style="font-size:1.1em">{{ session('struk') }}</pre>
              <p>Struk siap dicetak!</p>
            </div>
            <div class="modal-footer justify-content-center">
              <a href="{{ session('rawbtLink') }}" class="btn btn-success text-white">
                <i class="zmdi zmdi-print"></i> Cetak di Printer
              </a>
            </div>
          </div>
        </div>
      </div>
      @endif

    </div>
  </div>
</div>
@endsection

@push('script')
<script>
let cart = [];

// Format & parse Rupiah
function formatCurrency(n){
  return n === 0
    ? '0'
    : n.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".");
}
function parseCurrency(s){
  return parseInt((s+'').replace(/\D/g, "")) || 0;
}

// Init Select2
$('#capster').select2({
  placeholder: 'Pilih Capster...',
  ajax: {
    url: '{{ route("capsters.search") }}',
    dataType: 'json', delay: 250,
    data: params => ({ q: params.term }),
    processResults: data => ({
      results: data.map(i => ({ id: i.id, text: i.name }))
    }),
    cache: true
  }
}).on('select2:select', e => {
  $('#capster_name').val(e.params.data.text);
});

$('#customer').select2({
  placeholder: 'Pilih Member...',
  ajax: {
    url: '{{ route("customers.search") }}',
    dataType: 'json', delay: 250,
    data: params => ({ q: params.term }),
    processResults: data => ({
      results: data.map(i => ({ id: i.id, text: i.name }))
    }),
    cache: true
  }
}).on('select2:select', e => {
  $('#customer_name').val(e.params.data.text);
});

$('#service').select2({
  placeholder: 'Pilih Layanan...',
  ajax: {
    url: '{{ route("services.search") }}',
    dataType: 'json', delay: 250,
    data: params => ({ q: params.term }),
    processResults: data => ({
      results: data.map(i => ({
        id: i.id,
        text: i.name + ' - Rp' + formatCurrency(i.price),
        price: i.price
      }))
    }),
    cache: true
  }
});

$('#product').select2({
  placeholder: 'Pilih Produk...',
  ajax: {
    url: '{{ route("products.search") }}',
    dataType: 'json', delay: 250,
    data: params => ({ q: params.term }),
    processResults: data => ({
      results: data.map(i => ({
        id: i.id,
        text: i.name + ' - Rp' + formatCurrency(i.price),
        price: i.price
      }))
    }),
    cache: true
  }
});

// Add to cart
$('#add-service-btn').click(() => {
  const d = $('#service').select2('data')[0];
  if (!d) return alert('Pilih layanan terlebih dahulu!');
  cart.push({ type: 'service', id: d.id, name: d.text, price: d.price, qty: 1, discount: 0 });
  $('#service').val('').trigger('change');
  renderCart();
});
$('#add-product-btn').click(() => {
  const d = $('#product').select2('data')[0];
  if (!d) return alert('Pilih produk terlebih dahulu!');
  cart.push({ type: 'product', id: d.id, name: d.text, price: d.price, qty: 1, discount: 0 });
  $('#product').val('').trigger('change');
  renderCart();
});

// Render cart and update totals
function renderCart(){
  let tbody = '', cards = '', total = 0;
  cart.forEach((item, i) => {
    const sub = (item.price - item.discount) * item.qty;
    total += sub;
    // desktop row
    tbody += `
      <tr>
        <td>${item.name}</td>
        <td>Rp${formatCurrency(item.price)}</td>
        <td><input type="number" class="form-control form-control-sm" value="${item.qty}"
                   onchange="updateQty(${i},this.value)"></td>
        <td><input type="text" class="form-control form-control-sm" value="${formatCurrency(item.discount)}"
                   oninput="updateDiscount(${i},this)"></td>
        <td>Rp${formatCurrency(sub)}</td>
        <td><button class="btn btn-danger btn-sm" onclick="removeItem(${i})">Hapus</button></td>
      </tr>`;
    // mobile card
    cards += `
      <div class="card mb-2"><div class="card-body">
        <h6 class="card-title">${item.name}</h6>
        <p>Harga: Rp${formatCurrency(item.price)}</p>
        <div class="mb-2"><label>Qty</label>
          <input type="number" class="form-control form-control-sm" value="${item.qty}"
                 onchange="updateQty(${i},this.value)">
        </div>
        <div class="mb-2"><label>Diskon (Rp)</label>
          <input type="text" class="form-control form-control-sm" value="${formatCurrency(item.discount)}"
                 oninput="updateDiscount(${i},this)"></div>
        <p>Subtotal: Rp${formatCurrency(sub)}</p>
        <button class="btn btn-danger btn-sm" onclick="removeItem(${i})">Hapus</button>
      </div></div>`;
  });
  $('#cart-body').html(tbody);
  $('#cart-cards').html(cards);
  $('#total-amount').text('Rp'+formatCurrency(total));
  $('#display-total').val('Rp'+formatCurrency(total));
  $('#items-json').val(JSON.stringify(cart));
  calculateChange();
}
window.updateQty = (i, v) => {
  cart[i].qty = Math.max(1, parseInt(v) || 1);
  renderCart();
};
window.updateDiscount = (i, el) => {
  const v = parseCurrency(el.value);
  cart[i].discount = v;
  el.value = formatCurrency(v);
  renderCart();
};
window.removeItem = i => {
  cart.splice(i, 1);
  renderCart();
};

// Recalculate change
function calculateChange(){
  const total = parseCurrency($('#display-total').val());
  const cash  = parseCurrency($('input[name="cash_amount"]').val());
  const trf   = parseCurrency($('input[name="transfer_amount"]').val());
  const chg   = cash + trf - total;
  $('#change-amount').val(chg >= 0 ? 'Rp'+formatCurrency(chg) : 'Rp0');
}
$('input[name="cash_amount"], input[name="transfer_amount"]').on('input', function(){
  $(this).val(formatCurrency(parseCurrency(this.value)));
  calculateChange();
});

// Cetak button: validate cart & payment
$('#btnShowModal').on('click', function(){
  if (!cart.length) { alert('Cart kosong!'); return; }
  const total = parseCurrency($('#display-total').val());
  const paid  = parseCurrency($('input[name="cash_amount"]').val())
              + parseCurrency($('input[name="transfer_amount"]').val());
  if (paid < total) { alert('Pembayaran belum mencukupi!'); return; }
  $('#modalKonfirmasiSimpan').modal('show');
});

// Submit setelah konfirmasi
$('#btnModalSimpan').on('click', function(){
  $('#items-json').val(JSON.stringify(cart));
  $('#trxForm').submit();
});

// Inisialisasi
$(document).ready(renderCart);
@if(session('struk'))
$(function(){ $('#confirmPrintModal').modal('show'); });
@endif
</script>
@endpush