@extends('operations.layout.mainlayout')
<style>
    .chart-container {
        position: relative;
        height: 300px;
    }

    .info-box-content .progress {
        height: 3px;
        margin: 5px 0;
    }

    .info-box-content .progress-bar {
        background-color: #17a2b8;
    }

    .info-box {
        margin-bottom: 1rem;
    }

    .text-success {
        font-weight: bold;
    }

    .text-danger {
        font-weight: bold;
    }
</style>
@section('content')
    <div class="content-wrapper">
        <div class="content-header">
            <div class="container-fluid card">
                <div class="row mb-2">
                    <div class="col-sm-6 card-body">
                        <h1 class="m-0 text-dark" style="color: #e35a80!important;">Sales Forecast</h1>
                    </div>
                    <div class="col-sm-6"></div>
                </div>
            </div>
        </div>

        <section class="content">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-12">
                        <div class="card bg-light">
                            <div class="card-header text-muted border-bottom-0">
                                <h3 class="card-title">Forecast Parameters</h3>
                            </div>
                            <form method="get" action="" style="width:100%;">
                                <div class="card-body pt-0">
                                    <div class="row">
                                        <div class="col-md-4">
                                            <span class="text-muted text-sm"><b>Branch</b></span>
                                            <select class="form-control rhospital_id" name="branch_id">
                                                <option value="">All Branches</option>
                                                @foreach($branches as $branch)
                                                    <option value="{{ $branch->ID }}"
                                                            {{ $selected_branch == $branch->ID ? 'selected' : '' }}>
                                                        {{ $branch->NAME_EN }}
                                                    </option>
                                                @endforeach
                                            </select>
                                        </div>
                                        <div class="col-md-4">
                                            <span class="text-muted text-sm"><b>Year</b></span>
                                            <select class="form-control" name="year">
                                                @for($i = 2022; $i <= date('Y'); $i++)
                                                    <option value="{{ $i }}"
                                                            {{ $selected_year == $i ? 'selected' : '' }}>
                                                        {{ $i }}
                                                    </option>
                                                @endfor
                                            </select>
                                        </div>
                                        <div class="col-md-4">
                                            <span class="text-muted text-sm"><b>Yearly Target</b></span>
                                            <input type="number" step="0.01" class="form-control"
                                                   name="target_amount"
                                                   value="{{ $request->input('target_amount') }}"
                                                   placeholder="Enter yearly target amount">
                                        </div>
                                    </div>
                                </div>
                                <div class="card-footer">
                                    <div class="text-right">
                                        <button type="submit" class="btn btn-sm btn-info">
                                            <i class="fas fa-sync"></i> Update Forecast
                                        </button>
                                    </div>
                                </div>
                            </form>
                        </div>

                        <div class="row">
                            <div class="col-md-6">
                                <div class="card">
                                    <div class="card-header">
                                        <h3 class="card-title">Current Year Overview</h3>
                                        <div class="card-tools">
                                            <button type="button" class="btn btn-tool" data-card-widget="collapse">
                                                <i class="fas fa-minus"></i>
                                            </button>
                                        </div>
                                    </div>
                                    <div class="card-body">
                                        <div class="row">
                                            <div class="col-md-6">
                                                <div class="info-box bg-info">
                                                <span class="info-box-icon">
                                                    <i class="fas fa-dollar-sign"></i>
                                                </span>
                                                    <div class="info-box-content">
                                                        <span class="info-box-text">Monthly Target</span>
                                                        <span class="info-box-number">{{ number_format($monthly_target, 2) }}</span>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <div class="info-box bg-success">
                                                <span class="info-box-icon">
                                                    <i class="fas fa-chart-line"></i>
                                                </span>
                                                    <div class="info-box-content">
                                                        <span class="info-box-text">Required Monthly</span>
                                                        <span class="info-box-number">{{ number_format($balance['monthly_required'], 2) }}</span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="chart">
                                            <canvas id="monthlyChart" height="300"></canvas>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="col-md-6">
                                <div class="card">
                                    <div class="card-header">
                                        <h3 class="card-title">Forecast Analysis</h3>
                                        <div class="card-tools">
                                            <button type="button" class="btn btn-tool" data-card-widget="collapse">
                                                <i class="fas fa-minus"></i>
                                            </button>
                                        </div>
                                    </div>
                                    <div class="card-body">
                                        @foreach($forecast as $branch)
                                            <div class="info-box">
                                            <span class="info-box-icon bg-warning">
                                                <i class="fas fa-hospital"></i>
                                            </span>
                                                <div class="info-box-content">
                                                    <span class="info-box-text">{{ $branch->NAME_EN }}</span>
                                                    <span class="info-box-number">
                                                        Forecast: {{ number_format($branch->forecast_amount ?? 0, 2) }}
                                                    </span>
                                                    <div class="progress">
                                                        <div class="progress-bar" style="width:
                                                        {{ ($monthly_target > 0 && $branch->AVG_AMOUNT > 0) ? min(100, ($branch->AVG_AMOUNT / $monthly_target) * 100) : 0 }}%">
                                                        </div>
                                                    </div>
                                                    <span class="progress-description">
                                                        Monthly Avg: {{ number_format($branch->AVG_AMOUNT ?? 0, 2) }}
                                                    </span>
                                                </div>
                                            </div>
                                        @endforeach
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="card">
                            <div class="card-header">
                                <h3 class="card-title">Monthly Breakdown (2024)</h3>
                                <div class="card-tools">
                                    <button type="button" class="btn btn-tool" data-card-widget="collapse">
                                        <i class="fas fa-minus"></i>
                                    </button>
                                </div>
                            </div>
                            <div class="card-body table-responsive">
                                <table id="monthly-breakdown" class="table table-bordered table-striped">
                                    <thead>
                                    <tr>
                                        <th>Month</th>
                                        <th>Branch</th>
                                        <th>Sales Amount</th>
                                        <th>Orders</th>
                                        <th>Patients</th>
                                        <th>Avg Per Order</th>
                                        <th>Target</th>
                                        <th>Balance</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    @foreach($current as $sale)
                                        <tr>
                                            <td>{{ Carbon\Carbon::createFromFormat('m', $sale->MONTH)->format('F') }}</td>
                                            <td>{{ $sale->NAME_EN }}</td>
                                            <td>{{ number_format($sale->TOTAL_AMOUNT, 2) }}</td>
                                            <td>{{ $sale->TOTALS }}</td>
                                            <td>{{ $sale->PATIENT_COUNT }}</td>
                                            <td>{{ number_format($sale->AVG_PER_ORDER, 2) }}</td>
                                            <td>{{ number_format($monthly_target, 2) }}</td>
                                            <td>
                                                <span class="{{ $sale->TOTAL_AMOUNT >= $monthly_target ? 'text-success' : 'text-danger' }}">
                                                    {{ number_format($monthly_target - $sale->TOTAL_AMOUNT, 2) }}
                                                </span>
                                            </td>
                                        </tr>
                                    @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>

                        <div class="card">
                            <div class="card-header">
                                <h3 class="card-title">Historical Performance</h3>
                                <div class="card-tools">
                                    <button type="button" class="btn btn-tool" data-card-widget="collapse">
                                        <i class="fas fa-minus"></i>
                                    </button>
                                </div>
                            </div>
                            <div class="card-body table-responsive">
                                <table id="historical-data" class="table table-bordered table-striped">
                                    <thead>
                                    <tr>
                                        <th>Year</th>
                                        <th>Branch</th>
                                        <th>Total Sales</th>
                                        <th>Total Orders</th>
                                        <th>Total Patients</th>
                                        <th>Avg Per Order</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    @foreach($historical as $history)
                                        <tr>
                                            <td>{{ Carbon\Carbon::parse($history->PAID_TIME)->format('Y') }}</td>
                                            <td>{{ $history->NAME_EN }}</td>
                                            <td>{{ number_format($history->TOTAL_AMOUNT, 2) }}</td>
                                            <td>{{ $history->TOTALS }}</td>
                                            <td>{{ $history->PATIENT_COUNT }}</td>
                                            <td>{{ number_format($history->AVG_PER_ORDER, 2) }}</td>
                                        </tr>
                                    @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>
@endsection

@section('scripts')
    <script>
        $(function () {
            initializeTables();

            initializeSelects();

            function initializeTables() {
                $('#monthly-breakdown, #historical-data').DataTable({
                    "paging": true,
                    "lengthChange": true,
                    "searching": true,
                    "ordering": true,
                    "info": true,
                    "autoWidth": false,
                    "responsive": true,
                    "pageLength": 25,
                    "buttons": [
                        {
                            extend: 'excel',
                            className: 'btn btn-sm btn-success',
                            text: '<i class="fas fa-file-excel"></i> Excel'
                        },
                        {
                            extend: 'pdf',
                            className: 'btn btn-sm btn-danger',
                            text: '<i class="fas fa-file-pdf"></i> PDF'
                        },
                        {
                            extend: 'print',
                            className: 'btn btn-sm btn-info',
                            text: '<i class="fas fa-print"></i> Print'
                        }
                    ],
                    "dom": "<'row'<'col-sm-12 col-md-6'l><'col-sm-12 col-md-6'f>>" +
                        "<'row'<'col-sm-12'tr>>" +
                        "<'row'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7'p>>" +
                        "<'row'<'col-sm-12'B>>",
                    "language": {
                        "lengthMenu": "Show _MENU_ entries",
                        "zeroRecords": "No data available",
                        "info": "Showing _START_ to _END_ of _TOTAL_ entries",
                        "infoEmpty": "Showing 0 to 0 of 0 entries",
                        "infoFiltered": "(filtered from _MAX_ total entries)"
                    }
                });
            }

            function initializeSelects() {
                $('.rhospital_id').select2({
                    theme: 'bootstrap4',
                    placeholder: 'Select Branch',
                    allowClear: true,
                    width: '100%'
                });
            }

            $(document).on('submit', 'form', function() {
                Swal.fire({
                    title: 'Processing...',
                    html: 'Please wait while we generate the forecast.',
                    allowOutsideClick: false,
                    allowEscapeKey: false,
                    didOpen: () => {
                        Swal.showLoading();
                    }
                });
            });

            $('input[name="year"]').on('change', function() {
                $(this).closest('form').submit();
            });

            $('[data-toggle="tooltip"]').tooltip();
            $('#branch_id').on('change', function() {
                $(this).closest('form').submit();
            });

            function initializeCharts() {
                try {
                    var monthlyData = @json($current);
                    var forecastData = @json($forecast);
                    var monthlyTarget = {{ $monthly_target ?? 0 }};

                    var monthlyCtx = document.getElementById('monthlyChart').getContext('2d');
                    new Chart(monthlyCtx, {
                        type: 'line',
                        data: {
                            labels: monthlyData.map(item => moment(item.MONTH, 'MM').format('MMMM')),
                            datasets: [{
                                label: 'Sales Amount',
                                data: monthlyData.map(item => item.TOTAL_AMOUNT),
                                borderColor: '#17a2b8',
                                backgroundColor: 'rgba(23, 162, 184, 0.1)',
                                borderWidth: 2,
                                fill: true,
                                tension: 0.4
                            }, {
                                label: 'Monthly Target',
                                data: Array(monthlyData.length).fill(monthlyTarget),
                                borderColor: '#dc3545',
                                borderWidth: 2,
                                borderDash: [5, 5],
                                fill: false
                            }]
                        },
                        options: {
                            responsive: true,
                            maintainAspectRatio: false,
                            plugins: {
                                legend: {
                                    position: 'top',
                                },
                                title: {
                                    display: true,
                                    text: 'Monthly Sales Performance'
                                }
                            },
                            scales: {
                                y: {
                                    beginAtZero: true,
                                    ticks: {
                                        callback: function(value) {
                                            return new Intl.NumberFormat('en-US', {
                                                style: 'currency',
                                                currency: 'SAR'
                                            }).format(value);
                                        }
                                    }
                                }
                            },
                            interaction: {
                                intersect: false,
                                mode: 'index'
                            }
                        }
                    });

                    var forecastCtx = document.getElementById('forecastChart').getContext('2d');
                    new Chart(forecastCtx, {
                        type: 'bar',
                        data: {
                            labels: forecastData.map(item => item.NAME_EN),
                            datasets: [{
                                label: 'Average Monthly Sales',
                                data: forecastData.map(item => item.AVG_AMOUNT),
                                backgroundColor: '#28a745',
                                borderColor: '#28a745',
                                borderWidth: 1
                            }, {
                                label: 'Forecast Amount',
                                data: forecastData.map(item => item.forecast_amount),
                                backgroundColor: '#ffc107',
                                borderColor: '#ffc107',
                                borderWidth: 1
                            }]
                        },
                        options: {
                            responsive: true,
                            maintainAspectRatio: false,
                            plugins: {
                                legend: {
                                    position: 'top',
                                },
                                title: {
                                    display: true,
                                    text: 'Branch-wise Forecast Analysis'
                                }
                            },
                            scales: {
                                y: {
                                    beginAtZero: true,
                                    ticks: {
                                        callback: function(value) {
                                            return new Intl.NumberFormat('en-US', {
                                                style: 'currency',
                                                currency: 'SAR'
                                            }).format(value);
                                        }
                                    }
                                }
                            }
                        }
                    });
                } catch (error) {
                    console.error('Error initializing charts:', error);
                    Swal.fire({
                        icon: 'error',
                        title: 'Chart Error',
                        text: 'There was an error initializing the charts. Please try refreshing the page.'
                    });
                }
            }

            initializeCharts();
        });
    </script>
@endsection