@extends('layouts.customer')

@section('content')
<div class="max-w-2xl mx-auto px-3 sm:px-4 lg:px-6 py-4 sm:py-6 lg:py-8">

    {{-- Header --}}
    <div class="flex items-center justify-between mb-4 sm:mb-6">
        <h1 class="text-xl sm:text-2xl lg:text-3xl font-bold text-gray-900">Request New Card</h1>
        <a href="{{ route('customer.cards') }}" class="text-sm text-[#0D6B58] hover:underline font-medium">
            <svg class="w-4 h-4 inline mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
            </svg>
            Back to Cards
        </a>
    </div>

    {{-- Instructions --}}
    @if(!empty($settings['card_request_instructions'] ?? ''))
    <div class="bg-blue-50 border border-blue-200 rounded-lg p-4 mb-4">
        <h4 class="text-sm font-semibold text-blue-800 mb-2">Card Request Instructions</h4>
        <p class="text-sm text-blue-700">{{ $settings['card_request_instructions'] }}</p>
    </div>
    @endif

    <form method="POST" action="{{ route('customer.cards.request') }}" class="space-y-4 sm:space-y-5">
        @csrf

        {{-- Card Type Selection --}}
        <div class="bg-white rounded-lg shadow-sm border border-gray-100 p-4 sm:p-6">
            <h2 class="text-base sm:text-lg font-semibold text-gray-900 mb-4">1. Select Card Type</h2>
            <div class="grid grid-cols-1 sm:grid-cols-2 gap-3 sm:gap-4">
                @foreach($cardTypes as $type)
                <label class="cursor-pointer group">
                    <input type="radio" name="card_type" value="{{ $type['value'] }}" class="peer hidden" {{ old('card_type') == $type['value'] ? 'checked' : '' }}>
                    <div class="p-4 sm:p-5 border-2 border-gray-200 rounded-lg text-center peer-checked:border-[#0D6B58] peer-checked:bg-[#0D6B58]/5 transition group-hover:border-[#0D6B58]/50">
                        <span class="text-xs text-gray-500 uppercase tracking-wide">{{ $type['network'] }}</span>
                        <p class="text-base sm:text-lg font-medium text-gray-900 mt-1">{{ $type['label'] }}</p>
                    </div>
                </label>
                @endforeach
            </div>
            @error('card_type')
            <p class="text-xs text-red-500 mt-2">{{ $message }}</p>
            @enderror
        </div>

        {{-- Card Design / Color Selection --}}
        <div class="bg-white rounded-lg shadow-sm border border-gray-100 p-4 sm:p-6">
            <h2 class="text-base sm:text-lg font-semibold text-gray-900 mb-4">2. Choose Card Design</h2>

            <div class="mb-4">
                <label class="block text-sm font-medium text-gray-700 mb-2">Card Template (Optional)</label>
                <select name="card_template_id" id="card-template" class="w-full px-3 py-2.5 border border-gray-200 rounded-lg text-sm focus:ring-2 focus:ring-[#0D6B58]/20 focus:border-[#0D6B58]">
                    <option value="">No specific template - Use default</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) }}">
                        {{ $template->name }}
                    </option>
                    @endforeach
                </select>
            </div>

            {{-- Color Picker --}}
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-2">Custom Card Colors</label>
                <p class="text-xs text-gray-500 mb-3">Choose colors for your card design (optional)</p>
                <div class="grid grid-cols-2 sm:grid-cols-3 gap-3 sm:gap-4">
                    <div class="flex items-center gap-2">
                        <label class="block text-xs text-gray-600">Gradient From</label>
                        <input type="color" name="gradient_from" value="{{ old('gradient_from', '#0A5A49') }}" class="w-10 h-10 rounded border border-gray-200 cursor-pointer" style="padding: 0; background: none;">
                    </div>
                    <div class="flex items-center gap-2">
                        <label class="block text-xs text-gray-600">Gradient To</label>
                        <input type="color" name="gradient_to" value="{{ old('gradient_to', '#0D6B58') }}" class="w-10 h-10 rounded border border-gray-200 cursor-pointer" style="padding: 0; background: none;">
                    </div>
                    <div class="flex items-center gap-2">
                        <label class="block text-xs text-gray-600">Accent</label>
                        <input type="color" name="accent_color" value="{{ old('accent_color', '#138A6E') }}" class="w-10 h-10 rounded border border-gray-200 cursor-pointer" style="padding: 0; background: none;">
                    </div>
                    <div class="flex items-center gap-2">
                        <label class="block text-xs text-gray-600">Text</label>
                        <input type="color" name="text_color" value="{{ old('text_color', '#ffffff') }}" class="w-10 h-10 rounded border border-gray-200 cursor-pointer" style="padding: 0; background: none;">
                    </div>
                    <div class="flex items-center gap-2">
                        <label class="block text-xs text-gray-600">Chip</label>
                        <input type="color" name="chip_color" value="{{ old('chip_color', '#d4af37') }}" class="w-10 h-10 rounded border border-gray-200 cursor-pointer" style="padding: 0; background: none;">
                    </div>
                </div>
            </div>
        </div>

        {{-- Preview Card --}}
        <div class="bg-white rounded-lg shadow-sm border border-gray-100 p-4 sm:p-6">
            <h2 class="text-base sm:text-lg font-semibold text-gray-900 mb-4">3. Preview Your Card</h2>
            <div class="flex justify-center">
                <x-card-preview
                    id="card-preview"
                    :design="[]"
                    type="master_debit"
                    name="{{ strtoupper(auth()->user()->name ?? 'CARD HOLDER') }}"
                    number="**** **** **** 0000"
                    expiry="MM/YY"
                    network="MASTERCARD"
                    :show-network-logo="true"
                    size="lg"
                />
            </div>
        </div>

        {{-- Card Holder Name --}}
        <div class="bg-white rounded-lg shadow-sm border border-gray-100 p-4 sm:p-6">
            <h2 class="text-base sm:text-lg font-semibold text-gray-900 mb-4">4. Card Details</h2>
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">Name on Card *</label>
                <input type="text" id="card-name-input" name="card_name" class="w-full px-3 py-2.5 border border-gray-200 rounded-lg text-sm focus:ring-2 focus:ring-[#0D6B58]/20 focus:border-[#0D6B58]" placeholder="Enter name as it should appear on card" value="{{ old('card_name', strtoupper(auth()->user()->name ?? '')) }}" required>
                <p class="text-xs text-gray-500 mt-1">This name will appear on your card</p>
                @error('card_name')
                <p class="text-xs text-red-500 mt-1">{{ $message }}</p>
                @enderror
            </div>
        </div>

        {{-- Physical vs Virtual --}}
        <div class="bg-white rounded-lg shadow-sm border border-gray-100 p-4 sm:p-6">
            <h2 class="text-base sm:text-lg font-semibold text-gray-900 mb-4">5. Delivery Method</h2>
            <div class="flex gap-3 sm:gap-4">
                <label class="flex-1 cursor-pointer">
                    <input type="radio" name="is_physical" value="0" class="peer hidden" {{ old('is_physical') == '0' || !old('is_physical') ? 'checked' : '' }}>
                    <div class="p-4 sm:p-5 border-2 border-gray-200 rounded-lg text-center peer-checked:border-[#0D6B58] peer-checked:bg-[#0D6B58]/5 transition">
                        <svg class="w-8 h-8 sm:w-10 sm:h-10 mx-auto mb-2 text-emerald-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v12m6-6H6"/>
                        </svg>
                        <p class="text-base sm:text-lg font-medium text-gray-900">Virtual Card</p>
                        <p class="text-xs sm:text-sm text-gray-500">Instant delivery via email</p>
                    </div>
                </label>
                <label class="flex-1 cursor-pointer">
                    <input type="radio" name="is_physical" value="1" class="peer hidden" {{ old('is_physical') == '1' ? 'checked' : '' }}>
                    <div class="p-4 sm:p-5 border-2 border-gray-200 rounded-lg text-center peer-checked:border-[#0D6B58] peer-checked:bg-[#0D6B58]/5 transition">
                        <svg class="w-8 h-8 sm:w-10 sm:h-10 mx-auto mb-2 text-[#0D6B58]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8V7m0 10v1m-4-5h8"/>
                        </svg>
                        <p class="text-base sm:text-lg font-medium text-gray-900">Physical Card</p>
                        <p class="text-xs sm:text-sm text-gray-500">Shipped to your address</p>
                    </div>
                </label>
            </div>
        </div>

        {{-- Physical card delivery address --}}
        @if(($settings['allow_physical_cards'] ?? true) == '1')
        <div id="delivery-address-section" style="display:none;" class="bg-white rounded-lg shadow-sm border border-gray-100 p-4 sm:p-6">
            <h2 class="text-base sm:text-lg font-semibold text-gray-900 mb-4">6. Shipping Address</h2>
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">Delivery Address *</label>
                <textarea name="delivery_address" rows="3" class="w-full px-3 py-2.5 border border-gray-200 rounded-lg text-sm focus:ring-2 focus:ring-[#0D6B58]/20 focus:border-[#0D6B58]" placeholder="Enter full delivery address" required>{{ old('delivery_address', '') }}</textarea>
                @error('delivery_address')
                <p class="text-xs text-red-500 mt-1">{{ $message }}</p>
                @enderror
            </div>
        </div>
        @endif

        {{-- Phone Number --}}
        <div class="bg-white rounded-lg shadow-sm border border-gray-100 p-4 sm:p-6">
            <h2 class="text-base sm:text-lg font-semibold text-gray-900 mb-4">7. Contact Information</h2>
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">Phone Number *</label>
                <input type="tel" name="phone_number" class="w-full px-3 py-2.5 border border-gray-200 rounded-lg text-sm focus:ring-2 focus:ring-[#0D6B58]/20 focus:border-[#0D6B58]" placeholder="Phone number for card delivery updates" value="{{ old('phone_number', auth()->user()->phone ?? '') }}" required>
                @error('phone_number')
                <p class="text-xs text-red-500 mt-1">{{ $message }}</p>
                @enderror
            </div>
        </div>

        {{-- Fees --}}
        @php
            $requestPrice = $settings['card_request_price'] ?? 0;
            $physicalPrice = $settings['physical_card_price'] ?? 0;
        @endphp
        @if($requestPrice > 0)
        <div class="bg-gray-50 rounded-lg p-4 sm:p-6">
            <h3 class="text-sm font-semibold text-gray-900 mb-2">Fees</h3>
            <div class="space-y-1 text-sm text-gray-600">
                <div class="flex justify-between">
                    <span>Card Request Fee:</span>
                    <span class="font-semibold text-[#0D6B58]">${{ number_format($requestPrice, 2) }}</span>
                </div>
                @if($physicalPrice > 0 && ($settings['allow_physical_cards'] ?? true) == '1')
                <div class="flex justify-between">
                    <span>Physical Card Shipping Fee:</span>
                    <span class="font-semibold text-[#0D6B58]">${{ number_format($physicalPrice, 2) }}</span>
                </div>
                @endif
            </div>
        </div>
        @endif

        {{-- Submit Button --}}
        <button type="submit" class="w-full py-3 bg-[#0D6B58] text-[#0D6B58] text-base sm:text-lg font-semibold rounded-lg hover:bg-[#0A5A49] transition shadow-sm hover:shadow-md">
            <svg class="w-5 h-5 inline mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"/>
            </svg>
            Submit Card Request
        </button>

        <p class="text-center text-xs sm:text-sm text-gray-500 mt-3">
            Your request will be reviewed by the admin. You'll be notified once approved.
        </p>
    </form>
</div>

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    console.log('Card setup page loaded');

    // Toggle physical/virtual card delivery
    document.querySelectorAll('input[name="is_physical"]').forEach(radio => {
        radio.addEventListener('change', function() {
            var addressSection = document.getElementById('delivery-address-section');
            if (addressSection) {
                addressSection.style.display = this.value === '1' ? 'block' : 'none';
            }
        });
    });

    // Update card preview when template or colors change
    var preview = document.getElementById('card-preview');
    var templateSelect = document.getElementById('card-template');
    var cardNameInput = document.getElementById('card-name-input');

    function updatePreview() {
        if (!preview) {
            console.error('Preview element not found');
            return;
        }

        var selectedOpt = templateSelect.options[templateSelect.selectedIndex];

        // Get data attributes (kebab-case converts to camelCase in dataset)
        var gradientFrom = selectedOpt.dataset.gradientfrom || '#0A5A49';
        var gradientTo = selectedOpt.dataset.gradientto || '#0D6B58';
        var accentColor = selectedOpt.dataset.accentcolor || '#138A6E';
        var textColor = selectedOpt.dataset.textcolor || '#ffffff';
        var chipColor = selectedOpt.dataset.chipcolor || '#d4af37';
        var network = selectedOpt.dataset.network || 'MASTERCARD';

        console.log('Updating preview:', { gradientFrom, gradientTo, accentColor, textColor, chipColor, network });

        preview.style.setProperty('--cp-from', gradientFrom);
        preview.style.setProperty('--cp-to', gradientTo);
        preview.style.setProperty('--cp-accent', accentColor);
        preview.style.setProperty('--cp-text', textColor);
        preview.style.setProperty('--cp-chip', chipColor);

        var net = preview.querySelector('.card-preview-network');
        if (net) {
            net.textContent = network;
            console.log('Network updated:', network);
        }

        // Update card holder name on preview
        var nameEl = preview.querySelector('.card-preview-value');
        if (nameEl && cardNameInput) {
            var nameValue = cardNameInput.value.trim().toUpperCase() || 'CARD HOLDER';
            nameEl.textContent = nameValue;
            console.log('Name updated:', nameValue);
        }
    }

    // Event listener for template select
    if (templateSelect) {
        templateSelect.addEventListener('change', function() {
            console.log('Template changed:', this.value);
            updatePreview();
        });
    }

    // Event listener for color inputs
    document.querySelectorAll('input[type="color"]').forEach(function(input) {
        input.addEventListener('input', function() {
            console.log('Color changed:', this.name, this.value);
            var name = this.name;
            var value = this.value;
            if (name === 'gradient_from') preview.style.setProperty('--cp-from', value);
            if (name === 'gradient_to') preview.style.setProperty('--cp-to', value);
            if (name === 'accent_color') preview.style.setProperty('--cp-accent', value);
            if (name === 'text_color') preview.style.setProperty('--cp-text', value);
            if (name === 'chip_color') preview.style.setProperty('--cp-chip', value);
        });
    });

    // Event listener for card name input
    if (cardNameInput) {
        cardNameInput.addEventListener('input', function() {
            console.log('Card name changed:', this.value);
            updatePreview();
        });
    }

    // Set initial preview after a short delay to ensure elements are rendered
    setTimeout(function() {
        updatePreview();
    }, 100);
});
</script>
@endpush
@endsection