@extends('admin.layouts.app')

@section('title', 'Payments | PG Finsev')

@section('page-title', 'Payments')

@section(
    'page-description',
    'Manage client payments and transactions'
)


@push('styles')

<style>

    /* =====================================================
       PAGE
    ===================================================== */

    .page-heading {
        margin-bottom: 22px;
    }

    .page-heading h2 {
        color: #1d3557;
        font-size: 20px;
        font-weight: 800;
    }

    .page-heading p {
        margin-top: 5px;
        color: #8b98aa;
        font-size: 10px;
    }


    /* =====================================================
       STATISTICS
    ===================================================== */

    .stats-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 15px;
        margin-bottom: 20px;
    }

    .stat-card {
        padding: 18px;

        background: #ffffff;

        border: 1px solid #e3eaf3;

        border-radius: 14px;

        transition: .2s;
    }

    .stat-card:hover {
        transform: translateY(-2px);

        box-shadow:
            0 8px 25px
            rgba(31, 52, 80, .06);
    }

    .stat-label {
        color: #8997aa;

        font-size: 9px;

        font-weight: 800;

        text-transform: uppercase;

        letter-spacing: .5px;
    }

    .stat-value {
        margin-top: 8px;

        color: #273b59;

        font-size: 24px;

        font-weight: 900;
    }

    .stat-description {
        margin-top: 4px;

        color: #9aa6b6;

        font-size: 8px;
    }

    .stat-blue .stat-value {
        color: #1769e0;
    }

    .stat-green .stat-value {
        color: #287646;
    }

    .stat-orange .stat-value {
        color: #b7791f;
    }

    .stat-red .stat-value {
        color: #be123c;
    }


    /* =====================================================
       TOTAL AMOUNT
    ===================================================== */

    .total-payment-card {
        margin-bottom: 20px;

        padding: 18px 20px;

        display: flex;

        align-items: center;

        justify-content: space-between;

        background: #ffffff;

        border: 1px solid #e3eaf3;

        border-radius: 14px;
    }

    .total-payment-label {
        color: #8997aa;

        font-size: 9px;

        font-weight: 800;

        text-transform: uppercase;

        letter-spacing: .5px;
    }

    .total-payment-value {
        margin-top: 7px;

        color: #287646;

        font-size: 24px;

        font-weight: 900;
    }

    .total-payment-icon {
        width: 44px;

        height: 44px;

        display: flex;

        align-items: center;

        justify-content: center;

        border-radius: 11px;

        background: #eaf8ef;

        font-size: 18px;
    }


    /* =====================================================
       FILTER
    ===================================================== */

    .filter-card {
        padding: 17px;

        margin-bottom: 20px;

        background: #ffffff;

        border: 1px solid #e3eaf3;

        border-radius: 14px;
    }

    .filter-title {
        margin-bottom: 12px;

        color: #273b59;

        font-size: 12px;

        font-weight: 800;
    }

    .filter-form {
        display: grid;

        grid-template-columns:
            2fr 1fr 1fr auto auto;

        gap: 10px;

        align-items: end;
    }

    .field label {
        display: block;

        margin-bottom: 6px;

        color: #8b98aa;

        font-size: 8px;

        font-weight: 800;

        text-transform: uppercase;
    }

    .field input,
    .field select {
        width: 100%;

        height: 39px;

        padding: 0 11px;

        border: 1px solid #dfe6ef;

        border-radius: 8px;

        background: #ffffff;

        color: #344966;

        outline: none;

        font-size: 10px;
    }

    .field input:focus,
    .field select:focus {
        border-color: #1769e0;

        box-shadow:
            0 0 0 3px
            rgba(23, 105, 224, .08);
    }

    .search-btn {
        height: 39px;

        padding: 0 17px;

        border: 0;

        border-radius: 8px;

        background: #1769e0;

        color: #ffffff;

        cursor: pointer;

        font-size: 9px;

        font-weight: 800;
    }

    .search-btn:hover {
        background: #0f5bc7;
    }

    .reset-btn {
        height: 39px;

        display: flex;

        align-items: center;

        justify-content: center;

        padding: 0 14px;

        border: 1px solid #dfe6ef;

        border-radius: 8px;

        background: #ffffff;

        color: #64748b;

        font-size: 9px;

        font-weight: 800;
    }

    .reset-btn:hover {
        background: #f8fafc;
    }


    /* =====================================================
       TABLE
    ===================================================== */

    .table-card {
        background: #ffffff;

        border: 1px solid #e3eaf3;

        border-radius: 14px;

        overflow: hidden;
    }

    .table-header {
        display: flex;

        align-items: center;

        justify-content: space-between;

        gap: 15px;

        padding: 17px 19px;

        border-bottom: 1px solid #edf1f6;
    }

    .table-header-left h3 {
        color: #273b59;

        font-size: 13px;

        font-weight: 800;
    }

    .table-header-left p {
        margin-top: 4px;

        color: #9aa6b6;

        font-size: 8px;
    }

    .table-header-right {
        display: flex;

        align-items: center;

        gap: 10px;
    }

    .result-count {
        color: #9aa6b6;

        font-size: 9px;

        white-space: nowrap;
    }


    /* =====================================================
       MANUAL PAYMENT BUTTON
    ===================================================== */

    .manual-payment-btn {
        height: 36px;

        display: inline-flex;

        align-items: center;

        justify-content: center;

        gap: 5px;

        padding: 0 13px;

        border: 0;

        border-radius: 8px;

        background: #1769e0;

        color: #ffffff;

        cursor: pointer;

        font-size: 9px;

        font-weight: 800;
    }

    .manual-payment-btn:hover {
        background: #0f5bc7;
    }


    /* =====================================================
       CLIENT
    ===================================================== */

    .client {
        display: flex;

        align-items: center;

        gap: 9px;
    }

    .client-avatar {
        width: 35px;

        height: 35px;

        flex-shrink: 0;

        display: flex;

        align-items: center;

        justify-content: center;

        border-radius: 9px;

        background: #eaf2ff;

        color: #1769e0;

        font-size: 10px;

        font-weight: 900;
    }

    .client-name {
        display: block;

        color: #344966;

        font-size: 9px;

        font-weight: 800;
    }

    .client-email {
        display: block;

        margin-top: 3px;

        color: #9aa6b6;

        font-size: 7px;
    }


    /* =====================================================
       PAYMENT ID
    ===================================================== */

    .payment-id {
        color: #64748b;

        font-family:
            Consolas,
            monospace;

        font-size: 8px;

        word-break: break-all;
    }


    /* =====================================================
       AMOUNT
    ===================================================== */

    .amount {
        color: #287646;

        font-size: 10px;

        font-weight: 900;
    }


    /* =====================================================
       PAYMENT METHOD
    ===================================================== */

    .method-manual {
        color: #7c3aed;

        background: #f3eefe;
    }

    .method-online {
        color: #1769e0;

        background: #eaf2ff;
    }


    /* =====================================================
       EMPTY
    ===================================================== */

    .empty {
        padding: 60px 20px;

        text-align: center;

        color: #9aa6b6;

        font-size: 10px;
    }

    .empty-icon {
        margin-bottom: 10px;

        font-size: 30px;
    }


    /* =====================================================
       MODAL
    ===================================================== */

    .modal-overlay {
        position: fixed;

        inset: 0;

        z-index: 3000;

        display: none;

        align-items: center;

        justify-content: center;

        padding: 20px;

        background:
            rgba(15, 23, 42, .48);
    }

    .modal-overlay.show {
        display: flex;
    }

    .modal {
        width: 100%;

        max-width: 520px;

        max-height: 90vh;

        overflow-y: auto;

        background: #ffffff;

        border-radius: 16px;

        box-shadow:
            0 25px 70px
            rgba(0, 0, 0, .18);
    }

    .modal-header {
        padding: 20px;

        display: flex;

        align-items: center;

        justify-content: space-between;

        border-bottom: 1px solid #edf1f6;
    }

    .modal-title h3 {
        color: #273b59;

        font-size: 15px;

        font-weight: 800;
    }

    .modal-title p {
        margin-top: 4px;

        color: #9aa6b6;

        font-size: 9px;
    }

    .modal-close {
        width: 31px;

        height: 31px;

        display: flex;

        align-items: center;

        justify-content: center;

        border: 0;

        border-radius: 8px;

        background: #f1f5f9;

        color: #64748b;

        cursor: pointer;

        font-size: 17px;
    }

    .modal-close:hover {
        background: #fff1f2;

        color: #be123c;
    }

    .modal-body {
        padding: 20px;
    }

    .form-group {
        margin-bottom: 15px;
    }

    .form-group label {
        display: block;

        margin-bottom: 6px;

        color: #64748b;

        font-size: 8px;

        font-weight: 800;

        text-transform: uppercase;
    }

    .form-control {
        width: 100%;

        min-height: 42px;

        padding: 0 11px;

        border: 1px solid #dfe6ef;

        border-radius: 8px;

        outline: none;

        background: #ffffff;

        color: #344966;

        font-size: 10px;
    }

    textarea.form-control {
        padding: 10px 11px;

        min-height: 80px;

        resize: vertical;
    }

    .form-control:focus {
        border-color: #1769e0;

        box-shadow:
            0 0 0 3px
            rgba(23, 105, 224, .08);
    }

    .modal-footer {
        padding: 0 20px 20px;

        display: flex;

        align-items: center;

        justify-content: flex-end;

        gap: 8px;
    }


    /* =====================================================
       MANUAL PAYMENT INFO
    ===================================================== */

    .manual-info {
        margin-bottom: 18px;

        padding: 11px 13px;

        border: 1px solid #dbeafe;

        border-radius: 9px;

        background: #eff6ff;

        color: #315b8f;

        font-size: 9px;

        line-height: 1.5;
    }


    /* =====================================================
       RESPONSIVE
    ===================================================== */

    @media (max-width: 1100px) {

        .filter-form {
            grid-template-columns:
                1fr 1fr;
        }

    }


    @media (max-width: 950px) {

        .stats-grid {
            grid-template-columns:
                repeat(2, 1fr);
        }

        .table-header {
            align-items: flex-start;

            flex-direction: column;
        }

        .table-header-right {
            width: 100%;

            justify-content: space-between;
        }

    }


    @media (max-width: 600px) {

        .stats-grid {
            grid-template-columns: 1fr;
        }

        .filter-form {
            grid-template-columns: 1fr;
        }

        .table-header-right {
            align-items: stretch;

            flex-direction: column;
        }

        .manual-payment-btn {
            width: 100%;
        }

        .result-count {
            text-align: left;
        }

    }

</style>

@endpush



@section('content')


<!-- =====================================================
     PAGE HEADING
====================================================== -->

<div class="page-heading">

    <h2>
        Payment Management
    </h2>

    <p>
        View online payments and record manual client payments.
    </p>

</div>



<!-- =====================================================
     STATISTICS
====================================================== -->

<div class="stats-grid">


    <div class="stat-card stat-blue">

        <div class="stat-label">
            Total Payments
        </div>

        <div class="stat-value">
            {{ $totalPayments ?? 0 }}
        </div>

        <div class="stat-description">
            All payment transactions
        </div>

    </div>



    <div class="stat-card stat-green">

        <div class="stat-label">
            Successful
        </div>

        <div class="stat-value">
            {{ $successfulPayments ?? 0 }}
        </div>

        <div class="stat-description">
            Completed payments
        </div>

    </div>



    <div class="stat-card stat-orange">

        <div class="stat-label">
            Pending
        </div>

        <div class="stat-value">
            {{ $pendingPayments ?? 0 }}
        </div>

        <div class="stat-description">
            Awaiting payment
        </div>

    </div>



    <div class="stat-card stat-red">

        <div class="stat-label">
            Failed
        </div>

        <div class="stat-value">
            {{ $failedPayments ?? 0 }}
        </div>

        <div class="stat-description">
            Failed or cancelled
        </div>

    </div>


</div>



<!-- =====================================================
     TOTAL SUCCESSFUL AMOUNT
====================================================== -->

<div class="total-payment-card">


    <div>

        <div class="total-payment-label">

            Total Successful Payment Amount

        </div>


        <div class="total-payment-value">

            ₹{{ number_format(
                $totalPaymentAmount ?? 0,
                2
            ) }}

        </div>

    </div>


    <div class="total-payment-icon">

        💰

    </div>


</div>



<!-- =====================================================
     FILTER
====================================================== -->

<div class="filter-card">


    <div class="filter-title">

        Search & Filter Payments

    </div>


    <form
        method="GET"
        action="{{ route('admin.payments') }}"
        class="filter-form"
    >


        <!-- SEARCH -->

        <div class="field">

            <label>
                Search
            </label>

            <input
                type="text"
                name="search"
                value="{{ $search ?? '' }}"
                placeholder="Name, email, mobile or payment ID..."
            >

        </div>



        <!-- STATUS -->

        <div class="field">

            <label>
                Status
            </label>

            <select name="status">

                <option value="">
                    All Status
                </option>


                <option
                    value="paid"
                    {{ ($status ?? '') === 'paid'
                        ? 'selected'
                        : ''
                    }}
                >
                    Paid
                </option>


                <option
                    value="pending"
                    {{ ($status ?? '') === 'pending'
                        ? 'selected'
                        : ''
                    }}
                >
                    Pending
                </option>


                <option
                    value="failed"
                    {{ ($status ?? '') === 'failed'
                        ? 'selected'
                        : ''
                    }}
                >
                    Failed
                </option>


                <option
                    value="cancelled"
                    {{ ($status ?? '') === 'cancelled'
                        ? 'selected'
                        : ''
                    }}
                >
                    Cancelled
                </option>

            </select>

        </div>



        <!-- METHOD -->

        <div class="field">

            <label>
                Payment Method
            </label>

            <select name="payment_method">

                <option value="">
                    All Methods
                </option>


                <option
                    value="online"
                    {{ ($paymentMethod ?? '') === 'online'
                        ? 'selected'
                        : ''
                    }}
                >
                    Online
                </option>


                <option
                    value="cash"
                    {{ ($paymentMethod ?? '') === 'cash'
                        ? 'selected'
                        : ''
                    }}
                >
                    Cash
                </option>


                <option
                    value="upi"
                    {{ ($paymentMethod ?? '') === 'upi'
                        ? 'selected'
                        : ''
                    }}
                >
                    UPI
                </option>


                <option
                    value="bank_transfer"
                    {{ ($paymentMethod ?? '') === 'bank_transfer'
                        ? 'selected'
                        : ''
                    }}
                >
                    Bank Transfer
                </option>

            </select>

        </div>



        <!-- SEARCH -->

        <button
            type="submit"
            class="search-btn"
        >

            🔎 Search

        </button>



        <!-- RESET -->

        <a
            href="{{ route('admin.payments') }}"
            class="reset-btn"
        >

            Reset

        </a>


    </form>

</div>



<!-- =====================================================
     PAYMENT TABLE
====================================================== -->

<div class="table-card">


    <!-- TABLE HEADER -->

    <div class="table-header">


        <div class="table-header-left">

            <h3>
                Payment Transactions
            </h3>

            <p>
                Online and manually recorded payments
            </p>

        </div>


        <div class="table-header-right">


            <span class="result-count">

                {{ $payments->total() }}

                Payments

            </span>


            <!-- MANUAL PAYMENT -->

            <button
                type="button"
                class="manual-payment-btn"
                onclick="openManualPaymentModal()"
            >

                + Manual Payment

            </button>


        </div>


    </div>



    <!-- TABLE -->

    <div class="table-wrap">


        @if($payments->count())


            <table>


                <thead>

                    <tr>

                        <th>
                            Client
                        </th>

                        <th>
                            Payment ID
                        </th>

                        <th>
                            Amount
                        </th>

                        <th>
                            Method
                        </th>

                        <th>
                            Status
                        </th>

                        <th>
                            Date
                        </th>

                        <th>
                            Action
                        </th>

                    </tr>

                </thead>



                <tbody>


                    @foreach($payments as $payment)


                        @php

                            $user =
                                $payment->user;

                            $name =
                                $user->name
                                ?? 'Unknown Client';

                            $email =
                                $user->email
                                ?? '';

                            $initial =
                                strtoupper(
                                    substr(
                                        $name,
                                        0,
                                        1
                                    )
                                );

                        @endphp


                        <tr>


                            <!-- CLIENT -->

                            <td>

                                <div class="client">


                                    <div class="client-avatar">

                                        {{ $initial }}

                                    </div>


                                    <div>

                                        <span class="client-name">

                                            {{ $name }}

                                        </span>


                                        @if($email)

                                            <span class="client-email">

                                                {{ $email }}

                                            </span>

                                        @endif

                                    </div>


                                </div>

                            </td>



                            <!-- PAYMENT ID -->

                            <td>

                                <span class="payment-id">

                                    {{
                                        $payment->payment_id
                                        ??
                                        $payment->order_id
                                        ??
                                        $payment->id
                                    }}

                                </span>

                            </td>



                            <!-- AMOUNT -->

                            <td>

                                <span class="amount">

                                    ₹{{ number_format(
                                        $payment->amount ?? 0,
                                        2
                                    ) }}

                                </span>

                            </td>



                            <!-- METHOD -->

                            <td>

                                @if($payment->is_manual)

                                    <span
                                        class="
                                            badge
                                            method-manual
                                        "
                                    >

                                        Manual
                                        -
                                        {{
                                            ucfirst(
                                                str_replace(
                                                    '_',
                                                    ' ',
                                                    $payment->payment_method
                                                    ?? 'Payment'
                                                )
                                            )
                                        }}

                                    </span>

                                @else

                                    <span
                                        class="
                                            badge
                                            method-online
                                        "
                                    >

                                        Online

                                    </span>

                                @endif

                            </td>



                            <!-- STATUS -->

                            <td>


                                @if(
                                    $payment->status === 'paid'
                                )

                                    <span
                                        class="
                                            badge
                                            badge-green
                                        "
                                    >

                                        <span class="dot"></span>

                                        Paid

                                    </span>


                                @elseif(
                                    in_array(
                                        $payment->status,
                                        [
                                            'pending',
                                            'created'
                                        ]
                                    )
                                )

                                    <span
                                        class="
                                            badge
                                            badge-orange
                                        "
                                    >

                                        <span class="dot"></span>

                                        Pending

                                    </span>


                                @elseif(
                                    in_array(
                                        $payment->status,
                                        [
                                            'failed',
                                            'cancelled',
                                            'cancelled_by_user'
                                        ]
                                    )
                                )

                                    <span
                                        class="
                                            badge
                                            badge-red
                                        "
                                    >

                                        <span class="dot"></span>

                                        {{
                                            ucfirst(
                                                str_replace(
                                                    '_',
                                                    ' ',
                                                    $payment->status
                                                )
                                            )
                                        }}

                                    </span>


                                @else

                                    <span
                                        class="
                                            badge
                                            badge-gray
                                        "
                                    >

                                        {{
                                            ucfirst(
                                                $payment->status
                                            )
                                        }}

                                    </span>

                                @endif


                            </td>



                            <!-- DATE -->

                            <td>

                                <span
                                    style="
                                        color:#64748b;
                                        font-size:8px;
                                    "
                                >

                                    {{
                                        $payment->created_at
                                            ? $payment->created_at
                                                ->format(
                                                    'd M Y, h:i A'
                                                )
                                            : '-'
                                    }}

                                </span>

                            </td>



                            <!-- ACTION -->

                            <td>


                                @if(
                                    Route::has(
                                        'admin.payments.show'
                                    )
                                )

                                    <a
                                        href="{{ route(
                                            'admin.payments.show',
                                            $payment
                                        ) }}"
                                        class="view-btn"
                                    >

                                        View

                                    </a>

                                @else

                                    <span
                                        class="
                                            badge
                                            badge-gray
                                        "
                                    >

                                        —

                                    </span>

                                @endif


                            </td>


                        </tr>


                    @endforeach


                </tbody>


            </table>


        @else


            <div class="empty">

                <div class="empty-icon">
                    💳
                </div>

                No payment transactions found.

            </div>


        @endif


    </div>



    <!-- PAGINATION -->

    @if($payments->hasPages())

        <div class="pagination-area">


            <div
                style="
                    color:#9aa6b6;
                    font-size:9px;
                "
            >

                Page

                {{ $payments->currentPage() }}

                of

                {{ $payments->lastPage() }}

            </div>


            {{ $payments->onEachSide(1)->links() }}


        </div>

    @endif


</div>



<!-- =====================================================
     MANUAL PAYMENT MODAL
====================================================== -->

<div
    id="manualPaymentModal"
    class="modal-overlay"
>


    <div
        class="modal"
        onclick="event.stopPropagation()"
    >


        <!-- HEADER -->

        <div class="modal-header">


            <div class="modal-title">

                <h3>
                    Add Manual Payment
                </h3>

                <p>
                    Record a payment received directly from the client.
                </p>

            </div>


            <button
                type="button"
                class="modal-close"
                onclick="closeManualPaymentModal()"
            >

                ×

            </button>


        </div>



        <!-- BODY -->

        <form
            method="POST"
            action="{{ route('admin.payments.manual') }}"
        >

            @csrf


            <div class="modal-body">


                <!-- INFO -->

                <div class="manual-info">

                    This option is available only to administrators.
                    The payment will be recorded directly as
                    <strong>Paid</strong>.

                </div>



                <!-- CLIENT -->

                <div class="form-group">


                    <label>
                        Client *
                    </label>


                    <select
                        name="user_id"
                        class="form-control"
                        required
                    >

                        <option value="">
                            Select Client
                        </option>


                        @foreach(
                            \App\Models\User::where(
                                'role',
                                'client'
                            )
                            ->orderBy('name')
                            ->get()
                            as $client
                        )

                            <option
                                value="{{ $client->id }}"
                            >

                                {{ $client->name }}

                                @if($client->mobile)

                                    —
                                    {{ $client->mobile }}

                                @endif

                            </option>

                        @endforeach


                    </select>


                </div>



                <!-- AMOUNT -->

                <div class="form-group">


                    <label>
                        Amount *
                    </label>


                    <input
                        type="number"
                        name="amount"
                        class="form-control"
                        min="0.01"
                        step="0.01"
                        placeholder="Enter amount"
                        required
                    >


                </div>



                <!-- METHOD -->

                <div class="form-group">


                    <label>
                        Payment Method *
                    </label>


                    <select
                        name="payment_method"
                        class="form-control"
                        required
                    >

                        <option value="">
                            Select Payment Method
                        </option>

                        <option value="cash">
                            Cash
                        </option>

                        <option value="upi">
                            UPI
                        </option>

                        <option value="bank_transfer">
                            Bank Transfer
                        </option>

                    </select>


                </div>



                <!-- REFERENCE -->

                <div class="form-group">


                    <label>
                        Reference Number
                    </label>


                    <input
                        type="text"
                        name="reference_number"
                        class="form-control"
                        maxlength="255"
                        placeholder="UPI / Bank reference number"
                    >


                </div>



                <!-- DATE -->

                <div class="form-group">


                    <label>
                        Payment Date *
                    </label>


                    <input
                        type="date"
                        name="paid_at"
                        class="form-control"
                        value="{{ now()->format('Y-m-d') }}"
                        required
                    >


                </div>



                <!-- REMARKS -->

                <div class="form-group">


                    <label>
                        Remarks
                    </label>


                    <textarea
                        name="remarks"
                        class="form-control"
                        maxlength="2000"
                        placeholder="Optional notes..."
                    ></textarea>


                </div>


            </div>



            <!-- FOOTER -->

            <div class="modal-footer">


                <button
                    type="button"
                    class="btn btn-secondary"
                    onclick="closeManualPaymentModal()"
                >

                    Cancel

                </button>


                <button
                    type="submit"
                    class="btn btn-primary"
                >

                    Save Payment

                </button>


            </div>


        </form>


    </div>


</div>



<!-- =====================================================
     JAVASCRIPT
====================================================== -->

<script>

function openManualPaymentModal()
{
    const modal =
        document.getElementById(
            'manualPaymentModal'
        );

    if (modal) {

        modal.classList.add('show');

        document.body.style.overflow = 'hidden';

    }
}


function closeManualPaymentModal()
{
    const modal =
        document.getElementById(
            'manualPaymentModal'
        );

    if (modal) {

        modal.classList.remove('show');

        document.body.style.overflow = '';

    }
}


document.addEventListener(
    'click',
    function (event) {

        const modal =
            document.getElementById(
                'manualPaymentModal'
            );

        if (
            modal &&
            event.target === modal
        ) {

            closeManualPaymentModal();

        }

    }
);


document.addEventListener(
    'keydown',
    function (event) {

        if (event.key === 'Escape') {

            closeManualPaymentModal();

        }

    }
);

</script>


@endsection