@extends('layouts.app')

@section('title', 'Payment')

@section('content')

<div class="row">
    <div class="col-lg-12">
        <div class="card card-transparent card-block card-stretch card-height border-none">
            <div class="card-body p-0 mt-lg-2 mt-0">

                <div class="d-flex flex-wrap align-items-center justify-content-between">

                    <div>
                        <h3 class="mb-1">Payment Management</h3>
                        <p class="mb-0 text-muted">
                            Manage customer payments and outstanding balances.
                        </p>
                    </div>

                    <div>
                        <a href="{{ route('payments.create') }}" class="btn btn-primary">
                            <i class="ri-add-line mr-1"></i>
                            Add Payment
                        </a>
                    </div>

                </div>

            </div>
        </div>
    </div>
</div>


{{-- Success Message --}}
@if(session('success'))
    <div class="alert alert-success">
        {{ session('success') }}
    </div>
@endif


{{-- Error Message --}}
@if(session('error'))
    <div class="alert alert-danger">
        {{ session('error') }}
    </div>
@endif


{{-- Summary Cards --}}
<div class="row">

    {{-- Total Payments --}}
    <div class="col-lg-3 col-md-6">
        <div class="card card-block card-stretch card-height">
            <div class="card-body">

                <div class="d-flex align-items-center mb-4 card-total-sale">

                    <div class="icon iq-icon-box-2 bg-primary-light">
                        <i class="ri-file-list-3-line"></i>
                    </div>

                    <div>
                        <p class="mb-2">Total Payments</p>
                        <h4>{{ $totalPayments }}</h4>
                    </div>

                </div>

                <div class="iq-progress-bar mt-2">
                    <span class="bg-primary iq-progress progress-1"
                          data-percent="100">
                    </span>
                </div>

            </div>
        </div>
    </div>


    {{-- Paid Payments --}}
    <div class="col-lg-3 col-md-6">
        <div class="card card-block card-stretch card-height">
            <div class="card-body">

                <div class="d-flex align-items-center mb-4 card-total-sale">

                    <div class="icon iq-icon-box-2 bg-success-light">
                        <i class="ri-checkbox-circle-line"></i>
                    </div>

                    <div>
                        <p class="mb-2">Paid Payments</p>
                        <h4>{{ $paidInvoices }}</h4>
                    </div>

                </div>

                <div class="iq-progress-bar mt-2">

                    @php
                        $paidPercentage = $totalPayments > 0
                            ? round(($paidInvoices / $totalPayments) * 100)
                            : 0;
                    @endphp

                    <span class="bg-success iq-progress progress-1"
                          data-percent="{{ $paidPercentage }}">
                    </span>

                </div>

            </div>
        </div>
    </div>


    {{-- Pending Payments --}}
    <div class="col-lg-3 col-md-6">
        <div class="card card-block card-stretch card-height">
            <div class="card-body">

                <div class="d-flex align-items-center mb-4 card-total-sale">

                    <div class="icon iq-icon-box-2 bg-danger-light">
                        <i class="ri-time-line"></i>
                    </div>

                    <div>
                        <p class="mb-2">Pending Payments</p>
                        <h4>{{ $pendingInvoices }}</h4>
                    </div>

                </div>

                <div class="iq-progress-bar mt-2">

                    @php
                        $pendingPercentage = $totalPayments > 0
                            ? round(($pendingInvoices / $totalPayments) * 100)
                            : 0;
                    @endphp

                    <span class="bg-danger iq-progress progress-1"
                          data-percent="{{ $pendingPercentage }}">
                    </span>

                </div>

            </div>
        </div>
    </div>


    {{-- Total Amount --}}
    <div class="col-lg-3 col-md-6">
        <div class="card card-block card-stretch card-height">
            <div class="card-body">

                <div class="d-flex align-items-center mb-4 card-total-sale">

                    <div class="icon iq-icon-box-2 bg-info-light">
                        <i class="ri-money-dollar-circle-line"></i>
                    </div>

                    <div>
                        <p class="mb-2">Total Amount Received</p>

                        <h4>
                            Rs.
                            {{ number_format($totalPayment, 2) }}
                        </h4>

                    </div>

                </div>

                <div class="iq-progress-bar mt-2">

                    <span class="bg-info iq-progress progress-1"
                          data-percent="100">
                    </span>

                </div>

            </div>
        </div>
    </div>

</div>


{{-- Search & Filter --}}
<div class="row">

    <div class="col-lg-12">

        <div class="card card-block card-stretch card-height">

            <div class="card-header">

                <div class="header-title">
                    <h4 class="card-title">
                        Search &amp; Filter
                    </h4>
                </div>

            </div>


            <div class="card-body">

                <form method="GET"
                      action="{{ route('payments.index') }}">

                    <div class="row align-items-end">

                        {{-- Search --}}
                        <div class="form-group col-lg-4 col-md-6">

                            <label>
                                Search Payment
                            </label>

                            <input
                                type="text"
                                name="search"
                                class="form-control"
                                value="{{ request('search') }}"
                                placeholder="Invoice Number / Customer Name"
                            >

                        </div>


                        {{-- Status --}}
                        <div class="form-group col-lg-2 col-md-6">

                            <label>
                                Payment Status
                            </label>

                            <select
                                name="status_id"
                                class="form-control"
                            >

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

                                @foreach($paymentStatuses as $status)

                                    <option
                                        value="{{ $status->status_id }}"
                                        {{ request('status_id') == $status->status_id ? 'selected' : '' }}
                                    >
                                        {{ $status->status_name }}
                                    </option>

                                @endforeach

                            </select>

                        </div>


                        {{-- Payment Method --}}
                        <div class="form-group col-lg-2 col-md-6">

                            <label>
                                Payment Method
                            </label>

                            <select
                                name="method_id"
                                class="form-control"
                            >

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

                                @foreach($paymentMethods as $method)

                                    <option
                                        value="{{ $method->method_id }}"
                                        {{ request('method_id') == $method->method_id ? 'selected' : '' }}
                                    >
                                        {{ $method->method_type }}
                                    </option>

                                @endforeach

                            </select>

                        </div>


                        {{-- Date --}}
                        <div class="form-group col-lg-2 col-md-6">

                            <label>
                                Payment Date
                            </label>

                            <input
                                type="date"
                                name="payment_date"
                                class="form-control"
                                value="{{ request('payment_date') }}"
                            >

                        </div>


                        {{-- Buttons --}}
                        <div class="form-group col-lg-2 col-md-6 d-flex">

                            <button
                                type="submit"
                                class="btn btn-primary mr-2"
                            >
                                <i class="ri-search-line mr-1"></i>
                                Search
                            </button>

                            <a
                                href="{{ route('payments.index') }}"
                                class="btn btn-secondary"
                            >
                                Reset
                            </a>

                        </div>

                    </div>

                </form>

            </div>

        </div>

    </div>

</div>


{{-- Payment List --}}
<div class="row">

    <div class="col-lg-12">

        <div class="card card-block card-stretch card-height">

            <div class="card-header">

                <div class="header-title">
                    <h4 class="card-title">
                        Payment List
                    </h4>
                </div>

            </div>


            <div class="card-body">

                <div class="table-responsive">

                    <table class="table table-striped table-bordered">

                        <thead>

                            <tr>

                                <th>#</th>
                                <th>Invoice No.</th>
                                <th>Customer Name</th>
                                <th>Payment Date</th>
                                <th>Payment Method</th>
                                <th>Amount Paid</th>
                                <th>Remaining Balance</th>
                                <th>Payment Status</th>
                                <th>Received By</th>
                                <th>Actions</th>

                            </tr>

                        </thead>


                        <tbody>

                            @forelse($payments as $payment)

                                <tr>

                                    {{-- Payment ID --}}
                                    <td>
                                        {{ $payment->payment_id }}
                                    </td>


                                    {{-- Invoice --}}
                                    <td>

                                        @if($payment->order)

                                            {{ $payment->order->serial_number ?? 'N/A' }}

                                        @else

                                            N/A

                                        @endif

                                    </td>


                                    {{-- Customer --}}
                                    <td>

                                        {{ $payment->customer->customer_name ?? 'N/A' }}

                                    </td>


                                    {{-- Payment Date --}}
                                    <td>

                                        {{ $payment->payment_date
                                            ? $payment->payment_date->format('d-M-Y h:i A')
                                            : 'N/A'
                                        }}

                                    </td>


                                    {{-- Payment Method --}}
                                    <td>

                                        {{ $payment->method->method_type ?? 'N/A' }}

                                    </td>


                                    {{-- Amount --}}
                                    <td>

                                        Rs.
                                        {{ number_format((float)$payment->amount_paid, 2) }}

                                    </td>


                                    {{-- Remaining --}}
                                    <td>

                                        Rs.
                                        {{ number_format((float)$payment->remaining_amount, 2) }}

                                    </td>


                                    {{-- Status --}}
                                    <td>

                                        @php
                                            $status = strtolower(
                                                $payment->status->status_name ?? ''
                                            );
                                        @endphp


                                        @if($status === 'paid')

                                            <div class="badge badge-success">
                                                Paid
                                            </div>

                                        @elseif($status === 'partial')

                                            <div class="badge badge-warning">
                                                Partial
                                            </div>

                                        @elseif($status === 'pending')

                                            <div class="badge badge-danger">
                                                Pending
                                            </div>

                                        @else

                                            <div class="badge badge-secondary">
                                                {{ $payment->status->status_name ?? 'Unknown' }}
                                            </div>

                                        @endif

                                    </td>


                                    {{-- Received By --}}
                                    <td>

                                        {{ $payment->receiver->user_name ?? 'N/A' }}

                                    </td>


                                    {{-- Actions --}}
<td>
    <div class="d-flex align-items-center">

        <a href="{{ route('payments.show', $payment->payment_id) }}"
           class="btn btn-sm btn-info mr-1"
           title="View">
            <i class="ri-eye-line"></i>
        </a>

        <a href="{{ route('payments.edit', $payment->payment_id) }}"
           class="btn btn-sm btn-warning mr-1"
           title="Edit">
            <i class="ri-edit-line"></i>
        </a>

        <form action="{{ route('payments.destroy', $payment->payment_id) }}"
              method="POST"
              class="d-inline"
              onsubmit="return confirm('Are you sure you want to delete this payment?');">

            @csrf
            @method('DELETE')

            <button type="submit"
                    class="btn btn-sm btn-danger"
                    title="Delete">
                <i class="ri-delete-bin-line"></i>
            </button>

        </form>

    </div>
</td>                                </tr>

                            @empty

                                <tr>

                                    <td
                                        colspan="10"
                                        class="text-center"
                                    >
                                        <div class="py-4">

                                            <i
                                                class="ri-file-list-3-line"
                                                style="font-size: 40px;"
                                            ></i>

                                            <h5 class="mt-2">
                                                No payments found
                                            </h5>

                                            <p class="text-muted">
                                                No payment records match your search.
                                            </p>

                                            <a
                                                href="{{ route('payments.create') }}"
                                                class="btn btn-primary"
                                            >
                                                Add First Payment
                                            </a>

                                        </div>
                                    </td>

                                </tr>

                            @endforelse

                        </tbody>

                    </table>

                </div>


                {{-- Pagination --}}
                @if($payments->hasPages())

                    <div class="d-flex justify-content-center mt-4">

                        {{ $payments->links() }}

                    </div>

                @endif

            </div>

        </div>

    </div>

</div>

@endsection