@extends('operations.layout.mainlayout')
<style>
    .select-container {
        background: white;
        border-radius: 6px;
        padding: 4px;
        min-width: 200px;
        border: 1px solid #dee2e6;
        height: 42px;
    }

    .select-container:last-child {
        min-width: 120px;
    }

    .form-select {
        border: none;
        padding: 6px 12px;
        height: 100%;
        font-size: 0.9rem;
        background-color: transparent;
        width: 100%;
        cursor: pointer;
    }

    .form-select:focus {
        box-shadow: none;
        border: none;
    }

    .select2-container--bootstrap4 .select2-selection {
        border: none !important;
        height: 100%;
        padding: 6px 12px;
        font-size: 0.9rem;
        background-color: transparent;
    }

    .select2-container--bootstrap4 .select2-selection--single .select2-selection__rendered {
        line-height: 1.5;
        color: #495057;
        font-weight: 500;
    }

    .select2-container--bootstrap4 .select2-selection--single .select2-selection__arrow {
        height: 100%;
        right: 8px;
    }

    .select2-container .select2-selection--single{
        display: flex !important;
    }

    .info-box {
        min-height: 110px;
        padding: 1.25rem;
        border-radius: 8px;
        transition: all 0.2s ease;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }

    .info-box:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(0,0,0,0.15);
    }

    .info-box-content {
        text-align: center;
    }

    .info-box-text {
        font-size: 0.9rem;
        font-weight: 500;
        letter-spacing: 0.5px;
        margin-bottom: 8px;
        opacity: 0.9;
    }

    .info-box-number {
        font-size: 1.8rem;
        font-weight: 600;
        line-height: 1.2;
    }

    .table {
        margin-bottom: 0;
        font-size: 0.95rem;
    }

    .table th {
        font-weight: 600;
        padding: 1rem;
        color: white;
        background: var(--blazma-primary);
        border-bottom: none;
    }

    .table td {
        padding: 1rem;
        color: #495057;
        border-color: #f0f0f0;
        font-weight: 500;
    }

    .table-hover tbody tr:hover {
        background-color: rgba(var(--blazma-primary-rgb), 0.03);
    }

    .card {
        border: none;
        border-radius: 8px;
        background: white;
        box-shadow: 0 2px 4px rgba(0,0,0,0.04);
    }

    .card-header {
        padding: 1rem 1.25rem;
        border-radius: 8px 8px 0 0;
        border-bottom: none;
        background: white;
    }

    .card-body {
        padding: 1.5rem;
    }

    .table-light {
        background-color: #f8f9fa;
        font-weight: 700 !important;
    }

    .table-light td {
        font-weight: 700 !important;
        color: #2c3e50;
    }

    .btn-export {
        height: 42px;
        padding: 0 1.5rem;
        font-size: 0.9rem;
        font-weight: 500;
        border-radius: 6px;
        border: 1px solid #dee2e6;
        background: white;
        color: #495057;
        transition: all 0.2s;
    }

    .btn-export:hover {
        background: var(--blazma-primary);
        border-color: var(--blazma-primary);
        color: white;
    }

    .btn-export i {
        font-size: 1.1rem;
    }

    .actions-container {
        display: flex;
        align-items: center;
        gap: 1rem;
    }

    .select2-container {
        height: 100%;
    }

    .select2-container--bootstrap4 .select2-selection--single {
        height: 100%;
    }
</style>
@section('content')
    <div class="content-wrapper">
        <div class="content-header">
            <div class="container-fluid">
                <h1 class="m-0 text-secondary">Account Manager Sales Forecast</h1>
            </div>
        </div>

        <section class="content">
            <div class="container-fluid">
                <div class="card shadow-sm">
                    <div class="card-header">
                        <div class="d-flex justify-content-between align-items-center">
                            <h3 class="card-title mb-0" style="color: var(--blazma-text)">Account Manager Performance</h3>
                            <div class="actions-container">
                                <button type="button" class="btn-export d-flex align-items-center gap-2" id="exportToExcel">
                                    <i class="fas fa-file-excel"></i>
                                    <span>Export to Excel</span>
                                </button>
                                <div class="select-container">
                                    <select class="form-select select2" name="client_id" id="clientSelect">
                                        <option value="">Select Client</option>
                                        @foreach($clients as $client)
                                            <option value="{{ $client->ID }}" {{ $client->ID == $selected_client ? 'selected' : '' }}>
                                                {{ $client->USERNAME }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="select-container d-none">
                                    <select class="form-select" name="year" id="yearSelect">
                                        @for($y = date('Y') - 2; $y <= date('Y') + 2; $y++)
                                            <option value="{{ $y }}" {{ $y == $selected_year ? 'selected' : '' }}>
                                                {{ $y }}
                                            </option>
                                        @endfor
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="card-body">
                        <div class="row g-3 mb-4">
                            <div class="col-md-2">
                                <div class="info-box" style="background: var(--blazma-primary);">
                                    <div class="info-box-content">
                                        <span class="info-box-text text-white">TOTAL TARGET</span>
                                        <span class="info-box-number text-white">{{ number_format($totals['target'], 0) }}</span>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-2">
                                <div class="info-box" style="background: #4e54c8;">
                                    <div class="info-box-content">
                                        <span class="info-box-text text-white">TOTAL SALES</span>
                                        <span class="info-box-number text-white">{{ number_format($totals['sales'], 0) }}</span>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-2">
                                <div class="info-box" style="background: #00bcd4;">
                                    <div class="info-box-content">
                                        <span class="info-box-text text-white">TOTAL FORECAST</span>
                                        <span class="info-box-number text-white">{{ number_format($totals['forecast'], 0) }}</span>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-2">
                                <div class="info-box" style="background: #2ecc71;">
                                    <div class="info-box-content">
                                        <span class="info-box-text text-white">TOTAL BALANCE</span>
                                        <span class="info-box-number text-white">{{ number_format($totals['balance'], 0) }}</span>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-2">
                                <div class="info-box" style="background: #8834c3;">
                                    <div class="info-box-content">
                                        <span class="info-box-text text-white">Total Cost</span>
                                        <span class="info-box-number text-white">{{ number_format($totals['cost_price'], 0)}}</span>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-2">
                                <div class="info-box" style="@if(($totals['sales']-$totals['cost_price']) > 0) background: #349f68; @else background: #c50f30; @endif ">
                                    <div class="info-box-content">
                                        <span class="info-box-text text-white">P&L</span>
                                        <span class="info-box-number text-white">{{ number_format($totals['sales']-$totals['cost_price'], 0) }}</span>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="table-responsive">
                            <table class="table table-hover" id="salesTable">
                                <thead>
                                    <tr>
                                        <th style="width: 30%">Account Manager</th>
                                        <th style="width: 14%" class="text-end">Target Amount</th>
                                        <th style="width: 14%" class="text-end">Sales Amount</th>
                                        <th style="width: 14%" class="text-end">Client Count</th>
                                        <th style="width: 14%" class="text-end">Cost Price</th>
                                        <th style="width: 14%" class="text-end">P&L</th>
                                        <th style="width: 14%" class="text-end">Forecast Amount</th>
                                        <th style="width: 14%" class="text-end">Balance Amount</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($data as $row)
                                        <tr>
                                            <td>{{ $row['username'] }}</td>
                                            <td class="text-end fw-bold">{{ number_format($row['target_amount'], 0) }}</td>
                                            <td class="text-end fw-bold">{{ number_format($row['sales_amount'], 0) }}</td>
                                            <td class="text-end fw-bold">{{ number_format($row['patient_count'], 0) }}</td>
                                            <td class="text-end fw-bold">{{ number_format($row['cost_price'], 0) }}</td>
                                            <td class="text-end fw-bold">{{ number_format($row['sales_amount']-$row['cost_price'], 0) }}</td>
                                            <td class="text-end fw-bold">{{ number_format($row['forecast_amount'], 0) }}</td>
                                            <td class="text-end fw-bold" style="color: {{ $row['balance_amount'] < 0 ? '#dc3545' : '#2ecc71' }};">
                                                {{ number_format($row['balance_amount'], 0) }}
                                            </td>
                                        </tr>
                                    @endforeach
                                    <tr class="table-light">
                                        <td>Total</td>
                                        <td class="text-end">{{ number_format($totals['target'], 0) }}</td>
                                        <td class="text-end">{{ number_format($totals['sales'], 0) }}</td>
                                        <td class="text-end">{{ number_format($totals['patients'], 0) }}</td>
                                        <td class="text-end">{{ number_format($totals['cost_price'], 0) }}</td>
                                        <td class="text-end">{{ number_format($totals['sales']-$totals['cost_price'], 0) }}</td>
                                        <td class="text-end">{{ number_format($totals['forecast'], 0) }}</td>
                                        <td class="text-end" style="color: {{ $totals['balance'] < 0 ? '#dc3545' : '#2ecc71' }};">
                                            {{ number_format($totals['balance'], 0) }}
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>
@endsection

@section('footer-scripts')
    <script src="/vendor/xlsx/xlsx.full.min.js"></script>
    <script>
        $(document).ready(function() {
            function updateData() {
                const year = $('#yearSelect').val();
                const clientId = $('#clientSelect').val();
                const params = new URLSearchParams({ year });
                if (clientId) params.append('client_id', clientId);
                window.location.href = `/operations/account-manager-sales-forecast?${params.toString()}`;
            }

            $('#yearSelect, #clientSelect').change(updateData);

            $('#clientSelect').select2({
                placeholder: 'Select Client',
                allowClear: true,
                theme: 'bootstrap4',
                width: '100%',
                dropdownParent: $('#clientSelect').parent()
            });

            $('#exportToExcel').click(function() {
                const wb = XLSX.utils.book_new();
                const ws = XLSX.utils.table_to_sheet(document.getElementById('salesTable'));
                
                // Adjust column widths
                const colWidths = [
                    {wch: 30}, // Account Manager
                    {wch: 15}, // Target Amount
                    {wch: 15}, // Sales Amount
                    {wch: 15}, // Patient Count
                    {wch: 15}, // Forecast Amount
                    {wch: 15}  // Balance Amount
                ];
                ws['!cols'] = colWidths;

                XLSX.utils.book_append_sheet(wb, ws, "Sales Forecast");
                XLSX.writeFile(wb, "account_manager_sales_forecast.xlsx");
            });
        });
    </script>
@endsection