@extends('layouts.customer')

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

    <div class="flex items-center justify-between mb-2 sm:mb-4 flex-wrap gap-2">
        <h1 class="text-xl sm:text-2xl lg:text-3xl font-bold text-gray-900">My Cards</h1>
        <a href="{{ route('customer.cards.create') }}" class="inline-flex items-center px-4 py-2 bg-white border-2 border-[#0D6B58] text-[#0D6B58] text-xs sm:text-sm lg:text-base font-bold rounded-lg hover:bg-[#0D6B58]/5 hover:border-[#0D6B58]/50 transition shadow-sm hover:shadow-md">
            <svg class="w-4 h-4 mr-1.5 text-[#0D6B58]" 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>
            <span class="hidden sm:inline">Request New</span> Card
        </a>
    </div>

    @if(isset($cards) && $cards->count())
    <div class="mt-1 sm:mt-2 lg:mt-4 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3 sm:gap-4 lg:gap-6">
        @foreach($cards as $card)
        <div class="space-y-2 sm:space-y-3">
            {{-- Visual Card (rendered from template design) --}}
            <x-card-preview
                :design="$card->resolved_design"
                :type="$card->card_type"
                :name="$card->cardholder_name"
                :number="$card->masked_number"
                :expiry="$card->expiry_date"
                :network="$card->card_network"
                :show-network-logo="$card->show_network_logo"
                size="sm"
            />

            {{-- Card Info --}}
            <div class="bg-white rounded-lg shadow-sm border border-gray-100 p-2.5 sm:p-3 lg:p-4">
                <div class="flex items-center justify-between mb-1.5 sm:mb-2">
                    <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium
                        @if($card->status === 'active') bg-emerald-100 text-emerald-700
                        @elseif($card->status === 'frozen') bg-blue-100 text-blue-700
                        @else bg-rose-100 text-rose-700 @endif">
                        {{ ucfirst($card->status) }}
                    </span>
                    <a href="{{ route('customer.cards.show', $card->id) }}" class="text-xs sm:text-sm text-[#0D6B58] hover:underline font-medium">View Details</a>
                </div>

                {{-- Card Details --}}
                <div class="grid grid-cols-2 gap-2 text-xs text-gray-600 mb-2">
                    <div>
                        <span class="block text-gray-400">Card Number</span>
                        <span class="font-mono font-medium text-gray-800">**** **** **** {{ $card->card_number_last4 }}</span>
                    </div>
                    <div>
                        <span class="block text-gray-400">Expires</span>
                        <span class="font-medium text-gray-800">{{ $card->expiry_date }}</span>
                    </div>
                    <div>
                        <span class="block text-gray-400">Type</span>
                        <span class="font-medium text-gray-800">{{ $card->card_type_label ?? ucfirst($card->card_type) }}</span>
                    </div>
                    <div>
                        <span class="block text-gray-400">Daily Limit</span>
                        <span class="font-medium text-gray-800">${{ number_format($card->daily_limit ?? 0, 0) }}</span>
                    </div>
                </div>

                <div class="flex flex-wrap gap-1.5 sm:gap-2">
                    @if($card->status === 'active')
                    <form method="POST" action="{{ route('customer.cards.freeze', $card->id) }}" class="flex-1 min-w-[80px]">
                        @csrf
                        @method('PATCH')
                        <button type="submit" class="w-full py-1.5 text-xs font-medium text-blue-700 bg-blue-50 rounded-lg hover:bg-blue-100 transition">Freeze</button>
                    </form>
                    @elseif($card->status === 'frozen')
                    <form method="POST" action="{{ route('customer.cards.unfreeze', $card->id) }}" class="flex-1 min-w-[80px]">
                        @csrf
                        @method('PATCH')
                        <button type="submit" class="w-full py-1.5 text-xs font-medium text-emerald-700 bg-emerald-50 rounded-lg hover:bg-emerald-100 transition">Unfreeze</button>
                    </form>
                    @endif
                    @if($card->status !== 'blocked')
                    <form method="POST" action="{{ route('customer.cards.block', $card->id) }}" class="flex-1 min-w-[80px]" onsubmit="return confirm('Are you sure you want to block this card?')">
                        @csrf
                        @method('PATCH')
                        <button type="submit" class="w-full py-1.5 text-xs font-medium text-rose-700 bg-rose-50 rounded-lg hover:bg-rose-100 transition">Block</button>
                    </form>
                    @endif
                </div>
            </div>
        </div>
        @endforeach
    </div>
    @else
    <div class="mt-1 sm:mt-2 lg:mt-4 bg-white rounded-lg shadow-sm border border-gray-100 p-6 sm:p-8 lg:p-12 text-center">
        <svg class="w-12 sm:w-14 h-12 sm:h-14 text-gray-300 mx-auto mb-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"/>
        </svg>
        <h3 class="text-base sm:text-lg lg:text-xl font-semibold text-gray-900 mb-1">No Cards Found</h3>
        <p class="text-gray-500 text-xs sm:text-sm mb-3">You don't have any cards yet. Request one to get started.</p>
        <a href="{{ route('customer.cards.create') }}" class="inline-flex items-center px-5 py-2 bg-white border-2 border-[#0D6B58] text-[#0D6B58] text-sm font-bold rounded-lg hover:bg-[#0D6B58]/5 hover:border-[#0D6B58]/50 transition shadow-sm hover:shadow-md">
            <svg class="w-4 h-4 mr-1.5 text-[#0D6B58]" 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>
            Request Card
        </a>
    </div>
    @endif

    {{-- Request Card Modal --}}
    <div id="request-card-modal" class="hidden fixed inset-0 z-50 overflow-y-auto">
        <div class="flex items-center justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:block sm:p-0">
            <div class="fixed inset-0 transition-opacity bg-gray-500 bg-opacity-75" onclick="document.getElementById('request-card-modal').classList.add('hidden')"></div>
            <div class="inline-block w-full max-w-sm sm:max-w-md lg:max-w-lg p-3 sm:p-4 lg:p-6 my-4 sm:my-6 lg:my-8 text-left align-bottom transition-all transform bg-white rounded-xl shadow-xl">
                <div class="flex items-center justify-between mb-2 sm:mb-3">
                    <h3 class="text-base sm:text-lg font-semibold text-gray-900">Request New Card</h3>
                    <button onclick="document.getElementById('request-card-modal').classList.add('hidden')" class="p-1 rounded-lg hover:bg-gray-100 transition">
                        <svg class="w-4 h-4 sm:w-5 sm:h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
                        </svg>
                    </button>
                </div>
                <form method="POST" action="{{ route('customer.cards.request') }}" class="space-y-3 sm:space-y-4">
                    @csrf
                    @php
                        $cardTypes = [
                            ['value' => 'master_debit', 'label' => 'Mastercard Debit', 'network' => 'MASTERCARD'],
                            ['value' => 'visa_debit', 'label' => 'Visa Debit', 'network' => 'VISA'],
                            ['value' => 'master_credit', 'label' => 'Mastercard Credit', 'network' => 'MASTERCARD'],
                            ['value' => 'visa_credit', 'label' => 'Visa Credit', 'network' => 'VISA'],
                        ];
                        $allowPhysical = ($settings['allow_physical_cards'] ?? true) == '1';
                    @endphp

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

                    <div>
                        <label class="block text-xs sm:text-sm font-medium text-gray-700 mb-1.5 sm:mb-2">Card Type *</label>
                        <div class="grid grid-cols-2 gap-2 sm:gap-3">
                            @foreach($cardTypes as $type)
                            <label class="cursor-pointer">
                                <input type="radio" name="card_type" value="{{ $type['value'] }}" class="peer hidden" {{ old('card_type') == $type['value'] ? 'checked' : '' }}>
                                <div class="p-2 sm:p-3 border-2 border-gray-200 rounded-lg text-center peer-checked:border-[#0D6B58] peer-checked:bg-[#0D6B58]/5 transition">
                                    <p class="text-xs text-gray-500 mb-0.5">{{ $type['network'] }}</p>
                                    <p class="text-xs sm:text-sm font-medium text-gray-900">{{ $type['label'] }}</p>
                                </div>
                            </label>@endforeach
                        </div>
                        @error('card_type')
                        <p class="text-xs text-red-500 mt-1">{{ $message }}</p>
                        @enderror
                    </div>

                    @if($allowPhysical)
                    <div class="mt-1 sm:mt-2">
                        <label class="block text-xs sm:text-sm font-medium text-gray-700 mb-1.5 sm:mb-2">Card Delivery</label>
                        <div class="flex gap-2 sm:gap-3">
                            <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-2 sm:p-3 border-2 border-gray-200 rounded-lg text-center peer-checked:border-[#0D6B58] peer-checked:bg-[#0D6B58]/5 transition">
                                    <p class="text-xs sm:text-sm font-medium text-gray-900">Virtual Card</p>
                                    <p class="text-xs text-gray-500">Instant delivery</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-2 sm:p-3 border-2 border-gray-200 rounded-lg text-center peer-checked:border-[#0D6B58] peer-checked:bg-[#0D6B58]/5 transition">
                                    <p class="text-xs sm:text-sm font-medium text-gray-900">Physical Card</p>
                                    <p class="text-xs text-gray-500">Shipped to address</p>
                                </div>
                            </label>
                        </div>
                    </div>
                    @endif

                    <div>
                        <label class="block text-xs sm:text-sm font-medium text-gray-700 mb-1">Card Design (Optional)</label>
                        <select name="card_template_id" id="request-template" class="w-full px-2.5 py-2 border border-gray-200 rounded-lg text-xs sm:text-sm focus:ring-2 focus:ring-[#0D6B58]/20 focus:border-[#0D6B58]">
                            <option value="">Default design (admin will decide)</option>
                            @foreach($templates as $template)
                            <option value="{{ $template->id }}"
                                    data-type="{{ $template->card_type }}"
                                    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 }} ({{ ucfirst($template->card_type) }})
                            </option>
                            @endforeach
                        </select>
                    </div>

                    <div class="flex justify-center py-1">
                        <x-card-preview
                            id="request-preview"
                            :design="[]"
                            type="master_debit"
                            name="{{ strtoupper(auth()->user()->name ?? 'CARD HOLDER') }}"
                            number="**** **** **** 0000"
                            expiry="MM/YY"
                            network="MASTERCARD"
                            :show-network-logo="true"
                            size="sm"
                        />
                    </div>

                    @if($allowPhysical)
                    <div id="delivery-address-group" style="display:none;">
                        <label class="block text-xs sm:text-sm font-medium text-gray-700 mb-1">Delivery Address</label>
                        <textarea name="delivery_address" rows="2" class="w-full px-2.5 py-2 border border-gray-200 rounded-lg text-xs sm:text-sm focus:ring-2 focus:ring-[#0D6B58]/20 focus:border-[#0D6B58]" placeholder="Enter delivery address"></textarea>
                    </div>
                    @endif

                    <div>
                        <label class="block text-xs sm:text-sm font-medium text-gray-700 mb-1">Phone Number *</label>
                        <input type="tel" name="phone_number" class="w-full px-2.5 py-2 border border-gray-200 rounded-lg text-xs sm:text-sm focus:ring-2 focus:ring-[#0D6B58]/20 focus:border-[#0D6B58]" placeholder="Phone number" value="{{ auth()->user()->phone ?? '' }}" required>
                        @error('phone_number')
                        <p class="text-xs text-red-500 mt-1">{{ $message }}</p>
                        @enderror
                    </div>

                    @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-2 sm:p-3 text-center">
                        <p class="text-xs sm:text-sm text-gray-600">
                            @if($allowPhysical)
                            Card Request Fee: <span class="font-semibold text-[#0D6B58]">${{ number_format($requestPrice, 2) }}</span>
                            @if($physicalPrice > 0)
                            <br>Physical Card Fee: <span class="font-semibold text-[#0D6B58]">${{ number_format($physicalPrice, 2) }}</span>
                            @endif
                            @else
                            Card Request Fee: <span class="font-semibold text-[#0D6B58]">${{ number_format($requestPrice, 2) }}</span>
                            @endif
                        </p>
                    </div>
                    @endif

                    <button type="submit" class="w-full py-2 bg-[#0D6B58] text-white text-xs sm:text-sm font-semibold rounded-lg hover:bg-[#0A5A49] transition shadow-sm">
                        Submit Card Request
                    </button>
                </form>
            </div>
        </div>
    </div>
</div>

@endsection