@extends('layouts.app')
@section('title', 'GP Report')

@section('css')
<link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;700&display=swap" rel="stylesheet">
<style>
    :root {
        --primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        --secondary-gradient: linear-gradient(135deg, #FF9A8B 0%, #FF6A88 55%, #FF99AC 100%);
        --success-gradient: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
        --info-gradient: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
        --warning-gradient: linear-gradient(135deg, #f6d365 0%, #fda085 100%);
        --danger-gradient: linear-gradient(135deg, #ff0844 0%, #ffb199 100%);
        --purple-gradient: linear-gradient(135deg, #a18cd1 0%, #fbc2eb 100%);
        --account-deposit-gradient: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
        --glass-bg: rgba(255, 255, 255, 0.7);
        --glass-border: rgba(255, 255, 255, 0.4);
        --card-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15);
    }

    .gp-report-container {
        font-family: 'Outfit', sans-serif;
        padding: 20px;
        background: #f0f2f5;
        min-height: 100vh;
    }

    .premium-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 30px;
        padding: 0 10px;
    }

    .premium-title {
        font-size: 2.5rem;
        font-weight: 700;
        background: var(--primary-gradient);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        margin: 0;
    }

    .glass-card {
        background: var(--glass-bg);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        border: 1px solid var(--glass-border);
        border-radius: 20px;
        box-shadow: var(--card-shadow);
        padding: 24px;
        margin-bottom: 24px;
        transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.3s ease;
    }

    .glass-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 12px 40px 0 rgba(31, 38, 135, 0.25);
    }

    .metric-card {
        color: white;
        position: relative;
        overflow: hidden;
    }

    .metric-card::before {
        content: '';
        position: absolute;
        top: -50%;
        left: -50%;
        width: 200%;
        height: 200%;
        background: rgba(255, 255, 255, 0.1);
        transform: rotate(45deg);
        pointer-events: none;
    }

    .metric-title {
        font-size: 0.9rem;
        font-weight: 400;
        text-transform: uppercase;
        letter-spacing: 1px;
        opacity: 0.9;
        margin-top: 5px;
        margin-bottom: 8px;
    }

    .metric-value {
        font-size: 1.8rem;
        font-weight: 700;
        margin: 0;
    }

    .metric-icon {
        position: absolute;
        right: 20px;
        top: 20px;
        font-size: 2.5rem;
        opacity: 0.3;
    }

    .bg-sales { background: var(--info-gradient); }
    .bg-gp { background: var(--primary-gradient); }
    .bg-due { background: var(--warning-gradient); }
    .bg-sr { background: var(--danger-gradient); }
    .bg-purch { background: var(--success-gradient); }
    .bg-pr { background: var(--secondary-gradient); }
    .bg-exp { background: var(--danger-gradient); }
    .bg-dep { background: var(--info-gradient); }
    .bg-ac-dep { background: var(--account-deposit-gradient); }

    .filter-section {
        margin-bottom: 30px;
    }

    .custom-select, .custom-input {
        background: white !important;
        border: 1px solid #e0e6ed !important;
        border-radius: 12px !important;
        padding: 10px 15px !important;
        height: auto !important;
        font-size: 0.95rem !important;
        transition: all 0.2s ease;
    }

    .custom-select:focus, .custom-input:focus {
        border-color: #667eea !important;
        box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1) !important;
    }

    .btn-premium-print {
        background: var(--primary-gradient);
        color: white !important;
        border: none;
        padding: 12px 25px;
        border-radius: 15px;
        font-weight: 600;
        display: flex;
        align-items: center;
        gap: 10px;
        transition: all 0.3s ease;
        box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
    }

    .btn-premium-print:hover {
        transform: scale(1.05);
        box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
    }

    .premium-table {
        width: 100%;
        border-collapse: separate;
        border-spacing: 0 10px;
    }

    .premium-table thead th {
        border: none;
        background: transparent;
        color: #718096;
        font-size: 0.85rem;
        font-weight: 600;
        text-transform: uppercase;
        padding: 10px 20px;
    }

    .premium-table tbody tr {
        background: white;
        box-shadow: 0 2px 10px rgba(0,0,0,0.02);
        transition: transform 0.2s ease;
    }

    .premium-table tbody tr:hover {
        transform: scale(1.01);
    }

    .premium-table tbody td {
        border: none;
        padding: 15px 20px;
    }

    .premium-table tbody td:first-child {
        border-top-left-radius: 12px;
        border-bottom-left-radius: 12px;
    }

    .premium-table tbody td:last-child {
        border-top-right-radius: 12px;
        border-bottom-right-radius: 12px;
    }

    .loader-spin {
        animation: spin 1s linear infinite;
    }

    @keyframes spin {
        from { transform: rotate(0deg); }
        to { transform: rotate(360deg); }
    }

    .fade-in {
        animation: fadeIn 0.5s ease-out forwards;
    }

    @keyframes fadeIn {
        from { opacity: 0; transform: translateY(10px); }
        to { opacity: 1; transform: translateY(0); }
    }

    .hide { display: none !important; }
</style>
@endsection

@section('content')
<div class="gp-report-container">
    <div class="premium-header">
        <h1 class="premium-title">GP Report</h1>
        <button type="button" class="btn btn-premium-print" id="print_gp_report">
            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 6 2 18 2 18 9"></polyline><path d="M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2"></path><rect x="6" y="14" width="12" height="8"></rect></svg>
            @lang('messages.print')
        </button>
    </div>

    <!-- Filters -->
    <div class="filter-section">
        <div class="row">
            <div class="col-md-3">
                <div class="form-group glass-card" style="padding: 15px; margin-bottom: 0;">
                    {!! Form::label('gp_date_filter', __('report.date_range') . ':', ['style' => 'font-weight: 600; color: #4a5568;']) !!}
                    {!! Form::text('gp_date_filter', null, ['placeholder' => __('lang_v1.select_a_date_range'), 'class' => 'custom-input', 'style' => 'width: 100%', 'readonly']); !!}
                </div>
            </div>
            <div class="col-md-3">
                <div class="form-group glass-card" style="padding: 15px; margin-bottom: 0;">
                    {!! Form::label('gp_location_id',  __('purchase.business_location') . ':', ['style' => 'font-weight: 600; color: #4a5568;']) !!}
                    {!! Form::select('gp_location_id', $business_locations, null, ['class' => 'custom-select select2', 'style' => 'width:100%', 'placeholder' => __('messages.all')]); !!}
                </div>
            </div>
        </div>
    </div>

    <!-- Metrics Row 1: Sales & Customers -->
    <div class="row fade-in" style="animation-delay: 0.1s;">
        <div class="col-md-3">
            <div class="glass-card metric-card bg-sales">
                <i class="fas fa-shopping-cart metric-icon"></i>
                <div class="metric-title">Total Sales</div>
                <div class="metric-value" id="total_sales"><i class="fas fa-sync loader-spin"></i></div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="glass-card metric-card bg-gp">
                <i class="fas fa-chart-line metric-icon"></i>
                <div class="metric-title">Gross Profit</div>
                <div class="metric-value" id="gross_profit"><i class="fas fa-sync loader-spin"></i></div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="glass-card metric-card bg-due">
                <i class="fas fa-user-clock metric-icon"></i>
                <div class="metric-title">Customer Due</div>
                <div class="metric-value" id="customer_due"><i class="fas fa-sync loader-spin"></i></div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="glass-card metric-card bg-sales">
                <i class="fas fa-hand-holding-usd metric-icon"></i>
                <div class="metric-title">Customer Due Collection</div>
                <div class="metric-value" id="customer_due_collection"><i class="fas fa-sync loader-spin"></i></div>
            </div>
        </div>
    </div>

    <!-- Metrics Row 2: Purchases & Suppliers -->
    <div class="row fade-in" style="animation-delay: 0.2s;">
        <div class="col-md-3">
            <div class="glass-card metric-card bg-purch">
                <i class="fas fa-shopping-bag metric-icon"></i>
                <div class="metric-title">Purchases</div>
                <div class="metric-value" id="purchases"><i class="fas fa-sync loader-spin"></i></div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="glass-card metric-card bg-due">
                <i class="fas fa-user-clock metric-icon"></i>
                <div class="metric-title">Supplier Due</div>
                <div class="metric-value" id="supplier_due"><i class="fas fa-sync loader-spin"></i></div>
            </div>
        </div>
         <div class="col-md-3">
            <div class="glass-card metric-card bg-purch">
                <i class="fas fa-hand-holding-usd metric-icon"></i>
                <div class="metric-title">Supplier Due Collection</div>
                <div class="metric-value" id="supplier_due_collection"><i class="fas fa-sync loader-spin"></i></div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="glass-card metric-card bg-pr">
                <i class="fas fa-reply metric-icon"></i>
                <div class="metric-title">Purchase Returns</div>
                <div class="metric-value" id="purchase_returns"><i class="fas fa-sync loader-spin"></i></div>
            </div>
        </div>
    </div>

    <!-- Metrics Row 3: Others -->
    <div class="row fade-in" style="animation-delay: 0.25s;">
        <div class="col-md-3">
            <div class="glass-card metric-card bg-sr">
                <i class="fas fa-undo metric-icon"></i>
                <div class="metric-title">Sales Returns</div>
                <div class="metric-value" id="sales_return"><i class="fas fa-sync loader-spin"></i></div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="glass-card metric-card bg-exp">
                <i class="fas fa-minus-circle metric-icon"></i>
                <div class="metric-title">Expenses</div>
                <div class="metric-value" id="expenses"><i class="fas fa-sync loader-spin"></i></div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="glass-card metric-card bg-dep">
                <i class="fas fa-hand-holding-usd metric-icon"></i>
                <div class="metric-title">Customer Deposits</div>
                <div class="metric-value" id="customer_deposits"><i class="fas fa-sync loader-spin"></i></div>
            </div>
        </div>
        <div class="col-md-3 hide" id="account_deposit_card_container">
            <div class="glass-card metric-card bg-ac-dep">
                <i class="fas fa-file-invoice-dollar metric-icon"></i>
                <div class="metric-title">Account Deposits</div>
                <div class="metric-value" id="total_account_deposits"><i class="fas fa-sync loader-spin"></i></div>
            </div>
        </div>
        <div class="col-md-3 hide" id="account_fund_transfer_card_container">
            <div class="glass-card metric-card bg-due">
                <i class="fas fa-exchange-alt metric-icon"></i>
                <div class="metric-title">Fund Transfers</div>
                <div class="metric-value" id="total_account_fund_transfers"><i class="fas fa-sync loader-spin"></i></div>
            </div>
        </div>
    </div>

    <!-- Tables Row -->
    <div class="row fade-in" style="animation-delay: 0.3s;">
        <!-- Register Totals -->
        <div class="col-md-6">
            <div class="glass-card">
                <h3 style="font-weight: 700; color: #2d3748; margin-top: 0; margin-bottom: 20px;">Register Totals <span style="font-size: 0.9rem; font-weight: 400; color: #718096; margin-left: 10px;">(Cashier Wise)</span></h3>
                <div class="table-responsive">
                    <table class="premium-table" id="register_totals_table">
                        <thead>
                            <tr>
                                <th>Cashier Name</th>
                                <th>Registers Closed</th>
                                <th class="text-right">Cash Collected</th>
                            </tr>
                        </thead>
                        <tbody id="register_totals_body">
                            <tr>
                                <td colspan="3" class="text-center">@lang('messages.loading')...</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <!-- Account Deposits (Conditional) -->
        <div class="col-md-6 hide" id="account_deposit_table_container">
            <div class="glass-card">
                <h3 style="font-weight: 700; color: #2d3748; margin-top: 0; margin-bottom: 20px;">Account Deposits</h3>
                <div class="table-responsive">
                    <table class="premium-table">
                        <thead>
                            <tr>
                                <th>Account Name</th>
                                <th class="text-right">Total Deposited</th>
                            </tr>
                        </thead>
                        <tbody id="account_deposits_body">
                            <!-- Populated via AJAX -->
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <!-- Account Fund Transfers (Conditional) -->
        <div class="col-md-6 hide" id="account_fund_transfer_table_container" style="margin-top: 20px;">
            <div class="glass-card">
                <h3 style="font-weight: 700; color: #2d3748; margin-top: 0; margin-bottom: 20px;">Payment Account Fund Transfers</h3>
                <div class="table-responsive">
                    <table class="premium-table">
                        <thead>
                            <tr>
                                <th>Account Name</th>
                                <th class="text-right">Total Transferred</th>
                            </tr>
                        </thead>
                        <tbody id="account_fund_transfers_body">
                            <!-- Populated via AJAX -->
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Tables Row 2 -->
    <div class="row fade-in" style="animation-delay: 0.4s;">
        <!-- Commission Agent Details (Conditional) -->
        <div class="col-md-6 hide" id="commission_agent_table_container">
            <div class="glass-card">
                <h3 style="font-weight: 700; color: #2d3748; margin-top: 0; margin-bottom: 20px;">Sales Commission Agents</h3>
                <div class="table-responsive">
                    <table class="premium-table">
                        <thead>
                            <tr>
                                <th>Agent Name</th>
                                <th class="text-right">Total Sales Generated</th>
                            </tr>
                        </thead>
                        <tbody id="commission_agent_body">
                            <!-- Populated via AJAX -->
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('javascript')
<script type="text/javascript">
    $(document).ready(function() {
        if($('#gp_date_filter').length == 1) {
            $('#gp_date_filter').daterangepicker(
                dateRangeSettings,
                function (start, end) {
                    $('#gp_date_filter').val(start.format(moment_date_format) + ' ~ ' + end.format(moment_date_format));
                    updateGPReport();
                }
            );
            $('#gp_date_filter').on('cancel.daterangepicker', function(ev, picker) {
                $('#gp_date_filter').val('');
                updateGPReport();
            });
        }

        $(document).on('change', '#gp_location_id', function() {
            updateGPReport();
        });

        $(document).on('click', '#print_gp_report', function() {
            var start = '';
            var end = '';
            if($('#gp_date_filter').val()) {
                start = $('#gp_date_filter').data('daterangepicker').startDate.format('YYYY-MM-DD');
                end = $('#gp_date_filter').data('daterangepicker').endDate.format('YYYY-MM-DD');
            }
            var location_id = $('#gp_location_id').val();

            var url = '/ls-reports/print-gp-report?start_date=' + start + '&end_date=' + end + '&location_id=' + location_id;
            window.open(url, '_blank');
        });

        // Initial load
        updateGPReport();

        function updateGPReport() {
            var start = '';
            var end = '';
            if($('#gp_date_filter').val()) {
                start = $('#gp_date_filter').data('daterangepicker').startDate.format('YYYY-MM-DD');
                end = $('#gp_date_filter').data('daterangepicker').endDate.format('YYYY-MM-DD');
            }
            var location_id = $('#gp_location_id').val();

            var data = {
                start_date: start,
                end_date: end,
                location_id: location_id
            };

            // Reset loading state
            $('.metric-value').html('<i class="fas fa-sync loader-spin"></i>');
            $('#register_totals_body').html('<tr><td colspan="3" class="text-center">@lang("messages.loading")...</td></tr>');

            $.ajax({
                method: 'GET',
                url: '/ls-reports/gp-report',
                dataType: 'json',
                data: data,
                success: function(result) {
                    // Update Summary Cards
                    $('#total_sales').text(__currency_trans_from_en(result.total_sales, true));
                    $('#gross_profit').text(__currency_trans_from_en(result.gross_profit, true));
                    $('#customer_due').text(__currency_trans_from_en(result.customer_due, true));
                    $('#customer_due_collection').text(__currency_trans_from_en(result.customer_due_collection, true));
                    $('#supplier_due').text(__currency_trans_from_en(result.supplier_due, true));
                    $('#supplier_due_collection').text(__currency_trans_from_en(result.supplier_due_collection, true));
                    $('#sales_return').text(__currency_trans_from_en(result.sales_return, true));
                    $('#purchases').text(__currency_trans_from_en(result.purchases, true));
                    $('#purchase_returns').text(__currency_trans_from_en(result.purchase_returns, true));
                    $('#expenses').text(__currency_trans_from_en(result.expenses, true));
                    $('#customer_deposits').text(__currency_trans_from_en(result.customer_deposits, true));

                    // Account Deposits logic
                    if (result.total_account_deposits > 0) {
                        $('#total_account_deposits').text(__currency_trans_from_en(result.total_account_deposits, true));
                        $('#account_deposit_card_container').removeClass('hide');
                        $('#account_deposit_table_container').removeClass('hide');
                        
                        var acc_html = '';
                        $.each(result.account_deposits, function(i, val) {
                            acc_html += '<tr>' +
                                '<td><div style="font-weight: 600; color: #2d3748;">' + val.account_name + '</div></td>' +
                                '<td class="text-right"><div style="font-weight: 700; color: #f5576c;">' + __currency_trans_from_en(val.total_deposit, true) + '</div></td>' +
                            '</tr>';
                        });
                        $('#account_deposits_body').html(acc_html);
                    } else {
                        $('#account_deposit_card_container').addClass('hide');
                        $('#account_deposit_table_container').addClass('hide');
                    }

                    // Account Fund Transfers logic
                    if (result.total_account_fund_transfers > 0) {
                        $('#total_account_fund_transfers').text(__currency_trans_from_en(result.total_account_fund_transfers, true));
                        $('#account_fund_transfer_card_container').removeClass('hide');
                        $('#account_fund_transfer_table_container').removeClass('hide');
                        
                        var transfer_html = '';
                        $.each(result.account_fund_transfers, function(i, val) {
                            transfer_html += '<tr>' +
                                '<td><div style="font-weight: 600; color: #2d3748;">' + val.account_name + '</div></td>' +
                                '<td class="text-right"><div style="font-weight: 700; color: #ed8936;">' + __currency_trans_from_en(val.total_transfer, true) + '</div></td>' +
                            '</tr>';
                        });
                        $('#account_fund_transfers_body').html(transfer_html);
                    } else {
                        $('#account_fund_transfer_card_container').addClass('hide');
                        $('#account_fund_transfer_table_container').addClass('hide');
                    }

                    // Update Register Totals Table
                    var register_html = '';
                    if (result.register_totals.length > 0) {
                        $.each(result.register_totals, function(index, value) {
                            var name = value.first_name + ' ' + (value.last_name ? value.last_name : '');
                            register_html += '<tr>' +
                                '<td><div style="font-weight: 600; color: #2d3748;">' + name + '</div></td>' +
                                '<td><span class="badge" style="background: #e2e8f0; color: #4a5568; font-weight: 600; padding: 5px 12px; border-radius: 8px;">' + value.total_registers + ' Sessions</span></td>' +
                                '<td class="text-right"><div style="font-weight: 700; color: #2d3748;">' + __currency_trans_from_en(value.total_cash, true) + '</div></td>' +
                            '</tr>';
                        });
                    } else {
                        register_html = '<tr><td colspan="3" class="text-center">No register data available for selected criteria</td></tr>';
                    }
                    $('#register_totals_body').html(register_html);
                    
                    // Commission Agent logic
                    if (result.commission_agent_details && result.commission_agent_details.length > 0) {
                        $('#commission_agent_table_container').removeClass('hide');
                        
                        var agent_html = '';
                        $.each(result.commission_agent_details, function(i, val) {
                            agent_html += '<tr>' +
                                '<td><div style="font-weight: 600; color: #2d3748;">' + val.agent_name + '</div></td>' +
                                '<td class="text-right"><div style="font-weight: 700; color: #48bb78;">' + __currency_trans_from_en(val.total_sales, true) + '</div></td>' +
                            '</tr>';
                        });
                        $('#commission_agent_body').html(agent_html);
                    } else {
                        $('#commission_agent_table_container').addClass('hide');
                    }
                }
            });
        }
    });
</script>
@endsection