@extends('backend.layout.app')

@section('content')
@push('css')
<style>
    :root {
        --pos-primary: #3F73EB;
        --pos-primary-light: #f5f0ff;
        --pos-bg: #f8f9fa;
        --pos-card-shadow: 0 4px 15px rgba(0,0,0,0.05);
    }
    .page-content { background-color: var(--pos-bg); }

    /* ── Catalog Cards ────────────────────────────── */
    .pos-item-card {
        border: 2px solid transparent;
        border-radius: 12px;
        cursor: pointer;
        transition: all 0.25s ease;
        overflow: hidden;
        background: white;
    }
    .pos-item-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 8px 20px rgba(0,0,0,0.09);
        border-color: var(--pos-primary);
    }
    .pos-item-card.selected {
        border-color: var(--pos-primary);
        background: var(--pos-primary-light);
    }
    .item-img-box {
        height: 110px;
        position: relative;
        overflow: hidden;
    }
    .item-img-box img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .item-badge {
        position: absolute;
        top: 8px; left: 8px;
        font-size: 10px;
        padding: 3px 8px;
        z-index: 5;
        border-radius: 20px;
    }

    /* ── Cart ────────────────────────────────────── */
    .cart-card {
        border: none;
        border-radius: 14px;
        box-shadow: var(--pos-card-shadow);
    }
    .cart-item-row {
        padding: 10px 14px;
        border-bottom: 1px solid #f0f0f0;
        transition: background 0.2s;
    }
    .cart-item-row:hover { background: var(--pos-primary-light); }

    /* ── Student Search ──────────────────────────── */
    #userResults {
        max-height: 240px;
        overflow-y: auto;
        border-radius: 10px;
        box-shadow: 0 10px 30px rgba(0,0,0,0.1);
        z-index: 1000;
        background: white;
        border: 1px solid #eee;
    }
    .user-result-item {
        padding: 12px 15px;
        border-bottom: 1px solid #f1f3f5;
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: 12px;
        transition: background 0.2s;
    }
    .user-result-item:last-child { border-bottom: none; }
    .user-result-item:hover { background: var(--pos-primary-light); }
    .user-avatar {
        width: 38px; height: 38px;
        border-radius: 50%;
        background: var(--pos-primary);
        color: white;
        display: flex; align-items: center; justify-content: center;
        font-weight: bold; font-size: 14px;
    }
    .pos-search-input {
        border-radius: 30px;
        padding-left: 40px;
        padding-right: 40px;
        height: 45px;
        border: 1px solid #e0e0e0;
        box-shadow: inset 0 1px 3px rgba(0,0,0,0.02);
        transition: all 0.3s ease;
    }
    .pos-search-input:focus {
        border-color: var(--pos-primary);
        box-shadow: 0 0 0 3px rgba(63, 115, 235, 0.15);
    }
    .search-icon {
        position: absolute;
        left: 15px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 1.2rem;
        z-index: 5;
    }

    /* ── Summary ─────────────────────────────────── */
    .total-amount { font-size: 1.2rem; font-weight: 800; color: var(--pos-primary); }

    /* ── Catalog Scroll ──────────────────────────── */
    .catalog-scroll {
        max-height: calc(100vh - 240px);
        overflow-y: auto;
        padding-right: 4px;
    }
    .catalog-scroll::-webkit-scrollbar { width: 4px; }
    .catalog-scroll::-webkit-scrollbar-thumb { background: #ddd; border-radius: 10px; }

    /* ── Tabs ────────────────────────────────────── */
    .pos-tab-btn {
        border: none;
        background: #f0f0f0;
        border-radius: 8px;
        padding: 7px 18px;
        font-weight: 600;
        font-size: 13px;
        color: #666;
        transition: all 0.2s;
        display: inline-flex;
        align-items: center;
        gap: 6px;
    }
    .pos-tab-btn.active {
        background: var(--pos-primary) !important;
        color: white !important;
    }
    .pos-tab-btn:not(.active):hover {
        background: #e0e0e0;
        color: #333;
    }

    /* ── Qty controls ─────────────────────────────── */
    .qty-btn {
        width: 26px; height: 26px;
        border-radius: 50%;
        border: 1px solid #ddd;
        background: white;
        font-size: 14px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        line-height: 1;
    }
    .qty-btn:hover { background: var(--pos-primary-light); border-color: var(--pos-primary); }

    /* ── Qty controls ─────────────────────────────── */
</style>
@endpush

<div class="page-content">
    <div class="main-body">

        {{-- Header --}}
        <div class="d-flex align-items-center justify-content-between mb-4">
            <div>
                <h4 class="fw-bold mb-0"><i class="bx bx-store text-primary me-2"></i> POS System</h4>
                <p class="text-muted small mb-0">Enroll students in courses or sell books instantly</p>
            </div>
            <div class="d-flex gap-2">
                <a href="{{ route('admin.enrollments.index') }}" class="btn btn-outline-primary btn-sm rounded-pill px-3">
                    <i class="bx bx-history me-1"></i> Enrollments
                </a>
                <a href="{{ route('admin.orders.index') }}" class="btn btn-outline-secondary btn-sm rounded-pill px-3">
                    <i class="bx bx-list-ul me-1"></i> Orders
                </a>
            </div>
        </div>

        <div class="row g-4">

            {{-- ═══ LEFT PANEL: Student & Cart ═══ --}}
            <div class="col-lg-5">

                {{-- 1. Student Search --}}
                <div class="card cart-card mb-3">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <label class="form-label fw-bold mb-0">1. Select Student</label>
                        <button type="button" class="btn btn-secondary btn-sm" data-bs-toggle="modal" data-bs-target="#addStudentModal">
                            <i class="bx bx-plus me-1"></i> Add Student
                        </button>
                    </div>
                    <div class="card-body">
                        <div class="position-relative search-box-wrapper">
                            <i class="bx bx-search search-icon text-muted"></i>
                            <input type="text" id="userSearch" class="form-control pos-search-input"
                                placeholder="Search student by name / email / phone..." autocomplete="off">
                            <div id="searchSpinner" class="spinner-border spinner-border-sm text-primary position-absolute d-none" style="right: 15px; top: 14px; z-index: 10;" role="status"></div>
                            
                            <div id="userResults" class="position-absolute w-100 mt-1 d-none"></div>
                        </div>

                        <div id="selectedUser" class="mt-3 d-none">
                            <div class="d-flex align-items-center p-3 rounded bg-light border-start border-primary border-4">
                                <div class="flex-grow-1">
                                    <h6 id="selectedUserName" class="mb-0 fw-bold"></h6>
                                    <small id="selectedUserEmail" class="text-muted"></small>
                                </div>
                                <button type="button" class="btn btn-sm btn-link text-danger p-0" id="clearUser">
                                    <i class="bx bx-trash fs-5"></i>
                                </button>
                            </div>
                        </div>
                        <input type="hidden" id="hiddenUserId">
                    </div>
                </div>

                {{-- 2. Cart --}}
                <div class="card cart-card mb-3">
                    <div class="card-header bg-white py-3 border-0">
                        <h6 class="mb-0 fw-bold">2. Cart
                            <span id="cartBadge" class="badge bg-primary ms-2 d-none">0</span>
                        </h6>
                    </div>
                    <div class="card-body p-0">
                        <div id="cartEmpty" class="text-center py-5">
                            <i class="bx bx-cart-alt fs-1 text-muted opacity-25"></i>
                            <p class="text-muted mt-2 small">Cart is empty — add a course or book</p>
                        </div>
                        <div id="cartContent" class="d-none">
                            <div id="cartItemsList"></div>

                            {{-- Summary --}}
                            <div class="p-3 border-top bg-light rounded-bottom">
                                <div class="d-flex justify-content-between align-items-center mb-2">
                                    <span class="text-muted" style="font-size:13px;">Subtotal</span>
                                    <span class="fw-bold text-dark" id="subtotalCell">0৳</span>
                                </div>
                                <div class="d-flex justify-content-between align-items-center mb-2">
                                    <span class="text-muted" style="font-size:13px;">Discount</span>
                                    <div class="d-flex align-items-center gap-2">
                                        <input type="number" id="discountInput"
                                            class="form-control form-control-sm text-end"
                                            style="width:80px;" value="0" min="0">
                                        <span class="text-danger fw-bold" id="discountCell" style="min-width:38px;text-align:right;">-0৳</span>
                                    </div>
                                </div>
                                <div class="d-flex justify-content-between align-items-center mb-2" id="shippingChargeRow" style="display:none !important;">
                                    <span class="text-muted" style="font-size:13px;">Shipping Charge</span>
                                    <div class="d-flex align-items-center gap-2">
                                        <input type="number" id="shippingChargeInput"
                                            class="form-control form-control-sm text-end"
                                            style="width:80px;" value="0" min="0">
                                        <span class="text-success fw-bold" id="shippingChargeCell" style="min-width:38px;text-align:right;">+0৳</span>
                                    </div>
                                </div>
                                <div class="d-flex justify-content-between align-items-center pt-2 border-top mt-1">
                                    <span class="fw-bold" style="font-size:15px;">Total Payable</span>
                                    <span class="total-amount" id="totalCell">0৳</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- 3. Payment --}}
                <div class="card cart-card">
                    <div class="card-body">
                        <label class="form-label fw-bold mb-3">3. Payment Information</label>
                        <div class="row g-3">
                            <div class="col-md-6">
                                <label class="small text-muted mb-1">Method</label>
                                <select class="form-select" id="paymentMethod">
                                    <option value="Cash">Cash</option>
                                    <option value="bKash">bKash</option>
                                    <option value="Nagad">Nagad</option>
                                    <option value="Rocket">Rocket</option>
                                    <option value="Bank">Bank Transfer</option>
                                    <option value="Free">Free / Scholarship</option>
                                </select>
                            </div>
                            <div class="col-md-6">
                                <label class="small text-muted mb-1">Status</label>
                                <select class="form-select" id="paymentStatus">
                                    <option value="paid">Paid</option>
                                    <option value="pending">Pending</option>
                                </select>
                            </div>
                            <div class="col-12">
                                <label class="small text-muted mb-1">Transaction ID</label>
                                <input type="text" class="form-control" id="transactionId" placeholder="Enter ID (optional)">
                            </div>
                            <div class="col-12">
                                <label class="small text-muted mb-1">Admin Note</label>
                                <input type="text" class="form-control" id="adminNote" placeholder="Internal note (optional)">
                            </div>
                        </div>

                        {{-- Shipping (shown only when physical book is in cart) --}}
                        <div id="shippingSection" class="mt-3 p-3 bg-light rounded border" style="display:none;">
                            <div class="d-flex align-items-center mb-2">
                                <i class="bi bi-box-seam text-primary me-2"></i>
                                <strong style="font-size:13px;">Shipping Details <span class="badge bg-warning text-dark ms-1">Physical Book</span></strong>
                            </div>
                            <div class="row g-2">
                                <div class="col-12">
                                    <input type="text" class="form-control form-control-sm" id="shippingName" placeholder="Recipient name">
                                </div>
                                <div class="col-md-6">
                                    <input type="text" class="form-control form-control-sm" id="shippingPhone" placeholder="Phone number">
                                </div>
                                <div class="col-md-6">
                                    <input type="text" class="form-control form-control-sm" id="shippingAddress" placeholder="Delivery address">
                                </div>
                            </div>
                        </div>

                        <button class="btn btn-primary w-100 mt-4 py-3 rounded-3 shadow-sm" id="orderBtn">
                            <i class="bx bx-check-double me-1 fs-5"></i> COMPLETE ORDER
                        </button>
                    </div>
                </div>

            </div>

            {{-- ═══ RIGHT PANEL: Catalog ═══ --}}
            <div class="col-lg-7">
                <div class="card cart-card h-100">
                    <div class="card-header bg-white py-3 border-0">
                        <div class="d-flex align-items-center justify-content-between flex-wrap gap-2">
                            {{-- Tab switcher --}}
                            <div class="d-flex gap-2">
                                <button class="pos-tab-btn active" id="tabCourse" onclick="switchTab('course')">
                                    <i class="bi bi-play-circle-fill"></i> Courses
                                </button>
                                <button class="pos-tab-btn" id="tabBook" onclick="switchTab('book')">
                                    <i class="bi bi-book-fill"></i> Books
                                </button>
                            </div>
                            {{-- Search --}}
                            <div class="input-group input-group-sm" style="max-width:240px;">
                                <span class="input-group-text bg-light"><i class="bx bx-search"></i></span>
                                <input type="text" id="catalogSearch" class="form-control bg-light" placeholder="Search...">
                            </div>
                        </div>
                    </div>

                    <div class="card-body catalog-scroll">

                        {{-- Course Grid --}}
                        <div id="courseGrid" class="row g-3">
                            @forelse($courses as $course)
                            <div class="col-sm-6 col-xl-4 catalog-item"
                                 data-tab="course"
                                 data-name="{{ strtolower($course->title) }}">
                                <div class="pos-item-card border h-100"
                                     data-id="{{ $course->id }}"
                                     data-type="course"
                                     data-title="{{ $course->title }}"
                                     data-price="{{ $course->discounted_price ?: $course->original_price }}"
                                     data-subtype="{{ $course->course_type }}"
                                     data-stock="">
                                    <div class="item-img-box">
                                        <span class="badge bg-primary item-badge">{{ $course->course_type }}</span>
                                        <img src="{{ $course->thumbnail_url ? asset($course->thumbnail_url) : asset('assets/images/default-course.png') }}"
                                             alt="{{ $course->title }}">
                                    </div>
                                    <div class="p-2">
                                        <h6 class="fw-bold mb-1 text-dark" style="font-size:12px;line-height:1.3;height:30px;overflow:hidden;">
                                            {{ $course->title }}
                                        </h6>
                                        <div class="d-flex align-items-center justify-content-between border-top pt-2">
                                            <span class="text-primary fw-bold">{{ $course->discounted_price ?: $course->original_price }}৳</span>
                                            <button class="btn btn-sm btn-primary px-2 py-1 add-to-cart-btn" style="font-size:11px;">+ Add</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            @empty
                            <div class="col-12 text-center py-5">
                                <p class="text-muted">No courses available.</p>
                            </div>
                            @endforelse
                        </div>

                        {{-- Book Grid (hidden by default) --}}
                        <div id="bookGrid" class="row g-3 d-none">
                            @forelse($books as $book)
                            <div class="col-sm-6 col-xl-4 catalog-item"
                                 data-tab="book"
                                 data-name="{{ strtolower($book->title) }}">
                                <div class="pos-item-card border h-100"
                                     data-id="{{ $book->id }}"
                                     data-type="book"
                                     data-title="{{ $book->title }}"
                                     data-price="{{ $book->sale_price ?: $book->regular_price }}"
                                     data-subtype="{{ $book->book_type }}"
                                     data-stock="{{ $book->book_type === 'physical' ? $book->stock : '' }}">
                                    <div class="item-img-box">
                                        <span class="badge bg-success item-badge">{{ ucfirst($book->book_type) }}</span>
                                        @if($book->book_type === 'physical' && $book->stock <= 0)
                                            <span class="badge bg-danger item-badge" style="top:30px;">Out of Stock</span>
                                        @endif
                                        <img src="{{ $book->thumbnail ? asset($book->thumbnail) : asset('assets/images/default-book.png') }}"
                                             alt="{{ $book->title }}">
                                    </div>
                                    <div class="p-2">
                                        <h6 class="fw-bold mb-1 text-dark" style="font-size:12px;line-height:1.3;height:30px;overflow:hidden;">
                                            {{ $book->title }}
                                        </h6>
                                        <div class="d-flex align-items-center justify-content-between border-top pt-2">
                                            <span class="text-success fw-bold">{{ $book->sale_price ?: $book->regular_price }}৳</span>
                                            @if($book->book_type === 'physical' && $book->stock <= 0)
                                                <button class="btn btn-sm btn-secondary px-2 py-1" style="font-size:11px;" disabled>Out of Stock</button>
                                            @else
                                                <button class="btn btn-sm btn-success px-2 py-1 add-to-cart-btn" style="font-size:11px;">+ Add</button>
                                            @endif
                                        </div>
                                    </div>
                                </div>
                            </div>
                            @empty
                            <div class="col-12 text-center py-5">
                                <p class="text-muted">No books available.</p>
                            </div>
                            @endforelse
                        </div>

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

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

@push('js')
<script>
$(function () {

    // ─── State ──────────────────────────────────────────────────────
    let cart = []; // [{type, id, title, price, quantity, subtype, isPhysical}]

    // ─── Beep ────────────────────────────────────────────────────────
    function playBeep() {
        try {
            const ctx = new (window.AudioContext || window.webkitAudioContext)();
            const osc = ctx.createOscillator(); const g = ctx.createGain();
            osc.connect(g); g.connect(ctx.destination);
            osc.type = 'sine'; osc.frequency.setValueAtTime(800, ctx.currentTime);
            g.gain.setValueAtTime(0.4, ctx.currentTime);
            g.gain.exponentialRampToValueAtTime(0.01, ctx.currentTime + 0.1);
            osc.start(); osc.stop(ctx.currentTime + 0.1);
        } catch (e) {}
    }

    // ─── Tab Switcher ─────────────────────────────────────────────────
    window.switchTab = function(tab) {
        $('#tabCourse, #tabBook').removeClass('active');
        $('#courseGrid, #bookGrid').addClass('d-none');
        if (tab === 'course') {
            $('#tabCourse').addClass('active');
            $('#courseGrid').removeClass('d-none');
        } else {
            $('#tabBook').addClass('active');
            $('#bookGrid').removeClass('d-none');
        }
        $('#catalogSearch').val('').trigger('input');
    };

    // ─── Catalog Search ──────────────────────────────────────────────
    $('#catalogSearch').on('input', function () {
        const q = $(this).val().toLowerCase().trim();
        $('.catalog-item').each(function () {
            $(this).toggle($(this).data('name').includes(q));
        });
    });

    // ─── Student Search ──────────────────────────────────────────────
    let searchTimer;
    $('#userSearch').on('input', function () {
        clearTimeout(searchTimer);
        const q = $(this).val().trim();
        if (q.length < 2) { 
            $('#userResults').addClass('d-none').empty(); 
            $('#searchSpinner').addClass('d-none');
            return; 
        }
        $('#searchSpinner').removeClass('d-none');
        searchTimer = setTimeout(() => {
            $.get('{{ route('admin.pos.search-users') }}', { q }, function (users) {
                $('#searchSpinner').addClass('d-none');
                const $box = $('#userResults').empty();
                if (!users.length) {
                    $box.html('<div class="p-3 text-center text-muted">No students found.</div>').removeClass('d-none');
                    return;
                }
                users.forEach(u => {
                    let initials = u.name ? u.name.charAt(0).toUpperCase() : '?';
                    $box.append(`<div class="user-result-item" data-id="${u.id}" data-name="${u.name}" data-email="${u.email}">
                        <div class="user-avatar">${initials}</div>
                        <div>
                            <div class="fw-bold text-dark" style="font-size:14px">${u.name}</div>
                            <div class="small text-muted"><i class="bx bx-envelope"></i> ${u.email} <span class="ms-2"><i class="bx bx-phone"></i> ${u.phone || 'N/A'}</span></div>
                        </div>
                    </div>`);
                });
                $box.removeClass('d-none');
            }).fail(function() {
                $('#searchSpinner').addClass('d-none');
            });
        }, 300);
    });

    $(document).on('click', '.user-result-item', function () {
        $('#hiddenUserId').val($(this).data('id'));
        $('#selectedUserName').text($(this).data('name'));
        $('#selectedUserEmail').text($(this).data('email'));
        $('#selectedUser').removeClass('d-none');
        $('#userResults').addClass('d-none').empty();
        $('#userSearch').val('');
    });

    $('#clearUser').on('click', function () {
        $('#hiddenUserId').val('');
        $('#selectedUser').addClass('d-none');
    });

    $(document).on('click', function (e) {
        if (!$(e.target).closest('#userSearch, #userResults').length) $('#userResults').addClass('d-none');
    });

    // ─── Add to Cart ──────────────────────────────────────────────────
    $(document).on('click', '.add-to-cart-btn', function (e) {
        e.stopPropagation();
        const $card = $(this).closest('.pos-item-card');
        const type  = $card.data('type');
        const id    = $card.data('id');

        // Courses: only one slot (replace if same, skip if already in cart as duplicate)
        if (type === 'course') {
            const exists = cart.find(i => i.type === 'course' && i.id == id);
            if (exists) { toast('info', 'This course is already in the cart.'); return; }
        }

        const isPhysical = (type === 'book' && $card.data('subtype') === 'physical');

        cart.push({
            type:       type,
            id:         id,
            title:      $card.data('title'),
            price:      parseFloat($card.data('price')) || 0,
            quantity:   1,
            subtype:    $card.data('subtype') || '',
            isPhysical: isPhysical,
        });

        playBeep();
        renderCart();
    });

    // ─── Cart Render ──────────────────────────────────────────────────
    function renderCart() {
        if (!cart.length) {
            $('#cartEmpty').removeClass('d-none');
            $('#cartContent').addClass('d-none');
            $('#cartBadge').addClass('d-none');
            return;
        }

        $('#cartEmpty').addClass('d-none');
        $('#cartContent').removeClass('d-none');
        $('#cartBadge').removeClass('d-none').text(cart.length);

        // Show shipping section only if a physical book is in cart
        const hasPhysical = cart.some(i => i.isPhysical);
        $('#shippingSection').toggle(hasPhysical);
        
        if (hasPhysical) {
            $('#shippingChargeRow').attr('style', 'display: flex !important;');
        } else {
            $('#shippingChargeRow').attr('style', 'display: none !important;');
            $('#shippingChargeInput').val(0); // Reset if no shipping
        }

        let html = '';
        cart.forEach((item, idx) => {
            const badgeColor = item.type === 'course' ? 'bg-primary' : 'bg-success';
            const label      = item.type === 'course' ? 'Course' : 'Book';
            html += `
            <div class="cart-item-row d-flex align-items-center gap-2">
                <div class="flex-grow-1">
                    <div class="d-flex align-items-center gap-1 mb-1">
                        <span class="badge ${badgeColor}" style="font-size:10px;">${label}</span>
                        <span class="fw-semibold" style="font-size:13px;">${item.title}</span>
                    </div>
                    <span class="text-muted small">${item.price}৳ × ${item.quantity} = <strong>${(item.price * item.quantity).toFixed(0)}৳</strong></span>
                </div>
                <div class="d-flex align-items-center gap-1">
                    <button class="qty-btn" onclick="changeQty(${idx}, -1)">−</button>
                    <span style="min-width:20px;text-align:center;font-weight:600;">${item.quantity}</span>
                    <button class="qty-btn" onclick="changeQty(${idx}, 1)">+</button>
                </div>
                <button class="btn btn-sm btn-outline-danger border-0 p-1" onclick="removeItem(${idx})">
                    <i class="bx bx-trash"></i>
                </button>
            </div>`;
        });
        $('#cartItemsList').html(html);
        updateTotals();
    }

    window.changeQty = function(idx, delta) {
        cart[idx].quantity = Math.max(1, cart[idx].quantity + delta);
        renderCart();
    };

    window.removeItem = function(idx) {
        cart.splice(idx, 1);
        renderCart();
    };

    function updateTotals() {
        const subtotal = cart.reduce((sum, i) => sum + i.price * i.quantity, 0);
        const discount = Math.max(0, parseFloat($('#discountInput').val()) || 0);
        const hasPhysical = cart.some(i => i.isPhysical);
        const shipping = hasPhysical ? Math.max(0, parseFloat($('#shippingChargeInput').val()) || 0) : 0;
        
        const total    = Math.max(0, subtotal - discount + shipping);
        
        $('#subtotalCell').text(subtotal.toFixed(0) + '৳');
        $('#discountCell').text('-' + discount.toFixed(0) + '৳');
        $('#shippingChargeCell').text('+' + shipping.toFixed(0) + '৳');
        $('#totalCell').text(total.toFixed(0) + '৳');
    }

    $('#discountInput, #shippingChargeInput').on('input', updateTotals);

    // ─── Submit Order ─────────────────────────────────────────────────
    $('#orderBtn').on('click', function () {
        const userId = $('#hiddenUserId').val();
        if (!userId)   { toast('error', 'Please select a student first.'); return; }
        if (!cart.length) { toast('error', 'Cart is empty.'); return; }

        const subtotal = cart.reduce((sum, i) => sum + i.price * i.quantity, 0);
        const discount = Math.max(0, parseFloat($('#discountInput').val()) || 0);
        const hasPhysical = cart.some(i => i.isPhysical);
        const shipping = hasPhysical ? Math.max(0, parseFloat($('#shippingChargeInput').val()) || 0) : 0;
        const total    = Math.max(0, subtotal - discount + shipping);

        const payload = {
            _token:           '{{ csrf_token() }}',
            user_id:          userId,
            payment_method:   $('#paymentMethod').val(),
            payment_status:   $('#paymentStatus').val(),
            transaction_id:   $('#transactionId').val(),
            discount:         discount,
            shipping_charge:  shipping,
            note:             $('#adminNote').val(),
            delivery_type:    hasPhysical ? 'shipping' : 'digital',
            shipping_name:    $('#shippingName').val(),
            shipping_phone:   $('#shippingPhone').val(),
            shipping_address: $('#shippingAddress').val(),
            items:            cart.map(i => ({
                type:     i.type,
                id:       i.id,
                title:    i.title,
                price:    i.price,
                quantity: i.quantity,
            })),
        };

        const $btn = $(this).prop('disabled', true).html('<i class="bx bx-loader-alt bx-spin me-1"></i> Processing...');

        $.ajax({
            url:  '{{ route('admin.pos.order') }}',
            type: 'POST',
            data: JSON.stringify(payload),
            contentType: 'application/json',
            success: function (res) {
                if (res.status) {
                    Swal.fire({
                        title: '✅ Order Completed!',
                        html:  `Invoice: <strong>${res.invoice_no}</strong>`,
                        icon:  'success',
                        showCancelButton:    true,
                        confirmButtonText:   'Print Invoice',
                        confirmButtonColor:  '#6743a9',
                        cancelButtonText:    'Close',
                    }).then(r => { if (r.isConfirmed) window.open(res.invoice_url, '_blank'); });

                    // Reset
                    cart = []; renderCart();
                    $('#hiddenUserId').val('');
                    $('#selectedUser').addClass('d-none');
                    $('#transactionId, #adminNote, #shippingName, #shippingPhone, #shippingAddress').val('');
                    $('#discountInput').val(0);
                }
            },
            error: function (xhr) {
                const msg = xhr.responseJSON?.message || xhr.responseJSON?.errors
                    ? Object.values(xhr.responseJSON.errors).flat().join('<br>')
                    : 'Something went wrong.';
                toast('error', msg);
            },
            complete: function () {
                $btn.prop('disabled', false).html('<i class="bx bx-check-double me-1 fs-5"></i> COMPLETE ORDER');
            }
        });
    });

    $('#addStudentForm').on('submit', function(e) {
        e.preventDefault();
        const $btn = $('#addStudentBtn');
        $btn.prop('disabled', true).find('.spinner-border').removeClass('d-none');
        $('.invalid-feedback').text('').hide();
        $('.is-invalid').removeClass('is-invalid');
        
        $.ajax({
            url: '{{ route('admin.user.create.submit') }}',
            type: 'POST',
            data: $(this).serialize(),
            success: function(res) {
                if (res.errors) {
                    // Validation errors returned with HTTP 200
                    $.each(res.errors, function(key, val) {
                        $('.' + key + '-error').text(val[0]).show();
                        $('[name="'+key+'"]').addClass('is-invalid');
                    });
                    return;
                }
                
                $('#addStudentModal').modal('hide');
                $('#addStudentForm')[0].reset();
                
                if (res.user) {
                    userId = res.user.id;
                    $('#hiddenUserId').val(userId);
                    $('#selectedUserName').text(res.user.name);
                    $('#selectedUserEmail').text(res.user.email + ' • ' + res.user.phone);
                    $('#selectedUser').removeClass('d-none');
                    $('#userSearch').val('');
                    $('#userResults').addClass('d-none');
                }
                
                toast('success', 'Student added successfully.');
            },
            error: function(xhr) {
                if(xhr.status === 422) {
                    $.each(xhr.responseJSON.errors, function(key, val) {
                        $('.' + key + '-error').text(val[0]).show();
                    });
                } else {
                    toast('error', 'Something went wrong.');
                }
            },
            complete: function() {
                $btn.prop('disabled', false).find('.spinner-border').addClass('d-none');
            }
        });
    });

    function toast(type, msg) {
        Swal.fire({ icon: type, html: msg, timer: 3500, showConfirmButton: false, toast: true, position: 'top-end' });
    }
});
</script>
@endpush

<!-- Add Student Modal -->
<div class="modal fade" id="addStudentModal" tabindex="-1" aria-labelledby="addStudentModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content border-0 shadow">
            <div class="modal-header bg-primary text-white border-0">
                <h5 class="modal-title text-white" id="addStudentModalLabel"><i class="bx bx-user-plus me-2"></i>Add New Student</h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body p-4">
                <form id="addStudentForm">
                    @csrf
                    <div class="mb-3">
                        <label class="form-label fw-bold text-muted small">Full Name <span class="text-danger">*</span></label>
                        <input type="text" name="name" class="form-control" required placeholder="Enter full name">
                        <div class="invalid-feedback name-error"></div>
                    </div>
                    <div class="mb-3">
                        <label class="form-label fw-bold text-muted small">Email Address <span class="text-danger">*</span></label>
                        <input type="email" name="email" class="form-control" required placeholder="Enter email address">
                        <div class="invalid-feedback email-error"></div>
                    </div>
                    <div class="mb-3">
                        <label class="form-label fw-bold text-muted small">Phone Number <span class="text-danger">*</span></label>
                        <input type="text" name="phone" class="form-control" required placeholder="11 digit phone number">
                        <div class="invalid-feedback phone-error"></div>
                    </div>
                    <div class="mb-3">
                        <label class="form-label fw-bold text-muted small">Password <span class="text-danger">*</span></label>
                        <input type="password" name="password" class="form-control" required placeholder="Minimum 6 characters">
                        <div class="invalid-feedback password-error"></div>
                    </div>
                    <div class="mb-3">
                        <label class="form-label fw-bold text-muted small">Address</label>
                        <textarea name="address" class="form-control" rows="2" placeholder="Optional"></textarea>
                    </div>
                    <button type="submit" class="btn btn-primary w-100" id="addStudentBtn">
                        <span class="spinner-border spinner-border-sm d-none me-2" role="status" aria-hidden="true"></span>
                        Save Student
                    </button>
                </form>
            </div>
        </div>
    </div>
</div>

@endsection