@extends('layouts.app')

@section('title', 'Invoice Details | Institution Axis')

@section('sidebar-menu')
    @include('schooladmin.partials.sidebar')
@endsection

@section('sidebar-footer')
    <p>{{ auth()->user()->school?->name ?? 'Institution Axis' }}</p>
@endsection

@section('breadcrumb')
    <span><a href="{{ route('schooladmin.dashboard') }}">Home</a></span> / <span>Finance</span> / <span><a href="{{ route('schooladmin.finance.invoices.index') }}">Invoices</a></span> / <span class="active-page">Details</span>
@endsection

@section('content')
<div class="container-fluid">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h3 class="fw-bold text-dark mb-0">Invoice {{ $invoice->invoice_number }}</h3>
            <span class="badge @if($invoice->status == 'paid') bg-success @elseif($invoice->status == 'partial') bg-info @else bg-warning @endif rounded-pill px-3">
                {{ strtoupper($invoice->status) }}
            </span>
        </div>
        <div class="d-print-none">
            <button onclick="window.print()" class="btn btn-outline-secondary rounded-pill px-4 me-2">
                <i class="fas fa-print me-2"></i>Print Invoice
            </button>
            @if($invoice->status != 'paid')
            <a href="{{ route('schooladmin.finance.payments.create', ['invoice_id' => $invoice->id]) }}" class="btn btn-primary rounded-pill px-4">
                <i class="fas fa-cash-register me-2"></i>Record Payment
            </a>
            @endif
        </div>
    </div>

    <div class="row g-4 invoice-print-area">
        <div class="col-lg-8">
            <div class="card shadow-sm border-0 rounded-4 overflow-hidden">
                <div class="card-body p-5">
                    <div class="row mb-5">
                        <div class="col-md-6">
                            <h5 class="fw-bold text-primary mb-1">{{ Auth::user()->school->name }}</h5>
                            <p class="text-muted small mb-0">School Billing Department</p>
                            <p class="text-muted small mb-0">Due Date: {{ date('M d, Y', strtotime($invoice->due_date)) }}</p>
                        </div>
                        <div class="col-md-6 text-md-end">
                            <h6 class="fw-bold">Bill To:</h6>
                            <h5 class="mb-1">{{ $invoice->student->fullName() }}</h5>
                            <p class="text-muted small mb-0">Admission: {{ $invoice->student->admission_number }}</p>
                            <p class="text-muted small mb-0">Class: {{ $invoice->student->schoolClass->name }} ({{ $invoice->student->schoolClass->stream }})</p>
                        </div>
                    </div>

                    <div class="table-responsive">
                        <table class="table table-borderless">
                            <thead class="border-bottom border-top">
                                <tr>
                                    <th class="py-3 ps-0">Fee Component</th>
                                    <th class="py-3 text-end pe-0">Amount (KES)</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($invoice->feeStructure->items as $item)
                                <tr>
                                    <td class="py-3 ps-0">{{ $item->name }}</td>
                                    <td class="py-3 text-end pe-0 fw-semibold text-dark">{{ number_format($item->amount, 2) }}</td>
                                </tr>
                                @endforeach
                            </tbody>
                            <tfoot class="border-top">
                                <tr>
                                    <td class="py-3 ps-0 h6 mb-0">Subtotal</td>
                                    <td class="py-3 text-end pe-0 h6 mb-0">{{ number_format($invoice->total_amount, 2) }}</td>
                                </tr>
                                <tr class="text-success fw-bold">
                                    <td class="py-3 ps-0">Paid to Date</td>
                                    <td class="py-3 text-end pe-0">- {{ number_format($invoice->paid_amount, 2) }}</td>
                                </tr>
                                <tr class="bg-light">
                                    <td class="py-3 ps-3 rounded-start h5 mb-0 fw-bold">Balance Due</td>
                                    <td class="py-3 text-end pe-3 rounded-end h5 mb-0 fw-bold text-primary">KES {{ number_format($invoice->balance(), 2) }}</td>
                                </tr>
                            </tfoot>
                        </table>
                    </div>

                    @if($invoice->payments->count() > 0)
                    <div class="mt-5">
                        <h6 class="fw-bold border-bottom pb-2">Payment History</h6>
                        <table class="table table-sm table-borderless">
                            <thead>
                                <tr class="text-muted small">
                                    <th>Date</th>
                                    <th>Reference</th>
                                    <th>Method</th>
                                    <th class="text-end">Amount Paid</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($invoice->payments as $payment)
                                <tr>
                                    <td>{{ date('M d, Y', strtotime($payment->payment_date)) }}</td>
                                    <td>{{ $payment->reference_number }}</td>
                                    <td><span class="text-capitalize">{{ str_replace('_', ' ', $payment->payment_method) }}</span></td>
                                    <td class="text-end fw-bold">KES {{ number_format($payment->amount, 2) }}</td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                    @endif
                </div>
                <div class="card-footer bg-light p-4 text-center border-0">
                    <p class="text-muted small mb-0 font-italic">Thank you for your payment. This is a computer-generated invoice.</p>
                </div>
            </div>
        </div>

        <div class="col-lg-4 d-print-none">
            <div class="card border-0 shadow-sm rounded-4 mb-4">
                <div class="card-body p-4">
                    <h6 class="fw-bold mb-3">Quick Summary</h6>
                    <div class="d-flex justify-content-between mb-2">
                        <span class="text-muted">Total Billing:</span>
                        <span class="fw-bold">KES {{ number_format($invoice->total_amount, 2) }}</span>
                    </div>
                    <div class="d-flex justify-content-between mb-2">
                        <span class="text-muted">Total Paid:</span>
                        <span class="fw-bold text-success">KES {{ number_format($invoice->paid_amount, 2) }}</span>
                    </div>
                    <hr>
                    <div class="d-flex justify-content-between mb-0">
                        <span class="h6 mb-0">Outstanding:</span>
                        <span class="h6 mb-0 fw-bold text-danger">KES {{ number_format($invoice->balance(), 2) }}</span>
                    </div>
                </div>
            </div>
            
            <div class="card border-0 shadow-sm rounded-4">
                <div class="card-body p-4">
                    <h6 class="fw-bold mb-3">Parent Details</h6>
                    <div class="d-flex align-items-center mb-3">
                        <i class="fas fa-user-friends fa-2x text-muted me-3"></i>
                        <div>
                            <p class="mb-0 small text-muted">Primary Phone</p>
                            <p class="mb-0 fw-semibold">{{ $invoice->student->parent_phone ?? 'Not Set' }}</p>
                        </div>
                    </div>
                    <!-- Future: Send Reminder via SMS Button -->
                    <button class="btn btn-outline-primary btn-sm rounded-pill w-100 mb-2">
                        <i class="fas fa-sms me-2"></i>Send SMS Reminder
                    </button>
                    <button class="btn btn-outline-info btn-sm rounded-pill w-100">
                        <i class="fas fa-envelope me-2"></i>Email Invoice
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
@media print {
    .sidebar, .top-navbar, .footer-minimal, .btn-group, .d-print-none {
        display: none !important;
    }
    .main-content {
        margin-left: 0 !important;
        padding: 0 !important;
    }
    .container-fluid {
        width: 100% !important;
        max-width: 100% !important;
    }
    .invoice-print-area {
        margin: 0 !important;
    }
    .col-lg-8 {
        width: 100% !important;
    }
    .card {
        box-shadow: none !important;
        border: 1px solid #eee !important;
    }
}
</style>
@endsection
