<x-app-layout>
    <x-slot name="header">{{ __('monthly_profit_loss') }}</x-slot>

    <div class="card shadow-sm mb-4">
        <div class="card-body">
            <form method="GET" action="{{ route('reports.monthly') }}" class="row g-2 align-items-end">
                <div class="col-auto">
                    <label for="month" class="form-label">{{ __('Month') }}</label>
                    <input type="month" id="month" name="month" class="form-control" value="{{ $month }}">
                </div>
                <div class="col-auto">
                    <button type="submit" class="btn btn-primary">{{ __('Filter') }}</button>
                    <a href="{{ route('reports.monthly.pdf', ['month' => $month]) }}" class="btn btn-outline-danger ms-2">
                        <i class="bi bi-file-earmark-pdf"></i> PDF
                    </a>
                </div>
            </form>
        </div>
    </div>

    <div class="row g-3 mb-4">
        <div class="col-md-3">
            <div class="card text-bg-success shadow-sm">
                <div class="card-body text-center">
                    <h6 class="card-title">{{ __('sales') }}</h6>
                    <h3>{{ number_format($sales, 2) }}</h3>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card text-bg-warning shadow-sm">
                <div class="card-body text-center">
                    <h6 class="card-title">{{ __('purchases') }}</h6>
                    <h3>{{ number_format($purchases, 2) }}</h3>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card text-bg-danger shadow-sm">
                <div class="card-body text-center">
                    <h6 class="card-title">{{ __('expenses') }}</h6>
                    <h3>{{ number_format($expenses, 2) }}</h3>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card {{ $profit >= 0 ? 'text-bg-primary' : 'text-bg-secondary' }} shadow-sm">
                <div class="card-body text-center">
                    <h6 class="card-title">{{ __('Profit / Loss') }}</h6>
                    <h3>{{ number_format($profit, 2) }}</h3>
                </div>
            </div>
        </div>
    </div>

    <div class="card shadow-sm">
        <div class="card-header fw-bold">{{ __('monthly_profit_loss') }} — {{ $month }}</div>
        <div class="card-body p-0">
            <table class="table table-bordered mb-0">
                <tbody>
                    <tr>
                        <td>{{ __('Total Sales') }}</td>
                        <td class="text-end text-success fw-bold">{{ number_format($sales, 2) }}</td>
                    </tr>
                    <tr>
                        <td>{{ __('Total Purchases') }}</td>
                        <td class="text-end text-warning fw-bold">{{ number_format($purchases, 2) }}</td>
                    </tr>
                    <tr>
                        <td>{{ __('Total Expenses') }}</td>
                        <td class="text-end text-danger fw-bold">{{ number_format($expenses, 2) }}</td>
                    </tr>
                    <tr class="table-dark">
                        <td><strong>{{ $profit >= 0 ? __('Net Profit') : __('Net Loss') }}</strong></td>
                        <td class="text-end fw-bold {{ $profit >= 0 ? 'text-success' : 'text-danger' }}">
                            {{ number_format(abs($profit), 2) }}
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>

</x-app-layout>
