@extends('dashboard.layouts.app')

@section('content')
    <!-- Success/Error Messages -->
    @if (session('success'))
        <div class="alert alert-success alert-dismissible fade show" role="alert">
            <i class="bi bi-check-circle me-2"></i>{{ session('success') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    @endif

    @if ($errors->any())
        <div class="alert alert-danger alert-dismissible fade show" role="alert">
            <ul class="mb-0">
                @foreach ($errors->all() as $error)
                    <li><i class="bi bi-exclamation-triangle me-1"></i>{{ $error }}</li>
                @endforeach
            </ul>
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    @endif

    <div class="container-fluid px-4">
        <div class="card shadow-sm">
            <div class="card-header">
                <div class="mb-0"><i class="bi bi-graph-up-arrow me-2"></i>Profit & Loss Report</div>
            </div>
            <div class="card-body">
                <form method="POST" action="{{ route('search') }}" class="row g-3">
                    @csrf
                    <div class="col-md-6">
                        <label for="from_date" class="form-label">From Date</label>
                        <input type="date" name="from_date" id="from_date" class="form-control"
                            value="{{ old('from_date') }}" required>
                        @error('from_date')
                            <div class="text-danger small mt-1">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="col-md-6">
                        <label for="to_date" class="form-label">To Date</label>
                        <input type="date" name="to_date" id="to_date" class="form-control"
                            value="{{ old('to_date') }}" required>
                        @error('to_date')
                            <div class="text-danger small mt-1">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="col-12 text-end">
                        <button type="submit" class="btn btn-primary px-4">
                            <i class="bi bi-search me-1"></i>Search
                        </button>
                    </div>
                </form>

                @if (isset($totalIncome))
                    <div class="card mt-4">
                        <div class="card-header">
                            <div class="mb-0">Results from <strong>{{ $fromDate }}</strong> to
                                <strong>{{ $toDate }}</strong>
                            </div>
                        </div>
                        <div class="card-body">
                            <div class="row text-center">
                                <div class="col-md-4">
                                    <div class="text-muted">Total Income</div>
                                    <p class="fs-5 text-primary">{{ number_format($totalIncome, 2) }}</p>
                                </div>
                                <div class="col-md-4">
                                    <div class="text-muted">Total Expense</div>
                                    <p class="fs-5 text-danger">{{ number_format($totalExpense, 2) }}</p>
                                </div>
                                <div class="col-md-4">
                                    <div class="text-muted">Profit / Loss</div>
                                    <p class="fs-5 {{ $profitLoss >= 0 ? 'text-success' : 'text-danger' }}">
                                        {{ number_format(abs($profitLoss), 2) }}
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Chart -->
                    <div class="d-flex justify-content-center my-5">
                        <canvas id="profitLossChart" style="width:300px; height:300px;"></canvas>
                    </div>
                    
                @endif
            </div>
        </div>
    </div>

    @if (isset($totalIncome))
        @push('scripts')
            <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
            <script>
                const ctx = document.getElementById('profitLossChart').getContext('2d');
                new Chart(ctx, {
                    type: 'doughnut',
                    data: {
                        labels: ['Income', 'Expense'],
                        datasets: [{
                            label: 'Amount',
                            data: [{{ $totalIncome }}, {{ $totalExpense }}],
                            backgroundColor: ['#198754', '#dc3545'],
                            borderColor: ['#198754', '#dc3545'],
                            borderWidth: 1
                        }]
                    },
                    options: {
                        responsive: true,
                        maintainAspectRatio: false, // Important to make custom height/width work
                        plugins: {
                            legend: {
                                display: true,
                                position: 'bottom',
                                labels: {
                                    font: {
                                        size: 10 // Smaller font for legend
                                    }
                                }
                            }
                        }
                    }

               

                });
            </script>
        @endpush
    @endif

    @push('styles')
        <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet">
        <style>
            .form-label {
                font-weight: 500;
            }

            canvas {
                background-color: #fff;
                border-radius: 8px;
                box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
            }
        </style>
    @endpush
@endsection