@extends('layouts.app')

@section('title', 'Payment Detail')
@section('page-title', 'Payment Details')

@section('content')
<div class="row mb-4">
    <div class="col-12">
        <div class="d-flex justify-content-between align-items-center bg-white p-3 rounded-4 shadow-sm">
            <div>
                <h4 class="mb-0 fw-bold">{{ $payment->payment_number }}</h4>
                <span class="text-muted small text-uppercase fw-bold">Payment Date: {{ $payment->payment_date }}</span>
            </div>
            <div class="d-flex gap-2">
                <button onclick="window.print()" class="btn btn-outline-secondary btn-sm">
                    <i class="fas fa-print"></i> Print
                </button>
                <form action="{{ route('payments.destroy', $payment->id) }}" method="POST" onsubmit="return confirm('Are you sure?')">
                    @csrf
                    @method('DELETE')
                    <button type="submit" class="btn btn-outline-danger btn-sm">
                        <i class="fas fa-trash"></i> Delete
                    </button>
                </form>
                <a href="{{ route('payments.index') }}" class="btn btn-light border btn-sm">Back to List</a>
            </div>
        </div>
    </div>
</div>

<div class="row justify-content-center">
    <div class="col-md-8">
        <div class="card border-0 shadow-sm rounded-4 overflow-hidden">
            <div class="bg-primary p-4 text-white text-center">
                <div class="mb-2">
                    <i class="fas fa-check-circle fa-4x mb-3"></i>
                </div>
                <h2 class="mb-1">Payment Received</h2>
                <h1 class="display-5 fw-bold mb-0">{{ formatCurrency($payment->amount) }}</h1>
            </div>
            <div class="card-body p-5">
                <div class="row g-4">
                    <div class="col-sm-6">
                        <p class="text-muted small text-uppercase fw-bold mb-1">Received From</p>
                        <h5 class="fw-bold mb-0">{{ $payment->customer->name }}</h5>
                        @if($payment->customer->company_name)
                            <p class="text-muted mb-0 small">{{ $payment->customer->company_name }}</p>
                        @endif
                    </div>
                    <div class="col-sm-6 text-sm-end">
                        <p class="text-muted small text-uppercase fw-bold mb-1">Payment Mode</p>
                        <h5 class="fw-bold mb-0">{{ ucfirst($payment->payment_mode) }}</h5>
                        @if($payment->reference_number)
                            <p class="text-muted mb-0 small">Ref: {{ $payment->reference_number }}</p>
                        @endif
                    </div>
                    
                    <div class="col-12">
                        <hr class="my-4 opacity-10">
                    </div>

                    <div class="col-12">
                        <p class="text-muted small text-uppercase fw-bold mb-3">Invoice Details</p>
                        <div class="bg-light p-4 rounded-4 border">
                            <div class="row align-items-center">
                                <div class="col">
                                    <h6 class="mb-1 fw-bold">Invoice {{ $payment->invoice->invoice_number }}</h6>
                                    <span class="text-muted small">Dated: {{ $payment->invoice->invoice_date }}</span>
                                </div>
                                <div class="col-auto text-end">
                                    <div class="text-muted small">Total: {{ formatCurrency($payment->invoice->total_amount) }}</div>
                                    <div class="fw-bold text-dark">Amount Paid: {{ formatCurrency($payment->amount) }}</div>
                                </div>
                            </div>
                        </div>
                    </div>

                    @if($payment->notes)
                    <div class="col-12 mt-4">
                        <p class="text-muted small text-uppercase fw-bold mb-2">Notes</p>
                        <p class="bg-light p-3 rounded-3 border text-muted mb-0 italic">
                            "{{ $payment->notes }}"
                        </p>
                    </div>
                    @endif
                </div>
            </div>
            <div class="card-footer bg-light border-0 p-4 text-center">
                <p class="text-muted small mb-0">Thank you for your business!</p>
            </div>
        </div>
    </div>
</div>
@endsection