@extends('layouts.admin')

@section('heading', 'Payment #' . $payment->id)

@section(
    'subheading',
    'Payment details for Order #' . $payment->order_id
)

@section('actions')

    <div class="flex items-center gap-3">

        <a
            href="{{ route('payments.edit', $payment->id) }}"
            class="text-sm px-3 py-2 rounded-lg"
            style="background:#FFF9F0; color:#B45309;"
        >
            ✏️ Edit
        </a>

        <a
            href="{{ route('payments.index') }}"
            class="text-sm"
            style="color:#6b6470;"
        >
            ← Back to payments
        </a>

    </div>

@endsection


@section('content')

@if(session('status'))

    <div
        class="mb-4 text-sm rounded-lg px-4 py-3"
        style="background:#E1F5EE; color:#0F6E56;"
    >
        {{ session('status') }}
    </div>

@endif


<div class="grid grid-cols-3 gap-6">

    <!-- =====================================================
         PAYMENT DETAILS
    ====================================================== -->

    <div class="col-span-2">

        <div class="card p-6">

            <p
                class="text-xs font-medium mb-5"
                style="color:#1A1625;"
            >
                Payment details
            </p>


            <div class="grid grid-cols-2 gap-x-8 gap-y-5">

                <!-- PAYMENT ID -->

                <div>

                    <p
                        class="text-xs mb-1"
                        style="color:#a19a8f;"
                    >
                        Payment ID
                    </p>

                    <p
                        class="text-sm font-medium"
                        style="color:#1A1625;"
                    >
                        #{{ $payment->id }}
                    </p>

                </div>


                <!-- ORDER -->

                <div>

                    <p
                        class="text-xs mb-1"
                        style="color:#a19a8f;"
                    >
                        Order
                    </p>

                    <a
                        href="{{ route('orders.show', $payment->order_id) }}"
                        class="text-sm font-medium"
                        style="color:#5E35B1;"
                    >
                        Order #{{ $payment->order_id }}
                    </a>

                </div>


                <!-- CUSTOMER -->

                <div>

                    <p
                        class="text-xs mb-1"
                        style="color:#a19a8f;"
                    >
                        Customer
                    </p>

                    <p
                        class="text-sm font-medium"
                        style="color:#1A1625;"
                    >
                        {{ optional(optional($payment->order)->customer)->name ?? '—' }}
                    </p>

                </div>


                <!-- AMOUNT -->

                <div>

                    <p
                        class="text-xs mb-1"
                        style="color:#a19a8f;"
                    >
                        Amount
                    </p>

                    <p
                        class="text-lg font-semibold"
                        style="color:#0F6E56;"
                    >
                        ₹{{ number_format($payment->amount, 2) }}
                    </p>

                </div>


                <!-- PAYMENT TYPE -->

                <div>

                    <p
                        class="text-xs mb-1"
                        style="color:#a19a8f;"
                    >
                        Payment type
                    </p>

                    <span
                        class="inline-block text-xs px-2.5 py-1 rounded-full"
                        style="background:#EEEDFE; color:#5E35B1;"
                    >
                        {{ ucfirst($payment->payment_type ?? '—') }}
                    </span>

                </div>


                <!-- MODE -->

                <div>

                    <p
                        class="text-xs mb-1"
                        style="color:#a19a8f;"
                    >
                        Payment mode
                    </p>

                    <span
                        class="inline-block text-xs px-2.5 py-1 rounded-full"
                        style="background:#FFF9F0; color:#6b6470;"
                    >
                        {{ strtoupper($payment->mode ?? '—') }}
                    </span>

                </div>


                <!-- PAYMENT DATE -->

                <div>

                    <p
                        class="text-xs mb-1"
                        style="color:#a19a8f;"
                    >
                        Payment date
                    </p>

                    <p
                        class="text-sm"
                        style="color:#1A1625;"
                    >
                        {{ $payment->payment_date
                            ? $payment->payment_date->format('d M Y')
                            : '—'
                        }}
                    </p>

                </div>


                <!-- CREATED DATE -->

                <div>

                    <p
                        class="text-xs mb-1"
                        style="color:#a19a8f;"
                    >
                        Recorded at
                    </p>

                    <p
                        class="text-sm"
                        style="color:#1A1625;"
                    >
                        {{ $payment->created_at
                            ? $payment->created_at->format('d M Y, h:i A')
                            : '—'
                        }}
                    </p>

                </div>


                <!-- REFERENCE -->

                <div>

                    <p
                        class="text-xs mb-1"
                        style="color:#a19a8f;"
                    >
                        Reference number
                    </p>

                    <p
                        class="text-sm"
                        style="color:#1A1625;"
                    >
                        {{ $payment->reference_number ?? '—' }}
                    </p>

                </div>


                <!-- COLLECTED BY -->

                <div>

                    <p
                        class="text-xs mb-1"
                        style="color:#a19a8f;"
                    >
                        Collected by
                    </p>

                    <p
                        class="text-sm"
                        style="color:#1A1625;"
                    >
                        {{ optional($payment->collector)->name ?? '—' }}
                    </p>

                </div>


                <!-- BALANCE AFTER -->

                <div>

                    <p
                        class="text-xs mb-1"
                        style="color:#a19a8f;"
                    >
                        Balance after payment
                    </p>

                    <p
                        class="text-sm font-medium"
                        style="color:#C2185B;"
                    >
                        ₹{{ number_format($payment->balance_after_payment ?? 0, 2) }}
                    </p>

                </div>

            </div>


            <!-- NOTES -->

            @if($payment->notes)

                <div
                    class="mt-6 pt-5"
                    style="border-top:1px dashed #e6e1d8;"
                >

                    <p
                        class="text-xs mb-1"
                        style="color:#a19a8f;"
                    >
                        Notes
                    </p>

                    <p
                        class="text-sm"
                        style="color:#6b6470;"
                    >
                        {{ $payment->notes }}
                    </p>

                </div>

            @endif

        </div>

    </div>


    <!-- =====================================================
         ORDER SUMMARY
    ====================================================== -->

    <div>

        <div class="card p-6">

            <p
                class="text-xs font-medium mb-4"
                style="color:#1A1625;"
            >
                Order summary
            </p>


            <div class="space-y-3 text-sm">

                <div class="flex justify-between">

                    <span style="color:#6b6470;">
                        Order total
                    </span>

                    <span class="font-medium">
                        ₹{{ number_format($payment->order->total_amount ?? 0, 2) }}
                    </span>

                </div>


                <div class="flex justify-between">

                    <span style="color:#6b6470;">
                        Paid so far
                    </span>

                    <span style="color:#0F6E56;">
                        ₹{{ number_format($payment->order->advance_amount ?? 0, 2) }}
                    </span>

                </div>


                <div
                    class="flex justify-between pt-3"
                    style="border-top:1px dashed #e6e1d8;"
                >

                    <span
                        class="font-medium"
                        style="color:#1A1625;"
                    >
                        Balance
                    </span>

                    <span
                        class="font-medium"
                        style="color:#C2185B;"
                    >
                        ₹{{ number_format($payment->order->balance_amount ?? 0, 2) }}
                    </span>

                </div>

            </div>


            <a
                href="{{ route('orders.show', $payment->order_id) }}"
                class="block text-center mt-5 py-2 rounded-lg text-sm font-medium"
                style="background:#EEEDFE; color:#5E35B1;"
            >
                View Order
            </a>

        </div>

    </div>

</div>

@endsection