@extends('components.dashboard.layout.layout')

@section('content')
    @include('components.alert')

    <div class="container-fluid app-bg">
        <div class="page-shell">
            <div class="space-y-4">
                <x-page-title
                    title="Referral Setting"
                    description="Manage the referrer discount, referred person discount, and discount type.">
                    @can('crm_referral-create')
                        @if ($referralsettings->total() === 0)
                        <a href="{{ route('referralsettings.create') }}" class="asset-btn asset-btn--primary">
                            <i class="bi bi-plus-circle"></i>
                            Add New Referral
                        </a>
                        @endif
                    @endcan
                </x-page-title>

                <div class="card border-0 shadow-sm rounded-4">
                    <div class="card-header bg-white d-flex align-items-center justify-content-between gap-3 flex-wrap">
                        <div>
                            <h6 class="mb-1 fw-bold">Referral Configuration</h6>
                            <p class="mb-0 text-muted">Simple referral discounts without product or track rules.</p>
                        </div>

                        <form action="{{ route('referralsettings.index') }}" method="GET" class="d-flex align-items-center gap-2">
                            <label for="per_page" class="mb-0 fw-bold text-muted">Show</label>
                            <select name="per_page" id="per_page" class="form-select" style="width: 90px;" onchange="this.form.submit()">
                                @foreach ([5, 10, 25, 50, 100, 150] as $count)
                                    <option value="{{ $count }}" {{ request('per_page', 10) == $count ? 'selected' : '' }}>
                                        {{ $count }}
                                    </option>
                                @endforeach
                            </select>
                        </form>
                    </div>

                    <div class="table-responsive">
                        <table class="table align-middle mb-0">
                            <thead class="table-light">
                                <tr>
                                    <th class="text-center">Discount Type</th>
                                    <th class="text-center">Referrer Discount</th>
                                    <th class="text-center">Referred Person Discount</th>
                                    <th class="text-center">Created By</th>
                                    <th class="text-center">Actions</th>
                                </tr>
                            </thead>

                            <tbody>
                                @forelse ($referralsettings as $referralsetting)
                                    <tr id="referral-row-{{ $referralsetting->id }}">
                                        <td class="text-center">
                                            @if ($referralsetting->discount_type === 'percentage')
                                                <span class="ui-pill ui-pill--info">Percentage</span>
                                            @elseif ($referralsetting->discount_type === 'fixed')
                                                <span class="ui-pill ui-pill--success">Fixed Amount</span>
                                            @else
                                                <span class="ui-pill ui-pill--neutral">{{ $referralsetting->discount_type ?: '—' }}</span>
                                            @endif
                                        </td>

                                        <td class="text-center fw-bold">
                                            {{ $referralsetting->referrer_discount ?? '—' }}
                                        </td>

                                        <td class="text-center fw-bold">
                                            {{ $referralsetting->referred_discount ?? '—' }}
                                        </td>

                                        <td class="text-center">
                                            {{ $referralsetting->createdBy?->full_name ?? 'System' }}
                                        </td>

                                        <td class="text-center">
                                            <div class="d-inline-flex align-items-center gap-2">
                                                @can('crm_referral-update')
                                                    <a href="{{ route('referralsettings.edit', $referralsetting->id) }}"
                                                       class="btn btn-sm btn-outline-secondary"
                                                       title="Edit Referral">
                                                        <iconify-icon icon="lucide:edit" class="text-lg"></iconify-icon>
                                                    </a>
                                                @endcan

                                            </div>
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="5" class="text-center text-muted py-5">
                                            No referral settings found.
                                        </td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>

                @if ($referralsettings->hasPages())
                    <div class="mt-3">
                        {{ $referralsettings->links() }}
                    </div>
                @endif

                <div class="card border-0 shadow-sm rounded-3 mt-3">
                    <div class="card-header bg-white">
                        <h6 class="mb-1 fw-bold">Referral Change Log</h6>
                        <p class="mb-0 text-muted">Latest referral setting changes and who made them.</p>
                    </div>

                    <div class="table-responsive">
                        <table class="table align-middle mb-0">
                            <thead class="table-light">
                                <tr>
                                    <th>Action</th>
                                    <th>Changes</th>
                                    <th>By</th>
                                    <th>Date</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse ($referralSettingLogs as $log)
                                    @php
                                        $description = json_decode($log->description, true) ?: [];
                                        $event = ucfirst($description['event'] ?? 'updated');
                                        $changes = $description['changes'] ?? [];
                                        $after = $description['after'] ?? [];
                                    @endphp

                                    <tr>
                                        <td>
                                            <span class="ui-pill {{ $event === 'Created' ? 'ui-pill--success' : 'ui-pill--info' }}">
                                                {{ $event }}
                                            </span>
                                        </td>
                                        <td>
                                            @if (! empty($changes))
                                                <div class="d-flex flex-column gap-1">
                                                    @foreach ($changes as $field => $values)
                                                        <span>
                                                            <strong>{{ str_replace('_', ' ', $field) }}:</strong>
                                                            {{ $values['old'] ?? '—' }}
                                                            <i class="bi bi-arrow-right mx-1"></i>
                                                            {{ $values['new'] ?? '—' }}
                                                        </span>
                                                    @endforeach
                                                </div>
                                            @elseif (! empty($after))
                                                <div class="d-flex flex-column gap-1">
                                                    @foreach ($after as $field => $value)
                                                        <span>
                                                            <strong>{{ str_replace('_', ' ', $field) }}:</strong>
                                                            {{ $value ?? '—' }}
                                                        </span>
                                                    @endforeach
                                                </div>
                                            @else
                                                —
                                            @endif
                                        </td>
                                        <td>{{ $log->user?->full_name ?? 'System' }}</td>
                                        <td>{{ $log->created_at?->setTimezone('Africa/Cairo')->format('Y-m-d h:i A') }}</td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="4" class="text-center text-muted py-4">
                                            No referral changes logged yet.
                                        </td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection