<div class="modal fade" id="daily-summary-modal" tabindex='-1'>
    <div class="modal-dialog modal-md">
        <div class="modal-content">
            <div class="modal-header" style="padding: 15px 20px; background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%); color: white; border-bottom: none; border-radius: 6px 6px 0 0; text-align: center;">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close" style="color: white; opacity: 0.9; font-size: 26px; text-shadow: none; position: absolute; right: 15px; top: 10px;">
                    <span aria-hidden="true">&times;</span>
                </button>
                <div style="text-align: center; width: 100%;">
                    <h4 style="margin: 0; font-size: 20px; font-weight: 700; letter-spacing: 0.8px; color: white;">
                        DAILY BUSINESS SUMMARY
                    </h4>
                    <div style="font-size: 15px; font-weight: 400; margin-top: 5px; color: #bdc3c7; letter-spacing: 0.3px;">
                        <small id="summary-date" class="text-muted" style="color: #bdc3c7 !important;"></small>
                    </div>
                </div>
            </div>
            
            <div class="modal-body" style="padding: 20px; background: #f8f9fa; text-align: center;">
                <!-- Loading indicator -->
                <div id="summary-loading" class="text-center" style="display: none; padding: 40px;">
                    <i class="fa fa-spinner fa-spin fa-3x text-primary"></i>
                    <p class="text-muted" style="margin: 15px 0 0 0; font-size: 16px; font-weight: 500;">Loading summary...</p>
                </div>
                
                <!-- Summary content -->
                <div id="summary-content" style="display: none; text-align: center;">
                    <!-- Enhanced Overview Cards -->
                    <div class="row" style="margin: 0 auto; max-width: 600px;">
                        <div class="col-xs-4" style="padding: 0 8px;">
                            <div class="small-box bg-green" style="margin: 0; border-radius: 12px; box-shadow: 0 4px 8px rgba(0,0,0,0.15); border: none; text-align: center;">
                                <div class="inner" style="padding: 20px 15px; text-align: center;">
                                    <h3 style="margin: 0; font-size: 24px; font-weight: 700; color: white;" id="total-sales-count">0</h3>
                                    <p style="margin: 5px 0; font-size: 14px; color: rgba(255,255,255,0.9); font-weight: 600; letter-spacing: 1px;">SALES</p>
                                    <small id="total-sales-amount" style="font-size: 12px; color: rgba(255,255,255,0.8); font-weight: 500;"><?= $CI->currency(); ?>0</small>
                                </div>
                                <div class="icon" style="top: 15px; right: 15px;">
                                    <i class="fa fa-shopping-cart" style="font-size: 24px; color: rgba(255,255,255,0.7);"></i>
                                </div>
                            </div>
                        </div>
                        
                        <div class="col-xs-4" style="padding: 0 8px;">
                            <div class="small-box bg-red" style="margin: 0; border-radius: 12px; box-shadow: 0 4px 8px rgba(0,0,0,0.15); border: none; text-align: center;">
                                <div class="inner" style="padding: 20px 15px; text-align: center;">
                                    <h3 style="margin: 0; font-size: 24px; font-weight: 700; color: white;" id="total-expense-count">0</h3>
                                    <p style="margin: 5px 0; font-size: 14px; color: rgba(255,255,255,0.9); font-weight: 600; letter-spacing: 1px;">EXPENSES</p>
                                    <small id="total-expense-amount" style="font-size: 12px; color: rgba(255,255,255,0.8); font-weight: 500;"><?= $CI->currency(); ?>0</small>
                                </div>
                                <div class="icon" style="top: 15px; right: 15px;">
                                    <i class="fa fa-credit-card" style="font-size: 24px; color: rgba(255,255,255,0.7);"></i>
                                </div>
                            </div>
                        </div>
                        
                        <div class="col-xs-4" style="padding: 0 8px;">
                            <div class="small-box bg-blue" id="balance-box" style="margin: 0; border-radius: 12px; box-shadow: 0 4px 8px rgba(0,0,0,0.15); border: none; text-align: center;">
                                <div class="inner" style="padding: 20px 15px; text-align: center;">
                                    <h3 style="margin: 0; font-size: 24px; font-weight: 700; color: white;" id="net-balance"><?= $CI->currency(); ?>0</h3>
                                    <p style="margin: 5px 0; font-size: 14px; color: rgba(255,255,255,0.9); font-weight: 600; letter-spacing: 1px;" id="balance-status">NET P&L</p>
                                    <small style="font-size: 12px; color: rgba(255,255,255,0.8); font-weight: 500;">PROFIT/LOSS</small>
                                </div>
                                <div class="icon" style="top: 15px; right: 15px;">
                                    <i class="fa fa-calculator" style="font-size: 24px; color: rgba(255,255,255,0.7);"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Enhanced Collection Summary -->
                    <div style="margin: 25px auto 0; max-width: 600px;">
                        <div class="box" style="margin: 0; border-radius: 12px; box-shadow: 0 4px 8px rgba(0,0,0,0.1); border: 1px solid #e8e8e8;">
                            <div class="box-header with-border" style="padding: 15px 20px; background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%); border-radius: 12px 12px 0 0; border-bottom: 1px solid #e8e8e8; text-align: center;">
                                <h3 class="box-title" style="font-size: 16px; font-weight: 700; color: #495057; letter-spacing: 1px; margin: 0;">
                                    <i class="fa fa-money text-success" style="margin-right: 10px; font-size: 18px;"></i>COLLECTIONS SUMMARY
                                </h3>
                            </div>
                            <div class="box-body" style="padding: 20px; background: white; text-align: center;">
                                <div class="row">
                                    <div class="col-xs-4 text-center">
                                        <div style="border-right: 2px solid #f0f0f0; padding-right: 15px;">
                                            <div style="font-size: 13px; color: #6c757d; margin-bottom: 8px; font-weight: 600; letter-spacing: 0.5px;">TOTAL SALES</div>
                                            <div style="font-size: 20px; font-weight: 700; color: #495057;" id="summary-total-sales"><?= $CI->currency(); ?>0</div>
                                        </div>
                                    </div>
                                    <div class="col-xs-4 text-center">
                                        <div style="border-right: 2px solid #f0f0f0; padding: 0 15px;">
                                            <div style="font-size: 13px; color: #6c757d; margin-bottom: 8px; font-weight: 600; letter-spacing: 0.5px;">COLLECTED</div>
                                            <div style="font-size: 20px; font-weight: 700; color: #28a745;" id="summary-collected"><?= $CI->currency(); ?>0</div>
                                        </div>
                                    </div>
                                    <div class="col-xs-4 text-center">
                                        <div style="padding-left: 15px;">
                                            <div style="font-size: 13px; color: #6c757d; margin-bottom: 8px; font-weight: 600; letter-spacing: 0.5px;">PENDING</div>
                                            <div style="font-size: 20px; font-weight: 700; color: #dc3545;" id="summary-pending"><?= $CI->currency(); ?>0</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Enhanced Payment Methods and Customer Dues -->
                    <div style="margin: 25px auto 0; max-width: 600px;">
                        <div class="row">
                            <div class="col-xs-7" style="padding: 0 8px;">
                                <div class="box" style="margin: 0; border-radius: 12px; box-shadow: 0 4px 8px rgba(0,0,0,0.1); border: 1px solid #e8e8e8;">
                                    <div class="box-header with-border" style="padding: 15px 20px; background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%); border-radius: 12px 12px 0 0; border-bottom: 1px solid #e8e8e8; text-align: center;">
                                        <h3 class="box-title" style="font-size: 14px; font-weight: 700; color: #495057; letter-spacing: 0.5px; margin: 0;">
                                            <i class="fa fa-credit-card text-info" style="margin-right: 8px; font-size: 16px;"></i>PAYMENT METHODS
                                        </h3>
                                    </div>
                                    <div class="box-body" style="padding: 15px 20px; max-height: 140px; overflow-y: auto; background: white; text-align: center;">
                                        <div id="payment-modes-list" style="font-size: 12px;">
                                            <div class="text-center text-muted" style="padding: 25px;">
                                                <i class="fa fa-spinner fa-spin fa-2x"></i>
                                                <div style="margin-top: 10px; font-size: 14px; font-weight: 500;">Loading payment methods...</div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="col-xs-5" style="padding: 0 8px;">
                                <div class="box" style="margin: 0; border-radius: 12px; box-shadow: 0 4px 8px rgba(0,0,0,0.1); border: 1px solid #e8e8e8;">
                                    <div class="box-header with-border" style="padding: 15px 20px; background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%); border-radius: 12px 12px 0 0; border-bottom: 1px solid #e8e8e8; text-align: center;">
                                        <h3 class="box-title" style="font-size: 14px; font-weight: 700; color: #495057; letter-spacing: 0.5px; margin: 0;">
                                            <i class="fa fa-users text-warning" style="margin-right: 8px; font-size: 16px;"></i>CUSTOMER DUES
                                        </h3>
                                    </div>
                                    <div class="box-body" style="padding: 20px; text-align: center; background: white;">
                                        <div style="margin-bottom: 15px;">
                                            <div style="font-size: 28px; font-weight: 700; color: #495057;" id="customer-count">0</div>
                                            <div style="font-size: 12px; color: #6c757d; text-transform: uppercase; font-weight: 600; letter-spacing: 1px;">CUSTOMERS</div>
                                        </div>
                                        <div style="border-top: 2px solid #f0f0f0; padding-top: 15px;">
                                            <div style="font-size: 22px; font-weight: 700; color: #f39c12;" id="customer-dues"><?= $CI->currency(); ?>0</div>
                                            <div style="font-size: 12px; color: #6c757d; text-transform: uppercase; font-weight: 600; letter-spacing: 1px;">TOTAL DUE</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="modal-footer" style="padding: 12px 20px; background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%); border-top: 1px solid #dee2e6; border-radius: 0 0 6px 6px;">
                <div style="display: flex; justify-content: space-between; align-items: center;">
                    <div style="font-size: 11px; color: #6c757d; font-weight: 500;">
                        <i class="fa fa-keyboard-o" style="margin-right: 6px; color: #007bff;"></i>
                        <strong>Alt+S:</strong> Summary | <strong>Alt+P:</strong> Print
                    </div>
                    <div>
                        <button type="button" class="btn btn-success btn-sm" id="print-summary" title="Print Summary (Alt+P)" style="margin-right: 8px; border-radius: 6px; font-weight: 600; padding: 6px 12px;">
                            <i class="fa fa-print" style="margin-right: 6px;"></i>Print Report
                        </button>
                        <button type="button" class="btn btn-default" id="refresh-summary" title="Refresh Summary" style="margin-right: 8px; border-radius: 6px; font-weight: 600; padding: 6px 12px;">
                            <i class="fa fa-refresh" style="margin-right: 6px;"></i>Refresh
                        </button>
                        <button type="button" class="btn btn-secondary btn-sm" data-dismiss="modal" style="border-radius: 6px; font-weight: 600; padding: 6px 12px;">
                            <i class="fa fa-times" style="margin-right: 6px;"></i>Close
                        </button>
                    </div>
                </div>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>
<!-- /.modal -->
