@extends('astrologer.layouts.app')

@section('title', 'Pooja Services')

@section('content')
<div class="space-y-8" x-data="poojaManager()">
    <!-- Header Area -->
    <div class="flex items-center justify-between">
        <div>
            <h1 class="text-2xl font-black text-white tracking-tight">Pooja Services</h1>
            <p class="text-slate-500 text-sm mt-1">Select platform services or add your own ritual services.</p>
        </div>
        <button @click="openCustomModal()" class="bg-yellow-500 hover:bg-yellow-400 text-slate-900 px-5 py-2.5 rounded-xl font-bold flex items-center gap-2 transition-all shadow-lg shadow-yellow-500/20 text-sm">
            <i data-lucide="plus" class="w-4 h-4"></i>
            Add Your Own Service
        </button>
    </div>

    @if(session('success'))
        <div class="bg-green-500/10 border border-green-500/20 text-green-500 px-4 py-3 rounded-xl flex items-center gap-3">
            <i data-lucide="check-circle" class="w-5 h-5"></i>
            <span class="text-sm font-medium">{{ session('success') }}</span>
        </div>
    @endif

    <!-- Tabs Navigation -->
    <div class="flex items-center gap-4 p-1 bg-slate-900/50 w-fit rounded-2xl border border-white/5">
        <button @click="activeTab = 'platform'" :class="activeTab === 'platform' ? 'bg-yellow-500 text-slate-900' : 'text-slate-500 hover:text-white'" 
            class="px-6 py-2 rounded-xl text-xs font-black uppercase tracking-widest transition-all">
            Platform Services
        </button>
        <button @click="activeTab = 'my-services'" :class="activeTab === 'my-services' ? 'bg-yellow-500 text-slate-900' : 'text-slate-500 hover:text-white'" 
            class="px-6 py-2 rounded-xl text-xs font-black uppercase tracking-widest transition-all">
            My Services ({{ $myCustomServices->count() + count($myAdminServiceIds) }})
        </button>
    </div>

    <!-- Platform Services -->
    <div x-show="activeTab === 'platform'" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        @foreach($adminServices as $service)
            @php $isProvided = in_array($service->id, $myAdminServiceIds); @endphp
            <div class="glass-card rounded-3xl overflow-hidden border border-white/5 flex flex-col group relative">
                @if($isProvided)
                    <div class="absolute top-4 left-4 z-10">
                        <span class="bg-green-500 text-white px-3 py-1 rounded-full text-[10px] font-black uppercase shadow-lg border border-white/10">
                            Already Added
                        </span>
                    </div>
                @endif
                
                <!-- Service Image -->
                <div class="h-40 relative">
                    @if($service->image)
                        <img src="{{ asset('storage/' . $service->image) }}" class="w-full h-full object-cover grayscale-[0.5] group-hover:grayscale-0 transition-all">
                    @else
                        <div class="w-full h-full bg-slate-800 flex items-center justify-center">
                            <i data-lucide="sparkles" class="w-10 h-10 text-slate-700"></i>
                        </div>
                    @endif
                </div>

                <!-- Content -->
                <div class="p-6 flex-1 flex flex-col">
                    <h3 class="text-lg font-bold text-white mb-2">{{ $service->name }}</h3>
                    <p class="text-slate-400 text-xs line-clamp-2 mb-6">
                        {{ strip_tags($service->description) ?: 'No description provided.' }}
                    </p>

                    <div class="mt-auto pt-6 border-t border-white/5">
                        @if($isProvided)
                            <button @click="editAdminService({{ json_encode($myAdminServices[$service->id]->load('poojaService')) }})" 
                                class="w-full py-2.5 rounded-xl border border-white/10 text-white text-xs font-bold hover:bg-white/5 transition-all">
                                Update Settings
                            </button>
                        @else
                            <button @click="configureAdminService({{ json_encode($service) }})" 
                                class="w-full bg-yellow-500 hover:bg-yellow-400 text-slate-900 py-2.5 rounded-xl text-xs font-bold transition-all">
                                Offer this Service
                            </button>
                        @endif
                    </div>
                </div>
            </div>
        @endforeach
    </div>

    <!-- My Services (Custom + Added Platform) -->
    <div x-show="activeTab === 'my-services'" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        <!-- Merged list of active services -->
        @php
            $mergedServices = collect();
            foreach($myAdminServiceIds as $sid) {
                $mergedServices->push($myAdminServices[$sid]->setAttribute('type', 'platform'));
            }
            foreach($myCustomServices as $cs) {
                $mergedServices->push($cs->setAttribute('type', 'custom'));
            }
        @endphp

        @forelse($mergedServices as $service)
            <div class="glass-card rounded-3xl overflow-hidden border border-white/5 flex flex-col group">
                <div class="h-40 relative">
                    @if($service->type === 'platform')
                        <img src="{{ asset('storage/' . $service->poojaService->image) }}" class="w-full h-full object-cover">
                    @elseif($service->custom_image)
                        <img src="{{ asset('storage/' . $service->custom_image) }}" class="w-full h-full object-cover">
                    @else
                        <div class="w-full h-full bg-slate-800 flex items-center justify-center">
                            <i data-lucide="sparkles" class="w-10 h-10 text-slate-700"></i>
                        </div>
                    @endif
                    <div class="absolute top-4 right-4">
                        <span class="bg-yellow-500/90 text-slate-900 px-3 py-1 rounded-full text-xs font-black shadow-lg">
                            ₹{{ number_format($service->price, 0) }}
                        </span>
                    </div>
                    @if($service->type === 'custom')
                    <div class="absolute top-4 left-4">
                        <span class="bg-blue-500 text-white px-2 py-0.5 rounded text-[9px] font-black uppercase shadow-lg">
                            Personal
                        </span>
                    </div>
                    @endif
                </div>

                <div class="p-6 flex-1 flex flex-col">
                    <h3 class="text-lg font-bold text-white mb-2">
                        {{ $service->type === 'platform' ? $service->poojaService->name : $service->custom_name }}
                    </h3>
                    <p class="text-slate-400 text-xs line-clamp-3 mb-6">
                        {{ $service->description ?: 'No customized description.' }}
                    </p>

                    <div class="mt-auto pt-6 border-t border-white/5 flex items-center justify-between">
                        <button onclick="toggleServiceStatus({{ $service->id }})" 
                            id="status-btn-{{ $service->id }}"
                            class="text-[10px] font-black uppercase tracking-widest px-3 py-1.5 rounded-lg border transition-all
                            {{ $service->status ? 'border-green-500/20 text-green-500 bg-green-500/5' : 'border-slate-500/20 text-slate-500 bg-slate-500/5' }}">
                            {{ $service->status ? 'Active' : 'Deactive' }}
                        </button>

                        <div class="flex items-center gap-2">
                            <button @click="editSpecificService({{ json_encode($service) }})" class="p-2 text-blue-400 hover:bg-blue-400/10 rounded-lg transition-colors">
                                <i data-lucide="edit-3" class="w-4 h-4"></i>
                            </button>
                            <form action="{{ route('astrologer.pooja-services.destroy', $service->id) }}" method="POST" onsubmit="return confirm('Remove this service from your profile?')">
                                @csrf
                                @method('DELETE')
                                <button type="submit" class="p-2 text-red-500 hover:bg-red-500/10 rounded-lg transition-colors">
                                    <i data-lucide="trash-2" class="w-4 h-4"></i>
                                </button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        @empty
            <div class="col-span-full py-20 text-center">
                <i data-lucide="sparkles" class="w-12 h-12 text-slate-700 mx-auto mb-4"></i>
                <h3 class="text-slate-400 font-bold">You haven't setup any services yet.</h3>
                <p class="text-slate-600 text-sm mt-1">Visit 'Platform Services' tab to find ritual services created by Astrotalk.</p>
            </div>
        @endforelse
    </div>

    <!-- Admin Service Configuration Modal -->
    <div x-show="adminModalOpen" 
         x-cloak
         class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/80 backdrop-blur-sm">
        <div @click.away="adminModalOpen = false" class="glass-card w-full max-w-lg rounded-3xl overflow-hidden border border-white/10 shadow-2xl">
            <div class="p-6 border-b border-white/5 flex items-center justify-between">
                <h3 class="text-xl font-bold text-white uppercase tracking-tighter" x-text="selectedAdminService.name"></h3>
                <button @click="adminModalOpen = false" class="text-slate-400 hover:text-white transition-colors">
                    <i data-lucide="x" class="w-5 h-5"></i>
                </button>
            </div>
            <form action="{{ route('astrologer.pooja-services.store') }}" method="POST" class="p-6 space-y-6">
                @csrf
                <input type="hidden" name="pooja_service_id" :value="selectedAdminService.id">
                
                <div>
                    <label class="text-[10px] font-black uppercase tracking-widest text-slate-500 mb-2 block">Your Rate for this Pooja (₹)</label>
                    <input type="number" name="price" x-model="selectedAdminServicePrice" required placeholder="0.00"
                        class="w-full bg-slate-800 border border-white/10 rounded-xl px-4 py-3 text-white focus:ring-2 focus:ring-yellow-500 transition-all font-bold">
                </div>

                <div>
                    <label class="text-[10px] font-black uppercase tracking-widest text-slate-500 mb-2 block">Your Description (Optional)</label>
                    <textarea name="description" rows="4" x-model="selectedAdminServiceDesc"
                        placeholder="Tell users why they should book this pooja with you..."
                        class="w-full bg-slate-800 border border-white/10 rounded-xl px-4 py-3 text-white focus:ring-2 focus:ring-yellow-500 transition-all text-sm"></textarea>
                </div>

                <div class="pt-4 grid grid-cols-2 gap-3">
                    <button type="button" @click="adminModalOpen = false" class="px-5 py-3 rounded-xl bg-slate-800 text-slate-300 font-bold text-sm">Cancel</button>
                    <button type="submit" class="px-5 py-3 rounded-xl bg-yellow-500 text-slate-900 font-bold text-sm">
                        <span x-text="editMode ? 'Update Service' : 'Confirm Service'"></span>
                    </button>
                </div>
            </form>
        </div>
    </div>

    <!-- Custom/Edit Personal Service Modal -->
    <div x-show="customModalOpen" 
         x-cloak
         class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/80 backdrop-blur-sm">
        <div @click.away="customModalOpen = false" class="glass-card w-full max-w-lg rounded-3xl overflow-hidden border border-white/10 shadow-2xl">
            <div class="p-6 border-b border-white/5 flex items-center justify-between">
                <h3 class="text-xl font-bold text-white uppercase tracking-tighter" x-text="editMode ? 'Edit Service' : 'Personal Pooja Service'"></h3>
                <button @click="customModalOpen = false" class="text-slate-400 hover:text-white transition-colors">
                    <i data-lucide="x" class="w-5 h-5"></i>
                </button>
            </div>
            <form :action="editMode ? `/astrologer/pooja-services/${formData.id}/update` : '{{ route('astrologer.pooja-services.store') }}'" 
                method="POST" enctype="multipart/form-data" class="p-6 space-y-6">
                @csrf
                <template x-if="editMode">
                    <input type="hidden" name="_method" value="PUT">
                </template>

                <div x-show="!formData.pooja_service_id">
                    <label class="text-[10px] font-black uppercase tracking-widest text-slate-500 mb-2 block">Service Name</label>
                    <input type="text" name="custom_name" x-model="formData.name" :required="!formData.pooja_service_id"
                        class="w-full bg-slate-800 border border-white/10 rounded-xl px-4 py-3 text-white focus:ring-2 focus:ring-yellow-500 transition-all font-bold">
                </div>

                <div>
                    <label class="text-[10px] font-black uppercase tracking-widest text-slate-500 mb-2 block">Your Rate (₹)</label>
                    <input type="number" name="price" x-model="formData.price" required
                        class="w-full bg-slate-800 border border-white/10 rounded-xl px-4 py-3 text-white focus:ring-2 focus:ring-yellow-500 transition-all font-bold">
                </div>

                <div x-show="!formData.pooja_service_id">
                    <label class="text-[10px] font-black uppercase tracking-widest text-slate-500 mb-2 block">Service Image</label>
                    <input type="file" name="custom_image" class="w-full bg-slate-800 border border-white/10 rounded-xl px-4 py-3 text-white text-xs">
                    <p class="text-[9px] text-slate-600 mt-1 italic leading-relaxed">Format: WEBP, JPG. Best size: 800x600.</p>
                </div>

                <div>
                    <label class="text-[10px] font-black uppercase tracking-widest text-slate-500 mb-2 block">Description</label>
                    <textarea name="description" rows="4" x-model="formData.description"
                        class="w-full bg-slate-800 border border-white/10 rounded-xl px-4 py-3 text-white focus:ring-2 focus:ring-yellow-500 transition-all text-sm"></textarea>
                </div>

                <div class="pt-4 grid grid-cols-2 gap-3">
                    <button type="button" @click="customModalOpen = false" class="px-5 py-3 rounded-xl bg-slate-800 text-slate-300 font-bold text-sm">Cancel</button>
                    <button type="submit" class="px-5 py-3 rounded-xl bg-yellow-500 text-slate-900 font-bold text-sm">
                        <span x-text="editMode ? 'Update Details' : 'Save Service'"></span>
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

@push('scripts')
<script>
    function poojaManager() {
        return {
            activeTab: 'platform',
            adminModalOpen: false,
            customModalOpen: false,
            editMode: false,
            selectedAdminService: {},
            selectedAdminServicePrice: '',
            selectedAdminServiceDesc: '',
            formData: { id: '', pooja_service_id: '', name: '', price: '', description: '' },

            configureAdminService(service) {
                this.editMode = false;
                this.selectedAdminService = service;
                this.selectedAdminServicePrice = '';
                this.selectedAdminServiceDesc = '';
                this.adminModalOpen = true;
                this.$nextTick(() => lucide.createIcons());
            },

            editAdminService(myService) {
                this.editMode = true;
                this.selectedAdminService = myService.pooja_service;
                this.selectedAdminServicePrice = myService.price;
                this.selectedAdminServiceDesc = myService.description;
                this.adminModalOpen = true;
                this.$nextTick(() => lucide.createIcons());
            },

            openCustomModal() {
                this.editMode = false;
                this.formData = { id: '', pooja_service_id: '', name: '', price: '', description: '' };
                this.customModalOpen = true;
                this.$nextTick(() => lucide.createIcons());
            },

            editSpecificService(service) {
                if (service.pooja_service_id) {
                    this.editAdminService(service);
                } else {
                    this.editMode = true;
                    this.formData = {
                        id: service.id,
                        pooja_service_id: null,
                        name: service.custom_name,
                        price: service.price,
                        description: service.description
                    };
                    this.customModalOpen = true;
                    this.$nextTick(() => lucide.createIcons());
                }
            }
        }
    }

    function toggleServiceStatus(id) {
        fetch(`/astrologer/pooja-services/${id}/toggle-status`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            }
        })
        .then(res => res.json())
        .then(data => {
            if(data.success) {
                const btn = document.getElementById(`status-btn-${id}`);
                const isActive = btn.innerText.trim() === 'Active';
                btn.innerText = isActive ? 'Deactive' : 'Active';
                btn.classList.toggle('border-green-500/20');
                btn.classList.toggle('text-green-500');
                btn.classList.toggle('bg-green-500/5');
                btn.classList.toggle('border-slate-500/20');
                btn.classList.toggle('text-slate-500');
                btn.classList.toggle('bg-slate-500/5');
            }
        });
    }
</script>
@endpush
@endsection