@extends('layouts.app')

@section('title', 'Profit and Loss')

@section('content')
<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="{{ route('reports.index') }}">Reports</a></li>
    <li class="breadcrumb-item active" aria-current="page">Profit and Loss</li>
  </ol>
</nav>

<div class="card border-0 shadow-sm rounded-4 mb-4">
    <div class="card-body p-4">
        <form action="{{ route('reports.profit_loss') }}" method="GET" class="row g-3 align-items-end">
            <div class="col-md-4">
                <label class="form-label small fw-bold text-muted text-uppercase">From Date</label>
                <input type="date" name="start_date" class="form-control" value="{{ $startDate }}">
            </div>
            <div class="col-md-4">
                <label class="form-label small fw-bold text-muted text-uppercase">To Date</label>
                <input type="date" name="end_date" class="form-control" value="{{ $endDate }}">
            </div>
            <div class="col-md-4">
                <button type="submit" class="btn btn-primary w-100">Run Report</button>
            </div>
        </form>
    </div>
</div>

<div class="card border-0 shadow rounded-4 overflow-hidden mb-5">
    <div class="card-header bg-white p-5 border-0 text-center">
        <h2 class="fw-bold mb-1 text-primary">Profit and Loss</h2>
        <p class="text-muted mb-0">From {{ date('d M Y', strtotime($startDate)) }} to {{ date('d M Y', strtotime($endDate)) }}</p>
    </div>
    
    <div class="card-body p-5 pt-0">
        <div class="table-responsive">
            <table class="table table-borderless align-middle">
                <thead>
                    <tr class="border-bottom">
                        <th class="ps-0 py-3 text-muted small fw-bold text-uppercase">Description</th>
                        <th class="text-end pe-0 py-3 text-muted small fw-bold text-uppercase">Total Amount</th>
                    </tr>
                </thead>
                <tbody>
                    <!-- Operating Income -->
                    <tr>
                        <td class="ps-0 py-3 fw-bold h5 text-primary">Operating Income</td>
                        <td class="text-end pe-0 py-3 fw-bold h5 text-primary"></td>
                    </tr>
                    <tr>
                        <td class="ps-4 py-2">Sales Income (from Invoices)</td>
                        <td class="text-end pe-0 py-2">{{ formatCurrency($totalIncome) }}</td>
                    </tr>
                    <tr class="border-bottom">
                        <td class="ps-0 py-3 fw-bold">Total Operating Income</td>
                        <td class="text-end pe-0 py-3 fw-bold">{{ formatCurrency($totalIncome) }}</td>
                    </tr>

                    <!-- Operating Expense -->
                    <tr>
                        <td class="ps-0 py-3 fw-bold h5 text-danger mt-4 d-block">Operating Expense</td>
                        <td class="text-end pe-0 py-3 fw-bold h5 text-danger"></td>
                    </tr>
                    <tr>
                        <td class="ps-4 py-2">Purchases & Expenses (from Bills)</td>
                        <td class="text-end pe-0 py-2">{{ formatCurrency($totalExpenses) }}</td>
                    </tr>
                    <tr class="border-bottom">
                        <td class="ps-0 py-3 fw-bold">Total Operating Expense</td>
                        <td class="text-end pe-0 py-3 fw-bold">{{ formatCurrency($totalExpenses) }}</td>
                    </tr>

                    <!-- Net Profit -->
                    <tr class="bg-light">
                        <td class="ps-3 py-4 fw-bold h4 mb-0">NET PROFIT</td>
                        <td class="text-end pe-3 py-4 fw-bold h4 mb-0 {{ $netProfit >= 0 ? 'text-success' : 'text-danger' }}">
                            {{ formatCurrency($netProfit) }}
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>

        <div class="mt-5 p-4 bg-light rounded-4 text-center d-print-none">
            <button onclick="window.print()" class="btn btn-outline-secondary btn-sm px-4 rounded-pill">
                <i class="fas fa-print me-2"></i> Print Report
            </button>
        </div>
    </div>
</div>

<style>
@media print {
    body { background: white; }
    .navbar, .d-print-none, .breadcrumb, form { display: none !important; }
    #sidebar-wrapper { display: none !important; }
    #page-content-wrapper { padding-left: 0 !important; width: 100% !important; }
    .card { border: none !important; box-shadow: none !important; }
    .card-body { padding: 0 !important; }
}
</style>
@endsection