@extends('layouts.admin')

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

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

@section('actions')

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

@endsection


@section('content')

@if($errors->any())

    <div
        class="mb-4 text-sm rounded-lg px-4 py-3"
        style="background:#FCEBEB; color:#791F1F;"
    >
        {{ $errors->first() }}
    </div>

@endif


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

    <!-- =====================================================
         EDIT FORM
    ====================================================== -->

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

        <div class="card p-6">

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


            <form
                method="POST"
                action="{{ route('payments.update', $payment->id) }}"
            >

                @csrf

                @method('PUT')


                <div class="grid grid-cols-2 gap-4">


                    <!-- AMOUNT -->

                    <div>

                        <label
                            class="block text-xs mb-1"
                            style="color:#6b6470;"
                        >
                            Amount ₹
                        </label>

                        <input
                            type="number"
                            name="amount"
                            value="{{ old('amount', $payment->amount) }}"
                            min="0.01"
                            step="0.01"
                            required
                            class="w-full px-3 py-2.5 rounded-lg border text-sm outline-none"
                            style="border-color:#e6e1d8;"
                        >

                    </div>


                    <!-- PAYMENT TYPE -->

                    <div>

                        <label
                            class="block text-xs mb-1"
                            style="color:#6b6470;"
                        >
                            Payment type
                        </label>

                        <select
                            name="payment_type"
                            required
                            class="w-full px-3 py-2.5 rounded-lg border text-sm outline-none"
                            style="border-color:#e6e1d8;"
                        >

                            <option
                                value="advance"
                                @selected(old('payment_type', $payment->payment_type) === 'advance')
                            >
                                Advance
                            </option>

                            <option
                                value="balance"
                                @selected(old('payment_type', $payment->payment_type) === 'balance')
                            >
                                Balance
                            </option>

                            <option
                                value="full"
                                @selected(old('payment_type', $payment->payment_type) === 'full')
                            >
                                Full
                            </option>

                            <option
                                value="refund"
                                @selected(old('payment_type', $payment->payment_type) === 'refund')
                            >
                                Refund
                            </option>

                        </select>

                    </div>


                    <!-- MODE -->

                    <div>

                        <label
                            class="block text-xs mb-1"
                            style="color:#6b6470;"
                        >
                            Payment mode
                        </label>

                        <select
                            name="mode"
                            required
                            class="w-full px-3 py-2.5 rounded-lg border text-sm outline-none"
                            style="border-color:#e6e1d8;"
                        >

                            <option
                                value="cash"
                                @selected(old('mode', $payment->mode) === 'cash')
                            >
                                Cash
                            </option>

                            <option
                                value="upi"
                                @selected(old('mode', $payment->mode) === 'upi')
                            >
                                UPI
                            </option>

                            <option
                                value="card"
                                @selected(old('mode', $payment->mode) === 'card')
                            >
                                Card
                            </option>

                        </select>

                    </div>


                    <!-- PAYMENT DATE -->

                    <div>

                        <label
                            class="block text-xs mb-1"
                            style="color:#6b6470;"
                        >
                            Payment date
                        </label>

                        <input
                            type="date"
                            name="payment_date"
                            value="{{ old(
                                'payment_date',
                                $payment->payment_date
                                    ? $payment->payment_date->format('Y-m-d')
                                    : ''
                            ) }}"
                            required
                            class="w-full px-3 py-2.5 rounded-lg border text-sm outline-none"
                            style="border-color:#e6e1d8;"
                        >

                    </div>


                    <!-- REFERENCE -->

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

                        <label
                            class="block text-xs mb-1"
                            style="color:#6b6470;"
                        >
                            Reference number
                        </label>

                        <input
                            type="text"
                            name="reference_number"
                            value="{{ old('reference_number', $payment->reference_number) }}"
                            placeholder="UPI transaction ID, cheque number, etc."
                            class="w-full px-3 py-2.5 rounded-lg border text-sm outline-none"
                            style="border-color:#e6e1d8;"
                        >

                    </div>


                    <!-- NOTES -->

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

                        <label
                            class="block text-xs mb-1"
                            style="color:#6b6470;"
                        >
                            Notes
                        </label>

                        <textarea
                            name="notes"
                            rows="3"
                            placeholder="Optional notes"
                            class="w-full px-3 py-2.5 rounded-lg border text-sm outline-none resize-none"
                            style="border-color:#e6e1d8;"
                        >{{ old('notes', $payment->notes) }}</textarea>

                    </div>

                </div>


                <!-- BUTTONS -->

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

                    <a
                        href="{{ route('payments.show', $payment->id) }}"
                        class="px-4 py-2 rounded-lg text-sm"
                        style="background:#f5f3ee; color:#6b6470;"
                    >
                        Cancel
                    </a>


                    <button
                        type="submit"
                        class="px-5 py-2.5 rounded-lg text-sm font-medium text-white"
                        style="background:#5E35B1;"
                    >
                        ✓ Update Payment
                    </button>

                </div>

            </form>

        </div>

    </div>


    <!-- =====================================================
         PAYMENT / ORDER SUMMARY
    ====================================================== -->

    <div class="space-y-4">


        <!-- PAYMENT SUMMARY -->

        <div class="card p-6">

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


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

                <div class="flex justify-between">

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

                    <span class="font-medium">
                        #{{ $payment->id }}
                    </span>

                </div>


                <div class="flex justify-between">

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

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

                </div>


                <div class="flex justify-between">

                    <span style="color:#6b6470;">
                        Current amount
                    </span>

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

                </div>


                <div class="flex justify-between">

                    <span style="color:#6b6470;">
                        Current balance
                    </span>

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

                </div>

            </div>

        </div>


        <!-- WARNING -->

        <div
            class="card p-5"
            style="background:#FFF9F0;"
        >

            <p
                class="text-xs font-medium mb-2"
                style="color:#B45309;"
            >
                Important
            </p>

            <p
                class="text-xs leading-5"
                style="color:#6b6470;"
            >
                Changing the payment amount or payment type will
                automatically recalculate the order's paid amount,
                balance amount, and payment history.
            </p>

        </div>

    </div>

</div>

@endsection