@extends('backend.layout.app')

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


    .btn-primary:hover, .btn-primary:focus {
       
        box-shadow: 0 0 0 0.25rem rgba(103, 67, 169, 0.25) !important;
    }


    .page-content { background-color: var(--pos-bg); }

    /* Premium POS UI Elements */
    .pos-course-card {
        border: 2px solid transparent;
        border-radius: 12px;
        cursor: pointer;
        transition: all 0.3s ease;
        overflow: hidden;
        background: white;
    }

    .pos-course-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 10px 20px rgba(0,0,0,0.08);
        border-color: var(--pos-primary);
    }

    .pos-course-card.selected {
        border-color: var(--pos-primary);
        background: var(--pos-primary-light);
    }

    .course-img-box {
        height: 120px;
        position: relative;
        overflow: hidden;
    }

    .course-img-box img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .course-badge {
        position: absolute;
        top: 10px;
        left: 10px;
        font-size: 10px;
        padding: 4px 8px;
        z-index: 5;
    }

    .cart-card {
        border: none;
        border-radius: 15px;
        box-shadow: var(--pos-card-shadow);

    }

    .cart-item-row {
        padding: 12px 15px;
        border-bottom: 1px solid #f0f0f0;
        transition: background 0.2s;
    }

    .cart-item-row:hover {
        background: var(--pos-primary-light);
    }

    #userResults {
        max-height: 250px;
        overflow-y: auto;
        border-radius: 10px;
        box-shadow: 0 10px 30px rgba(0,0,0,0.1);
        z-index: 1000;
        background: white;
    }

    .user-result-item {
        padding: 12px 15px;
        border-bottom: 1px solid #f8f9fa;
        cursor: pointer;
    }

    .user-result-item:hover { background: var(--pos-primary-light); }

    .summary-table td { padding: 8px 0; font-size: 14px; }
    .total-amount { font-size: 1.25rem; font-weight: 800; color: var(--pos-primary); }

    .catalog-scroll {
        max-height: calc(100vh - 220px);
        overflow-y: auto;
        padding-right: 8px;
    }

    .catalog-scroll::-webkit-scrollbar { width: 4px; }
    .catalog-scroll::-webkit-scrollbar-thumb { background: #ddd; border-radius: 10px; }
</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">Select courses and enroll students instantly</p>
            </div>
            <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>
        </div>

        <div class="row g-4">

            {{-- LEFT: Student & Checkout --}}
            <div class="col-lg-5">
                
                {{-- Search Student --}}
                <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-2">1. Select Student</label>
                          <a href="{{route('admin.user.index')}}?add=active" class="btn btn-secondary btn-sm">Add Student</a>
                    </div>
                    <div class="card-body">
                      
                        <div class="input-group">
                            <span class="input-group-text bg-white border-end-0"><i class="bx bx-user text-muted"></i></span>
                            <input type="text" id="userSearch" class="form-control border-start-1 " placeholder="Search student by name/email/phone..." autocomplete="off">
                        </div>
                        <div id="userResults" class="position-absolute w-100 mt-1 d-none shadow-lg"></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>

                {{-- Cart Section --}}
                <div class="card cart-card mb-3">
                    <div class="card-header bg-white py-3 border-0">
                        <h6 class="mb-0 fw-bold">2. Enrollment Cart</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-light"></i>
                            <p class="text-muted mt-2">Your cart is empty</p>
                        </div>

                        <div id="cartContent" class="d-none">
                            <div id="cartItemsList"></div>
                            
                            <div class="p-3 border-top bg-light rounded-bottom">
                                <div class="d-flex justify-content-between align-items-center mb-2">
                                    <h6 class="mb-0 fw-semibold text-muted">Course POS Management</h6>
                                    <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: 14px;">Discount Amount</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: 40px; 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>

                {{-- Payment Details --}}
                <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 if applicable">
                            </div>
                        </div>
                        <button class="btn btn-primary w-100 mt-4 py-3 rounded-3 shadow-sm" id="enrollBtn">
                            <i class="bx bx-check-double me-1 fs-5"></i> COMPLETE ENROLLMENT
                        </button>
                    </div>
                </div>

            </div>

            {{-- RIGHT: Course 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="row align-items-center">
                            <div class="col">
                                <h6 class="mb-0 fw-bold">Course Catalog</h6>
                            </div>
                            <div class="col-md-6">
                                <div class="input-group input-group-sm py-1">
                                    <span class="input-group-text bg-light py-2"><i class="bx bx-search"></i></span>
                                    <input type="text" id="courseSearch" class="form-control bg-light py-2" placeholder="Search courses...">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="card-body catalog-scroll">
                        <div class="row g-3" id="courseGrid">
                            @forelse($courses as $course)
                            <div class="col-sm-6 col-xl-4 course-item" data-name="{{ strtolower($course->title) }}">
                                <div class="pos-course-card border h-100" 
                                     data-id="{{ $course->id }}" 
                                     data-title="{{ $course->title }}"
                                     data-price="{{ $course->discounted_price ?: $course->original_price }}"
                                     data-type="{{ $course->course_type }}">
                                    
                                    <div class="course-img-box">
                                        <span class="badge bg-primary course-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-3">
                                        <h6 class="fw-bold text-dark mb-2 text-truncate-2" style="font-size: 13px; line-height: 1.2; height: 32px;">
                                            {{ $course->title }}
                                        </h6>
                                        <div class="d-flex align-items-center justify-content-between pt-2 border-top">
                                            <span class="text-primary fw-bold fs-6">{{ $course->discounted_price ?: $course->original_price }}৳</span>
                                            <button class="btn btn-sm btn-primary add-to-cart-btn" >
                                            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>
                    </div>
                </div>
            </div>

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

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

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

    // ─── State ────────────────────────────────────────────────
    let cart = null;

    // ─── Student Search ───────────────────────────────────────
    let searchTimer;
    $('#userSearch').on('input', function () {
        clearTimeout(searchTimer);
        const q = $(this).val().trim();
        if (q.length < 2) { $('#userResults').addClass('d-none').empty(); return; }
        searchTimer = setTimeout(() => {
            $.get('{{ route('admin.course_pos.search-users') }}', { q }, function (users) {
                const $box = $('#userResults').empty();
                if (users.length === 0) {
                    $box.html('<div class="p-3 text-center text-muted">No students found.</div>').removeClass('d-none');
                    return;
                }
                users.forEach(u => {
                    $box.append(`
                        <div class="user-result-item" data-id="${u.id}" data-name="${u.name}" data-email="${u.email}">
                            <div class="fw-bold">${u.name}</div>
                            <div class="small text-muted">${u.email} ${u.phone || ''}</div>
                        </div>
                    `);
                });
                $box.removeClass('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');
    });

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

    // ─── Cart Management ──────────────────────────────────────
    $(document).on('click', '.pos-course-card, .add-to-cart-btn', function (e) {
        e.preventDefault();
        const $card = $(this).hasClass('pos-course-card') ? $(this) : $(this).closest('.pos-course-card');
        
        if ($card.hasClass('selected')) return;

        $('.pos-course-card').removeClass('selected').css('borderColor', 'transparent');
        $card.addClass('selected');
        
        cart = {
            id    : $card.data('id'),
            title : $card.data('title'),
            price : parseFloat($card.data('price')) || 0,
            type  : $card.data('type'),
        };
        
        playBeep();
        renderCart();
    });

    $(document).on('click', '.remove-item-btn', function() {
        cart = null;
        $('.pos-course-card').removeClass('selected');
        renderCart();
    });

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

    function renderCart() {
        if (!cart) {
            $('#cartEmpty').removeClass('d-none');
            $('#cartContent').addClass('d-none');
            return;
        }

        $('#cartEmpty').addClass('d-none');
        $('#cartContent').removeClass('d-none');
        $('#cartItemsList').html(`
            <div class="cart-item-row d-flex align-items-center">
                <div class="flex-grow-1">
                    <h6 class="mb-0 fw-bold" style="font-size: 15px;">${cart.title}</h6>
                    <small class="text-primary fw-semibold">${cart.type}</small>
                </div>
                <div class="text-end me-2 fw-bold text-dark">${cart.price}৳</div>
                <button class="btn btn-sm btn-outline-danger border-0 remove-item-btn"><i class="bx bx-trash"></i></button>
            </div>
        `);
        updateTotals();
    }

    function updateTotals() {
        if (!cart) return;
        const discount = Math.max(0, parseFloat($('#discountInput').val()) || 0);
        const total    = Math.max(0, cart.price - discount);
        $('#subtotalCell').text(cart.price + '৳');
        $('#discountCell').text('-' + discount + '৳');
        $('#totalCell').text(total + '৳');
    }

    // ─── Enrollment Submit ─────────────────────────────────────
    $('#enrollBtn').on('click', function () {
        const userId = $('#hiddenUserId').val();
        if (!userId) { showAlert('error', 'Select a student first.'); return; }
        if (!cart)   { showAlert('error', 'Cart is empty.'); return; }

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

        $.ajax({
            url: '{{ route('admin.course_pos.enroll') }}',
            type: 'POST',
            data: {
                _token: '{{ csrf_token() }}',
                user_id: userId,
                course_id: cart.id,
                amount: cart.price,
                discount: $('#discountInput').val(),
                payment_method: $('#paymentMethod').val(),
                payment_status: $('#paymentStatus').val(),
                transaction_id: $('#transactionId').val(),
            },
            success: function (res) {
                if (res.status) {
                    Swal.fire({
                        title: 'Enrolled Successfully!',
                        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 = null; renderCart();
                    $('#hiddenUserId').val(''); $('#selectedUser').addClass('d-none');
                    $('#transactionId, #discountInput').val(''); $('#discountInput').val(0);
                    $('.pos-course-card').removeClass('selected');
                }
            },
            error: function (xhr) { showAlert('error', xhr.responseJSON?.message || 'Error occurred.'); },
            complete: function () { $btn.prop('disabled', false).html('<i class="bx bx-check-double me-1 fs-5"></i> COMPLETE ENROLLMENT'); }
        });
    });

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