@extends('admin.layouts.master')

@section('title')
    Payment Manage |
@endsection

@section('content')
<div class="row mt-4">
    <div class="col-lg-12 grid-margin stretch-card">
        <div class="card">
            <div class="card-body">
                <div class="d-flex justify-content-between">
                    <h4 class="card-title">Payment List</h4>
                    <div class="d-flex">
                        <!-- Print Button -->
                        <button type="button" class="btn btn-outline-info btn-sm btn-icon-text mx-1" onclick="printTable()">
                            <i class="mdi mdi-printer"></i> Print
                        </button>
                        <!-- Add Payment Button -->
                        <a href="{{ route('paymentManage.create') }}" class="btn btn-sm btn-primary" data-toggle="tooltip" data-placement="right" title="Add Payment">
                            <i class="mdi mdi-library-plus"></i> Add Payment
                        </a>
                    </div>
                </div>
                <!-- Company Info -->
                <div class="company-info text-center">
                    <h1>{{ settings()->website_name }}</h1>
                    <p class="mt-1">{{ settings()->address }}</p>
                    <p class="mt-1">{{ settings()->website_email }}</p>
                </div>
                <div class="d-flex justify-content-between" style="width: 70%">
                    <select id="package_name" name="type" class="form-control border-info mr-2">
                        <option value="">Select Package</option>
                        @foreach ($uniquePackageNames as $packageName)
                            <option value="{{ $packageName }}">{{ $packageName }}</option>
                        @endforeach
                    </select>
                    <select id="status" name="type" class="form-control border-info mr-2">
                        <option value="">Select Status</option>
                        <option value="pending">Pending</option>
                        <option value="completed">Completed</option>
                        <option value="failed">Failed</option>
                    </select>
                    <select id="payment_method" name="type" class="form-control border-info mr-2">
                        <option value="">Select Payment Method</option>
                        <option value="credit_card">Credit Card</option>
                        <option value="paypal">PayPal</option>
                        <option value="bank_transfer">Bank Transfer</option>
                    </select>
                    <input id="start_date" type="date" name="start_date" class="form-control border-info mr-2">
                    <input id="end_date" type="date" name="end_date" class="form-control border-info mr-2">
                    <button id="clearBtn" class="btn btn-light mr-2" onclick="filterButtonClicked('clear')">Clear</button>
                    <button id="filterBtn" class="btn btn-primary" onclick="filterButtonClicked('filter')">Filter</button>
                </div>
                <!-- Payments Table -->
                <div class="table-responsive pt-3">
                    <!-- Success Message -->
                    @if(session('success'))
                        <div class="alert alert-success">
                            {{ session('success') }}
                        </div>
                    @endif
                    <div class="mb-2">
                        @php
                            $totalIncome = number_format($records->sum('price'), 2);
                        @endphp
                        <div class="d-flex justify-content-end">
                            <h5 id="totalIncomeDisplay">Total Income: {{ $totalIncome }}</h5>
                        </div>
                    </div>
                    <table id="paymentsTable" class="table table-bordered">

                        <thead>
                            <tr class="text-center bg-info text-dark">
                                <th># Id</th>
                                <th>User Name</th>
                                <th>Package Name</th>
                                <th>Price</th>
                                <th>Status</th>
                                <th>Payment Method</th>
                                <th>Transaction ID</th>
                                <th>Date</th>
                                {{-- <th class="action">Action</th> --}}
                            </tr>
                        </thead>
                        <tbody id="paymentsTableBody">
                            @forelse ($records as $record)
                            <tr class="text-center">
                                <td>{{ $record->id }}</td>
                                <td>{{ $record->user->name ?? 'N/A' }}</td>
                                <td>{{ $record->package->name ?? 'N/A' }}</td>
                                <td>{{ number_format($record->price, 2) }}</td> <!-- Assuming price should be formatted as currency -->
                                <td>
                                    @if ($record->payment_status == 'completed')
                                        Completed
                                    @elseif ($record->payment_status == 'pending')
                                        <span style="color: orange">Pending</span>
                                    @else
                                        <span style="color: red">Failed</span>
                                    @endif
                                </td>
                                <td>{{ $record->payment_method }}</td>
                                <td>{{ $record->transaction_id }}</td>
                                <td>{{ $record->updated_at->format('j F Y g:i A') }}</td>
                                {{-- <td class="">
                                    <div class="action-buttons">
                                        <!-- Edit Button -->
                                        <a href="{{ route('paymentManage.edit', $record->id) }}" class="btn btn-sm btn-info me-2" data-toggle="tooltip" data-placement="right" title="Edit Payment">
                                            <i class="mdi mdi-grease-pencil"></i>
                                        </a>
                                        <!-- Delete Button -->
                                        <form action="{{ route('paymentManage.destroy', $record->id) }}" method="POST" onsubmit="return confirm('Are you sure you want to delete?')" class="d-inline">
                                            @method('DELETE')
                                            @csrf

                                            @if ($errors->any())
                                                <div class="alert alert-danger" role="alert">
                                                    <ul>
                                                        @foreach ($errors->all() as $error)
                                                            <li>{{ $error }}</li>
                                                        @endforeach
                                                    </ul>
                                                </div>
                                            @endif
                                            <button type="submit" class="btn btn-sm btn-danger" data-toggle="tooltip" data-placement="right" title="Delete Payment">
                                                <i class="mdi mdi-trash-can"></i>
                                            </button>
                                        </form>
                                    </div>
                                </td> --}}
                            </tr>

                            @empty
                            <tr class="text-center">
                                <td colspan="8">No payments found</td>
                            </tr>
                            @endforelse
                        </tbody>
                    </table>

                </div>
            </div>
        </div>
    </div>
</div>
@endsection
<script>
    const records = @json($records);
    let totalIncome = @json($totalIncome);

    function filterButtonClicked(input) {
        const tbody = document.getElementById('paymentsTableBody');
        if(tbody.children.length > 1){
            $('#paymentsTable').DataTable().clear().destroy();
        }

        const packageName = document.getElementById('package_name')?.value;
        const status = document.getElementById('status')?.value;
        const paymentMethod = document.getElementById('payment_method')?.value;
        const startDate = document.getElementById('start_date')?.value;
        const endDate = document.getElementById('end_date')?.value;

        if (input == 'clear') {
            // Clear filters
            document.getElementById('package_name').value = '';
            document.getElementById('status').value = '';
            document.getElementById('payment_method').value = '';
            document.getElementById('start_date').value = '';
            document.getElementById('end_date').value = '';

            // Show all records
            updateTable(records);
            return; // Exit the function
        }

        // Filter records
        const filteredRecords = records.filter(record => {
            let isValid = true;

            // Filter by package name
            if (packageName) {
                isValid = isValid && record.package.name == packageName;
            }

            // Filter by payment status
            if (status) {
                isValid = isValid && record.payment_status == status;
            }

            // Filter by payment method
            if (paymentMethod) {
                isValid = isValid && record.payment_method == paymentMethod;
            }

            // Filter by date range
            if (startDate && endDate) {
                const recordDate = new Date(record.updated_at);
                const start = new Date(startDate);
                const end = new Date(endDate);
                end.setDate(end.getDate() + 1);

                isValid = isValid && (recordDate >= start && recordDate < end);
            }

            return isValid;
        });

        // Update the table with filtered records
        updateTable(filteredRecords);
    }

    function updateTable(recordsToDisplay) {
        const tbody = document.getElementById('paymentsTableBody');
        tbody.innerHTML = ''; // Clear the current table body
        let totalPrice = 0;

        if (recordsToDisplay.length) {
            recordsToDisplay.forEach(record => {
                totalPrice += Number(record.price);
                tbody.innerHTML += `
                    <tr class="text-center">
                        <td>${record.id}</td>
                        <td>${record.user.name || 'N/A'}</td>
                        <td>${record.package.name || 'N/A'}</td>
                        <td>${Number(record.price).toFixed(2)}</td>
                        <td>
                            ${record.payment_status === 'completed' ? 'Completed' :
                            record.payment_status === 'pending' ? '<span style="color: orange">Pending</span>' :
                            '<span style="color: red">Failed</span>'}
                        </td>
                        <td>${record.payment_method}</td>
                        <td>${record.transaction_id}</td>
                        <td>${new Date(record.updated_at).toLocaleString('en-GB', {
                            day: 'numeric',
                            month: 'long',
                            year: 'numeric',
                            hour: 'numeric',
                            minute: 'numeric',
                            hour12: true
                        }).replace(',', '')}</td>

                    </tr>
                `;
            });
        } else {
            tbody.innerHTML = '<tr class="text-center"><td colspan="8">No payments found</td></tr>';
        }

        document.getElementById('totalIncomeDisplay').innerText = `Total Income: ${formatNumber(totalPrice)}`;

        if (tbody.children.length > 1) {
            // Initialize DataTable
            $('#paymentsTable').DataTable();
        }


    }

    function formatNumber(num) {
        return new Intl.NumberFormat('en-US', {
            style: 'decimal',
            minimumFractionDigits: 2,
            maximumFractionDigits: 2
        }).format(num);
    }
</script>