@extends('layouts.admin')

@section('title', 'Card Requests')

@section('content')
<div class="page-header">
    <div>
        <h1 class="page-title">Card Requests <span class="page-title-count">({{ $requests->total() ?? 0 }})</span></h1>
        <p class="page-subtitle">Review pending card requests and issue cards using a chosen template</p>
    </div>
</div>

<div class="card">
    <div class="card-header">
        <form method="GET" action="{{ route('admin.cards.requests') }}" class="filter-bar">
            <div class="filter-group">
                <select name="status" class="filter-select">
                    <option value="">All Status</option>
                    <option value="pending" {{ request('status') === 'pending' ? 'selected' : '' }}>Pending</option>
                    <option value="approved" {{ request('status') === 'approved' ? 'selected' : '' }}>Approved</option>
                    <option value="rejected" {{ request('status') === 'rejected' ? 'selected' : '' }}>Rejected</option>
                </select>
            </div>
            <button type="submit" class="btn btn-primary btn-sm">Filter</button>
        </form>
    </div>

    <x-data-table :emptyMessage="'No card requests found.'" :paginator="$requests ?? null">
        <x-slot:thead>
            <th>Customer</th>
            <th>Card Type</th>
            <th>Physical / Virtual</th>
            <th>Status</th>
            <th>Date</th>
            <th>Actions</th>
        </x-slot:thead>
        <x-slot:tbody>
            @forelse($requests ?? [] as $request)
            <tr>
                <td class="text-semibold">{{ $request->user->name ?? 'N/A' }}</td>
                <td><span class="badge badge-blue">{{ $request->card_type_label ?? ucfirst($request->card_type ?? 'Standard') }}</span></td>
                <td>{{ ucfirst($request->is_physical ? 'Physical' : 'Virtual') }}</td>
                <td><span class="badge badge-{{ $request->status === 'approved' ? 'green' : ($request->status === 'pending' ? 'orange' : 'red') }}">{{ ucfirst($request->status) }}</span></td>
                <td>{{ $request->created_at->format('M d, Y H:i') }}</td>
                <td>
                    <div class="table-actions">
                        @if($request->status === 'pending')
                        <button type="button" class="btn btn-sm btn-outline btn-green" onclick="openModal('approve-{{ $request->id }}')">Approve</button>
                        <form method="POST" action="{{ route('admin.cards.reject', $request->id) }}" class="inline">
                            @csrf
                            <button type="submit" class="btn btn-sm btn-outline btn-red" onclick="return confirm('Reject this card request?')">Reject</button>
                        </form>
                        @endif
                    </div>
                </td>
            </tr>
            @empty
            <tr>
                <td colspan="6">
                    <div class="data-table-empty-content">
                        <svg width="48" height="48" viewBox="0 0 48 48" fill="none"><circle cx="24" cy="24" r="24" fill="#F1F5F9"/><rect x="12" y="16" width="24" height="16" rx="3" stroke="#94A3B8" stroke-width="1.5"/><path d="M12 22h24" stroke="#94A3B8" stroke-width="1.5"/></svg>
                        <p>No card requests found.</p>
                    </div>
                </td>
            </tr>
            @endforelse
        </x-slot:tbody>
    </x-data-table>
</div>

@php
    $templatesJson = $templates->map(fn ($t) => [
        'id' => $t->id,
        'name' => $t->name,
        'card_type' => $t->card_type,
        'card_network' => strtoupper($t->card_network),
        'gradient_from' => $t->gradient_from,
        'gradient_to' => $t->gradient_to,
        'accent_color' => $t->accent_color,
        'text_color' => $t->text_color,
        'chip_color' => $t->chip_color,
    ])->values()->toJson(JSON_UNESCAPED_SLASHES);
@endphp

@foreach($requests ?? [] as $request)
@if($request->status === 'pending')
<x-modal id="approve-{{ $request->id }}" title="Approve Card Request" size="lg">
    <form method="POST" action="{{ route('admin.cards.approve', $request->id) }}" data-approve-form>
        @csrf
        <input type="hidden" name="card_template_id" value="{{ $request->card_template_id }}" data-template-id>
        <div class="modal-issue-grid">
            <div class="modal-issue-form">
                <div class="form-group">
                    <label for="template-{{ $request->id }}" class="form-label">Card Template</label>
                    <select id="template-{{ $request->id }}" name="template_pick" class="form-select" onchange="CardTpl.apply({{ $request->id }}, this.value)">
                        <option value="">-- Default Green --</option>
                        @foreach($templates as $template)
                        <option value="{{ $template->id }}" {{ $request->card_template_id == $template->id ? 'selected' : '' }}>{{ $template->name }} ({{ ucfirst($template->card_type) }})</option>
                        @endforeach
                    </select>
                </div>
                <div class="form-group">
                    <label for="card_name-{{ $request->id }}" class="form-label">Card Holder Name</label>
                    <input type="text" id="card_name-{{ $request->id }}" name="card_name" class="form-input" value="{{ strtoupper($request->user->name ?? '') }}" placeholder="Name on card">
                </div>
                <div class="form-group">
                    <label for="card_number-{{ $request->id }}" class="form-label">Card Number <span class="form-label-hint">(leave blank to auto-generate)</span></label>
                    <input type="text" id="card_number-{{ $request->id }}" name="card_number" class="form-input" maxlength="19" placeholder="e.g. 5399 ******** 4421">
                </div>
                <div class="form-grid form-grid-2">
                    <div class="form-group">
                        <label for="spending_limit-{{ $request->id }}" class="form-label">Monthly Limit</label>
                        <input type="number" id="spending_limit-{{ $request->id }}" name="spending_limit" class="form-input" value="{{ $settings->default_card_monthly_limit ?? 500000 }}" step="0.01">
                    </div>
                    <div class="form-group">
                        <label for="daily_limit-{{ $request->id }}" class="form-label">Daily Limit</label>
                        <input type="number" id="daily_limit-{{ $request->id }}" name="daily_limit" class="form-input" value="{{ $settings->default_card_daily_limit ?? 100000 }}" step="0.01">
                    </div>
                </div>
                <div class="form-group">
                    <label class="form-label" style="margin-bottom:8px;">Design Overrides <span class="form-label-hint">(optional - styles applied over the template)</span></label>
                    <div class="color-input-row color-input-row-wrap">
                        <label class="color-input-item"><span>From</span><input type="color" name="gradient_from" class="color-picker" data-req="{{ $request->id }}" data-pv="cp-from" data-type="gradient_from"></label>
                        <label class="color-input-item"><span>To</span><input type="color" name="gradient_to" class="color-picker" data-req="{{ $request->id }}" data-pv="cp-to" data-type="gradient_to"></label>
                        <label class="color-input-item"><span>Accent</span><input type="color" name="accent_color" class="color-picker" data-req="{{ $request->id }}" data-pv="cp-accent" data-type="accent_color"></label>
                        <label class="color-input-item"><span>Text</span><input type="color" name="text_color" class="color-picker" data-req="{{ $request->id }}" data-pv="cp-text" data-type="text_color"></label>
                        <label class="color-input-item"><span>Chip</span><input type="color" name="chip_color" class="color-picker" data-req="{{ $request->id }}" data-pv="cp-chip" data-type="chip_color"></label>
                    </div>
                </div>
                <div class="form-group">
                    <label class="form-label">Admin Notes</label>
                    <input type="text" name="admin_notes" class="form-input" placeholder="Optional note for the customer">
                </div>
            </div>
            <div class="modal-issue-preview">
                <div style="display:flex;justify-content:center;align-items:flex-start;">
                    @php
                        $cardNetwork = match($request->card_type) {
                            'master_debit', 'master_credit' => 'MASTERCARD',
                            'visa_debit', 'visa_credit' => 'VISA',
                            default => 'VISA'
                        };
                    @endphp
                    <x-card-preview
                        id="preview-{{ $request->id }}"
                        :design="[]"
                        :type="$request->card_type ?? 'master_debit'"
                        name="{{ strtoupper($request->user->name ?? 'CARD HOLDER') }}"
                        number="**** **** **** 0000"
                        expiry="MM/YY"
                        :network="$cardNetwork"
                        :show-network-logo="true"
                        size="md"
                    />
                </div>
                <p class="modal-issue-hint">Preview updates as you pick a template or change colors. The generated card will match on the customer's dashboard.</p>
            </div>
        </div>
        <div class="modal-footer" style="margin-top:20px;">
            <button type="button" class="btn btn-outline" onclick="closeModal('approve-{{ $request->id }}')">Cancel</button>
            <button type="submit" class="btn btn-green">Approve & Issue Card</button>
        </div>
    </form>
</x-modal>
@endif
@endforeach

@push('scripts')
<script>
window.CardTpl = (function () {
    var templates = @json($templatesJson);

    function apply(id, templateIdOrName) {
        var select = document.getElementById('template-' + id);
        var form = select ? select.closest('form') : null;
        if (!form) return;

        var tpl = null;
        if (templateIdOrName !== '') {
            tpl = templates.find(function (t) { return String(t.id) === String(templateIdOrName); });
        }
        form.querySelector('[data-template-id]').value = tpl ? tpl.id : '';

        var pre = document.getElementById('preview-' + id);
        if (!pre) return;
        pre._tpl = tpl || null;

        var keys = ['gradient_from', 'gradient_to', 'accent_color', 'text_color', 'chip_color'];
        var preVars = { gradient_from: 'cp-from', gradient_to: 'cp-to', accent_color: 'cp-accent', text_color: 'cp-text', chip_color: 'cp-chip' };

        keys.forEach(function (k) {
            var pick = form.querySelector('[data-pv="' + preVars[k] + '"]');
            var color = tpl ? tpl[k] : (pick.defaultValue || '#0D6B58');
            if (pick) pick.value = color;
            pre.style.setProperty('--' + preVars[k], color);
        });

        var net = document.querySelector('#preview-' + id + ' .card-preview-network');
        if (net) net.textContent = tpl ? tpl.card_network : 'VISA';
    }

    document.querySelectorAll('[data-approve-form]').forEach(function (form) {
        form.addEventListener('input', function (e) {
            var pick = e.target.closest('[data-pv]');
            if (pick) {
                var pre = document.getElementById('preview-' + pick.dataset.req);
                if (pre) pre.style.setProperty('--' + pick.dataset.pv, pick.value);
            }
        });
    });

    return { apply: apply };
})();

document.addEventListener('DOMContentLoaded', function () {
    document.querySelectorAll('[data-approve-form]').forEach(function (form) {
        var select = form.querySelector('select[name="template_pick"]');
        var hidden = form.querySelector('[data-template-id]');
        var tplId = select && select.value !== '' ? select.value : (hidden ? hidden.value : '');
        if (tplId !== '' && select) {
            CardTpl.apply(select.id.replace('template-', ''), tplId);
        }
    });
});
</script>
@endpush
@endsection