@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-col sm:flex-row sm:items-center justify-between gap-3 mb-5">
    <a href="{{ route('rate-cards.public') }}" target="_blank"
       class="text-sm text-pink-500 hover:underline flex items-center gap-1">
        🔗 View Public Page →
    </a>
    <a href="{{ route('rate-cards.create') }}" class="btn-sakura text-sm shrink-0">＋ Add Service</a>
</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>
                            <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-4 rounded-full border border-red-100 text-red-400 hover:bg-red-50">
                                    Delete
                                </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
@endsection