@extends('dashboard.layouts.app')

@section('content')
<div class="container-fluid px-3">
    <div class="card shadow-sm">
        <div class="card-header">
            <i class="bi bi-graph-up-arrow me-2"></i> Period Comparison (Two Columns)
        </div>

        <div class="card-body">
            <!-- Filter Form -->
            <form method="GET" action="{{ route('profit_loss.index') }}" class="mb-3">
                <div class="row g-3">
                    <!-- Period B (Left) -->
                    <div class="col-12 col-md-6">
                        <div class="card border-primary-subtle h-100">
                            <div class="card-body p-3">
                                <h6 class="mb-3 text-primary">Period B (Left)</h6>
                                <div class="row g-2">
                                    <div class="col">
                                        <label class="form-label">From</label>
                                        <input type="date" name="from_date_b" class="form-control form-control-sm"
                                               value="{{ old('from_date_b', $fromB) }}">
                                    </div>
                                    <div class="col">
                                        <label class="form-label">To</label>
                                        <input type="date" name="to_date_b" class="form-control form-control-sm"
                                               value="{{ old('to_date_b', $toB) }}">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Period A (Right) -->
                    <div class="col-12 col-md-6">
                        <div class="card border-success-subtle h-100">
                            <div class="card-body p-3">
                                <h6 class="mb-3 text-success">Period A (Right)</h6>
                                <div class="row g-2">
                                    <div class="col">
                                        <label class="form-label">From</label>
                                        <input type="date" name="from_date_a" class="form-control form-control-sm"
                                               value="{{ old('from_date_a', $fromA) }}">
                                    </div>
                                    <div class="col">
                                        <label class="form-label">To</label>
                                        <input type="date" name="to_date_a" class="form-control form-control-sm"
                                               value="{{ old('to_date_a', $toA) }}">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="mt-3 text-end">
                    <button type="submit" class="btn btn-primary">Show Comparison</button>
                </div>
            </form>


            <div class="d-flex gap-2 my-3">
    <a href="{{ route('profit_loss.export.pdf', request()->query()) }}" class="btn btn-danger btn-sm">
        <i class="bi bi-filetype-pdf"></i> PDF
    </a>

    <a href="{{ route('profit_loss.export.excel', request()->query()) }}" class="btn btn-success btn-sm">
        <i class="bi bi-file-earmark-spreadsheet"></i> Excel
    </a>

    <a href="{{ route('profit_loss.export.csv', request()->query()) }}" class="btn btn-secondary btn-sm">
        <i class="bi bi-filetype-csv"></i> CSV
    </a>
</div>






            <!-- Comparison Summary -->
            @if (($fromA && $toA) || ($fromB && $toB))
                @php
                    $incomeA = collect($dailyA ?? [])->sum('income');
                    $expenseA = collect($dailyA ?? [])->sum('expense');
                    $totalA = $incomeA - $expenseA;

                    $incomeB = collect($dailyB ?? [])->sum('income');
                    $expenseB = collect($dailyB ?? [])->sum('expense');
                    $totalB = $incomeB - $expenseB;

                    $difference = $totalA - $totalB;
                    $percentage = $totalB != 0 
                        ? ($difference / $totalB) * 100 
                        : ($difference == 0 ? 0 : ($difference > 0 ? 999999 : -999999));
                @endphp

                <div class="card mb-3 border-0 shadow-sm">
                    <div class="card-body">
                        <h5 class="card-title mb-3">Comparison Summary</h5>

                        @if($difference > 0)
                            <p class="mb-2">
                                <strong>Period A</strong> is
                                <span class="text-success fw-bold">{{ number_format($difference, 2) }}</span> EGP
                                <span class="text-success">higher</span> than <strong>Period B</strong>.
                            </p>
                        @elseif($difference < 0)
                            <p class="mb-2">
                                <strong>Period A</strong> is
                                <span class="text-danger fw-bold">{{ number_format(abs($difference), 2) }}</span> EGP
                                <span class="text-danger">lower</span> than <strong>Period B</strong>.
                            </p>
                        @else
                            <p class="mb-2 text-info"><strong>Both periods have the same net profit/loss.</strong></p>
                        @endif

                        <p class="mb-0">
                            Percentage Change:
                            <strong class="{{ $percentage >= 0 ? 'text-success' : 'text-danger' }}">
                                {{ $percentage >= 0 ? '+' : '' }}{{ number_format($percentage, 2) }}%
                            </strong>
                        </p>
                    </div>
                </div>
            @endif

            <!-- Two Columns: Period B (Left) | Period A (Right) -->
            <div class="row">
                <!-- Period B (Left) -->
                <div class="col-12 col-lg-6 mb-3">
                    @include('dashboard.profit_loss.period-column', [
                        'period' => 'B',
                        'title' => 'Period B (Left)',
                        'daily' => $dailyB ?? [],
                        'from' => $fromB,
                        'to' => $toB,
                        'chartId' => 'chartB',
                        'borderColor' => 'border-primary-subtle'
                    ])
                </div>

                <!-- Period A (Right) -->
                <div class="col-12 col-lg-6 mb-3">
                    @include('dashboard.profit_loss.period-column', [
                        'period' => 'A',
                        'title' => 'Period A (Right)',
                        'daily' => $dailyA ?? [],
                        'from' => $fromA,
                        'to' => $toA,
                        'chartId' => 'chartA',
                        'borderColor' => 'border-success-subtle'
                    ])
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function () {
        @if(isset($dailyA) && count($dailyA))
            createChart('chartA', {!! json_encode(array_keys($dailyA)) !!}, 
                {!! json_encode(array_values(array_map(fn($d) => $d['income'] ?? 0, $dailyA))) !!},
                {!! json_encode(array_values(array_map(fn($d) => $d['expense'] ?? 0, $dailyA))) !!});
        @endif

        @if(isset($dailyB) && count($dailyB))
            createChart('chartB', {!! json_encode(array_keys($dailyB)) !!}, 
                {!! json_encode(array_values(array_map(fn($d) => $d['income'] ?? 0, $dailyB))) !!},
                {!! json_encode(array_values(array_map(fn($d) => $d['expense'] ?? 0, $dailyB))) !!});
        @endif
    });

    function createChart(canvasId, labels, incomeData, expenseData) {
        new Chart(document.getElementById(canvasId), {
            type: 'bar',
            data: {
                labels: labels,
                datasets: [
                    { label: 'Income', data: incomeData, backgroundColor: '#198754' },
                    { label: 'Expense', data: expenseData, backgroundColor: '#dc3545' }
                ]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: { legend: { position: 'bottom' } },
                scales: { y: { beginAtZero: true } }
            }
        });
    }
</script>
@endpush