@extends('member.layouts.default')
@section('page_title', __('Payment Request') . config('default.page_title_delimiter') . config('default.app_name'))

@section('content')
@if($partnerData)
<div class="min-h-screen bg-slate-50 dark:bg-slate-950 font-sans antialiased text-slate-800 dark:text-slate-200 transition-colors duration-200 pb-24" dir="rtl">
    
    {{-- Cover Section --}}
    <div class="relative w-full h-64 md:h-80 bg-slate-900 overflow-hidden">
        @if($partnerData->getCoverUrl())
            <img src="{{ $partnerData->getCoverUrl() }}" class="w-full h-full object-cover opacity-70 dark:opacity-40" alt="{{ __('Cover') }}">
        @else
            <div class="w-full h-full opacity-20" style="background-color: {{ $partnerData->brand_color ?? '#10B981' }}"></div>
        @endif
		<div class="absolute top-6 right-6 z-30">
            <a href="javascript:history.back()" class="w-10 h-10 bg-white/80 dark:bg-black-900/85 backdrop-blur-md rounded-full flex items-center justify-center text-slate-800 dark:text-white shadow-lg hover:scale-105 transition-all border border-slate-200/50 dark:border-slate-800/50">
                <svg class="w-5 h-5 transform rotate-180" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3"></path>
                </svg>
            </a>
        </div>

        <div class="absolute inset-0 bg-gradient-to-t from-slate-950 via-slate-950/40 to-transparent flex items-end">
            <div class="max-w-5xl w-full mx-auto px-6 md:px-12 pb-6 md:pb-8 flex flex-col md:flex-row items-center md:items-end gap-5 text-center md:text-right">
                
                {{-- Logo / Avatar --}}
                <div class="w-24 h-24 md:w-28 md:h-28 rounded-2xl p-1 bg-white dark:bg-slate-800 shadow-2xl overflow-hidden shrink-0">
                    <div class="w-full h-full rounded-xl overflow-hidden bg-slate-50 dark:bg-slate-700 flex items-center justify-center">
                        @if($partnerData->getAvatarUrl())
                            <img src="{{ $partnerData->getAvatarUrl() }}" class="w-full h-full object-cover" alt="{{ __('Logo') }}">
                        @else
                            <div class="w-full h-full flex items-center justify-center font-black text-3xl text-white" style="background-color: {{ $partnerData->brand_color ?? '#10B981' }}">
                                {{ mb_substr($partnerData->business_name ?? $partnerData->name ?? 'P', 0, 1, 'utf-8') }}
                            </div>
                        @endif
                    </div>
                </div>

                {{-- Business Info --}}
                <div class="space-y-2 mb-2 flex-1">
                    <div class="flex flex-col md:flex-row items-center gap-3 justify-center md:justify-start">
                        <h1 class="text-2xl md:text-4xl font-black tracking-tight text-white flex items-center gap-2">
                            {{ $partnerData->business_name ?? $partnerData->name }}
                            <svg class="w-8 h-8 text-blue-500 shrink-0" fill="currentColor" viewBox="0 0 20 20">
                                <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
                            </svg>
                        </h1>
                        
                        @if(method_exists($partnerData, 'isCurrentlyOpen'))
                            @if($partnerData->isCurrentlyOpen())
                                <span class="inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-xs font-bold bg-emerald-500/20 text-emerald-400 border border-emerald-500/30 backdrop-blur-md">
                                    <span class="w-1.5 h-1.5 rounded-full bg-emerald-400 animate-pulse"></span>
                                    {{ __('Open now') }}
                                </span>
                            @else
                                <span class="inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-xs font-bold bg-rose-500/20 text-rose-400 border border-rose-500/30 backdrop-blur-md">
                                    <span class="w-1.5 h-1.5 rounded-full bg-rose-400"></span>
                                    {{ __('Closed currently') }}
                                </span>
                            @endif
                        @endif
                    </div>

                    @if($partnerData->tagline)
                        <p class="text-xs md:text-sm font-medium text-slate-300 italic">
                            "{{ $partnerData->tagline }}"
                        </p>
                    @endif
                </div>

            </div>
        </div>
        
        <div class="max-w-5xl mx-auto px-6 md:px-12 relative">
            <a href="#" class="absolute top-6 right-6 w-10 h-10 bg-white/90 dark:bg-slate-800/90 backdrop-blur-md rounded-full flex items-center justify-center text-slate-800 dark:text-white shadow-lg hover:scale-105 transition-all z-20">
                <svg class="w-8 h-8" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3"></path>
                </svg>
            </a>
        </div>
    </div>

    {{-- Main Content Grid --}}
    <div class="max-w-5xl mx-auto px-6 md:px-12 mt-12 grid grid-cols-1 md:grid-cols-2 gap-12">
        
        {{-- Right Side: Description, Cards, and Rewards --}}
        <div class="md:col-span-2 lg:col-span-1 space-y-12 text-right">
            
            @if($partnerData->description)
                <div class="space-y-3">
                    <p class="text-base md:text-lg text-slate-600 dark:text-slate-300 leading-relaxed font-medium">
                        {{ $partnerData->description }}
                    </p>
                </div>
            @endif

            @if((isset($joinedCards) && count($joinedCards) > 0) || (isset($unjoinedCards) && count($unjoinedCards) > 0) || ($partnerData->stampCards && $partnerData->stampCards->count() > 0))
                <div class="space-y-6">
                    
                    {{-- Active Joined Cards --}}
                    @if(isset($joinedCards) && count($joinedCards) > 0)
                        <div class="space-y-4">
                            <h3 class="text-xs font-bold uppercase tracking-widest text-blue-500 dark:text-blue-400 flex items-center gap-2">
                                <span class="w-1.5 h-1.5 rounded-full bg-blue-500"></span>
                                {{ __('Your Active Cards (Joined)') }}
                            </h3>
                            <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                                @foreach($joinedCards as $card)
                                    <div class="p-5 rounded-2xl bg-white dark:bg-slate-900 border border-blue-100/80 dark:border-blue-950/40 shadow-sm flex flex-col justify-between gap-4">
                                        <div class="space-y-1">
                                            <div class="flex justify-between items-start gap-2">
                                                <h4 class="font-bold text-base text-slate-900 dark:text-white">{{ $card->title }}</h4>
                                                <span class="text-[10px] font-black px-2 py-0.5 rounded-full bg-blue-600 text-white shrink-0 font-mono">
                                                    {{ $card->pivot->stamps_count ?? 0 }} / {{ $card->stamps_needed }}
                                                </span>
                                            </div>
                                            <p class="text-xs text-slate-500 dark:text-slate-400 line-clamp-2">{{ $card->description }}</p>
                                        </div>
                                        
                                        <div class="w-full bg-slate-100 dark:bg-slate-800 rounded-full h-1 overflow-hidden">
                                            @php $percent = (($card->pivot->stamps_count ?? 0) / $card->stamps_needed) * 100; @endphp
                                            <div class="bg-blue-600 h-1 rounded-full" style="width: {{ min($percent, 100) }}%"></div>
                                        </div>

                                        <div class="flex justify-between items-center pt-1">
                                            <span class="text-[11px] text-slate-400 dark:text-slate-500 font-medium">
                                                {{ __('stamps remaining :count', ['count' => max($card->stamps_needed - ($card->pivot->stamps_count ?? 0), 0)]) }}
                                            </span>
                                            <button class="text-xs font-black text-blue-500 dark:text-blue-400 hover:underline flex items-center gap-1">
                                                {{ __('View Progress') }} <span>←</span>
                                            </button>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    @endif

                    {{-- Unjoined Explore Cards --}}
                    @php
                        $displayCards = isset($unjoinedCards) ? $unjoinedCards : $partnerData->stampCards;
                    @endphp

                    @if(count($displayCards) > 0)
                        <div class="space-y-4 pt-2">
                            <h3 class="text-xs font-bold uppercase tracking-widest text-slate-400 dark:text-slate-500">
                                {{ isset($joinedCards) && count($joinedCards) > 0 ? __('Cards Available to Explore') : __('Available Stamp Cards') }}
                            </h3>
                            <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                                @foreach($displayCards as $card)
                                    @if(isset($joinedCards) && $joinedCards->contains($card->id)) @continue @endif
                                    
                                    <div class="p-5 rounded-2xl bg-white dark:bg-slate-900 border border-slate-100 dark:border-slate-800/60 shadow-sm flex flex-col justify-between gap-4">
                                        <div class="space-y-1">
                                            <h4 class="font-bold text-base text-slate-900 dark:text-white">{{ $card->title }}</h4>
                                            <p class="text-xs text-slate-500 dark:text-slate-400 line-clamp-2">{{ $card->description }}</p>
                                        </div>
                                        <div class="flex justify-between items-center pt-2">
                                            <span class="text-xs font-bold px-2.5 py-1 rounded-lg bg-blue-50 dark:bg-blue-950/40 text-blue-600 dark:text-blue-400">
                                                {{ __(':count stamps required', ['count' => $card->stamps_needed]) }}
                                            </span>
                                            <button class="text-xs font-black text-slate-800 dark:text-slate-200 hover:underline flex items-center gap-1">
                                                {{ __('View Card') }} <span>←</span>
                                            </button>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    @endif

                </div>
            @endif

            {{-- Rewards Section --}}
            @if($partnerData->rewards && $partnerData->rewards->count() > 0)
                <div class="space-y-4">
                    <h3 class="text-xs font-bold uppercase tracking-widest text-slate-400 dark:text-slate-500">{{ __('Current Rewards & Gifts') }}</h3>
                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                        @foreach($partnerData->rewards as $reward)
                            <div class="p-4 rounded-2xl bg-gradient-to-br from-slate-50 to-slate-100/50 dark:from-slate-900 dark:to-slate-900/50 border border-slate-200/60 dark:border-slate-800/40 flex items-center gap-4">
                                <div class="w-12 h-12 rounded-xl bg-amber-500/10 text-amber-500 flex items-center justify-center shrink-0">
                                    <svg class="w-6 h-6" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" d="M21 11.25v8.25a1.5 1.5 0 01-1.5 1.5H5.25a1.5 1.5 0 01-1.5-1.5v-8.25M12 4.5v16.5m-6.75-6.75h13.5M6 7.5l6-3 6 3M6 7.5h12m-12 0v3.75h12V7.5"></path>
                                    </svg>
                                </div>
                                <div class="space-y-0.5">
                                    <h4 class="font-bold text-sm text-slate-900 dark:text-white">{{ $reward->title }}</h4>
                                    <p class="text-xs text-slate-500 dark:text-slate-400 font-medium">{{ __(':count points required', ['count' => $reward->points]) }}</p>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            @endif

        </div>

        {{-- Left Side: Sidebar Contacts / Location & Opening Hours --}}
        <div class="space-y-10 text-right">
            
            {{-- Address Section --}}
            @if($partnerData->address_line_1)
                <div class="space-y-3">
                    <h3 class="text-xs font-bold uppercase tracking-widest text-slate-400 dark:text-slate-500">{{ __('Address & Location') }}</h3>
                    <div class="text-base text-slate-800 dark:text-slate-100 font-bold flex items-start gap-2">
                        <svg class="w-8 h-8 text-slate-400 dark:text-slate-500 shrink-0 mt-0.5" fill="none" stroke="currentColor" stroke-width="1" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M15 10.5a3 3 0 11-6 0 3 3 0 016 0z"></path>
                            <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1115 0z"></path>
                        </svg>
                        <div>
                            {{ $partnerData->address_line_1 }}
							<br>
                            {{ $partnerData->address_line_2 }}
                            @if($partnerData->city) <span class="text-slate-400 dark:text-slate-500 font-medium">، {{ $partnerData->city }}</span> @endif
                        </div>
                    </div>
                    @if($partnerData->maps_url)
                        <a href="{{ $partnerData->maps_url }}" target="_blank" class="inline-flex items-center gap-1.5 text-xs font-bold text-blue-600 dark:text-blue-400 hover:underline pt-0.5">
                            <svg class="w-8 h-8" fill="none" stroke="currentColor" stroke-width="1" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M9 6.75V15m6-6v8.25m.503 3.498l4.875-2.437c.381-.19.622-.58.622-1.006V4.82c0-.836-.88-1.38-1.628-1.006l-3.869 1.934c-.317.159-.69.159-1.006 0L9.503 3.252a1.125 1.125 0 00-1.006 0L3.622 5.51c-.38.19-.622.58-.622 1.006v11.433c0 .836.88 1.38 1.628 1.006l3.869-1.934c.317-.159.69-.159 1.006 0l4.994 2.497c.317.158.69.158 1.006 0z"></path>
                            </svg>
                            {{ __('Map Directions') }}
                        </a>
                    @endif
                </div>
            @endif

            {{-- Contact Section --}}
            <div class="space-y-3">
                <h3 class="mt-8 text-xs font-bold uppercase tracking-widest text-slate-400 dark:text-slate-500">{{ __('Contact Us') }}</h3>
                <div class="flex flex-col gap-3 text-sm font-semibold text-slate-600 dark:text-slate-300">
                    @if($partnerData->phone)
                        <a href="tel:{{ $partnerData->phone }}" class="hover:text-blue-600 dark:hover:text-blue-400 transition-colors flex items-center gap-2">
                            <svg class="w-8 h-8 text-slate-400" fill="none" stroke="currentColor" stroke-width="1" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M10.5 1.5H8.25A2.25 2.25 0 006 3.75v16.5a2.25 2.25 0 002.25 2.25h7.5A2.25 2.25 0 0018 20.25V3.75a2.25 2.25 0 00-2.25-2.25H13.5m-3 0V3h3V1.5m-3 0h3m-3 18.75h3"></path>
                            </svg>
                            <span class="font-mono text-xs" dir="ltr">{{ $partnerData->phone }}</span>
                        </a>
                    @endif
                    
                    <a href="mailto:{{ $partnerData->email }}" class="hover:text-blue-600 dark:hover:text-blue-400 transition-colors flex items-center gap-2">
                        <svg class="w-8 h-8 text-slate-400" fill="none" stroke="currentColor" stroke-width="1" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M21.75 6.75v10.5a2.25 2.25 0 01-2.25 2.25h-15a2.25 2.25 0 01-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25m19.5 0v.243a2.25 2.25 0 01-1.07 1.916l-7.5 4.615a2.25 2.25 0 01-2.36 0L3.32 8.91a2.25 2.25 0 01-1.07-1.916V6.75"></path>
                        </svg>
                        <span class="text-xs">{{ $partnerData->email }}</span>
                    </a>
                    
                    @if($partnerData->website)
                        <a href="{{ $partnerData->website }}" target="_blank" class="hover:text-blue-600 dark:hover:text-blue-400 transition-colors flex items-center gap-2">
                            <svg class="w-8 h-8 text-slate-400" fill="none" stroke="currentColor" stroke-width="1" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M12 21a9.004 9.004 0 008.716-6.747M12 21a9.004 9.004 0 01-8.716-6.747M12 21c2.485 0 4.5-4.03 4.5-9S14.485 3 12 3m0 18c-2.485 0-4.5-4.03-4.5-9S9.515 3 12 3m0 0a8.997 8.997 0 017.843 4.582M12 3a8.997 8.997 0 00-7.843 4.582m15.686 0A11.953 11.953 0 0112 10.5c-2.998 0-5.74-1.1-7.843-2.918m15.686 0A8.959 8.959 0 0121 12c0 .778-.099 1.533-.284 2.253m0 0A17.919 17.919 0 0112 16.5c-3.162 0-6.133-.815-8.716-2.247m0 0A9.015 9.015 0 013 12c0-.778.099-1.533.284-2.253"></path>
                            </svg>
                            <span class="text-xs">{{ __('Official Website') }}</span>
                        </a>
                    @endif
                </div>
            </div>

            {{-- Opening Hours Section --}}
            @if($partnerData->opening_hours)
			<hr class="m-2 mb-8">
                <div class="space-y-4">
                    <h3 class="text-xs font-bold uppercase tracking-widest text-slate-400 dark:text-slate-500 flex items-center gap-1.5">
                        <svg class="w-8 h-8 text-slate-400" fill="none" stroke="currentColor" stroke-width="1" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                        </svg>
                        {{ __('Opening Hours') }}
                    </h3>
                    <div class="space-y-3">
                        @foreach($partnerData->opening_hours as $day => $hours)
                            @php 
                                $isToday = strtolower(date('l')) === strtolower($day); 
                            @endphp
                            <div class="flex justify-between items-center text-xs pb-1.5 {{ $isToday ? 'font-bold text-slate-950 dark:text-white border-b border-slate-200 dark:border-slate-800' : 'text-slate-500 dark:text-slate-400' }}">
                                <span class="capitalize flex items-center gap-2">
                                    {{ __($day) }}
                                    @if($isToday) <span class="w-1 h-1 rounded-full" style="background-color: {{ $partnerData->brand_color ?? '#10B981' }}"></span> @endif
                                </span>
                                <span class="font-mono text-[11px]">
                                    @if(isset($hours['closed']) && $hours['closed'] == '1')
                                        <span class="text-rose-500 font-bold">{{ __('Closed') }}</span>
                                    @else
                                        {{ $hours['open'] ?? '00:00' }} - {{ $hours['close'] ?? '00:00' }}
                                    @endif
                                </span>
                            </div>
                        @endforeach
                    </div>
                </div>
            @endif

            {{-- Social Links Section --}}
            @if($partnerData->social_links)
                <div class="space-y-3 pt-2">
                    <h3 class="mt-8 text-xs font-bold uppercase tracking-widest text-slate-400 dark:text-slate-500">{{ __('Follow Us') }}</h3>
                    <div class="flex flex-wrap gap-4">
                        @foreach(['facebook', 'instagram', 'tiktok', 'twitter'] as $network)
                            @if(!empty($partnerData->social_links[$network]))
                                <a href="{{ $partnerData->social_links[$network] }}" target="_blank" class="p-2 rounded-xl bg-slate-100 hover:bg-slate-200 dark:bg-slate-900 dark:hover:bg-slate-800 text-slate-600 dark:text-slate-400 dark:hover:text-white transition-all shadow-sm" title="{{ __($network) }}">
                                    @if($network === 'facebook')
                                        <svg class="w-10 h-10" fill="currentColor" viewBox="0 0 24 24"><path d="M22 12c0-5.52-4.48-10-10-10S2 6.48 2 12c0 4.84 3.44 8.87 8 9.8V15H8v-3h2V9.5C10 7.57 11.57 6 13.5 6H16v3h-2c-.55 0-1 .45-1 1v2h3v3h-3v6.95c4.56-.93 8-4.96 8-9.75z"/></svg>
                                    @elseif($network === 'instagram')
                                        <svg class="w-10 h-10" fill="none" stroke="currentColor" stroke-width="1" viewBox="0 0 24 24"><rect x="2" y="2" width="20" height="20" rx="5" ry="5"></rect><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"></path><line x1="17.5" y1="6.5" x2="17.51" y2="6.5"></line></svg>
                                    @elseif($network === 'tiktok')
                                        <svg class="w-10 h-10" fill="currentColor" viewBox="0 0 24 24"><path d="M12.53.02C13.84 0 15.14.01 16.44 0c.08 1.53.63 3.01 1.62 4.2 1.01.06 2.03-.01 3.04-.03v3.86c-1.39-.02-2.74-.46-3.91-1.21-.17 2.14-.14 4.31-.17 6.46-.02 2.27-.67 4.54-1.99 6.41-1.62 2.39-4.23 3.99-7.14 4.23-2.98.3-6.07-.61-8.16-2.76C-2.22 19 2.06 11.89 6.22 11.23c.03 1.25.01 2.51.02 3.76-1.56.28-3.08 1.15-3.81 2.58-.93 1.64-.72 3.86.51 5.28 1.22 1.45 3.19 2.14 5.06 1.8 1.77-.25 3.37-1.39 4.14-3 .58-1.12.65-2.39.63-3.64V0h-3.23c.01 2.01-.18 4.04-1.14 5.82-.41.02-.82.01-1.22.01V2.13C9.03 2.11 10.9 1.45 12.53.02z"/></svg>
                                    @elseif($network === 'twitter')
                                        <svg class="w-10 h-10" fill="currentColor" viewBox="0 0 24 24"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg>
                                    @endif
                                </a>
                            @endif
                        @endforeach
                    </div>
                </div>
            @endif

        </div>

    </div>
</div>
@endif
@endsection