@extends('layouts.admin')

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

@section('content')
<div class="page-header">
    <div class="page-header-left">
        <a href="{{ route('admin.cards.show', $card) }}" class="btn-back">
            <svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M10 12L6 8l4-4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
            Back to Card
        </a>
        <h1 class="page-title">Edit Card: Ending {{ $card->card_number_last4 }}</h1>
    </div>
</div>

@php
    $design = $card->resolved_design;
@endphp

<div class="grid-2">
    <div class="card">
        <div class="card-body">
            <form method="POST" action="{{ route('admin.cards.update', $card) }}">
                @csrf
                @method('PUT')

                <div class="form-section">
                    <h3 class="form-section-title">Card Details</h3>
                    <div class="form-grid form-grid-2">
                        <div class="form-group">
                            <label for="card_name" class="form-label">Card Holder Name</label>
                            <input type="text" id="card_name" name="card_name" class="form-input" value="{{ old('card_name', $card->card_name) }}">
                        </div>
                        <div class="form-group">
                            <label class="form-label">Card Type</label>
                            <input type="text" class="form-input" value="{{ ucfirst($card->card_type) }}" disabled>
                        </div>
                        <div class="form-group">
                            <label for="card_template_id" class="form-label">Template</label>
                            <select id="card_template_id" name="card_template_id" class="form-select">
                                <option value="">-- None (custom design) --</option>
                                @foreach($templates as $template)
                                <option value="{{ $template->id }}"
                                        data-gradient-from="{{ $template->gradient_from }}"
                                        data-gradient-to="{{ $template->gradient_to }}"
                                        data-accent-color="{{ $template->accent_color }}"
                                        data-text-color="{{ $template->text_color }}"
                                        data-chip-color="{{ $template->chip_color }}"
                                        data-network="{{ strtoupper($template->card_network) }}"
                                        {{ old('card_template_id', $card->card_template_id) == $template->id ? 'selected' : '' }}>
                                    {{ $template->name }}
                                </option>
                                @endforeach
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="card_number" class="form-label">Card Number <span class="form-label-hint">(leave blank to keep current)</span></label>
                            <input type="text" id="card_number" name="card_number" class="form-input" maxlength="19" placeholder="{{ $card->masked_number }}">
                        </div>
                        <div class="form-group">
                            <label for="spending_limit" class="form-label">Monthly Limit</label>
                            <input type="number" id="spending_limit" name="spending_limit" class="form-input" value="{{ old('spending_limit', $card->spending_limit) }}" step="0.01">
                        </div>
                        <div class="form-group">
                            <label for="daily_limit" class="form-label">Daily Limit</label>
                            <input type="number" id="daily_limit" name="daily_limit" class="form-input" value="{{ old('daily_limit', $card->daily_limit) }}" step="0.01">
                        </div>
                    </div>
                </div>

                <div class="form-section" style="margin-top:1.5rem;">
                    <h3 class="form-section-title">Design <span class="form-label-hint">(overrides applied on top of the chosen template)</span></h3>
                    <div class="form-grid form-grid-2">
                        <div class="form-group">
                            <label class="form-label">Gradient Start</label>
                            <div class="color-input-row">
                                <input type="color" name="gradient_from" class="color-picker" value="{{ $design['gradient_from'] }}" data-pv="cp-from">
                                <span class="color-input-item" style="justify-content:center;align-self:center;">{{ $design['gradient_from'] }}</span>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="form-label">Gradient End</label>
                            <div class="color-input-row">
                                <input type="color" name="gradient_to" class="color-picker" value="{{ $design['gradient_to'] }}" data-pv="cp-to">
                                <span class="color-input-item" style="justify-content:center;align-self:center;">{{ $design['gradient_to'] }}</span>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="form-label">Accent Color</label>
                            <div class="color-input-row">
                                <input type="color" name="accent_color" class="color-picker" value="{{ $design['accent_color'] }}" data-pv="cp-accent">
                                <span class="color-input-item" style="justify-content:center;align-self:center;">{{ $design['accent_color'] }}</span>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="form-label">Text Color</label>
                            <div class="color-input-row">
                                <input type="color" name="text_color" class="color-picker" value="{{ $design['text_color'] }}" data-pv="cp-text">
                                <span class="color-input-item" style="justify-content:center;align-self:center;">{{ $design['text_color'] }}</span>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="form-label">Chip Color</label>
                            <div class="color-input-row">
                                <input type="color" name="chip_color" class="color-picker" value="{{ $design['chip_color'] }}" data-pv="cp-chip">
                                <span class="color-input-item" style="justify-content:center;align-self:center;">{{ $design['chip_color'] }}</span>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="form-actions" style="margin-top:2rem;">
                    <button type="submit" class="btn btn-primary">Save Changes</button>
                </div>
            </form>
        </div>
    </div>

    <div class="card">
        <div class="card-header">
            <h3 class="card-title">Live Preview</h3>
        </div>
        <div class="card-body">
            <div style="display:flex;justify-content:center;">
                <x-card-preview
                    id="cardEditPreview"
                    :design="$design"
                    :type="$card->card_type"
                    :name="$card->card_name"
                    :number="$card->masked_number"
                    :expiry="$card->expiry_date"
                    :network="$card->card_network"
                    :show-network-logo="$card->show_network_logo"
                    size="md"
                />
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script>
var TPL_COLORS = { gradient_from: 'cp-from', gradient_to: 'cp-to', accent_color: 'cp-accent', text_color: 'cp-text', chip_color: 'cp-chip' };

function cardEditPreview() {
    return document.getElementById('cardEditPreview');
}

document.getElementById('card_template_id').addEventListener('change', function () {
    var opt = this.options[this.selectedIndex];
    var pre = cardEditPreview();
    if (!opt || !opt.value) return;

    ['gradient_from', 'gradient_to', 'accent_color', 'text_color', 'chip_color'].forEach(function (k) {
        var color = opt.dataset[k];
        var pick = document.querySelector('[name="' + k + '"]');
        if (color && pick) pick.value = color;
        if (color && pre) pre.style.setProperty('--' + TPL_COLORS[k], color);
    });
    var net = pre ? pre.querySelector('.card-preview-network') : null;
    if (net && opt.dataset.network) net.textContent = opt.dataset.network;
});

document.querySelectorAll('[data-pv]').forEach(function (pick) {
    pick.addEventListener('input', function () {
        var pre = cardEditPreview();
        if (pre) pre.style.setProperty('--' + pick.dataset.pv, pick.value);
    });
});
</script>
@endpush
@endsection