@extends('backend.layouts.app')

@section('title', __('Marketplace Settings'))

@push('styles')
    @php
        $p2pAdminCssVersion = config('app.version').'-'.filemtime(public_path('backend/css/p2p-admin.css'));
    @endphp
    <link rel="stylesheet" href="{{ asset('backend/css/p2p-admin.css?v=' . $p2pAdminCssVersion) }}">
@endpush

@php
    $enabled         = (bool) old('enabled', $settings->enabled);
    $autoRelease     = (bool) old('auto_release', $settings->auto_release);
    $commissionPct   = old('commission_pct', $settings->commission_pct);
    $commissionFixed = old('commission_fixed', $settings->commission_fixed);
    $minOrder        = old('min_order_amount', $settings->min_order_amount);
    $maxOrder        = old('max_order_amount', $settings->max_order_amount);
    $holdMinutes     = old('payout_hold_minutes', $settings->payout_hold_minutes);
    $commissionUid   = old('commission_user_id', $settings->commission_user_id);
    $currencyCode    = siteCurrency('code') ?? 'USD';
    $updatedAgo      = $settings->updated_at ? $settings->updated_at->diffForHumans() : __('never');
@endphp

@section('content')
    <div class="py-4 d-flex justify-content-between align-items-center flex-wrap gap-2">
        <h1 class="h4 mb-0">{{ __('Marketplace Settings') }}</h1>
        <a href="{{ route('admin.marketplace.vendors.index') }}" class="fb-btn fb-btn--ghost fb-btn--sm">
            <i class="fa-solid fa-store" aria-hidden="true"></i>
            <span>@lang('Manage vendors')</span>
        </a>
    </div>

    <div class="p2p-refresh">

        {{-- ── Status hero (read-only) ── --}}
        <section class="settings-status">
            <div>
                <span class="p2p-market-eyebrow">@lang('Vendor marketplace status')</span>
                <div class="settings-status__title">
                    <span>{{ $settings->enabled ? __('Open · Accepting payments') : __('Paused') }}</span>
                    <span class="p2p-market-chip {{ $settings->enabled ? 'p2p-market-chip--success' : 'p2p-market-chip--danger' }}">
                        <span class="p2p-market-chip__dot"></span>
                        {{ $settings->enabled ? __('Live') : __('Offline') }}
                    </span>
                </div>
                <p class="settings-status__sub">
                    @lang('The master switch lives in Feature Management as the')
                    <code>vendor_marketplace</code> @lang('feature. The status toggle below is the day-to-day operational switch.')
                </p>
            </div>
            <div class="settings-status__meta">
                <span><i class="fa-solid fa-clock-rotate-left me-1" aria-hidden="true"></i> @lang('Last updated') {{ $updatedAgo }}</span>
                <span><i class="fa-solid fa-coins me-1" aria-hidden="true"></i> @lang('Default currency') <b>{{ $currencyCode }}</b></span>
            </div>
        </section>

        {{-- ── Validation summary ── --}}
        @if($errors->any())
            <div class="settings-errors" role="alert">
                <span class="settings-errors__icon"><i class="fa-solid fa-triangle-exclamation" aria-hidden="true"></i></span>
                <div>
                    <h6>@lang(':n field(s) need attention', ['n' => $errors->count()])</h6>
                    <ul>
                        @foreach($errors->all() as $msg)
                            <li>{{ $msg }}</li>
                        @endforeach
                    </ul>
                </div>
            </div>
        @endif

        <form method="POST" action="{{ route('admin.marketplace.settings.update') }}" id="marketplace-settings-form" data-settings-form>
            @csrf
            @method('PUT')

            <h5 class="fw-bold mb-1">@lang('Commission & Payouts')</h5>
            <p class="text-muted small mb-3">@lang('How each vendor payment is split between the vendor and the platform.')</p>

            <div class="settings-grid">

                {{-- ── Commission ── --}}
                <section class="settings-panel">
                    <div class="settings-panel__head">
                        <span class="settings-panel__icon settings-panel__icon--primary">
                            <i class="fa-solid fa-percent" aria-hidden="true"></i>
                        </span>
                        <div class="settings-panel__title">
                            <h6>@lang('Commission')</h6>
                            <span>@lang('Platform share of every marketplace order')</span>
                        </div>
                    </div>

                    <div class="settings-fields">
                        <div class="settings-field">
                            <label for="commission_pct">
                                @lang('Commission rate') <span class="req" aria-hidden="true">*</span>
                            </label>
                            <div class="settings-input-wrap">
                                <input type="number" step="0.0001" min="0" max="100" name="commission_pct" id="commission_pct"
                                       data-split-pct
                                       class="@error('commission_pct') is-invalid @enderror"
                                       value="{{ $commissionPct }}"
                                       inputmode="decimal" required>
                                <span class="settings-input-wrap__suffix">%</span>
                            </div>
                            <span class="hint">@lang('Percentage of the order kept by the platform. Vendors with an override use their own rate.')</span>
                            @error('commission_pct')<span class="error">{{ $message }}</span>@enderror
                        </div>

                        <div class="settings-field">
                            <label for="commission_fixed">@lang('Fixed fee')</label>
                            <div class="settings-input-wrap">
                                <input type="number" step="0.00000001" min="0" name="commission_fixed" id="commission_fixed"
                                       data-split-fixed
                                       class="@error('commission_fixed') is-invalid @enderror"
                                       value="{{ $commissionFixed }}"
                                       inputmode="decimal" placeholder="0.00">
                                <span class="settings-input-wrap__suffix">{{ $currencyCode }}</span>
                            </div>
                            <span class="hint">@lang('Optional flat amount added on top of the percentage.')</span>
                            @error('commission_fixed')<span class="error">{{ $message }}</span>@enderror
                        </div>
                    </div>

                    <div class="fee-calc" data-split-calc>
                        <span class="fee-calc__icon"><i class="fa-solid fa-calculator" aria-hidden="true"></i></span>
                        <span class="fee-calc__body">
                            @lang('On an order of')
                            <span class="fb-mono">{{ $currencyCode }}</span>
                            <input type="number" min="1" step="1" value="1000" class="fee-calc__base"
                                   data-split-calc-base aria-label="{{ __('Sample order amount') }}">
                            <br>
                            @lang('Vendor receives')
                            <b data-split-calc-vendor>0.00</b>
                            <span class="fb-mono">{{ $currencyCode }}</span>
                            · @lang('Platform earns')
                            <b data-split-calc-platform>0.00</b>
                            <span class="fb-mono">{{ $currencyCode }}</span>
                        </span>
                    </div>
                </section>

                {{-- ── Order limits ── --}}
                <section class="settings-panel">
                    <div class="settings-panel__head">
                        <span class="settings-panel__icon settings-panel__icon--success">
                            <i class="fa-solid fa-layer-group" aria-hidden="true"></i>
                        </span>
                        <div class="settings-panel__title">
                            <h6>@lang('Order limits')</h6>
                            <span>@lang('Smallest and largest single payment allowed')</span>
                        </div>
                    </div>

                    <div class="settings-fields">
                        <div class="settings-field">
                            <label for="min_order_amount">@lang('Minimum order amount')</label>
                            <div class="settings-input-wrap">
                                <input type="number" step="0.00000001" min="0" name="min_order_amount" id="min_order_amount"
                                       class="@error('min_order_amount') is-invalid @enderror"
                                       value="{{ $minOrder }}"
                                       inputmode="decimal" placeholder="0.00">
                                <span class="settings-input-wrap__suffix">{{ $currencyCode }}</span>
                            </div>
                            <span class="hint">@lang('Orders below this amount are rejected at checkout.')</span>
                            @error('min_order_amount')<span class="error">{{ $message }}</span>@enderror
                        </div>

                        <div class="settings-field">
                            <label for="max_order_amount">@lang('Maximum order amount')</label>
                            <div class="settings-input-wrap">
                                <input type="number" step="0.00000001" min="0" name="max_order_amount" id="max_order_amount"
                                       class="@error('max_order_amount') is-invalid @enderror"
                                       value="{{ $maxOrder }}"
                                       inputmode="decimal" placeholder="{{ __('No cap') }}">
                                <span class="settings-input-wrap__suffix">{{ $currencyCode }}</span>
                            </div>
                            <span class="hint">@lang('Leave blank for no upper limit. Must exceed the minimum.')</span>
                            @error('max_order_amount')<span class="error">{{ $message }}</span>@enderror
                        </div>
                    </div>
                </section>

                {{-- ── Availability & payout flow ── --}}
                <section class="settings-panel">
                    <div class="settings-panel__head">
                        <span class="settings-panel__icon settings-panel__icon--warning">
                            <i class="fa-solid fa-toggle-on" aria-hidden="true"></i>
                        </span>
                        <div class="settings-panel__title">
                            <h6>@lang('Availability & payout')</h6>
                            <span>@lang('Operational switch and vendor payout behaviour')</span>
                        </div>
                    </div>

                    <div class="settings-fields">
                        <div class="settings-field">
                            <label for="enabled">@lang('Marketplace status') <span class="req" aria-hidden="true">*</span></label>
                            <select name="enabled" id="enabled" class="form-select @error('enabled') is-invalid @enderror">
                                <option value="1" @selected($enabled)>{{ __('Enabled — buyers can pay vendors') }}</option>
                                <option value="0" @selected(! $enabled)>{{ __('Disabled — all marketplace pages hidden') }}</option>
                            </select>
                            @error('enabled')<span class="error">{{ $message }}</span>@enderror
                        </div>

                        <div class="settings-field">
                            <label for="auto_release">@lang('Payout mode') <span class="req" aria-hidden="true">*</span></label>
                            <select name="auto_release" id="auto_release" class="form-select @error('auto_release') is-invalid @enderror">
                                <option value="1" @selected($autoRelease)>{{ __('Instant — vendor is paid immediately') }}</option>
                                <option value="0" @selected(! $autoRelease)>{{ __('Hold — reserved for delayed payout') }}</option>
                            </select>
                            @error('auto_release')<span class="error">{{ $message }}</span>@enderror
                        </div>

                        <div class="settings-field">
                            <label for="payout_hold_minutes">@lang('Payout hold')</label>
                            <div class="settings-input-wrap">
                                <input type="number" min="0" max="43200" name="payout_hold_minutes" id="payout_hold_minutes"
                                       class="@error('payout_hold_minutes') is-invalid @enderror"
                                       value="{{ $holdMinutes }}"
                                       inputmode="numeric" placeholder="0">
                                <span class="settings-input-wrap__suffix">@lang('min')</span>
                            </div>
                            <span class="hint">@lang('0 to 43,200 minutes (30 days). Used when payout mode is Hold.')</span>
                            @error('payout_hold_minutes')<span class="error">{{ $message }}</span>@enderror
                        </div>
                    </div>
                </section>

                {{-- ── Commission account ── --}}
                <section class="settings-panel">
                    <div class="settings-panel__head">
                        <span class="settings-panel__icon settings-panel__icon--info">
                            <i class="fa-solid fa-building-columns" aria-hidden="true"></i>
                        </span>
                        <div class="settings-panel__title">
                            <h6>@lang('Commission account')</h6>
                            <span>@lang('The wallet that collects the platform commission')</span>
                        </div>
                    </div>

                    <div class="settings-fields">
                        <div class="settings-field">
                            <label for="commission_user_id">@lang('Account (User ID)')</label>
                            <div class="settings-input-wrap">
                                <input type="number" min="1" name="commission_user_id" id="commission_user_id"
                                       class="@error('commission_user_id') is-invalid @enderror"
                                       value="{{ $commissionUid }}"
                                       inputmode="numeric" placeholder="{{ __('e.g. 1') }}">
                                <span class="settings-input-wrap__suffix"><i class="fa-solid fa-user" aria-hidden="true"></i></span>
                            </div>
                            <span class="hint">
                                @if($commissionUser)
                                    <span class="fb-pill fb-pill--success">
                                        <i class="fa-solid fa-circle-check" aria-hidden="true"></i>
                                        {{ $commissionUser->name }} ({{ $commissionUser->email }})
                                    </span>
                                @else
                                    <span class="fb-pill fb-pill--danger">
                                        <i class="fa-solid fa-triangle-exclamation" aria-hidden="true"></i>
                                        @lang('Required before commission can be charged')
                                    </span>
                                @endif
                            </span>
                            @error('commission_user_id')<span class="error">{{ $message }}</span>@enderror
                        </div>
                    </div>

                    <div class="geo-notice">
                        <i class="fa-solid fa-shield-halved" aria-hidden="true"></i>
                        <span>
                            <b>@lang('Accounting tip')</b>: @lang('Commission lands in this user\'s wallet as a real, auditable balance. Refunds claw it back from the account that originally received it.')
                        </span>
                    </div>
                </section>
            </div>

            {{-- ── Sticky save bar ── --}}
            <div class="settings-savebar" data-settings-savebar data-pristine="true">
                <span class="settings-savebar__hint">
                    <i class="fa-solid fa-circle-info" aria-hidden="true"></i>
                    <span>@lang('Changes apply to new orders immediately. Completed orders keep their original split.')</span>
                    <span class="settings-savebar__unsaved">@lang('Unsaved changes')</span>
                </span>
                <button type="button" class="fb-btn fb-btn--ghost fb-btn--sm" data-savebar-reset>
                    <i class="fa-solid fa-arrow-rotate-left" aria-hidden="true"></i>
                    <span>@lang('Discard')</span>
                </button>
                <a href="{{ route('admin.marketplace.orders.index') }}" class="fb-btn fb-btn--ghost fb-btn--sm">@lang('Cancel')</a>
                <button type="submit" class="fb-btn fb-btn--primary fb-btn--sm">
                    <i class="fa-solid fa-check" aria-hidden="true"></i>
                    <span>@lang('Save changes')</span>
                </button>
            </div>
        </form>
    </div>
@endsection

@push('scripts')
    <script>
        (function () {
            var form = document.getElementById('marketplace-settings-form');
            if (!form) return;

            // ── Split calculator ───────────────────────────────────────────
            var calc        = form.querySelector('[data-split-calc]');
            var baseInput   = calc && calc.querySelector('[data-split-calc-base]');
            var vendorOut   = calc && calc.querySelector('[data-split-calc-vendor]');
            var platformOut = calc && calc.querySelector('[data-split-calc-platform]');
            var pctInput    = form.querySelector('[data-split-pct]');
            var fixedInput  = form.querySelector('[data-split-fixed]');

            function fmt(n) {
                if (!isFinite(n)) return '0.00';
                return n.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 });
            }

            function recalcSplit() {
                if (!calc) return;
                var base  = parseFloat(baseInput.value) || 0;
                var pct   = parseFloat(pctInput.value) || 0;
                var fixed = parseFloat(fixedInput.value) || 0;
                var cut   = Math.min(base, base * (pct / 100) + fixed);
                platformOut.textContent = fmt(cut);
                vendorOut.textContent   = fmt(base - cut);
            }

            if (calc) {
                [baseInput, pctInput, fixedInput].forEach(function (el) {
                    el && el.addEventListener('input', recalcSplit);
                });
                recalcSplit();
            }

            // ── Unsaved-changes detection ──────────────────────────────────
            var savebar  = form.querySelector('[data-settings-savebar]');
            var resetBtn = form.querySelector('[data-savebar-reset]');

            function serializeForm() {
                var fd = new FormData(form);
                var pairs = [];
                fd.forEach(function (v, k) { pairs.push(k + '=' + v); });
                return pairs.sort().join('&');
            }

            var initial = serializeForm();

            function updatePristine() {
                if (!savebar) return;
                savebar.setAttribute('data-pristine', serializeForm() === initial ? 'true' : 'false');
            }

            form.addEventListener('input', updatePristine);
            form.addEventListener('change', updatePristine);

            if (resetBtn) {
                resetBtn.addEventListener('click', function () {
                    form.reset();
                    recalcSplit();
                    updatePristine();
                });
            }

            window.addEventListener('beforeunload', function (e) {
                if (savebar && savebar.getAttribute('data-pristine') === 'false') {
                    e.preventDefault();
                    e.returnValue = '';
                }
            });

            form.addEventListener('submit', function () {
                initial = serializeForm();
                updatePristine();
            });
        })();
    </script>
@endpush