@extends('layouts.app')

@section('title', 'Rate Cards')
@section('page-title', 'Rate Cards 💰')
@section('page-subtitle', 'Manage your service pricing')

@section('content')
    <div class="flex flex-wrap items-center justify-between gap-3 mb-5">
        <div class="flex flex-wrap items-center gap-2 w-full">
            <a href="{{ route('rate-cards.create') }}" class="btn-sakura text-xs sm:text-sm shrink-0 px-3 py-1.5 sm:px-4 sm:py-2 flex items-center gap-1">＋ Add Service</a>
            <a href="{{ route('rate-cards.public') }}" target="_blank"
                class="bg-white text-xs sm:text-sm px-3 py-1.5 sm:px-4 sm:py-2 rounded-full border border-pink-200 text-pink-600 hover:bg-pink-50 flex items-center gap-1 shadow-sm shrink-0">
                🔗 Public Page
            </a>
            <a href="{{ route('rate-cards.pdf') }}"
                class="bg-white text-xs sm:text-sm px-3 py-1.5 sm:px-4 sm:py-2 rounded-full border border-blue-200 text-blue-600 hover:bg-blue-50 flex items-center gap-1 shadow-sm shrink-0">
                📄 PDF
            </a>
            <a href="{{ route('rate-cards.profile') }}"
                class="bg-white text-xs sm:text-sm px-3 py-1.5 sm:px-4 sm:py-2 rounded-full border border-purple-200 text-purple-600 hover:bg-purple-50 flex items-center gap-1 shadow-sm shrink-0">
                🎨 Profile
            </a>
        </div>
    </div>

    @php
        $grouped = $rateCards->groupBy('platform');
        $platformOrder = ['general', 'instagram', 'tiktok', 'youtube'];
    @endphp

    @foreach($platformOrder as $platform)
        @if($grouped->has($platform))
            <div class="mb-6">
                <h2 class="text-sm font-bold text-gray-700 mb-3 flex items-center gap-2">
                    <span class="text-lg">{{ $grouped[$platform]->first()->platform_icon }}</span>
                    {{ ucfirst($platform) }}
                    <span class="text-xs text-gray-400 font-normal">({{ $grouped[$platform]->count() }})</span>
                </h2>
                <div class="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-3 gap-3">
                    @foreach($grouped[$platform] as $card)
                        <div class="cat-card p-4 {{ !$card->is_active ? 'opacity-50' : '' }}">
                            <div class="flex justify-between items-start gap-2 mb-2">
                                <div class="min-w-0">
                                    <h3 class="font-bold text-gray-800 text-sm leading-tight">{{ $card->service_name }}</h3>
                                    @if($card->content_type)
                                        <span
                                            class="text-xs bg-pink-50 text-pink-600 px-2 py-0.5 rounded-full inline-block mt-1">{{ $card->content_type }}</span>
                                    @endif
                                </div>
                                <span
                                    class="text-xs px-2 py-1 rounded-full shrink-0
                                                                                {{ $card->is_active ? 'bg-green-100 text-green-600' : 'bg-gray-100 text-gray-400' }}">
                                    {{ $card->is_active ? 'Active' : 'Hidden' }}
                                </span>
                            </div>

                            @if($card->description)
                                <p class="text-xs text-gray-500 mb-2 line-clamp-2">{{ $card->description }}</p>
                            @endif

                            <div class="text-xl font-extrabold text-pink-500 mb-0.5">{{ $card->formatted_price }}</div>
                            <div class="text-xs text-gray-400 mb-3">
                                {{ str_replace('_', ' ', $card->price_unit) }}
                                @if($card->is_negotiable) <span class="text-amber-500 ml-1">· Negotiable</span> @endif
                            </div>

                            <div class="flex gap-2 pt-3 border-t border-pink-50">
                                <a href="{{ route('rate-cards.edit', $card) }}"
                                    class="flex-1 text-center text-xs py-2 rounded-full border border-pink-200 text-gray-600 hover:bg-pink-50 font-medium">
                                    Edit
                                </a>
                                {{-- Share button disabled --}}
                                <form action="{{ route('rate-cards.destroy', $card) }}" method="POST"
                                    onsubmit="return confirm('Delete this entry?')">
                                    @csrf @method('DELETE')
                                    <button class="text-xs py-2 px-3 rounded-full border border-red-100 text-red-400 hover:bg-red-50">
                                        ✕
                                    </button>
                                </form>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        @endif
    @endforeach

    @if($rateCards->isEmpty())
        <div class="text-center py-20 text-gray-400">
            <span class="text-5xl block mb-3">💰</span>
            <p class="text-sm">No rate cards yet.</p>
            <a href="{{ route('rate-cards.create') }}" class="btn-sakura mt-4 inline-block">Add your first service!</a>
        </div>
    @endif
    {{-- Share scripts disabled --}}
@endsection