@push('styles')
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
    body {
        background: linear-gradient(135deg, #1e3a8a 0%, #1e40af 100%);
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        margin: 0;
        padding: 0;
        overflow-x: hidden !important;
        overflow-y: auto !important;
    }
    
    .pdv-container {
        min-height: 100vh;
        padding: 20px;
        background: #f8fafc;
        overflow: visible !important;
    }
    
    .pdv-container .container-fluid {
        position: static !important;
        z-index: auto !important;
        overflow: visible !important;
    }
    
    .pdv-container > * {
        overflow: visible !important;
    }
    
    @media (max-width: 768px) {
        .pdv-container {
            padding: 10px;
        }
    }
    
    .search-bar {
        background: white;
        border-radius: 15px;
        padding: 20px;
        box-shadow: 0 4px 20px rgba(0,0,0,0.1);
        margin-bottom: 20px;
        border: 3px solid #1e40af;
        position: relative !important;
        overflow: visible !important;
        contain: none !important;
    }
    
    .search-bar .position-relative {
        overflow: visible !important;
        contain: none !important;
    }
    
    .search-bar.customer-search-bar {
        z-index: 999998 !important;
        overflow: visible !important;
    }
    
    .search-bar.product-search-bar {
        /* z-index: 999998 !important; */
        overflow: visible !important;
    }
    
    @media (max-width: 768px) {
        .search-bar {
            padding: 15px;
            margin-bottom: 15px;
        }
    }
    
    .search-results-dropdown {
        position: absolute !important;
        top: 100% !important;
        left: 0 !important;
        right: 0 !important;
        margin-top: 10px !important;
        background: white !important;
        border-radius: 15px !important;
        box-shadow: 0 10px 40px rgba(0,0,0,0.2) !important;
        max-height: 500px !important;
        overflow-y: auto !important;
        z-index: 999999 !important;
        border: 2px solid #1e40af !important;
        will-change: transform !important;
        transform: translate3d(0, 0, 0) !important;
    }
    
    .customer-results-dropdown {
        position: absolute !important;
        top: 100% !important;
        left: 0 !important;
        right: 0 !important;
        margin-top: 5px !important;
        background: white !important;
        border-radius: 10px !important;
        box-shadow: 0 10px 40px rgba(0,0,0,0.15) !important;
        max-height: 300px !important;
        overflow-y: auto !important;
        border: 2px solid #1e40af !important;
        z-index: 999999 !important;
        will-change: transform !important;
        transform: translate3d(0, 0, 0) !important;
    }
    
    .search-results-header {
        padding: 15px 20px;
        background: #f8fafc;
        border-bottom: 2px solid #e2e8f0;
        font-weight: 700;
        color: #1e293b;
        border-radius: 13px 13px 0 0;
    }
    
    .search-results-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
        gap: 15px;
        padding: 20px;
        position: relative;
        z-index: 999999 !important;
    }
    
    @media (max-width: 768px) {
        .search-results-grid {
            grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
            gap: 10px;
            padding: 15px;
        }
    }
    
    .search-result-item {
        background: #f8fafc;
        border: 2px solid #e2e8f0;
        border-radius: 12px;
        padding: 15px;
        cursor: pointer;
        transition: all 0.3s ease;
        text-align: center;
    }
    
    .search-result-item:hover {
        border-color: #1e40af;
        transform: translateY(-2px);
        box-shadow: 0 5px 15px rgba(30, 64, 175, 0.2);
    }
    
    .search-result-mobile {
        display: none;
    }
    
    @media (max-width: 768px) {
        .search-result-desktop {
            display: none;
        }
        
        .search-result-mobile {
            display: block;
        }
    }
    
    .no-results {
        padding: 40px 20px;
        text-align: center;
        color: #94a3b8;
    }
    
    .search-input {
        border: none;
        border-radius: 10px;
        padding: 15px 20px 15px 50px;
        font-size: 20px;
        font-weight: 600;
        transition: all 0.3s ease;
        background: #f1f5f9;
    }
    
    .search-input:focus {
        background: white;
        box-shadow: 0 0 0 3px rgba(30, 64, 175, 0.2);
        outline: none;
    }
    
    .search-icon {
        position: absolute;
        left: 1 5px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 20px;
        color: #1e40af;
    }
    
    .pdv-main {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 20px;
        min-height: 400px;
        margin-bottom: 20px;
    }
    
    @media (max-width: 768px) {
        .pdv-main {
            grid-template-columns: 1fr;
            gap: 15px;
        }
    }
    
    .product-section {
        background: white;
        border-radius: 15px;
        padding: 20px;
        box-shadow: 0 4px 20px rgba(0,0,0,0.1);
        display: flex;
        flex-direction: column;
        overflow-y: auto;
    }
    
    .product-image-large {
        width: 100%;
        max-width: 200px;
        height: 160px;
        background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 15px;
        border: 2px solid #e2e8f0;
    }
    
    .product-image-large img {
        max-width: 100%;
        max-height: 100%;
        border-radius: 12px;
    }
    
    .product-image-large i {
        font-size: 70px;
        color: #64748b;
        opacity: 0.3;
    }
    
    .product-name-large {
        font-size: 22px;
        font-weight: 800;
        color: #1e293b;
        margin-bottom: 12px;
        line-height: 1.3;
        text-align: center;
    }
    
    .product-code {
        background: #f1f5f9;
        padding: 6px 12px;
        border-radius: 20px;
        font-size: 13px;
        font-weight: 600;
        color: #475569;
        border: 1px solid #e2e8f0;
    }
    
    .product-details {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 20px;
        width: 100%;
        margin-bottom: 30px;
    }
    
    @media (max-width: 768px) {
        .product-details {
            grid-template-columns: 1fr;
            gap: 10px;
        }
        
        .product-section {
        padding: 20px;
        }
        
        .cart-section {
            padding: 15px;
        }
        
        .cart-header {
            margin: -15px -15px 15px;
        }
    }
    
    .detail-card {
        background: #1e40af;
        color: white;
        padding: 20px;
        border-radius: 15px;
        text-align: center;
        box-shadow: 0 4px 15px rgba(30, 64, 175, 0.3);
    }
    
    .detail-label {
        font-size: 14px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 1px;
        margin-bottom: 8px;
        opacity: 0.9;
    }
    
    .detail-value {
        font-size: 24px;
        font-weight: 900;
    }
    
    .product-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 15px;
        width: 100%;
    }
    
    @media (max-width: 768px) {
        .product-actions {
            grid-template-columns: 1fr;
            gap: 10px;
        }
    }
    
    .product-actions:has(button:only-child) {
        grid-template-columns: 1fr;
    }
    
    .action-btn {
        padding: 15px 20px;
        border: none;
        border-radius: 12px;
        font-size: 16px;
        font-weight: 700;
        cursor: pointer;
        transition: all 0.3s ease;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }
    
    .btn-varejo {
        background: #10b981;
        color: white;
    }
    
    .btn-varejo:hover {
        background: #059669;
        transform: translateY(-2px);
    }
    
    .btn-atacado {
        background: #f59e0b;
        color: white;
    }
    
    .btn-atacado:hover {
        background: #d97706;
        transform: translateY(-2px);
    }
    
    .cart-section {
        background: white;
        border-radius: 15px;
        padding: 25px;
        box-shadow: 0 4px 20px rgba(0,0,0,0.1);
        display: flex;
        flex-direction: column;
        position: sticky;
        top: 20px;
        align-self: flex-start;
        max-height: calc(100vh - 40px);
        z-index: 1 !important;
    }
    
    /* Quando busca ativa, empurra o carrinho para trás de tudo */
    .cart-behind {
        z-index: -1 !important;
        pointer-events: none !important;
    }
    
    body.modal-open .cart-section {
        z-index: 1 !important;
    }
    
    @media (max-width: 768px) {
        .cart-section {
            position: relative;
            top: 0;
            max-height: none;
        }
        
        .product-section {
            order: 2;
            display: none; /* Esconde a seção de produto no mobile para economizar espaço */
        }
        
        .cart-section {
            order: 1;
        }
    }
    
    .cart-header {
        background: linear-gradient(135deg, #10b981, #059669);
        color: white;
        padding: 20px;
        border-radius: 12px;
        margin: -25px -25px 20px;
        text-align: center;
        position: relative;
        z-index: 1;
    }
    
    .cart-title {
        font-size: 20px;
        font-weight: 700;
        margin-bottom: 5px;
    }
    
    .cart-subtitle {
        font-size: 14px;
        opacity: 0.9;
    }
    
    .cart-total {
        font-size: 32px;
        font-weight: 900;
        margin-top: 10px;
    }
    
    @media (max-width: 768px) {
        .cart-total {
            font-size: 24px;
        }
        
        .cart-title {
            font-size: 16px;
        }
        
        .product-name-large {
            font-size: 20px;
        }
        
        .product-price {
            font-size: 20px;
        }
    }
    
    .cart-items {
        flex: 1;
        overflow-y: auto;
        margin-bottom: 20px;
    }
    
    .cart-table {
        width: 100%;
        border-collapse: collapse;
        font-size: 14px;
    }
    
    .cart-items-mobile {
        display: none; /* Esconde no desktop */
        overflow-y: auto;
        max-height: 400px;
        padding: 5px;
    }
    
    @media (max-width: 768px) {
        .cart-table {
            display: none !important; /* Esconde a tabela no mobile */
        }
        
        .cart-items-mobile {
            display: block !important; /* Mostra os cards no mobile */
        }
    }
    
    .cart-item-mobile {
        background: white;
        border-radius: 12px;
        padding: 12px;
        margin-bottom: 10px;
        border: 2px solid #e2e8f0;
        box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    }
    
    .cart-item-mobile-header {
        display: flex;
        justify-content: space-between;
        align-items: start;
        margin-bottom: 8px;
    }
    
    .cart-item-mobile-name {
        font-weight: 700;
        color: #1e293b;
        font-size: 13px;
        flex: 1;
        line-height: 1.3;
    }
    
    .cart-item-mobile-body {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 10px;
    }
    
    .cart-item-mobile-price {
        color: #10b981;
        font-weight: 900;
        font-size: 16px;
    }
    
    .cart-table th {
        background: #f8fafc;
        color: #475569;
        padding: 12px 8px;
        text-align: left;
        font-weight: 700;
        font-size: 12px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        border-bottom: 2px solid #e2e8f0;
    }
    
    .cart-table td {
        padding: 12px 8px;
        border-bottom: 1px solid #f1f5f9;
        vertical-align: middle;
    }
    
    .cart-table tr:hover {
        background: #f8fafc;
    }
    
    .cart-table tr.selected {
        background: #dbeafe;
        border-left: 4px solid #3b82f6;
    }
    
    .product-name-cell {
        font-weight: 600;
        color: #1e293b;
        max-width: 150px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    
    .product-price {
        color: #10b981;
        font-weight: 700;
    }
    
    .product-quantity {
        text-align: center;
        font-weight: 700;
        color: #1e293b;
    }
    
    .product-total {
        color: #1e40af;
        font-weight: 900;
        text-align: right;
    }
    
    .quantity-controls {
        display: flex;
        align-items: center;
        gap: 8px;
        background: #f1f5f9;
        border-radius: 8px;
        padding: 4px;
    }
    
    .qty-btn {
        width: 25px;
        height: 25px;
        border: none;
        background: #64748b;
        color: white;
        border-radius: 6px;
        font-size: 12px;
        font-weight: bold;
        cursor: pointer;
        transition: all 0.2s ease;
    }
    
    .qty-btn:hover {
        background: #475569;
    }
    
    .qty-value {
        font-size: 14px;
        font-weight: 700;
        min-width: 30px;
        text-align: center;
    }
    
    .remove-item {
        background: #ef4444;
        color: white;
        border: none;
        width: 25px;
        height: 25px;
        border-radius: 6px;
        font-size: 12px;
        cursor: pointer;
        transition: all 0.2s ease;
    }
    
    .remove-item:hover {
        background: #dc2626;
    }
    
    @media (max-width: 768px) {
        .qty-btn {
            width: 36px;
            height: 36px;
            font-size: 16px;
        }
        
        .qty-value {
            min-width: 40px;
            font-size: 16px;
        }
        
        .remove-item {
            width: 36px;
            height: 36px;
            font-size: 14px;
        }
        
        .quantity-controls {
            gap: 10px;
            padding: 6px;
        }
    }
    
    .cart-summary {
        background: #f8fafc;
        border-radius: 12px;
        padding: 20px;
        margin-bottom: 20px;
    }
    
    .summary-row {
        display: flex;
        justify-content: space-between;
        margin-bottom: 10px;
        font-size: 16px;
    }
    
    .summary-row.total {
        font-size: 20px;
        font-weight: 900;
        color: #1e40af;
        border-top: 2px solid #e2e8f0;
        padding-top: 15px;
        margin-top: 15px;
    }
    
    .discount-text {
        color: #ef4444;
        font-weight: 700;
    }
    
    .payment-method {
        margin-bottom: 20px;
    }
    
    .payment-label {
        font-weight: 700;
        color: #1e293b;
        margin-bottom: 10px;
        display: block;
        font-size: 14px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }
    
    .payment-select {
        width: 100%;
        padding: 12px;
        border: 2px solid #e2e8f0;
        border-radius: 10px;
        font-size: 16px;
        font-weight: 600;
        background: white;
    }
    
    .payment-select:focus {
        border-color: #1e40af;
        outline: none;
        box-shadow: 0 0 0 3px rgba(30, 64, 175, 0.1);
    }
    
    .finalize-btn {
        background: linear-gradient(135deg, #10b981, #059669);
        color: white;
        border: none;
        padding: 18px;
        border-radius: 12px;
        font-size: 18px;
        font-weight: 700;
        width: 100%;
        cursor: pointer;
        transition: all 0.3s ease;
        text-transform: uppercase;
        letter-spacing: 1px;
    }
    
    .finalize-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(16, 185, 129, 0.3);
    }
    
    .empty-product {
        text-align: center;
        color: #94a3b8;
        padding: 40px 20px;
    }
    
    .empty-product i {
        font-size: 100px;
        margin-bottom: 20px;
        opacity: 0.3;
        color: #64748b;
    }
    
    .empty-product h3 {
        font-size: 24px;
        font-weight: 700;
        margin-bottom: 10px;
        color: #64748b;
    }
    
    .empty-product p {
        font-size: 16px;
        color: #94a3b8;
    }
    
    .search-prompt {
        text-align: center;
        color: #94a3b8;
        padding: 60px 20px;
    }
    
    .search-prompt i {
        font-size: 80px;
        margin-bottom: 20px;
        opacity: 0.3;
        color: #1e40af;
    }
    
    .search-prompt h3 {
        font-size: 24px;
        font-weight: 700;
        margin-bottom: 10px;
        color: #64748b;
    }
    
    .alert-custom {
        border-radius: 12px;
        padding: 15px 20px;
        font-weight: 600;
        margin-bottom: 20px;
        border: none;
        box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    }
    
    .alert-success-custom {
        background: linear-gradient(135deg, #d1fae5, #a7f3d0);
        color: #065f46;
    }
    
    .alert-danger-custom {
        background: linear-gradient(135deg, #fee2e2, #fecaca);
        color: #991b1b;
    }
    
    /* Modais - Base */
    @keyframes fadeIn {
        from { opacity: 0; }
        to { opacity: 1; }
    }
    
    @keyframes slideUp {
        from {
            opacity: 0;
            transform: translateY(50px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    
    /* Modal de Produto */
    .product-modal-overlay {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        background: rgba(0, 0, 0, 0.7) !important;
        z-index: 999998 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 20px !important;
        animation: fadeIn 0.3s ease;
    }
    
    .product-modal {
        background: white !important;
        border-radius: 20px !important;
        max-width: 500px !important;
        width: 100% !important;
        max-height: 90vh !important;
        overflow-y: auto !important;
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3) !important;
        animation: slideUp 0.3s ease;
        position: relative !important;
        z-index: 999999 !important;
    }
    
    /* Modal de Cliente */
    .customer-modal-overlay {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        background: rgba(0, 0, 0, 0.7) !important;
        z-index: 2147483646 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 20px !important;
        animation: fadeIn 0.3s ease;
    }
    
    .customer-modal {
        background: white !important;
        border-radius: 20px !important;
        max-width: 500px !important;
        width: 100% !important;
        max-height: 90vh !important;
        overflow-y: auto !important;
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3) !important;
        animation: slideUp 0.3s ease;
        position: relative !important;
        z-index: 2147483647 !important;
    }
    
    .customer-modal * {
        position: relative;
    }
    
    /* Modal de Checkout */
    .checkout-modal-overlay {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        background: rgba(0, 0, 0, 0.7) !important;
        z-index: 1100000 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 20px !important;
        animation: fadeIn 0.3s ease;
    }
    
    .checkout-modal {
        background: white !important;
        border-radius: 20px !important;
        max-width: 600px !important;
        width: 100% !important;
        max-height: 90vh !important;
        overflow-y: auto !important;
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3) !important;
        animation: slideUp 0.3s ease;
        position: relative !important;
        z-index: 1100001 !important;
    }
    
    @media (max-width: 768px) {
        .product-modal,
        .customer-modal,
        .checkout-modal {
            max-width: 95%;
            max-height: 85vh;
            border-radius: 15px;
        }
        
        .modal-body {
            padding: 20px;
        }
        
        .modal-header {
            padding: 15px;
        }
    }
    
    .modal-header {
        background: linear-gradient(135deg, #1e40af, #1e3a8a);
        color: white;
        padding: 20px;
        border-radius: 20px 20px 0 0;
        position: relative;
    }
    
    .modal-close {
        position: absolute;
        top: 15px;
        right: 15px;
        background: rgba(255, 255, 255, 0.2);
        border: none;
        color: white;
        width: 35px;
        height: 35px;
        border-radius: 50%;
        font-size: 16px;
        cursor: pointer;
        transition: all 0.3s ease;
    }
    
    .modal-close:hover {
        background: rgba(255, 255, 255, 0.3);
        transform: rotate(90deg);
    }
    
    .modal-body {
        padding: 25px;
    }
    
    .form-group {
        margin-bottom: 20px;
    }
    
    .form-label {
        font-weight: 700;
        color: #1e293b;
        margin-bottom: 8px;
        display: block;
        font-size: 14px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }
    
    .form-input {
        width: 100%;
        padding: 12px;
        border: 2px solid #e2e8f0;
        border-radius: 10px;
        font-size: 16px;
        font-weight: 600;
        transition: all 0.3s ease;
    }
    
    .form-input:focus {
        border-color: #1e40af;
        outline: none;
        box-shadow: 0 0 0 3px rgba(30, 64, 175, 0.1);
    }
    
    .discount-type-toggle {
        display: flex;
        gap: 10px;
        margin-bottom: 15px;
    }
    
    .discount-type-btn {
        flex: 1;
        padding: 10px;
        border: 2px solid #e2e8f0;
        background: white;
        border-radius: 10px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.3s ease;
        font-size: 14px;
    }
    
    .discount-type-btn.active {
        background: #1e40af;
        color: white;
        border-color: #1e40af;
    }
    
    .modal-actions {
        display: flex;
        gap: 15px;
        margin-top: 25px;
    }
    
    .btn-cancel {
        flex: 1;
        padding: 12px;
        border: 2px solid #e2e8f0;
        background: white;
        color: #64748b;
        border-radius: 10px;
        font-size: 14px;
        font-weight: 700;
        cursor: pointer;
        transition: all 0.3s ease;
    }
    
    .btn-cancel:hover {
        background: #f1f5f9;
    }
    
    .btn-add {
        flex: 2;
        padding: 12px;
        border: none;
        background: linear-gradient(135deg, #10b981, #059669);
        color: white;
        border-radius: 10px;
        font-size: 14px;
        font-weight: 700;
        cursor: pointer;
        transition: all 0.3s ease;
        text-transform: uppercase;
    }
    
    .btn-add:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(16, 185, 129, 0.3);
    }
</style>
@endpush

<div class="pdv-container">
    <div class="container-fluid">
        <!-- Notificações -->
        @if (session()->has('success'))
            <div class="alert-custom alert-success-custom">
                <i class="fas fa-check-circle me-2"></i>
                {{ session('success') }}
            </div>
        @endif

        @if (session()->has('error'))
            <div class="alert-custom alert-danger-custom">
                <i class="fas fa-exclamation-triangle me-2"></i>
                {{ session('error') }}
            </div>
        @endif

        <!-- Botão de Teste de Impressão -->
        <div class="alert-custom" style="background: #e0f2fe; border: 2px solid #0288d1; margin-bottom: 20px;">
            <div style="display: flex; justify-content: space-between; align-items: center;">
                <div>
                    <strong>🖨️ Teste de Impressão</strong><br>
                    <small>Clique para testar se a impressão está funcionando</small>
                </div>
                <button onclick="testPrint()" 
                        style="background: #0288d1; color: white; border: none; padding: 8px 16px; border-radius: 6px; cursor: pointer; font-weight: 600;">
                    Testar Impressão
                </button>
            </div>
        </div>

        <!-- Script para impressão de cupom usando fetch (igual ao sistema de etiquetas) -->
        <script>
        // Função para imprimir cupom fiscal
        function printReceipt(receiptData) {
            console.log('Enviando dados para impressão:', receiptData);
            
            // Verifica se os dados estão corretos
            if (!receiptData) {
                console.error('Dados do cupom não fornecidos');
                alert('Erro: Dados do cupom não fornecidos');
                return;
            }
            
            // Garante que pelo menos tem um número de venda ou total
            if (!receiptData.sale_number && !receiptData.total && receiptData.total !== 0) {
                console.error('Dados inválidos para impressão:', receiptData);
                alert('Erro: Dados do cupom inválidos - falta número da venda ou total');
                return;
            }
            
            fetch('/receipt/print', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
                },
                body: JSON.stringify(receiptData)
            })
            .then(response => {
                if (!response.ok) {
                    throw new Error('Erro na resposta do servidor');
                }
                return response.json();
            })
            .then(data => {
                if (data.success) {
                    console.log('Cupom impresso com sucesso:', data.message);
                    // Mostra notificação de sucesso
                    alert('✅ ' + data.message);
                } else {
                    console.error('Erro na impressão:', data.message);
                    alert('❌ Erro: ' + data.message);
                }
            })
            .catch(error => {
                console.error('Erro ao imprimir cupom:', error);
                alert('Erro ao imprimir cupom: ' + error.message);
            });
        }

        // Função de teste de impressão
        function testPrint() {
            console.log('Iniciando teste de impressão...');
            
            fetch('/receipt/test')
            .then(response => {
                if (!response.ok) {
                    throw new Error('Erro na resposta do servidor');
                }
                return response.json();
            })
            .then(data => {
                if (data.success) {
                    console.log('Cupom de teste impresso com sucesso:', data.message);
                    // Impressão silenciosa - sem alert
                } else {
                    console.error('Erro na impressão do teste:', data.message);
                    alert('❌ Erro: ' + data.message);
                }
            })
            .catch(error => {
                console.error('Erro no teste de impressão:', error);
                alert('Erro no teste: ' + error.message);
            });
        }

        // Tornar as funções globais
        window.printReceipt = printReceipt;
        window.testPrint = testPrint;

        console.log('Funções de impressão carregadas:', {
            testPrint: typeof window.testPrint,
            printReceipt: typeof window.printReceipt
        });
        </script>

        <!-- Seção de Cliente e Vendedor -->
        <div class="search-bar customer-search-bar" style="margin-bottom: 15px; padding: 15px;">
            <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 20px;">
                
                <!-- Seção Cliente -->
                <div>
                    @if($selectedCustomer)
                        <div style="display: flex; justify-content: space-between; align-items: center; background: linear-gradient(135deg, #10b981, #059669); padding: 15px; border-radius: 12px; color: white;">
                            <div style="flex: 1;">
                                <div style="display: flex; align-items: center; gap: 10px;">
                                    <i class="fas fa-user-check" style="font-size: 20px;"></i>
                                    <div>
                                        <div style="font-size: 16px; font-weight: 700;">{{ $selectedCustomer->name }}</div>
                                        @if($selectedCustomer->phone)
                                            <div style="font-size: 12px; opacity: 0.9;">
                                                <i class="fas fa-phone me-1"></i>{{ $selectedCustomer->formatted_phone }}
                                            </div>
                                        @endif
                                    </div>
                                </div>
                            </div>
                            <button wire:click="removeCustomer" 
                                    style="background: rgba(255,255,255,0.2); border: none; color: white; width: 35px; height: 35px; border-radius: 50%; cursor: pointer; transition: all 0.3s;"
                                    onmouseover="this.style.background='rgba(255,255,255,0.3)'"
                                    onmouseout="this.style.background='rgba(255,255,255,0.2)'">
                                <i class="fas fa-times"></i>
                            </button>
                        </div>
                    @else
                        <div>
                            <label style="display: block; font-weight: 600; color: #64748b; margin-bottom: 8px; font-size: 14px;">
                                <i class="fas fa-user me-2"></i>Cliente (Opcional)
                            </label>
                            <div style="display: flex; gap: 8px; position: relative;">
                                <div style="flex: 1; position: relative;">
                                    <i class="fas fa-search" style="position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: #94a3b8; font-size: 14px;"></i>
                                    <input type="text" 
                                           wire:model.live="customerSearch" 
                                           placeholder="Buscar cliente..."
                                           autocomplete="off"
                                           style="width: 100%; padding: 10px 10px 10px 35px; border: 2px solid #e2e8f0; border-radius: 8px; font-size: 14px; font-weight: 600; transition: all 0.3s;"
                                           onfocus="this.style.borderColor='#1e40af'; this.style.boxShadow='0 0 0 3px rgba(30, 64, 175, 0.1)'"
                                           onblur="this.style.borderColor='#e2e8f0'; this.style.boxShadow='none'">
                                    
                                    <!-- Dropdown de Resultados de Clientes -->
                                    @if($customerSearch && $customers->count() > 0)
                                        <div class="customer-results-dropdown">
                                            @foreach($customers as $customer)
                                                <div wire:click="selectCustomer({{ $customer->id }})"
                                                     style="padding: 10px 12px; cursor: pointer; border-bottom: 1px solid #f1f5f9; transition: all 0.2s;"
                                                     onmouseover="this.style.background='#f8fafc'"
                                                     onmouseout="this.style.background='white'">
                                                    <div style="font-weight: 700; color: #1e293b; margin-bottom: 2px; font-size: 14px;">{{ $customer->name }}</div>
                                                    <div style="font-size: 12px; color: #64748b;">
                                                        @if($customer->phone)
                                                            <i class="fas fa-phone me-1"></i>{{ $customer->formatted_phone }}
                                                        @endif
                                                    </div>
                                                </div>
                                            @endforeach
                                        </div>
                                    @endif
                                </div>
                                <button wire:click="openCustomerModal('quick')" 
                                        style="padding: 10px 15px; background: #10b981; color: white; border: none; border-radius: 8px; font-weight: 700; cursor: pointer; transition: all 0.3s; white-space: nowrap; font-size: 12px;"
                                        onmouseover="this.style.background='#059669'; this.style.transform='translateY(-2px)'"
                                        onmouseout="this.style.background='#10b981'; this.style.transform='translateY(0)'">
                                    <i class="fas fa-user-plus me-1"></i>Novo
                                </button>
                            </div>
                        </div>
                    @endif
                </div>

                <!-- Seção Vendedor -->
                <div>
                    <div>
                        <label style="display: block; font-weight: 600; color: #64748b; margin-bottom: 8px; font-size: 14px;">
                            <i class="fas fa-user-tie me-2"></i>Vendedor
                            @if($selectedSeller)
                                <span style="color: #3b82f6; font-size: 12px;">({{ $selectedSeller->name }})</span>
                            @endif
                        </label>
                        <div style="display: flex; gap: 8px; position: relative;">
                            <div style="flex: 1; position: relative;">
                                <i class="fas fa-search" style="position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: #94a3b8; font-size: 14px;"></i>
                                <input type="text" 
                                       wire:model.live="sellerSearch" 
                                       placeholder="Buscar vendedor..."
                                       autocomplete="off"
                                       style="width: 100%; padding: 10px 10px 10px 35px; border: 2px solid #e2e8f0; border-radius: 8px; font-size: 14px; font-weight: 600; transition: all 0.3s;"
                                       onfocus="this.style.borderColor='#3b82f6'; this.style.boxShadow='0 0 0 3px rgba(59, 130, 246, 0.1)'"
                                       onblur="this.style.borderColor='#e2e8f0'; this.style.boxShadow='none'">
                                
                                <!-- Dropdown de Resultados de Vendedores -->
                                @if($sellerSearch && $sellers->count() > 0)
                                    <div class="customer-results-dropdown">
                                        @foreach($sellers as $seller)
                                            <div wire:click="selectSeller({{ $seller->id }})"
                                                 style="padding: 10px 12px; cursor: pointer; border-bottom: 1px solid #f1f5f9; transition: all 0.2s;"
                                                 onmouseover="this.style.background='#f8fafc'"
                                                 onmouseout="this.style.background='white'">
                                                <div style="font-weight: 700; color: #1e293b; margin-bottom: 2px; font-size: 14px;">{{ $seller->name }}</div>
                                                <div style="font-size: 12px; color: #64748b;">
                                                    <i class="fas fa-envelope me-1"></i>{{ $seller->email }}
                                                </div>
                                            </div>
                                        @endforeach
                                    </div>
                                @endif
                            </div>
                            @if($selectedSeller)
                                <button wire:click="removeSeller" 
                                        style="padding: 10px 15px; background: #ef4444; color: white; border: none; border-radius: 8px; font-weight: 700; cursor: pointer; transition: all 0.3s; white-space: nowrap; font-size: 12px;"
                                        onmouseover="this.style.background='#dc2626'; this.style.transform='translateY(-2px)'"
                                        onmouseout="this.style.background='#ef4444'; this.style.transform='translateY(0)'">
                                    <i class="fas fa-sync-alt me-1"></i>Trocar
                                </button>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Barra de Busca -->
        <div class="search-bar product-search-bar">
            <div class="position-relative">
                <i class="fas fa-search search-icon pr-5"></i>
                <input type="text" 
                       wire:model.live="search" 
                       placeholder="Buscar por nome, código ou código de barras..."
                       class="search-input w-100 ml-5"
                       autocomplete="off"
                       autofocus>
            </div>
            
            <!-- Dropdown de Resultados da Busca -->
            @if($search)
                <div class="search-results-dropdown">
                    <div class="search-results-header">
                        <i class="fas fa-search me-2"></i>Resultados: "{{ $search }}" ({{ $products->count() }} produtos)
        </div>

                    @if($products->count() > 0)
                        <div class="search-results-grid">
                            @foreach($products as $product)
                                <div class="search-result-item search-result-desktop" wire:click="selectProduct({{ $product->id }})">
                                    <div style="width: 60px; height: 60px; background: #e2e8f0; border-radius: 8px; display: flex; align-items: center; justify-content: center; margin: 0 auto 10px;">
                                        @if($product->image)
                                            <img src="{{ asset('storage/' . $product->image) }}" alt="{{ $product->name }}" style="max-width: 100%; max-height: 100%; border-radius: 6px;">
                                        @else
                                            <i class="fas fa-box" style="color: #64748b; font-size: 24px;"></i>
                                        @endif
                            </div>
                                    <div style="font-weight: 700; color: #1e293b; font-size: 14px; margin-bottom: 5px;">{{ $product->name }}</div>
                                    <div style="color: #10b981; font-weight: 900; font-size: 16px;">R$ {{ number_format($product->price, 2, ',', '.') }}</div>
                                    @if($product->sku)
                                        <div style="font-size: 11px; color: #94a3b8; margin-top: 3px;">{{ $product->sku }}</div>
                                    @endif
                            </div>
                                <div class="search-result-item search-result-mobile" wire:click="openProductModal({{ $product->id }})">
                                    <div style="width: 60px; height: 60px; background: #e2e8f0; border-radius: 8px; display: flex; align-items: center; justify-content: center; margin: 0 auto 10px;">
                                        @if($product->image)
                                            <img src="{{ asset('storage/' . $product->image) }}" alt="{{ $product->name }}" style="max-width: 100%; max-height: 100%; border-radius: 6px;">
                                        @else
                                            <i class="fas fa-box" style="color: #64748b; font-size: 24px;"></i>
                                        @endif
                                    </div>
                                    <div style="font-weight: 700; color: #1e293b; font-size: 14px; margin-bottom: 5px;">{{ $product->name }}</div>
                                    <div style="color: #10b981; font-weight: 900; font-size: 16px;">R$ {{ number_format($product->price, 2, ',', '.') }}</div>
                            @if($product->sku)
                                        <div style="font-size: 11px; color: #94a3b8; margin-top: 3px;">{{ $product->sku }}</div>
                                    @endif
                                </div>
                            @endforeach
                        </div>
                    @else
                        <div class="no-results">
                            <i class="fas fa-exclamation-circle" style="font-size: 50px; opacity: 0.3; margin-bottom: 10px;"></i>
                            <h5 style="color: #64748b;">Nenhum produto encontrado</h5>
                            <p style="font-size: 14px;">Não encontramos produtos para "{{ $search }}"</p>
                                </div>
                            @endif
                        </div>
            @endif
        </div>

        <!-- Layout Principal -->
        <div class="pdv-main">
            <!-- Seção do Produto (Esquerda) -->
            <div class="product-section">
                @if($selectedProduct)
                    <div class="product-image-large">
                        @if($selectedProduct->image)
                            <img src="{{ asset('storage/' . $selectedProduct->image) }}" alt="{{ $selectedProduct->name }}">
                                @else
                            <i class="fas fa-box"></i>
                                @endif
                        </div>
                    
                    <div class="product-name-large">{{ $selectedProduct->name }}</div>
                    
                    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;">
                        @if($selectedProduct->sku)
                            <div class="product-code">
                                <i class="fas fa-barcode me-2"></i>{{ $selectedProduct->sku }}
                            </div>
                        @endif
                        <div style="color: #10b981; font-size: 24px; font-weight: 900;">
                            R$ {{ number_format($selectedProduct->price, 2, ',', '.') }}
                </div>
            </div>

                    <div style="display: grid; grid-template-columns: 1fr 2fr; gap: 15px; margin-bottom: 20px;">
                        <!-- Quantidade -->
                        <div>
                            <label style="display: block; font-weight: 700; color: #64748b; margin-bottom: 8px; font-size: 12px; text-transform: uppercase;">
                                Quantidade
                            </label>
                            <input type="number" 
                                   wire:model.live="modalQuantity" 
                                   min="1" 
                                   max="{{ $selectedProduct->current_stock }}"
                                   style="width: 100%; padding: 12px; border: 2px solid #e2e8f0; border-radius: 10px; font-size: 18px; font-weight: 700; text-align: center;">
                        </div>
                        
                        <!-- Desconto -->
                        <div>
                            <label style="display: block; font-weight: 700; color: #64748b; margin-bottom: 8px; font-size: 12px; text-transform: uppercase;">
                                Desconto
                            </label>
                            <div style="display: flex; gap: 8px;">
                                <button type="button" 
                                        wire:click="$set('modalDiscountType', 'percentage')"
                                        class="discount-type-btn {{ $modalDiscountType === 'percentage' ? 'active' : '' }}"
                                        style="flex: 0 0 50px; padding: 12px 8px; font-size: 14px;">
                                    %
                                </button>
                                <input type="number" 
                                       wire:model.live="modalDiscount" 
                                       min="0"
                                       step="0.01"
                                       placeholder="0"
                                       style="flex: 1; padding: 12px; border: 2px solid #e2e8f0; border-radius: 10px; font-size: 16px; font-weight: 600;">
                                <button type="button"
                                        wire:click="$set('modalDiscountType', 'value')"
                                        class="discount-type-btn {{ $modalDiscountType === 'value' ? 'active' : '' }}"
                                        style="flex: 0 0 50px; padding: 12px 8px; font-size: 14px;">
                                    R$
                                </button>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Resumo do Total -->
                    @php
                        $discountAmount = 0;
                        if ($modalDiscount > 0) {
                            if ($modalDiscountType === 'percentage') {
                                $discountAmount = ($selectedProduct->price * $modalDiscount) / 100;
                            } else {
                                $discountAmount = $modalDiscount;
                            }
                        }
                        $priceAfterDiscount = $selectedProduct->price - $discountAmount;
                        $finalTotal = $priceAfterDiscount * $modalQuantity;
                    @endphp
                    
                    @if($modalDiscount > 0)
                        <div style="background: #fef3c7; border: 2px solid #fbbf24; border-radius: 12px; padding: 15px; margin-bottom: 20px;">
                            <div style="display: flex; justify-content: space-between; margin-bottom: 5px; font-size: 14px;">
                                <span style="color: #92400e;">Subtotal:</span>
                                <span style="color: #92400e; font-weight: 600;">R$ {{ number_format($selectedProduct->price * $modalQuantity, 2, ',', '.') }}</span>
                            </div>
                            <div style="display: flex; justify-content: space-between; margin-bottom: 5px; font-size: 14px;">
                                <span style="color: #ef4444;">Desconto:</span>
                                <span style="color: #ef4444; font-weight: 600;">- R$ {{ number_format($discountAmount * $modalQuantity, 2, ',', '.') }}</span>
                            </div>
                            <div style="display: flex; justify-content: space-between; border-top: 2px solid #fbbf24; padding-top: 10px; margin-top: 10px;">
                                <span style="color: #10b981; font-size: 18px; font-weight: 700;">Total:</span>
                                <span style="color: #10b981; font-size: 20px; font-weight: 900;">R$ {{ number_format($finalTotal, 2, ',', '.') }}</span>
                            </div>
                        </div>
                    @else
                        <div style="background: #f1f5f9; border-radius: 12px; padding: 15px; margin-bottom: 20px;">
                            <div style="display: flex; justify-content: space-between; align-items: center;">
                                <span style="color: #64748b; font-size: 16px; font-weight: 600;">Total:</span>
                                <span style="color: #10b981; font-size: 24px; font-weight: 900;">R$ {{ number_format($finalTotal, 2, ',', '.') }}</span>
                            </div>
                        </div>
                    @endif
                    
                    <button wire:click="addToCartQuick" class="action-btn btn-varejo" style="width: 100%;">
                        <i class="fas fa-cart-plus me-2"></i>Adicionar ao Carrinho
                    </button>
                @else
                    <div class="empty-product">
                        <i class="fas fa-search"></i>
                        <h3>Selecione um Produto</h3>
                        <p>Digite na busca e clique em um produto para ver os detalhes</p>
                    </div>
                @endif
            </div>

            <!-- Seção do Carrinho (Direita) -->
            <div class="cart-section @if($search || $customerSearch) cart-behind @endif">
                    <div class="cart-header">
                    <div class="cart-title">
                            <i class="fas fa-shopping-cart me-2"></i>Carrinho
                        </div>
                    <div class="cart-subtitle">
                            {{ count($cart) }} {{ count($cart) == 1 ? 'item' : 'itens' }}
                        </div>
                        <div class="cart-total">R$ {{ number_format($total, 2, ',', '.') }}</div>
                    </div>
                    
                    @if(count($cart) > 0)
                    <!-- Versão Desktop: Tabela -->
                    <div class="cart-items">
                        <table class="cart-table">
                            <thead>
                                <tr>
                                    <th style="width: 15%;">Código</th>
                                    <th style="width: 35%;">Produto</th>
                                    <th style="width: 15%;">Valor</th>
                                    <th style="width: 15%;">Qtde</th>
                                    <th style="width: 20%;">Total</th>
                                </tr>
                            </thead>
                            <tbody>
                            @foreach($cart as $item)
                                    <tr>
                                        <td style="font-size: 12px; color: #64748b;">{{ $item['sku'] ?? '-' }}</td>
                                        <td>
                                            <div class="product-name-cell">{{ $item['name'] }}</div>
                                            @if($item['discount'] > 0)
                                                <div style="font-size: 11px; color: #ef4444; margin-top: 2px;">
                                                    <i class="fas fa-tag me-1"></i>
                                                    Desconto: 
                                                    @if($item['discount_type'] === 'percentage')
                                                        {{ number_format($item['discount_value'], 0) }}%
                                                    @else
                                                        R$ {{ number_format($item['discount_value'], 2, ',', '.') }}
                                                    @endif
                                                </div>
                                            @endif
                                        </td>
                                        <td class="product-price">R$ {{ number_format($item['final_price'], 2, ',', '.') }}</td>
                                        <td class="product-quantity">
                                            <div class="quantity-controls">
                                                <button wire:click="updateQuantity({{ $item['id'] }}, {{ $item['quantity'] - 1 }})" 
                                                        class="qty-btn">
                                                    <i class="fas fa-minus"></i>
                                                </button>
                                                <span class="qty-value">{{ $item['quantity'] }}</span>
                                                <button wire:click="updateQuantity({{ $item['id'] }}, {{ $item['quantity'] + 1 }})" 
                                                        class="qty-btn">
                                                    <i class="fas fa-plus"></i>
                                                </button>
                                            </div>
                                        </td>
                                        <td class="product-total">R$ {{ number_format($item['final_price'] * $item['quantity'], 2, ',', '.') }}</td>
                                        <td>
                                            <button wire:click="removeFromCart({{ $item['id'] }})" class="remove-item">
                                            <i class="fas fa-times"></i>
                                        </button>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                                    </div>
                                    
                    <!-- Versão Mobile: Cards -->
                    <div class="cart-items-mobile">
                        @foreach($cart as $item)
                            <div class="cart-item-mobile">
                                <div class="cart-item-mobile-header">
                                    <div class="cart-item-mobile-name">
                                        {{ $item['name'] }}
                                        @if($item['sku'])
                                            <div style="font-size: 11px; color: #94a3b8; margin-top: 3px;">
                                                <i class="fas fa-barcode me-1"></i>{{ $item['sku'] }}
                                            </div>
                                        @endif
                                        @if($item['discount'] > 0)
                                            <div style="font-size: 11px; color: #ef4444; margin-top: 5px; background: #fee2e2; padding: 3px 8px; border-radius: 5px; display: inline-block;">
                                                <i class="fas fa-tag me-1"></i>
                                                @if($item['discount_type'] === 'percentage')
                                                    {{ number_format($item['discount_value'], 0) }}% OFF
                                                @else
                                                    -R$ {{ number_format($item['discount_value'], 2, ',', '.') }}
                                                @endif
                                            </div>
                                        @endif
                                    </div>
                                    <button wire:click="removeFromCart({{ $item['id'] }})" class="remove-item">
                                        <i class="fas fa-times"></i>
                                    </button>
                                </div>
                                
                                <div style="display: flex; justify-content: space-between; align-items: center; margin-top: 10px; padding-top: 10px; border-top: 1px solid #e2e8f0;">
                                    <div>
                                        <div style="font-size: 11px; color: #64748b;">Preço unitário</div>
                                        <div style="color: #10b981; font-weight: 700; font-size: 14px;">
                                            R$ {{ number_format($item['final_price'], 2, ',', '.') }}
                                        </div>
                                    </div>
                                    
                                    <div class="quantity-controls">
                                            <button wire:click="updateQuantity({{ $item['id'] }}, {{ $item['quantity'] - 1 }})" 
                                                class="qty-btn">
                                                <i class="fas fa-minus"></i>
                                            </button>
                                        <span class="qty-value">{{ $item['quantity'] }}</span>
                                            <button wire:click="updateQuantity({{ $item['id'] }}, {{ $item['quantity'] + 1 }})" 
                                                class="qty-btn">
                                                <i class="fas fa-plus"></i>
                                            </button>
                                        </div>
                                    
                                    <div>
                                        <div style="font-size: 11px; color: #64748b; text-align: right;">Total</div>
                                        <div class="cart-item-mobile-price">
                                            R$ {{ number_format($item['final_price'] * $item['quantity'], 2, ',', '.') }}
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>

                    <!-- Resumo do Carrinho -->
                    @if($totalDiscount > 0)
                        <div class="cart-summary">
                            <div class="summary-row">
                                <span>Subtotal:</span>
                                <span>R$ {{ number_format($subtotal, 2, ',', '.') }}</span>
                        </div>
                            <div class="summary-row discount-text">
                                <span>Desconto:</span>
                                <span>- R$ {{ number_format($totalDiscount, 2, ',', '.') }}</span>
                            </div>
                            <div class="summary-row total">
                                <span>Total:</span>
                                <span>R$ {{ number_format($total, 2, ',', '.') }}</span>
                            </div>
                        </div>
                    @endif

                        <!-- Botão Finalizar -->
                    <button wire:click="openCheckoutModal" class="finalize-btn">
                            <i class="fas fa-check-circle me-2"></i>
                            Finalizar Venda
                        </button>
                    @else
                    <div class="search-prompt">
                            <i class="fas fa-shopping-cart"></i>
                        <h3>Carrinho Vazio</h3>
                        <p>Adicione produtos para começar a venda</p>
                        </div>
                    @endif
                </div>
            </div>

        <!-- Modal de Produto -->
        @if($showProductModal && $selectedProduct)
            <div class="product-modal-overlay" wire:click.self="closeProductModal">
                <div class="product-modal">
                    <div class="modal-header">
                        <h3 class="mb-0">
                            <i class="fas fa-cart-plus me-2"></i>
                            Configurar Produto
                        </h3>
                        <button wire:click="closeProductModal" class="modal-close">
                            <i class="fas fa-times"></i>
                        </button>
        </div>

                    <div class="modal-body">
                        <div style="text-align: center; margin-bottom: 20px;">
                            <h4 style="font-weight: 700; color: #1e293b; margin-bottom: 10px;">{{ $selectedProduct->name }}</h4>
                            <div style="color: #10b981; font-size: 20px; font-weight: 900;">R$ {{ number_format($selectedProduct->price, 2, ',', '.') }}</div>
                        </div>
                        
                        <!-- Quantidade -->
                        <div class="form-group">
                            <label class="form-label">
                                <i class="fas fa-shopping-basket me-2"></i>Quantidade
                            </label>
                            <input type="number" 
                                   wire:model="modalQuantity" 
                                   min="1" 
                                   max="{{ $selectedProduct->current_stock }}"
                                   class="form-input"
                                   onclick="if(this.value === '1') this.value = ''; this.select();"
                                   onblur="if(this.value === '' || this.value < 1) this.value = '1';">
                        </div>
                        
                        <!-- Desconto -->
                        <div class="form-group">
                            <label class="form-label">
                                <i class="fas fa-tag me-2"></i>Desconto (opcional)
                            </label>
                            
                            <div class="discount-type-toggle">
                                <button type="button" 
                                        wire:click="$set('modalDiscountType', 'percentage')"
                                        class="discount-type-btn {{ $modalDiscountType === 'percentage' ? 'active' : '' }}">
                                    <i class="fas fa-percent me-2"></i>%
                                </button>
                                <button type="button"
                                        wire:click="$set('modalDiscountType', 'value')"
                                        class="discount-type-btn {{ $modalDiscountType === 'value' ? 'active' : '' }}">
                                    <i class="fas fa-dollar-sign me-2"></i>R$
                                </button>
                            </div>
                            
                            <input type="number" 
                                   wire:model="modalDiscount" 
                                   min="0"
                                   step="0.01"
                                   placeholder="{{ $modalDiscountType === 'percentage' ? 'Ex: 10' : 'Ex: 5.00' }}"
                                   class="form-input"
                                   onclick="if(this.value === '0' || this.value === '0.00') this.value = ''; this.select();"
                                   onblur="if(this.value === '') this.value = '0';">
                        </div>
                        
                        <!-- Botões -->
                        <div class="modal-actions">
                            <button wire:click="closeProductModal" class="btn-cancel">
                                <i class="fas fa-times me-2"></i>Cancelar
                            </button>
                            <button wire:click="addToCartFromModal" class="btn-add">
                                <i class="fas fa-cart-plus me-2"></i>Adicionar
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        @endif

        <!-- Modal de Checkout/Finalização de Venda -->
        @if($showCheckoutModal)
            <div class="checkout-modal-overlay" wire:click.self="closeCheckoutModal" wire:ignore.self>
                <div class="checkout-modal">
                    <div class="modal-header">
                        <h3 class="mb-0">
                            <i class="fas fa-cash-register me-2"></i>
                            Finalizar Venda
                        </h3>
                        <button wire:click="closeCheckoutModal" class="modal-close">
                            <i class="fas fa-times"></i>
                        </button>
                    </div>
                    
                    <div class="modal-body">
                        <!-- Resumo do Pedido -->
                        <div style="background: #f1f5f9; border-radius: 12px; padding: 20px; margin-bottom: 20px;">
                            <div style="display: flex; justify-content: space-between; margin-bottom: 10px; font-size: 16px;">
                                <span style="color: #64748b; font-weight: 600;">Subtotal:</span>
                                <span style="color: #1e293b; font-weight: 700;">R$ {{ number_format($subtotal, 2, ',', '.') }}</span>
                            </div>
                            @if($checkoutDiscount > 0)
                                @php
                                    $discountAmount = 0;
                                    if ($checkoutDiscountType === 'percentage') {
                                        $discountAmount = ($subtotal * $checkoutDiscount) / 100;
                                    } else {
                                        $discountAmount = $checkoutDiscount;
                                    }
                                @endphp
                                <div style="display: flex; justify-content: space-between; margin-bottom: 10px; font-size: 16px;">
                                    <span style="color: #ef4444; font-weight: 600;">Desconto:</span>
                                    <span style="color: #ef4444; font-weight: 700;">- R$ {{ number_format($discountAmount, 2, ',', '.') }}</span>
                                </div>
                            @endif
                            <div style="display: flex; justify-content: space-between; border-top: 2px solid #cbd5e1; padding-top: 10px; margin-top: 10px;">
                                <span style="color: #10b981; font-size: 20px; font-weight: 700;">Total a Pagar:</span>
                                <span style="color: #10b981; font-size: 24px; font-weight: 900;">R$ {{ number_format($this->calculateFinalTotal(), 2, ',', '.') }}</span>
                            </div>
                        </div>
                        
                        <!-- Desconto no Total -->
                        <div style="margin-bottom: 20px;">
                            <label style="display: block; font-weight: 700; color: #64748b; margin-bottom: 10px; font-size: 14px; text-transform: uppercase;">
                                <i class="fas fa-percent me-2"></i>Desconto no Total
                            </label>
                            <div style="display: flex; gap: 10px;">
                                <button type="button" 
                                        wire:click="$set('checkoutDiscountType', 'percentage')"
                                        class="discount-type-btn {{ $checkoutDiscountType === 'percentage' ? 'active' : '' }}"
                                        style="flex: 0 0 60px; padding: 12px; border: 2px solid #e2e8f0; border-radius: 10px; background: {{ $checkoutDiscountType === 'percentage' ? '#1e40af' : 'white' }}; color: {{ $checkoutDiscountType === 'percentage' ? 'white' : '#64748b' }}; font-weight: 700; cursor: pointer; transition: all 0.3s;">
                                    %
                                </button>
                                <input type="number" 
                                       wire:model.live="checkoutDiscount" 
                                       min="0"
                                       step="0.01"
                                       placeholder="0,00"
                                       class="form-input"
                                       style="flex: 1; padding: 12px; border: 2px solid #e2e8f0; border-radius: 10px; font-size: 16px; font-weight: 600;"
                                       onclick="if(this.value === '0' || this.value === '0.00') this.value = ''; this.select();"
                                       onblur="if(this.value === '') this.value = '0';">
                                <button type="button"
                                        wire:click="$set('checkoutDiscountType', 'value')"
                                        class="discount-type-btn {{ $checkoutDiscountType === 'value' ? 'active' : '' }}"
                                        style="flex: 0 0 60px; padding: 12px; border: 2px solid #e2e8f0; border-radius: 10px; background: {{ $checkoutDiscountType === 'value' ? '#1e40af' : 'white' }}; color: {{ $checkoutDiscountType === 'value' ? 'white' : '#64748b' }}; font-weight: 700; cursor: pointer; transition: all 0.3s;">
                                    R$
                                </button>
                            </div>
                        </div>
                        
                        <!-- Forma de Pagamento -->
                        <div style="margin-bottom: 20px;">
                            <label style="display: block; font-weight: 700; color: #64748b; margin-bottom: 10px; font-size: 14px; text-transform: uppercase;">
                                <i class="fas fa-credit-card me-2"></i>Forma de Pagamento
                            </label>
                            <div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;">
                                <button type="button"
                                        wire:click="$set('checkoutPaymentMethod', 'dinheiro')"
                                        style="padding: 15px; border: 2px solid {{ $checkoutPaymentMethod === 'dinheiro' ? '#1e40af' : '#e2e8f0' }}; border-radius: 10px; background: {{ $checkoutPaymentMethod === 'dinheiro' ? '#dbeafe' : 'white' }}; cursor: pointer; transition: all 0.3s; font-weight: 600; color: #1e293b;">
                                    💵<br>Dinheiro
                                </button>
                                <button type="button"
                                        wire:click="$set('checkoutPaymentMethod', 'cartao')"
                                        style="padding: 15px; border: 2px solid {{ $checkoutPaymentMethod === 'cartao' ? '#1e40af' : '#e2e8f0' }}; border-radius: 10px; background: {{ $checkoutPaymentMethod === 'cartao' ? '#dbeafe' : 'white' }}; cursor: pointer; transition: all 0.3s; font-weight: 600; color: #1e293b;">
                                    💳<br>Cartão
                                </button>
                                <button type="button"
                                        wire:click="$set('checkoutPaymentMethod', 'pix')"
                                        style="padding: 15px; border: 2px solid {{ $checkoutPaymentMethod === 'pix' ? '#1e40af' : '#e2e8f0' }}; border-radius: 10px; background: {{ $checkoutPaymentMethod === 'pix' ? '#dbeafe' : 'white' }}; cursor: pointer; transition: all 0.3s; font-weight: 600; color: #1e293b;">
                                    📱<br>PIX
                                </button>
                            </div>
                        </div>
                        
                        <!-- Campos específicos para pagamento em dinheiro -->
                        @if($checkoutPaymentMethod === 'dinheiro')
                            <div style="margin-bottom: 20px;">
                                <label style="display: block; font-weight: 700; color: #64748b; margin-bottom: 10px; font-size: 14px; text-transform: uppercase;">
                                    <i class="fas fa-money-bill-wave me-2"></i>Valor Recebido
                                </label>
                                <input type="number" 
                                       wire:model.live="amountReceived" 
                                       min="0"
                                       step="0.01"
                                       placeholder="0,00"
                                       class="form-input"
                                       style="padding: 15px; border: 2px solid #e2e8f0; border-radius: 10px; font-size: 18px; font-weight: 700; width: 100%;"
                                       onclick="if(this.value === '0' || this.value === '0.00') this.value = ''; this.select();"
                                       onblur="if(this.value === '') this.value = '0';">
                            </div>
                            
                            @if($amountReceived > 0)
                                <div style="background: {{ $change >= 0 ? '#d1fae5' : '#fee2e2' }}; border: 2px solid {{ $change >= 0 ? '#10b981' : '#ef4444' }}; border-radius: 12px; padding: 20px; margin-bottom: 20px; text-align: center;">
                                    <div style="color: {{ $change >= 0 ? '#065f46' : '#991b1b' }}; font-size: 14px; font-weight: 600; margin-bottom: 5px;">
                                        @if($change >= 0)
                                            ✅ Troco
                                        @else
                                            ⚠️ Falta
                                        @endif
                                    </div>
                                    <div style="color: {{ $change >= 0 ? '#10b981' : '#ef4444' }}; font-size: 32px; font-weight: 900;">
                                        R$ {{ number_format(abs($change), 2, ',', '.') }}
                                    </div>
                                </div>
                            @endif
                        @endif
                        
                        <!-- Botões -->
                        <div class="modal-actions">
                            <button wire:click="closeCheckoutModal" class="btn-cancel">
                                <i class="fas fa-times me-2"></i>Cancelar
                            </button>
                            <button wire:click="finalizeSale" class="btn-add">
                                <i class="fas fa-check-circle me-2"></i>Confirmar Venda
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        @endif

        <!-- Modal de Cadastro de Cliente -->
        @if($showCustomerModal)
            <div class="customer-modal-overlay" wire:click.self="closeCustomerModal" style="z-index: 2147483646 !important;">
                <div class="customer-modal" style="max-width: {{ $customerModalType === 'complete' ? '700px' : '500px' }}; z-index: 2147483647 !important;">
                    <div class="modal-header">
                        <h3 class="mb-0">
                            <i class="fas fa-user-plus me-2"></i>
                            {{ $customerModalType === 'quick' ? 'Cadastro Rápido de Cliente' : 'Cadastro Completo de Cliente' }}
                        </h3>
                        <button wire:click="closeCustomerModal" class="modal-close">
                            <i class="fas fa-times"></i>
                        </button>
                    </div>
                    
                    <div class="modal-body">
                        <!-- Botões para alternar tipo de cadastro -->
                        <div style="display: flex; gap: 10px; margin-bottom: 20px;">
                            <button type="button" 
                                    wire:click="$set('customerModalType', 'quick')"
                                    style="flex: 1; padding: 10px; border: 2px solid {{ $customerModalType === 'quick' ? '#1e40af' : '#e2e8f0' }}; background: {{ $customerModalType === 'quick' ? '#dbeafe' : 'white' }}; border-radius: 10px; font-weight: 600; cursor: pointer; transition: all 0.3s; color: {{ $customerModalType === 'quick' ? '#1e40af' : '#64748b' }};">
                                <i class="fas fa-bolt me-2"></i>Cadastro Rápido
                            </button>
                            <button type="button" 
                                    wire:click="$set('customerModalType', 'complete')"
                                    style="flex: 1; padding: 10px; border: 2px solid {{ $customerModalType === 'complete' ? '#1e40af' : '#e2e8f0' }}; background: {{ $customerModalType === 'complete' ? '#dbeafe' : 'white' }}; border-radius: 10px; font-weight: 600; cursor: pointer; transition: all 0.3s; color: {{ $customerModalType === 'complete' ? '#1e40af' : '#64748b' }};">
                                <i class="fas fa-list me-2"></i>Cadastro Completo
                            </button>
                        </div>

                        <!-- Campos do formulário -->
                        <div class="form-group">
                            <label class="form-label">
                                <i class="fas fa-user me-2"></i>Nome *
                            </label>
                            <input type="text" 
                                   wire:model="customerName" 
                                   class="form-input"
                                   placeholder="Nome completo do cliente"
                                   required>
                            @error('customerName') 
                                <span style="color: #ef4444; font-size: 13px; margin-top: 5px; display: block;">{{ $message }}</span>
                            @enderror
                        </div>

                        <div style="display: grid; grid-template-columns: {{ $customerModalType === 'complete' ? '1fr 1fr' : '1fr' }}; gap: 15px;">
                            <div class="form-group">
                                <label class="form-label">
                                    <i class="fas fa-phone me-2"></i>Telefone
                                </label>
                                <input type="text" 
                                       wire:model="customerPhone" 
                                       class="form-input"
                                       placeholder="(00) 00000-0000">
                            </div>

                            <div class="form-group">
                                <label class="form-label">
                                    <i class="fas fa-envelope me-2"></i>E-mail
                                </label>
                                <input type="email" 
                                       wire:model="customerEmail" 
                                       class="form-input"
                                       placeholder="email@exemplo.com">
                                @error('customerEmail') 
                                    <span style="color: #ef4444; font-size: 13px; margin-top: 5px; display: block;">{{ $message }}</span>
                                @enderror
                            </div>
                        </div>

                        @if($customerModalType === 'complete')
                            <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 15px;">
                                <div class="form-group">
                                    <label class="form-label">
                                        <i class="fas fa-id-card me-2"></i>CPF/CNPJ
                                    </label>
                                    <input type="text" 
                                           wire:model="customerCpfCnpj" 
                                           class="form-input"
                                           placeholder="000.000.000-00">
                                </div>

                                <div class="form-group">
                                    <label class="form-label">
                                        <i class="fas fa-birthday-cake me-2"></i>Data de Nascimento
                                    </label>
                                    <input type="date" 
                                           wire:model="customerBirthDate" 
                                           class="form-input">
                                </div>
                            </div>

                            <div style="border-top: 2px solid #e2e8f0; margin: 20px 0; padding-top: 20px;">
                                <h4 style="font-size: 16px; font-weight: 700; color: #1e293b; margin-bottom: 15px;">
                                    <i class="fas fa-map-marker-alt me-2"></i>Endereço
                                </h4>
                                
                                <div style="display: grid; grid-template-columns: 1fr 2fr; gap: 15px; margin-bottom: 15px;">
                                    <div class="form-group" style="margin-bottom: 0;">
                                        <label class="form-label">CEP</label>
                                        <input type="text" 
                                               wire:model="customerZipCode" 
                                               class="form-input"
                                               placeholder="00000-000">
                                    </div>

                                    <div class="form-group" style="margin-bottom: 0;">
                                        <label class="form-label">Rua</label>
                                        <input type="text" 
                                               wire:model="customerStreet" 
                                               class="form-input"
                                               placeholder="Nome da rua">
                                    </div>
                                </div>

                                <div style="display: grid; grid-template-columns: 1fr 2fr; gap: 15px; margin-bottom: 15px;">
                                    <div class="form-group" style="margin-bottom: 0;">
                                        <label class="form-label">Número</label>
                                        <input type="text" 
                                               wire:model="customerNumber" 
                                               class="form-input"
                                               placeholder="123">
                                    </div>

                                    <div class="form-group" style="margin-bottom: 0;">
                                        <label class="form-label">Complemento</label>
                                        <input type="text" 
                                               wire:model="customerComplement" 
                                               class="form-input"
                                               placeholder="Apto, Bloco, etc.">
                                    </div>
                                </div>

                                <div style="display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 15px;">
                                    <div class="form-group" style="margin-bottom: 0;">
                                        <label class="form-label">Bairro</label>
                                        <input type="text" 
                                               wire:model="customerNeighborhood" 
                                               class="form-input"
                                               placeholder="Bairro">
                                    </div>

                                    <div class="form-group" style="margin-bottom: 0;">
                                        <label class="form-label">Cidade</label>
                                        <input type="text" 
                                               wire:model="customerCity" 
                                               class="form-input"
                                               placeholder="Cidade">
                                    </div>

                                    <div class="form-group" style="margin-bottom: 0;">
                                        <label class="form-label">Estado</label>
                                        <input type="text" 
                                               wire:model="customerState" 
                                               class="form-input"
                                               placeholder="UF"
                                               maxlength="2"
                                               style="text-transform: uppercase;">
                                    </div>
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="form-label">
                                    <i class="fas fa-comment me-2"></i>Observações
                                </label>
                                <textarea wire:model="customerNotes" 
                                          class="form-input"
                                          rows="3"
                                          placeholder="Observações adicionais sobre o cliente..."></textarea>
                            </div>
                        @endif

                        <!-- Botões -->
                        <div class="modal-actions">
                            <button wire:click="closeCustomerModal" class="btn-cancel">
                                <i class="fas fa-times me-2"></i>Cancelar
                            </button>
                            <button wire:click="saveCustomer" class="btn-add">
                                <i class="fas fa-check me-2"></i>Salvar e Usar Cliente
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        @endif

    </div>
</div>

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

<script>
        // Listener específico para o evento de finalização de venda
        document.addEventListener('livewire:init', () => {
            Livewire.on('sale-finalized', (event) => {
                console.log('Venda finalizada - dados recebidos:', event);
                
                // Extrai os dados do evento Livewire
                var receiptData = {
                    sale_number: event[0]?.sale_number || 'N/A',
                    total: event[0]?.total || 0,
                    total_discount: event[0]?.total_discount || 0,
                    items: event[0]?.items || [],
                    customer: event[0]?.customer || null,
                    seller_name: event[0]?.seller_name || null,
                    payment_method: event[0]?.payment_method || 'dinheiro',
                    date: event[0]?.date || new Date().toLocaleString('pt-BR')
                };
                
                console.log('Dados extraídos do evento:', receiptData);
                
                // Processa os itens para garantir que tenham os campos corretos
                if (receiptData.items && receiptData.items.length > 0) {
                    receiptData.items = receiptData.items.map(function(item) {
                        return {
                            name: item.name || item.product_name || 'Produto',
                            quantity: item.quantity || 1,
                            final_price: item.final_price || item.price || 0,
                            price: item.price || item.final_price || 0,
                            discount: item.discount || 0
                        };
                    });
                }
                
                console.log('Dados processados para impressão:', receiptData);
                
                // Chama a função de impressão com os dados processados
                printReceipt(receiptData);
            });
        });
</script>
@endpush