@extends('layouts.admin')
@section('title','Payment Management')
@section('subtitle','Configure client convenience fees and Desxpert platform earnings.')
@section('content')
<div class="payment-metrics">
    <article>
        <span>
            <i data-lucide="circle-dollar-sign"></i>
        </span>
        <div>
            <small>GROSS CONSULTATION VALUE</small>
            <strong>₱{{number_format($stats['gross_consultations'],2)}}</strong>
            <p>{{number_format($stats['paid_transactions'])}} paid transactions</p>
        </div>
    </article>
    <article>
        <span>
            <i data-lucide="credit-card"></i>
        </span>
        <div>
            <small>CONVENIENCE FEES COLLECTED</small>
            <strong>₱{{number_format($stats['convenience_fees'],2)}}</strong>
            <p>Added to the client's checkout</p>
        </div>
    </article>
    <article class="fee-highlight">
        <span>
            <i data-lucide="landmark"></i>
        </span>
        <div>
            <small>DESXPERT FEES EARNED</small>
            <strong>₱{{number_format($stats['platform_fees'],2)}}</strong>
            <p>Deducted from professional earnings</p>
        </div>
    </article>
    <article>
        <span>
            <i data-lucide="hand-coins"></i>
        </span>
        <div>
            <small>PROFESSIONAL NET VALUE</small>
            <strong>₱{{number_format($stats['professional_net'],2)}}</strong>
            <p>Before payout release</p>
        </div>
    </article>
</div>
<div class="payment-settings-grid">
    <form class="fee-settings-card" method="post" action="{{route('payments.settings.update')}}">@csrf @method('put') <div class="fee-card-head">
            <div>
                <span>FEE CONFIGURATION</span>
                <h2>Payment Settings</h2>
                <p>These rates apply when a new Maya checkout is created.</p>
            </div>
            <i data-lucide="settings-2"></i>
        </div>
        <label class="fee-status">
            <input type="hidden" name="is_active" value="0">
            <input type="checkbox" name="is_active" value="1" @checked(old('is_active',$setting->is_active))> <span></span>
            <div>
                <b>Enable payment fees</b>
                <small>Turn off to charge only the professional consultation amount.</small>
            </div>
        </label>
        <div class="fee-field-group">
            <div>
                <label for="convenience-type">Convenience fee type</label>
                <select id="convenience-type" name="convenience_fee_type">
                    <option value="percentage" @selected(old('convenience_fee_type',$setting->convenience_fee_type)==='percentage')>Percentage</option>
                    <option value="fixed" @selected(old('convenience_fee_type',$setting->convenience_fee_type)==='fixed')>Fixed amount</option>
                </select>
            </div>
            <div>
                <label for="convenience-value">Convenience fee</label>
                <div class="fee-value-input">
                    <span id="convenience-symbol">%</span>
                    <input id="convenience-value" type="number" name="convenience_fee_value" value="{{old('convenience_fee_value',$setting->convenience_fee_value)}}" min="0" step="0.01" required>
                </div>
                <small>Paid by the client in addition to the consultation fee.</small>
            </div>
        </div>
        <div class="desxpert-fee-field">
            <label for="platform-fee">Desxpert fee</label>
            <div class="fee-value-input">
                <span>%</span>
                <input id="platform-fee" type="number" name="platform_fee_percentage" value="{{old('platform_fee_percentage',$setting->platform_fee_percentage)}}" min="0" max="100" step="0.01" required>
            </div>
            <small>Deducted from the professional's consultation fee when calculating their payout.</small>
        </div>
        <div class="fee-policy">
            <i data-lucide="info"></i>
            <p>Changing these rates does not recalculate existing paid bookings. Their original fee snapshot remains unchanged for accurate payout records.</p>
        </div>
        <button class="save-fees">
            <i data-lucide="save"></i>Save Payment Settings </button>
    </form>
    <section class="fee-preview-card">
        <div class="fee-card-head">
            <div>
                <span>LIVE PREVIEW</span>
                <h2>Checkout Breakdown</h2>
                <p>Enter any consultation fee to preview the complete payment split.</p>
            </div>
            <i data-lucide="calculator"></i>
        </div>
        <label class="preview-amount-field" for="preview-consultation">
            <span>Consultation fee</span>
            <div>
                <b>₱</b>
                <input id="preview-consultation" type="number" value="1000" min="0" step="0.01" inputmode="decimal" aria-describedby="preview-amount-help">
            </div>
            <small id="preview-amount-help">Preview only — this does not change professional booking rates.</small>
        </label>
        <div class="preview-base">
            <span>Consultation fee</span>
            <strong id="preview-gross">₱1,000.00</strong>
        </div>
        <div class="preview-lines">
            <div>
                <span>Client convenience fee</span>
                <strong id="preview-convenience">₱0.00</strong>
            </div>
            <div class="preview-total">
                <span>Client pays</span>
                <strong id="preview-client">₱1,000.00</strong>
            </div>
        </div>
        <div class="preview-divider">
            <span>Professional settlement</span>
        </div>
        <div class="preview-lines">
            <div>
                <span>Gross consultation fee</span>
                <strong id="preview-settlement-gross">₱1,000.00</strong>
            </div>
            <div>
                <span>Desxpert fee</span>
                <strong class="deduction" id="preview-platform">−₱0.00</strong>
            </div>
            <div class="preview-net">
                <span>Professional receives</span>
                <strong id="preview-net">₱1,000.00</strong>
            </div>
        </div>
        <div class="revenue-explainer">
            <span>
                <i data-lucide="building-2"></i>
            </span>
            <div>
                <small>DESXPERT REVENUE ON THIS EXAMPLE</small>
                <strong id="preview-revenue">₱0.00</strong>
                <p>Convenience fee + Desxpert fee</p>
            </div>
        </div>
    </section>
</div>
<section class="payout-panel payment-history">
    <div class="payout-panel-head">
        <div>
            <h2>Recent Paid Transactions</h2>
            <p>Fee snapshots from successful payment records.</p>
        </div>
        <span>{{number_format($stats['paid_transactions'])}} paid</span>
    </div>
    <div class="table-scroll">
        <table class="payout-table">
            <thead>
                <tr>
                    <th>Reference</th>
                    <th>Client</th>
                    <th>Professional</th>
                    <th>Consultation</th>
                    <th>Convenience</th>
                    <th>Desxpert Fee</th>
                    <th class="amount-column">Client Paid</th>
                </tr>
            </thead>
            <tbody>@forelse($payments as $payment)@php($booking=$payment->booking) <tr>
                    <td>
                        <b>{{$payment->reference_id?Illuminate\Support\Str::limit($payment->reference_id,18):'PAY-'.$payment->id}}</b>
                        <small>{{$payment->created_at?->format('M d, Y g:i A')}}</small>
                    </td>
                    <td>{{$booking?->client?->profile?->full_name??'Client'}}</td>
                    <td>{{$booking?->professional?->user?->profile?->full_name??'Professional'}}</td>
                    <td>₱{{number_format($booking?->amount??0,2)}}</td>
                    <td>₱{{number_format($booking?->convenience_fee_amount??0,2)}}</td>
                    <td>₱{{number_format($booking?->platform_fee_amount??0,2)}}
                        <small>{{$booking?->platform_fee_percentage!==null?number_format($booking->platform_fee_percentage,2).'%':'Legacy payment'}}</small>
                    </td>
                    <td class="amount-column">
                        <b>₱{{number_format($payment->amount,2)}}</b>
                    </td>
                </tr>@empty <tr>
                    <td colspan="7" class="empty">No successful payment transactions are available.</td>
                </tr>@endforelse </tbody>
        </table>
    </div>
    <div class="table-footer">
        <span>Showing {{$payments->firstItem()??0}} to {{$payments->lastItem()??0}} of {{number_format($payments->total())}} paid transactions</span>{{$payments->onEachSide(1)->links('vendor.pagination.default')}}
    </div>
</section>
<script>
    (() => {
        const type = document.getElementById('convenience-type');
        const value = document.getElementById('convenience-value');
        const platform = document.getElementById('platform-fee');
        const active = document.querySelector('.fee-status input[type=checkbox]');
        const consultation = document.getElementById('preview-consultation');
        const money = amount => new Intl.NumberFormat('en-PH', {
            style: 'currency',
            currency: 'PHP'
        }).format(amount);
        const update = () => {
            const enabled = active?.checked;
            const gross = Math.max(0, Number(consultation.value || 0));
            const convenience = enabled ? (type.value === 'fixed' ? Number(value.value || 0) : gross * Number(value.value || 0) / 100) : 0;
            const platformFee = enabled ? gross * Number(platform.value || 0) / 100 : 0;
            document.getElementById('convenience-symbol').textContent = type.value === 'fixed' ? '₱' : '%';
            document.getElementById('preview-gross').textContent = money(gross);
            document.getElementById('preview-settlement-gross').textContent = money(gross);
            document.getElementById('preview-convenience').textContent = money(convenience);
            document.getElementById('preview-client').textContent = money(gross + convenience);
            document.getElementById('preview-platform').textContent = '−' + money(platformFee);
            document.getElementById('preview-net').textContent = money(Math.max(0, gross - platformFee));
            document.getElementById('preview-revenue').textContent = money(convenience + platformFee);
        };
        [type, value, platform, active, consultation].forEach(element => element?.addEventListener('input', update));
        update();
    })();
</script>
@endsection