@extends('layouts.app')

@section('title', 'Terminal Kasir Modern')

@push('css')
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<style>
    /* Premium POS Style Palette - Plus Jakarta Sans */
    @import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap');

    :root {
        --pos-primary: #10b981;
        --pos-primary-hover: #059669;
        --pos-primary-light: rgba(16, 185, 129, 0.1);
        --pos-dark-slate: #0f172a;
        --pos-bg-card: #ffffff;
        --pos-bg-gray: #f8fafc;
        --pos-border: #e2e8f0;
        --pos-text-main: #1e293b;
        --pos-text-muted: #64748b;
        --pos-radius-lg: 16px;
        --pos-radius-md: 12px;
        --pos-shadow-sm: 0 2px 8px rgba(148, 163, 184, 0.05);
        --pos-shadow-md: 0 10px 25px -5px rgba(148, 163, 184, 0.1), 0 8px 16px -6px rgba(148, 163, 184, 0.05);
        --pos-shadow-glow: 0 0 20px rgba(16, 185, 129, 0.15);
    }

    /* Override base container styles to look integrated and beautiful */
    .pos-wrapper, .pos-wrapper button, .pos-wrapper input, .pos-wrapper select, .pos-wrapper textarea {
        font-family: 'Plus Jakarta Sans', sans-serif !important;
    }

    /* Prevent FontAwesome icons from being overridden by any typography family styles */
    .fas, .far, .fab, .fa {
        font-family: 'Font Awesome 5 Free' !important;
    }

    .pos-wrapper {
        color: var(--pos-text-main);
        padding: 10px 0;
    }

    /* POS Glassmorphic Header */
    .pos-header {
        background: var(--pos-bg-card);
        border: 1px solid var(--pos-border);
        border-radius: var(--pos-radius-lg);
        padding: 18px 24px;
        box-shadow: var(--pos-shadow-sm);
        margin-bottom: 24px;
    }

    .pos-title-bar h2 {
        font-weight: 800;
        color: var(--pos-dark-slate);
        font-size: 1.5rem;
        margin: 0;
        letter-spacing: -0.5px;
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .pos-title-bar h2 i {
        color: var(--pos-primary);
    }

    /* Beautiful Tab Filters */
    .category-tabs {
        display: flex;
        gap: 8px;
        overflow-x: auto;
        padding-bottom: 5px;
        margin-top: 15px;
    }

    .category-tabs::-webkit-scrollbar {
        height: 4px;
    }

    .category-tabs::-webkit-scrollbar-thumb {
        background: var(--pos-border);
        border-radius: 4px;
    }

    .category-tab {
        border: 1px solid var(--pos-border) !important;
        background: var(--pos-bg-card) !important;
        color: #475569 !important;
        padding: 10px 22px !important;
        border-radius: 30px !important;
        font-size: 0.88rem !important;
        font-weight: 700 !important;
        cursor: pointer !important;
        transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
        white-space: nowrap !important;
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.01) !important;
    }

    .category-tab:hover {
        border-color: #10b981 !important;
        color: #10b981 !important;
        background: rgba(16, 185, 129, 0.04) !important;
        transform: translateY(-1px) !important;
        box-shadow: 0 4px 10px rgba(16, 185, 129, 0.05) !important;
    }

    .category-tab.active {
        background: linear-gradient(135deg, #059669 0%, #10b981 100%) !important;
        border-color: #10b981 !important;
        color: #ffffff !important;
        box-shadow: 0 4px 15px rgba(16, 185, 129, 0.25) !important;
    }

    /* Search Box Container */
    .pos-search-wrapper {
        position: relative;
        width: 100%;
    }

    .pos-search-input {
        width: 100% !important;
        background: #f8fafc !important;
        border: 1.5px solid #e2e8f0 !important;
        border-radius: var(--pos-radius-md) !important;
        padding: 12px 16px 12px 46px !important;
        font-size: 0.92rem !important;
        font-weight: 600 !important;
        color: var(--pos-text-main) !important;
        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }

    .pos-search-input:focus {
        background: #ffffff !important;
        border-color: #10b981 !important;
        box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.12) !important;
        outline: none !important;
    }

    .pos-search-icon {
        position: absolute;
        left: 16px;
        top: 50%;
        transform: translateY(-50%);
        color: var(--pos-text-muted);
        font-size: 1rem;
        transition: color 0.2s ease;
    }

    .pos-search-input:focus + .pos-search-icon {
        color: #10b981 !important;
    }

    /* Elegant Product Cards */
    .product-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
        gap: 16px;
    }

    .product-card {
        background: var(--pos-bg-card) !important;
        border: 1px solid var(--pos-border) !important;
        border-radius: 16px !important;
        overflow: hidden !important;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
        cursor: pointer !important;
        display: flex !important;
        flex-direction: column !important;
        height: 100%;
        position: relative !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02) !important;
    }

    .product-card.d-none {
        display: none !important;
    }

    .product-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
        background: #10b981 !important;
        opacity: 0;
        transition: opacity 0.2s ease;
        z-index: 3;
    }

    .product-card:hover {
        transform: translateY(-5px) !important;
        box-shadow: 0 12px 24px rgba(16, 185, 129, 0.08) !important;
        border-color: #10b981 !important;
    }

    .product-card:hover::before {
        opacity: 1;
    }

    /* Out of stock logic styling - Grayscale fade overlay */
    .product-card.out-of-stock {
        background: #fdfdfd !important;
        border-color: #f1f5f9 !important;
        box-shadow: none !important;
        cursor: not-allowed !important;
        pointer-events: none;
    }

    .product-card.out-of-stock .product-image {
        filter: grayscale(100%) opacity(0.4) !important;
    }

    .product-card.out-of-stock:hover {
        transform: none !important;
        box-shadow: none !important;
        border-color: #f1f5f9 !important;
    }

    .product-card.out-of-stock::before {
        display: none !important;
    }

    .product-card-btn {
        background: transparent;
        border: none;
        padding: 0;
        margin: 0;
        width: 100%;
        height: 100%;
        text-align: left;
        display: flex;
        flex-direction: column;
        cursor: pointer;
        outline: none;
    }

    .product-card-btn:focus {
        outline: none;
    }

    .product-image-container {
        width: 100%;
        height: 140px;
        background: #f8fafc !important;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 16px;
        position: relative;
        overflow: hidden;
        border-bottom: 1px solid #f1f5f9;
    }

    .product-image {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
        transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .product-card:hover .product-image {
        transform: scale(1.08);
    }

    .product-stock-badge {
        position: absolute;
        top: 10px;
        right: 10px;
        background: rgba(15, 23, 42, 0.65) !important;
        backdrop-filter: blur(4px) !important;
        color: #ffffff !important;
        padding: 4px 10px !important;
        font-size: 0.7rem !important;
        font-weight: 700 !important;
        border-radius: 20px !important;
        z-index: 2;
    }

    .product-stock-badge.low-stock {
        background: rgba(239, 68, 68, 0.85) !important;
    }

    .product-details {
        padding: 16px !important;
        display: flex;
        flex-direction: column;
        flex-grow: 1;
    }

    .product-name {
        font-weight: 700 !important;
        color: #1e293b !important;
        font-size: 0.92rem !important;
        margin: 0 0 8px 0 !important;
        line-height: 1.35 !important;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        height: 2.7em !important;
    }

    .product-price-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: auto;
    }

    .product-price {
        font-weight: 800 !important;
        color: #10b981 !important;
        font-size: 1rem !important;
        letter-spacing: -0.3px !important;
    }

    .product-price-row .fa-plus-circle {
        color: #10b981 !important;
        font-size: 1.25rem !important;
        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }

    .product-card:hover .product-price-row .fa-plus-circle {
        transform: scale(1.2) !important;
    }

    /* Adding Effect overlays */
    .product-card.loading-active::after {
        content: '\f110';
        font-family: 'Font Awesome 5 Free';
        font-weight: 900;
        position: absolute;
        inset: 0;
        background: rgba(255, 255, 255, 0.7);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.5rem;
        color: var(--pos-primary);
        animation: spin 1s linear infinite;
        z-index: 5;
        border-radius: var(--pos-radius-lg);
    }

    @keyframes spin {
        100% { transform: rotate(360deg); }
    }

    /* Receipt Style Sidebar Billing Pane */
    .billing-card {
        background: var(--pos-bg-card);
        border: 1px solid var(--pos-border);
        border-radius: var(--pos-radius-lg);
        box-shadow: var(--pos-shadow-sm);
        display: flex;
        flex-direction: column;
        height: calc(100vh - 120px);
        min-height: 580px;
        position: sticky;
        top: 20px;
    }

    .billing-header {
        padding: 20px;
        border-bottom: 1px dashed var(--pos-border);
        position: relative;
    }

    .billing-header::before, .billing-header::after {
        content: '';
        position: absolute;
        bottom: -6px;
        width: 12px;
        height: 12px;
        background: var(--pos-bg-gray);
        border-radius: 50%;
        z-index: 2;
    }

    .billing-header::before { left: -6px; }
    .billing-header::after { right: -6px; }

    .billing-title-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .billing-title {
        font-weight: 800;
        color: var(--pos-dark-slate);
        font-size: 1.2rem;
        margin: 0;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .billing-count-badge {
        background: var(--pos-primary-light);
        color: var(--pos-primary);
        font-size: 0.75rem;
        font-weight: 700;
        padding: 4px 10px;
        border-radius: 20px;
    }

    /* Cart Scroll Area - tampil by default, disembunyikan saat kartu sudah dipindai */
    .cart-items-wrapper {
        flex-grow: 1;
        overflow-y: auto;
        padding: 20px;
        transition: all 0.3s ease;
    }

    /* Saat kartu sudah dipindai: sembunyikan cart-items dari billing card */
    #cart-container.cart-scanned .cart-items-wrapper {
        display: none !important;
    }

    /* Selalu tampilkan di dalam modal */
    #cart-modal-body .cart-items-wrapper {
        display: block !important;
        overflow-y: unset;
        padding: 0;
    }
    #cart-modal-body .cart-item-row {
        padding: 12px 16px;
        border-bottom: 1px solid #f1f5f9;
        border-radius: 0;
        box-shadow: none;
        margin-bottom: 0;
    }
    #cart-modal-body .cart-item-row:last-child {
        border-bottom: none;
    }

    .cart-items-wrapper::-webkit-scrollbar {
        width: 6px;
    }

    .cart-items-wrapper::-webkit-scrollbar-thumb {
        background: var(--pos-border);
        border-radius: 4px;
    }

    .cart-item-row {
        display: flex;
        align-items: center;
        gap: 12px;
        padding-bottom: 14px;
        margin-bottom: 14px;
        border-bottom: 1px solid var(--pos-bg-gray);
        transition: all 0.2s ease;
    }

    .cart-item-row.animate-highlight {
        animation: highlightPulse 0.8s ease;
    }

    @keyframes highlightPulse {
        0% { background-color: transparent; }
        50% { background-color: rgba(16, 185, 129, 0.15); }
        100% { background-color: transparent; }
    }

    .cart-item-thumb {
        width: 48px;
        height: 48px;
        background: var(--pos-bg-gray);
        border-radius: var(--pos-radius-md);
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 4px;
        border: 1px solid var(--pos-border);
    }

    .cart-item-thumb img {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
    }

    .cart-item-info {
        flex-grow: 1;
    }

    .cart-item-name {
        font-weight: 700;
        color: var(--pos-dark-slate);
        font-size: 0.85rem;
        margin: 0 0 3px 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 140px;
    }

    .cart-item-price {
        font-weight: 600;
        color: var(--pos-text-muted);
        font-size: 0.75rem;
    }

    /* Round Quantity Adjuster */
    .qty-adjuster {
        display: flex;
        align-items: center;
        background: var(--pos-bg-gray);
        border: 1px solid var(--pos-border);
        border-radius: 30px;
        padding: 3px;
        gap: 5px;
    }

    .qty-btn {
        width: 24px;
        height: 24px;
        border-radius: 50%;
        background: #ffffff;
        border: 1px solid var(--pos-border);
        color: var(--pos-text-main);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.7rem;
        cursor: pointer;
        transition: all 0.2s ease;
    }

    .qty-btn:hover {
        background: var(--pos-primary);
        border-color: var(--pos-primary);
        color: #ffffff;
    }

    .qty-value {
        font-weight: 700;
        font-size: 0.8rem;
        min-width: 20px;
        text-align: center;
        border: none;
        background: transparent;
        color: var(--pos-dark-slate);
    }

    .cart-item-total {
        font-weight: 700;
        color: var(--pos-text-main);
        font-size: 0.85rem;
        min-width: 70px;
        text-align: right;
    }

    .cart-item-delete {
        width: 28px;
        height: 28px;
        border-radius: 50%;
        background: rgba(239, 68, 68, 0.08);
        border: none;
        color: #ef4444;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.2s ease;
    }

    .cart-item-delete:hover {
        background: #ef4444;
        color: #ffffff;
        transform: scale(1.1);
    }

    /* Billing Summary breakdown */
    .billing-summary {
        background: var(--pos-bg-gray);
        padding: 20px;
        border-top: 1px dashed var(--pos-border);
        border-bottom: 1px dashed var(--pos-border);
    }

    .summary-row {
        display: flex;
        justify-content: space-between;
        font-size: 0.85rem;
        font-weight: 500;
        color: var(--pos-text-muted);
        margin-bottom: 8px;
    }

    .summary-row.total-row {
        font-size: 1.15rem;
        font-weight: 800;
        color: var(--pos-dark-slate);
        margin-top: 10px;
        padding-top: 10px;
        border-top: 1px solid var(--pos-border);
        margin-bottom: 0;
    }

    .summary-row.total-row span:last-child {
        color: var(--pos-primary);
    }

    /* Smart Card RFID Reader Area */
    .scanner-panel {
        padding: 20px;
        background: #ffffff;
    }

    .scanner-zone {
        border: 2px dashed #10b981 !important;
        border-radius: var(--pos-radius-md) !important;
        padding: 18px !important;
        text-align: center !important;
        cursor: pointer !important;
        position: relative !important;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
        background: rgba(16, 185, 129, 0.01) !important;
        margin-bottom: 15px !important;
    }

    .scanner-zone:hover, .scanner-zone.focused {
        border-color: #059669 !important;
        background: rgba(16, 185, 129, 0.05) !important;
    }

    .scanner-icon {
        font-size: 1.9rem !important;
        color: #10b981 !important;
        margin-bottom: 8px !important;
        transition: transform 0.3s ease !important;
    }

    .scanner-zone:hover .scanner-icon, .scanner-zone.focused .scanner-icon {
        color: #059669 !important;
        transform: scale(1.1) !important;
        animation: pulseScan 1.5s infinite !important;
    }

    @keyframes pulseScan {
        0%, 100% { opacity: 1; }
        50% { opacity: 0.4; }
    }

    .scanner-zone span {
        display: block;
        font-size: 0.75rem;
        font-weight: 600;
        color: var(--pos-text-muted);
    }

    .scanner-input-field {
        opacity: 0;
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        cursor: pointer;
        z-index: 5;
    }

    /* Beautiful Digital Santri Card */
    .digital-card {
        background: linear-gradient(135deg, #10b981 0%, #064e3b 100%);
        border-radius: var(--pos-radius-md);
        padding: 16px;
        color: #ffffff;
        box-shadow: 0 10px 20px rgba(16, 185, 129, 0.25);
        position: relative;
        overflow: hidden;
        margin-bottom: 16px;
        animation: cardEntry 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    }

    @keyframes cardEntry {
        0% { transform: scale(0.85) translateY(10px); opacity: 0; }
        100% { transform: scale(1) translateY(0); opacity: 1; }
    }

    .digital-card::after {
        content: '';
        position: absolute;
        right: -30px;
        bottom: -30px;
        width: 100px;
        height: 100px;
        background: rgba(255, 255, 255, 0.05);
        border-radius: 50%;
    }

    .card-top {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 15px;
    }

    .card-label {
        font-size: 0.65rem;
        font-weight: 700;
        letter-spacing: 1.5px;
        opacity: 0.8;
    }

    .card-chip {
        color: #fbbf24;
        font-size: 1.2rem;
    }

    .card-name {
        font-size: 1.05rem;
        font-weight: 800;
        letter-spacing: -0.2px;
        margin-bottom: 3px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .card-nis {
        font-size: 0.75rem;
        font-weight: 600;
        opacity: 0.7;
        font-family: monospace !important;
        letter-spacing: 0.5px;
        margin-bottom: 15px;
    }

    .card-balance-box {
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
    }

    .balance-label {
        font-size: 0.6rem;
        font-weight: 700;
        letter-spacing: 1px;
        opacity: 0.7;
    }

    .balance-value {
        font-size: 1.2rem;
        font-weight: 800;
    }

    /* Card Details Panel below the virtual card */
    .card-calculation-panel {
        background: var(--pos-bg-gray);
        border: 1px solid var(--pos-border);
        border-radius: var(--pos-radius-md);
        padding: 12px;
        margin-bottom: 15px;
    }

    .calc-row {
        display: flex;
        justify-content: space-between;
        font-size: 0.75rem;
        font-weight: 600;
        color: var(--pos-text-muted);
        margin-bottom: 6px;
    }

    .calc-row:last-child {
        margin-bottom: 0;
        padding-top: 6px;
        border-top: 1px solid var(--pos-border);
    }

    .checkout-btn {
        background: linear-gradient(135deg, #059669 0%, #10b981 100%) !important;
        border: none !important;
        color: #ffffff !important;
        font-weight: 800 !important;
        font-size: 1.05rem !important;
        padding: 16px 20px !important;
        border-radius: var(--pos-radius-md) !important;
        width: 100% !important;
        cursor: pointer !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 10px !important;
        box-shadow: 0 4px 15px rgba(16, 185, 129, 0.25) !important;
        transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }

    .checkout-btn:hover:not(:disabled) {
        background: linear-gradient(135deg, #047857 0%, #059669 100%) !important;
        transform: translateY(-2px) !important;
        box-shadow: 0 8px 24px rgba(16, 185, 129, 0.35) !important;
    }

    .checkout-btn:disabled {
        background: #cbd5e1 !important;
        color: #64748b !important;
        box-shadow: none !important;
        cursor: not-allowed !important;
    }

    /* Toast Notification CSS */
    .pos-toast {
        position: fixed;
        bottom: 24px;
        left: 24px;
        background: var(--pos-dark-slate);
        color: #ffffff;
        padding: 12px 20px;
        border-radius: var(--pos-radius-md);
        font-size: 0.85rem;
        font-weight: 600;
        box-shadow: 0 10px 25px rgba(15, 23, 42, 0.15);
        display: flex;
        align-items: center;
        gap: 10px;
        transform: translateY(100px);
        opacity: 0;
        transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        z-index: 9999;
    }

    .pos-toast.active {
        transform: translateY(0);
        opacity: 1;
    }

    .pos-toast i {
        color: var(--pos-primary);
    }

    .pos-toast.danger i {
        color: #ef4444;
    }
    
    /* Modern POS Session Banners */
    .custom-pos-alert {
        border-radius: var(--pos-radius-md) !important;
        border: none !important;
        box-shadow: var(--pos-shadow-sm) !important;
        font-weight: 700 !important;
        font-size: 0.9rem !important;
        margin-bottom: 20px !important;
    }
    .custom-pos-alert.alert-success {
        background: rgba(16, 185, 129, 0.1) !important;
        color: #047857 !important;
    }
    .custom-pos-alert.alert-danger {
        background: rgba(239, 68, 68, 0.1) !important;
        color: #b91c1c !important;
    }

    /* ===== CART MODAL ===== */
    .cart-modal-overlay {
        position: fixed;
        inset: 0;
        background: rgba(15, 23, 42, 0.55);
        backdrop-filter: blur(4px);
        z-index: 10000;
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.25s ease;
    }
    .cart-modal-overlay.active {
        opacity: 1;
        pointer-events: all;
    }
    .cart-modal {
        background: #ffffff;
        border-radius: 16px;
        width: 92%;
        max-width: 560px;
        max-height: 82vh;
        display: flex;
        flex-direction: column;
        box-shadow: 0 24px 60px rgba(15, 23, 42, 0.22);
        transform: translateY(24px) scale(0.97);
        transition: transform 0.28s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        overflow: hidden;
    }
    .cart-modal-overlay.active .cart-modal {
        transform: translateY(0) scale(1);
    }
    .cart-modal-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 18px 20px 14px;
        border-bottom: 1px solid #e2e8f0;
        flex-shrink: 0;
    }
    .cart-modal-title {
        font-size: 1rem;
        font-weight: 800;
        color: #0f172a;
        display: flex;
        align-items: center;
        gap: 8px;
    }
    .cart-modal-title i { color: #10b981; }
    .cart-modal-close {
        width: 32px; height: 32px;
        border-radius: 50%;
        border: none;
        background: #f1f5f9;
        color: #64748b;
        font-size: 1rem;
        cursor: pointer;
        display: flex; align-items: center; justify-content: center;
        transition: background 0.2s, color 0.2s;
    }
    .cart-modal-close:hover { background: #fee2e2; color: #ef4444; }
    .cart-modal-body {
        overflow-y: auto;
        flex: 1;
        padding: 8px 0;
    }
    .cart-modal-body::-webkit-scrollbar { width: 4px; }
    .cart-modal-body::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
    .cart-modal-footer {
        padding: 14px 20px;
        border-top: 1px solid #e2e8f0;
        background: #f8fafc;
        flex-shrink: 0;
    }
    .cart-modal-summary-row {
        display: flex;
        justify-content: space-between;
        font-size: 0.82rem;
        font-weight: 600;
        color: #64748b;
        margin-bottom: 4px;
    }
    .cart-modal-summary-row.total {
        font-size: 1rem;
        font-weight: 800;
        color: #0f172a;
        margin-top: 8px;
        padding-top: 8px;
        border-top: 1px solid #e2e8f0;
    }
    .cart-modal-summary-row.total span:last-child { color: #10b981; }
    .btn-lihat-keranjang {
        display: flex;
        align-items: center;
        gap: 6px;
        padding: 5px 12px;
        border-radius: 20px;
        border: 1.5px solid #10b981;
        background: rgba(16, 185, 129, 0.08);
        color: #059669;
        font-size: 0.75rem;
        font-weight: 700;
        cursor: pointer;
        transition: all 0.2s;
        white-space: nowrap;
    }
    .btn-lihat-keranjang:hover {
        background: #10b981;
        color: #ffffff;
    }
</style>
@endpush

@section('content')
<div class="pos-wrapper" id="pos-workspace">
    <!-- Modern POS Session Banners -->
    @if(session('success'))
    <div class="alert alert-success alert-dismissible show fade custom-pos-alert">
        <div class="alert-body">
            <button class="close" data-dismiss="alert">
                <span>&times;</span>
            </button>
            <i class="fas fa-check-circle mr-2"></i> {!! session('success') !!}
        </div>
    </div>
    @endif

    @if(session('error'))
    <div class="alert alert-danger alert-dismissible show fade custom-pos-alert">
        <div class="alert-body">
            <button class="close" data-dismiss="alert">
                <span>&times;</span>
            </button>
            <i class="fas fa-exclamation-triangle mr-2"></i> {!! session('error') !!}
        </div>
    </div>
    @endif

    <div class="row">
        <!-- PRODUCT CATALOG SECTION -->
        <div class="col-lg-8 mb-4">
            <!-- Glassmorphic Header with Search & Filter Categories -->
            <div class="pos-header">
                <div class="row align-items-center">
                    <div class="col-md-5 mb-3 mb-md-0">
                        <div class="pos-title-bar">
                            <h2>
                                <i class="fas fa-cash-register"></i>
                                Lakasir Terminal
                            </h2>
                        </div>
                    </div>
                    <div class="col-md-7">
                        <div class="pos-search-wrapper">
                            <input type="text" class="pos-search-input" id="pos-search" placeholder="Cari nama produk atau SKU...">
                            <i class="fas fa-search pos-search-icon"></i>
                        </div>
                    </div>
                </div>

                <!-- Custom Dynamic Categories Filter -->
                <div class="category-tabs">
                    <button type="button" class="category-tab active" data-category="all">
                        <i class="fas fa-th-large"></i> Semua
                    </button>
                    @foreach($categories as $category)
                    <button type="button" class="category-tab" data-category="{{ $category->id }}">
                        <i class="fas fa-tag"></i> {{ $category->name }}
                    </button>
                    @endforeach
                </div>
            </div>

            <!-- Product Grid -->
            <div class="product-grid" id="product-grid-container">
                @foreach($products as $product)
                @php
                    $isOutOfStock = $product->stock <= 0;
                @endphp
                <div class="product-card @if($isOutOfStock) out-of-stock @endif" data-name="{{ $product->name }}" data-sku="{{ $product->sku }}" data-assigned-category="{{ $product->category_id }}">
                    <form action="{{ route('cart.add', $product->id) }}" method="POST" class="product-add-form h-100">
                        @csrf
                        <button type="submit" class="product-card-btn" @if($isOutOfStock) disabled style="cursor: not-allowed;" @endif>
                            <div class="product-image-container">
                                @if($product->image)
                                <img src="{{ asset('storage/'.$product->image) }}" class="product-image" alt="{{ $product->name }}">
                                @else
                                <img src="{{ asset('img/avatar/avatar-1.png') }}" class="product-image" style="opacity: 0.3;" alt="No image">
                                @endif
                            </div>
                            <div class="product-details">
                                <h6 class="product-name">{{ $product->name }}</h6>
                                
                                <!-- Clean and Minimal Stock Label below the name -->
                                <div class="product-stock-info" style="margin-bottom: 8px;">
                                    @if($isOutOfStock)
                                    <span class="stock-label text-danger" style="font-size: 0.72rem; font-weight: 700; letter-spacing: -0.2px;">Habis</span>
                                    @elseif($product->stock <= 5)
                                    <span class="stock-label text-warning" style="font-size: 0.72rem; font-weight: 700; letter-spacing: -0.2px;">Sisa {{ $product->stock }}</span>
                                    @else
                                    <span class="stock-label text-muted" style="font-size: 0.72rem; font-weight: 600; letter-spacing: -0.2px;">Stok: {{ $product->stock }}</span>
                                    @endif
                                </div>

                                <div class="product-price-row">
                                    <span class="product-price">Rp.{{ number_format($product->price,0,',','.') }}</span>
                                    @if(!$isOutOfStock)
                                    <i class="fas fa-plus-circle text-primary" style="font-size: 1.15rem; color: #10b981 !important;"></i>
                                    @endif
                                </div>
                            </div>
                        </button>
                    </form>
                </div>
                @endforeach
            </div>
            
            <div class="no-products-found d-none text-center p-5 bg-white border rounded-lg mt-3">
                <i class="fas fa-search-minus text-muted" style="font-size: 3rem; margin-bottom: 15px;"></i>
                <h5 class="text-dark font-weight-bold">Produk Tidak Ditemukan</h5>
                <p class="text-muted">Coba ketik kata kunci lain atau pilih kategori yang berbeda.</p>
            </div>
        </div>

        <!-- BILLING & CART PANEL SECTION -->
        <div class="col-lg-4">
            <div class="billing-card" id="cart-container" data-subtotal="{{ $total }}">
                <!-- Card Header -->
                <div class="billing-header">
                    <div class="billing-title-row">
                        <div class="d-flex align-items-center gap-2" style="gap:8px;display:flex;">
                            <span class="billing-count-badge">{{ $cart->sum('quantity') }} Item</span>
                            @if(!$cart->isEmpty())
                            <button type="button" class="btn-lihat-keranjang" id="btn-open-cart-modal" style="display:none;">
                                <i class="fas fa-list"></i> Lihat Keranjang
                            </button>
                            @endif
                        </div>
                    </div>
                </div>

                <!-- Scrollable Item Rows -->
                <div class="cart-items-wrapper">
                    @forelse($cart as $item)
                    <div class="cart-item-row" data-id="{{ $item->id }}" data-product-id="{{ $item->product_id }}" data-price="{{ $item->product->price }}">
                        <div class="cart-item-thumb">
                            @if($item->product->image)
                            <img src="{{ asset('storage/'.$item->product->image) }}" alt="thumb">
                            @else
                            <img src="{{ asset('img/avatar/avatar-1.png') }}" style="opacity: 0.3;" alt="thumb">
                            @endif
                        </div>
                        <div class="cart-item-info">
                            <h5 class="cart-item-name">{{ $item->product->name }}</h5>
                            <span class="cart-item-price">Rp {{ number_format($item->product->price, 0, ',', '.') }}</span>
                        </div>
                        
                        <!-- Custom Plus Minus Controls -->
                        <div class="qty-adjuster">
                            <button class="qty-btn btn-minus" type="button"><i class="fas fa-minus"></i></button>
                            <input type="text" class="qty-value quantity-input" value="{{ $item->quantity }}" readonly>
                            <button class="qty-btn btn-plus" type="button"><i class="fas fa-plus"></i></button>
                        </div>

                        <div class="cart-item-total">
                            Rp {{ number_format($item->total, 0, ',', '.') }}
                        </div>

                        <div>
                            <form action="{{ route('cart.remove', $item->id) }}" method="POST" class="cart-remove-form">
                                @csrf
                                @method('DELETE')
                                <button type="submit" class="cart-item-delete">
                                    <i class="fas fa-trash-alt"></i>
                                </button>
                            </form>
                        </div>
                    </div>
                    @empty
                    <div class="text-center p-5 text-muted h-100 d-flex flex-column align-items-center justify-content-center">
                        <i class="fas fa-shopping-basket mb-3" style="font-size: 3rem; opacity: 0.3;"></i>
                        <h6 class="font-weight-bold text-dark">Keranjang Kosong</h6>
                        <p class="small mb-0">Klik pada katalog produk di sebelah kiri untuk berbelanja.</p>
                    </div>
                    @endforelse
                </div>

                <!-- Price Breakdown totals -->
                <div class="billing-summary">
                    <div class="summary-row">
                        <span>Subtotal</span>
                        <span>Rp {{ number_format($subtotal,0,',','.') }}</span>
                    </div>
                    <div class="summary-row">
                        <span>Diskon</span>
                        <span>- Rp 0</span>
                    </div>
                    <div class="summary-row">
                        <span>Pajak (0%)</span>
                        <span>Rp 0</span>
                    </div>
                    <div class="summary-row total-row">
                        <span>Total Bayar</span>
                        <span>Rp {{ number_format($subtotal,0,',','.') }}</span>
                    </div>
                </div>

                <!-- Smart Scanner RFID payment inputs -->
                <div class="scanner-panel">
                    <form action="{{ route('transaction.store') }}" method="POST" id="checkout-form">
                        @csrf
                        <input type="hidden" name="id_kartu" id="id-kartu-hidden">
                        
                        <!-- Hidden fields dynamically binding cart items for legacy Laravel Transaction controller support -->
                        @foreach($cart as $item)
                        <input type="hidden" name="items[{{ $loop->index }}][product_id]" value="{{ $item->product_id }}">
                        <input type="hidden" name="items[{{ $loop->index }}][qty]" value="{{ $item->quantity }}">
                        <input type="hidden" name="items[{{ $loop->index }}][price]" value="{{ $item->product->price }}">
                        @endforeach

                        <!-- NFC Pulsing zone -->
                        <div class="scanner-zone" id="rfid-trigger">
                            <i class="fas fa-address-card scanner-icon"></i>
                            <span id="scanner-instruction">Pindai / Masukkan Kartu Santri disini</span>
                            <input type="text" id="santri-input" class="scanner-input-field" placeholder="Ketik NIS..." autocomplete="off">
                        </div>

                        <!-- Placeholder for Santri Info Card (Fills on scan success) -->
                        <div id="santri-card-wrapper"></div>

                        <!-- Big Trigger Checkout Button -->
                        <button type="submit" class="checkout-btn" id="btn-pay" disabled>
                            @if($cart->isEmpty())
                                <i class="fas fa-shopping-basket"></i> Keranjang Kosong
                            @else
                                <i class="fas fa-lock"></i> Silakan Tap Kartu Santri
                            @endif
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Floating Custom Toast for modern AJAX notifications -->
<div class="pos-toast" id="toast-notif">
    <i class="fas fa-info-circle" id="toast-icon"></i>
    <span id="toast-message">Notifikasi</span>
</div>

<!-- ===== CART MODAL ===== -->
<div class="cart-modal-overlay" id="cart-modal-overlay">
    <div class="cart-modal">
        <div class="cart-modal-header">
            <div class="cart-modal-title">
                <i class="fas fa-shopping-cart"></i>
                <span>Isi Keranjang</span>
                <span id="modal-item-count" style="font-size:0.75rem;font-weight:700;background:#e0fdf4;color:#059669;padding:2px 8px;border-radius:20px;"></span>
            </div>
            <button class="cart-modal-close" id="btn-close-cart-modal" title="Tutup">
                <i class="fas fa-times"></i>
            </button>
        </div>
        <div class="cart-modal-body" id="cart-modal-body">
            <!-- Diisi otomatis oleh JS dari DOM cart -->
        </div>
        <div class="cart-modal-footer" id="cart-modal-footer">
            <!-- Diisi otomatis oleh JS -->
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
    // Global variable to persist card state across AJAX cart swaps
    let currentSantri = null;

    document.addEventListener("DOMContentLoaded", function () {
        initSearchAndFilters();
        initCartListeners();
        initRFIDScanner();
        initAjaxInterceptors();
        initCartModal();
    });

    // ===== CART MODAL =====
    function initCartModal() {
        const overlay  = document.getElementById('cart-modal-overlay');
        const openBtn  = document.getElementById('btn-open-cart-modal');
        const closeBtn = document.getElementById('btn-close-cart-modal');
        if (!overlay) return;

        function openModal() {
            populateCartModal();
            overlay.classList.add('active');
            document.body.style.overflow = 'hidden';
        }
        function closeModal() {
            overlay.classList.remove('active');
            document.body.style.overflow = '';
        }

        if (openBtn) openBtn.addEventListener('click', openModal);
        if (closeBtn) closeBtn.addEventListener('click', closeModal);

        // Tutup saat klik di luar modal
        overlay.addEventListener('click', function(e) {
            if (e.target === overlay) closeModal();
        });

        // ESC key tutup modal
        document.addEventListener('keydown', function(e) {
            if (e.key === 'Escape') closeModal();
        });
    }

    function populateCartModal() {
        const modalBody   = document.getElementById('cart-modal-body');
        const modalFooter = document.getElementById('cart-modal-footer');
        const modalCount  = document.getElementById('modal-item-count');
        const cartContainer = document.getElementById('cart-container');
        if (!modalBody || !modalFooter || !cartContainer) return;

        const cartItemsWrapper = cartContainer.querySelector('.cart-items-wrapper');
        const subtotal = parseFloat(cartContainer.dataset.subtotal || 0);

        // Clone seluruh node cart-items-wrapper ke modal body (agar CSS override bekerja)
        modalBody.innerHTML = '';
        if (cartItemsWrapper) {
            const cloned = cartItemsWrapper.cloneNode(true);
            modalBody.appendChild(cloned);
        }

        // Hitung total qty untuk badge
        const rows = modalBody.querySelectorAll('.cart-item-row');
        let totalQty = 0;
        rows.forEach(r => {
            const inp = r.querySelector('.quantity-input');
            totalQty += parseInt(inp ? inp.value : 1);
        });
        if (modalCount) modalCount.textContent = totalQty + ' Item';

        // Event delegation qty +/- di dalam modal
        modalBody.querySelectorAll('.btn-minus').forEach(btn => {
            btn.addEventListener('click', function () {
                const row = this.closest('.cart-item-row');
                const input = row ? row.querySelector('.quantity-input') : null;
                if (!row || !input) return;
                let qty = parseInt(input.value) || 1;
                if (qty > 1) {
                    updateQtyAJAX(row.dataset.id, qty - 1, row);
                    // Tutup modal, AJAX akan re-open / refresh
                    document.getElementById('cart-modal-overlay').classList.remove('active');
                    document.body.style.overflow = '';
                }
            });
        });
        modalBody.querySelectorAll('.btn-plus').forEach(btn => {
            btn.addEventListener('click', function () {
                const row = this.closest('.cart-item-row');
                const input = row ? row.querySelector('.quantity-input') : null;
                if (!row || !input) return;
                let qty = parseInt(input.value) || 1;
                updateQtyAJAX(row.dataset.id, qty + 1, row);
                document.getElementById('cart-modal-overlay').classList.remove('active');
                document.body.style.overflow = '';
            });
        });

        if (rows.length === 0) {
            modalFooter.innerHTML = '';
            return;
        }

        // Footer summary
        modalFooter.innerHTML = `
            <div class="cart-modal-summary-row">
                <span>Subtotal</span>
                <span>Rp ${subtotal.toLocaleString('id-ID')}</span>
            </div>
            <div class="cart-modal-summary-row">
                <span>Diskon</span><span>- Rp 0</span>
            </div>
            <div class="cart-modal-summary-row">
                <span>Pajak (0%)</span><span>Rp 0</span>
            </div>
            <div class="cart-modal-summary-row total">
                <span>Total Bayar</span>
                <span>Rp ${subtotal.toLocaleString('id-ID')}</span>
            </div>`;
    }

    // 2. SEARCH & FILTER Engine
    function initSearchAndFilters() {
        const searchInput = document.getElementById("pos-search");
        const categoryTabs = document.querySelectorAll(".category-tab");
        const cards = document.querySelectorAll(".product-card");
        const noProducts = document.querySelector(".no-products-found");

        function filterProducts() {
            const query = searchInput.value.toLowerCase().trim();
            const activeCategory = document.querySelector(".category-tab.active").dataset.category;
            let visibleCount = 0;

            cards.forEach(card => {
                const name = card.dataset.name.toLowerCase();
                const sku = (card.dataset.sku || '').toLowerCase();
                const category = card.dataset.assignedCategory;

                const matchesSearch = name.includes(query) || sku.includes(query);
                const matchesCategory = activeCategory === 'all' || category === activeCategory;

                if (matchesSearch && matchesCategory) {
                    card.classList.remove("d-none");
                    visibleCount++;
                } else {
                    card.classList.add("d-none");
                }
            });

            if (visibleCount === 0) {
                noProducts.classList.remove("d-none");
            } else {
                noProducts.classList.add("d-none");
            }
        }

        if (searchInput) {
            searchInput.addEventListener("input", filterProducts);
        }

        categoryTabs.forEach(tab => {
            tab.addEventListener("click", function() {
                categoryTabs.forEach(t => t.classList.remove("active"));
                this.classList.add("active");
                filterProducts();
            });
        });
    }

    // 3. RFID / DIGITAL MEMBER CARD Scanner Simulator
    function initRFIDScanner() {
        const rfidTrigger = document.getElementById("rfid-trigger");
        const input = document.getElementById("santri-input");
        const instruction = document.getElementById("scanner-instruction");
        const cardWrapper = document.getElementById("santri-card-wrapper");
        const payBtn = document.getElementById("btn-pay");

        // Keep input focused automatically
        if (input) {
            input.focus();
            
            if (rfidTrigger) {
                rfidTrigger.addEventListener("click", () => {
                    input.focus();
                });
            }

            input.addEventListener("focus", () => {
                if (rfidTrigger) rfidTrigger.classList.add("focused");
                if (instruction) instruction.innerText = "Siap memindai kartu Santri...";
            });

            input.addEventListener("blur", () => {
                if (rfidTrigger) rfidTrigger.classList.remove("focused");
                if (instruction) instruction.innerText = "Pindai / Masukkan Kartu Santri disini";
            });

            input.addEventListener("keypress", function (e) {
                if (e.key === "Enter") {
                    e.preventDefault();

                    const nis = input.value.trim();
                    if (nis.length >= 3) {
                        if (instruction) {
                            instruction.innerHTML = `<i class="fas fa-spinner fa-spin text-primary"></i> Memproses data...`;
                        }
                        
                        fetch(`{{ url('proxy/santri') }}/${nis}`)
                            .then(res => res.json())
                            .then(data => {
                                console.log("Santri scan response:", data);

                                if (data && data.data) {
                                    currentSantri = data.data;
                                    renderSantriCard(currentSantri);
                                    showToast(`Kartu ${data.data.nama_lengkap} Berhasil Dipindai!`);
                                } else {
                                    currentSantri = null;
                                    const hiddenInput = document.getElementById("id-kartu-hidden");
                                    if (hiddenInput) hiddenInput.value = "";
                                    if (cardWrapper) {
                                        cardWrapper.innerHTML = `<div class="alert alert-warning p-2 small text-center" style="border-radius: var(--pos-radius-md);"><i class="fas fa-exclamation-circle"></i> Santri dengan nomor kartu "${nis}" tidak ditemukan</div>`;
                                    }
                                    // Tampilkan kembali scanner zone
                                    if (rfidTrigger) rfidTrigger.style.display = '';
                                    updatePayButtonState();
                                    showToast("Nomor kartu tidak valid", "danger");
                                }

                                if (instruction) instruction.innerText = "Pindai / Masukkan Kartu Santri disini";
                                input.value = ""; 
                                input.focus();
                            })
                            .catch(err => {
                                console.error(err);
                                if (cardWrapper) {
                                    cardWrapper.innerHTML = `<div class="alert alert-danger p-2 small text-center"><i class="fas fa-times-circle"></i> Gagal mengambil data santri</div>`;
                                }
                                // Tampilkan kembali scanner zone saat error
                                if (rfidTrigger) rfidTrigger.style.display = '';
                                if (instruction) instruction.innerText = "Pindai / Masukkan Kartu Santri disini";
                                showToast("API data santri gagal dihubungi", "danger");
                            });
                    }
                }
            });
        }

        // Auto-restore card and payment states on AJAX reloads!
        if (currentSantri) {
            renderSantriCard(currentSantri);
        } else {
            updatePayButtonState();
        }
    }

    // Dynamic Santri Card Rendering & Mathematical Validation
    function renderSantriCard(santri) {
        const cardWrapper = document.getElementById("santri-card-wrapper");
        const hiddenInput = document.getElementById("id-kartu-hidden");
        const cartContainer = document.getElementById('cart-container');
        const rfidTrigger = document.getElementById("rfid-trigger");
        if (!cardWrapper || !hiddenInput || !cartContainer) return;

        hiddenInput.value = santri.nomor_kartu;

        // Sembunyikan area scanner saat kartu sudah tampil
        if (rfidTrigger) rfidTrigger.style.display = 'none';

        // Sembunyikan cart-items dari billing card, aktifkan tombol Lihat Keranjang
        cartContainer.classList.add('cart-scanned');
        const lihatBtn = document.getElementById('btn-open-cart-modal');
        if (lihatBtn) lihatBtn.style.display = 'flex';

        const subtotal = parseFloat(cartContainer.dataset.subtotal || 0);
        const saldo = parseFloat(santri.saldo);
        const sisaSaldo = saldo - subtotal;
        const isInsufficient = sisaSaldo < 0;

        cardWrapper.innerHTML = `
            <div class="digital-card">
                <div class="card-top">
                    <span class="card-label">KARTU SANTRI DIGITAL</span>
                    <i class="fas fa-microchip card-chip"></i>
                </div>
                <div class="card-name">${santri.nama_lengkap}</div>
                <div class="card-nis">NIS: ${santri.nomor_kartu}</div>
                <div class="card-balance-box">
                    <span class="balance-label">SALDO ELEKTRONIK</span>
                    <span class="balance-value">Rp ${saldo.toLocaleString('id-ID')}</span>
                </div>
            </div>
            <div class="card-calculation-panel">
                <div class="calc-row">
                    <span>Saldo Saat Ini</span>
                    <span>Rp ${saldo.toLocaleString('id-ID')}</span>
                </div>
                <div class="calc-row text-danger">
                    <span>Total Pembayaran</span>
                    <span>- Rp ${subtotal.toLocaleString('id-ID')}</span>
                </div>
                <div class="calc-row">
                    <strong>Sisa Saldo</strong>
                    <strong class="${isInsufficient ? 'text-danger' : 'text-success'}">
                        Rp ${sisaSaldo.toLocaleString('id-ID')}
                    </strong>
                </div>
                ${isInsufficient ? `
                    <div class="alert alert-danger p-2 mt-2 mb-0 small" style="border-radius: 8px;">
                        <i class="fas fa-exclamation-triangle"></i> Saldo Santri tidak mencukupi untuk transaksi ini!
                    </div>
                ` : ''}
            </div>
            <button type="button" id="btn-ganti-kartu" style="
                width: 100%; background: none; border: 1.5px dashed #94a3b8;
                border-radius: 8px; padding: 8px 12px; font-size: 0.78rem;
                font-weight: 700; color: #64748b; cursor: pointer;
                margin-bottom: 10px; transition: all 0.2s;
            " onmouseover="this.style.borderColor='#10b981';this.style.color='#10b981'"
               onmouseout="this.style.borderColor='#94a3b8';this.style.color='#64748b'">
                <i class="fas fa-sync-alt mr-1"></i> Ganti Kartu Santri
            </button>
        `;

        // Listener tombol Ganti Kartu
        const gantiBtn = document.getElementById('btn-ganti-kartu');
        if (gantiBtn) {
            gantiBtn.addEventListener('click', function () {
                currentSantri = null;
                hiddenInput.value = '';
                cardWrapper.innerHTML = '';
                // Tampilkan kembali cart-items di billing card
                cartContainer.classList.remove('cart-scanned');
                const lihatBtn2 = document.getElementById('btn-open-cart-modal');
                if (lihatBtn2) lihatBtn2.style.display = 'none';
                if (rfidTrigger) {
                    rfidTrigger.style.display = '';
                    const inp = document.getElementById('santri-input');
                    if (inp) { inp.value = ''; inp.focus(); }
                }
                updatePayButtonState();
            });
        }

        const payBtn = document.getElementById("btn-pay");
        if (payBtn) {
            if (subtotal <= 0) {
                payBtn.disabled = true;
                payBtn.innerHTML = `<i class="fas fa-shopping-basket"></i> Keranjang Kosong`;
                payBtn.style.background = "";
                return;
            }

            if (isInsufficient) {
                payBtn.disabled = true;
                payBtn.innerHTML = `<i class="fas fa-ban"></i> Saldo Tidak Cukup`;
                payBtn.style.background = "#ef4444";
            } else {
                payBtn.disabled = false;
                payBtn.innerHTML = `<i class="fas fa-check-circle"></i> Bayar Rp ${subtotal.toLocaleString('id-ID')}`;
                payBtn.style.background = "";
            }
        }
    }

    function updatePayButtonState() {
        const payBtn = document.getElementById("btn-pay");
        const cartContainer = document.getElementById('cart-container');
        if (!payBtn || !cartContainer) return;

        const subtotal = parseFloat(cartContainer.dataset.subtotal || 0);
        const isEmpty = subtotal <= 0;

        if (!currentSantri) {
            payBtn.disabled = true;
            payBtn.style.background = "";
            if (isEmpty) {
                payBtn.innerHTML = `<i class="fas fa-shopping-basket"></i> Keranjang Kosong`;
            } else {
                payBtn.innerHTML = `<i class="fas fa-lock"></i> Silakan Tap Kartu Santri`;
            }
        }
    }

    // 4. AJAX CART HTML-Swapping Engine
    function initAjaxInterceptors() {
        // Intercept Product Card Clicks
        $(document).off('submit', '.product-add-form').on('submit', '.product-add-form', function(e) {
            e.preventDefault();
            const form = $(this);
            const card = form.closest('.product-card');
            const actionUrl = form.attr('action');

            card.addClass('loading-active');

            fetch(actionUrl, {
                method: 'POST',
                headers: {
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
                    'Accept': 'text/html'
                }
            })
            .then(res => res.text())
            .then(html => {
                const parser = new DOMParser();
                const doc = parser.parseFromString(html, 'text/html');

                // Swap cart wrapper seamlessly
                const newCart1 = doc.getElementById('cart-container');
                const cartEl1 = document.getElementById('cart-container');
                cartEl1.innerHTML = newCart1.innerHTML;
                cartEl1.dataset.subtotal = newCart1.dataset.subtotal;

                // Re-init listeners
                initCartListeners();
                initRFIDScanner();

                // Sync santri card calculation panel with new subtotal
                if (currentSantri) renderSantriCard(currentSantri);

                card.removeClass('loading-active');
                
                // Read success/error banners from updated HTML if any
                const tempDoc = parser.parseFromString(html, 'text/html');
                const errAlert = tempDoc.querySelector('.custom-pos-alert.alert-danger');
                if (errAlert) {
                    showToast(errAlert.innerText.replace('×', '').trim(), "danger");
                } else {
                    showToast("Item berhasil ditambahkan!");
                }

                // Briefly flash the newly added row
                const productId = actionUrl.split('/').pop();
                const addedRow = document.querySelector(`.cart-item-row[data-product-id="${productId}"]`);
                if (addedRow) addedRow.classList.add('animate-highlight');
            })
            .catch(err => {
                console.error(err);
                card.removeClass('loading-active');
                showToast("Gagal menambahkan item", "danger");
            });
        });

        // Intercept Cart Item Deletions
        $(document).off('submit', '.cart-remove-form').on('submit', '.cart-remove-form', function(e) {
            e.preventDefault();
            const form = $(this);
            const actionUrl = form.attr('action');

            fetch(actionUrl, {
                method: 'POST',
                headers: {
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
                    'Accept': 'text/html'
                },
                body: new FormData(form[0])
            })
            .then(res => res.text())
            .then(html => {
                const parser = new DOMParser();
                const doc = parser.parseFromString(html, 'text/html');

                const newCart2 = doc.getElementById('cart-container');
                const cartEl2 = document.getElementById('cart-container');
                cartEl2.innerHTML = newCart2.innerHTML;
                cartEl2.dataset.subtotal = newCart2.dataset.subtotal;
                initCartListeners();
                initRFIDScanner();

                // Sync santri card calculation panel with new subtotal
                if (currentSantri) renderSantriCard(currentSantri);

                showToast("Item dihapus dari keranjang.");
            })
            .catch(err => {
                console.error(err);
                showToast("Gagal menghapus item", "danger");
            });
        });
    }

    // 5. Quantity Modifier listeners
    function initCartListeners() {
        document.querySelectorAll(".cart-item-row").forEach(row => {
            const minusBtn = row.querySelector(".btn-minus");
            const plusBtn = row.querySelector(".btn-plus");
            const input = row.querySelector(".quantity-input");
            const rowId = row.dataset.id;

            if (minusBtn && plusBtn && input) {
                // Remove old event listeners by cloning
                const newMinusBtn = minusBtn.cloneNode(true);
                const newPlusBtn = plusBtn.cloneNode(true);
                minusBtn.parentNode.replaceChild(newMinusBtn, minusBtn);
                plusBtn.parentNode.replaceChild(newPlusBtn, plusBtn);

                newMinusBtn.addEventListener("click", () => {
                    let qty = parseInt(input.value) || 1;
                    if (qty > 1) {
                        updateQtyAJAX(rowId, qty - 1, row);
                    }
                });

                newPlusBtn.addEventListener("click", () => {
                    let qty = parseInt(input.value) || 1;
                    updateQtyAJAX(rowId, qty + 1, row);
                });
            }
        });
    }

    function updateQtyAJAX(rowId, newQty, rowEl) {
        rowEl.style.opacity = "0.5";

        fetch(`{{ url('cart/update') }}/${rowId}`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
                'Accept': 'application/json'
            },
            body: JSON.stringify({ quantity: newQty })
        })
        .then(res => {
            if (!res.ok) {
                return res.json().then(err => { throw err; });
            }
            return res.json();
        })
        .then(data => {
            // Once updated, pull whole cart markup to recalculate sums/taxes/validation
            fetch(window.location.href, {
                headers: { 'Accept': 'text/html' }
            })
            .then(res => res.text())
            .then(html => {
                const parser = new DOMParser();
                const doc = parser.parseFromString(html, 'text/html');
                
                const newCart3 = doc.getElementById('cart-container');
                const cartEl3 = document.getElementById('cart-container');
                cartEl3.innerHTML = newCart3.innerHTML;
                cartEl3.dataset.subtotal = newCart3.dataset.subtotal;

                initCartListeners();
                initRFIDScanner();

                // Sync santri card calculation panel with new subtotal
                if (currentSantri) renderSantriCard(currentSantri);
            });
        })
        .catch(err => {
            console.error(err);
            rowEl.style.opacity = "1";
            const errorMsg = err.message || (err.responseJSON && err.responseJSON.message) || "Gagal merubah jumlah";
            showToast(errorMsg, "danger");
            
            // Revert DOM back to server state on error
            fetch(window.location.href, {
                headers: { 'Accept': 'text/html' }
            })
            .then(res => res.text())
            .then(html => {
                const parser = new DOMParser();
                const doc = parser.parseFromString(html, 'text/html');
                const newCart4 = doc.getElementById('cart-container');
                const cartEl4 = document.getElementById('cart-container');
                cartEl4.innerHTML = newCart4.innerHTML;
                cartEl4.dataset.subtotal = newCart4.dataset.subtotal;
                initCartListeners();
                initRFIDScanner();

                // Sync santri card calculation panel after revert
                if (currentSantri) renderSantriCard(currentSantri);
            });
        });
    }

    // 6. Modern Floating Toast Indicator
    function showToast(message, type = "success") {
        const toast = document.getElementById("toast-notif");
        const msgSpan = document.getElementById("toast-message");
        const icon = document.getElementById("toast-icon");
        if (!toast || !msgSpan || !icon) return;

        msgSpan.innerText = message;
        
        if (type === "danger") {
            toast.classList.add("danger");
            icon.className = "fas fa-exclamation-circle";
        } else {
            toast.classList.remove("danger");
            icon.className = "fas fa-check-circle";
        }

        toast.classList.add("active");

        setTimeout(() => {
            toast.classList.remove("active");
        }, 4000);
    }
</script>
@endpush