@extends('front.layouts.app')

@section('title', 'Your Kundali - Astrotalk')

@push('styles')
    <style>
        .kundli-wrapper {
            position: relative;
            display: block;
            width: 100%;
            max-width: 600px;
            background-color: #fdf6e3;
            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
            border: 1px solid #d4d4d8;
            border-radius: 1.5rem;
            overflow: hidden;
            margin: 0 auto;
        }

        .chart-container {
            position: relative;
            width: 100%;
            line-height: 0;
        }

        .chart-bg {
            width: 100%;
            height: auto;
            display: block;
        }

        .labels-layer {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            line-height: normal;
        }

        .house-sign {
            position: absolute;
            font-weight: 600;
            font-size: min(1.2rem, 3.5vw);
            color: #4b5563;
            /* text-slate-600 */
            transform: translate(-50%, -50%);
        }

        .planet-group {
            position: absolute;
            transform: translate(-50%, -50%);
            text-align: center;
            width: 25%;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 0px;
        }

        .planet-item {
            font-size: min(0.85rem, 2.5vw);
            font-weight: 700;
            line-height: 1.1;
            white-space: nowrap;
            text-shadow: 0 0 1px rgba(255, 255, 255, 0.8);
        }
    </style>
@endpush

@section('content')
    <div class="py-12 md:py-20 px-4 md:px-6 bg-[#020617]">
        <div class="max-w-6xl mx-auto">
            <div class="mb-10 text-center lg:text-left">
                <h4 class="text-slate-500 font-bold uppercase tracking-[0.2em] text-[10px] mb-2">Lagna / Ascendant / Basic
                    Birth Chart</h4>
                <h2 class="text-4xl font-black text-white italic uppercase tracking-tighter">Lagn Kundli</h2>
            </div>

            <div class="flex flex-col lg:flex-row gap-12 items-center lg:items-start">
                <!-- Left Side: The Chart -->
                <div class="w-full lg:flex-1">
                    <div class="kundli-wrapper">
                        <div class="chart-container">
                            <img src="{{ asset('images/blank_kundli.png') }}" class="chart-bg" alt="Kundli Chart">

                            <div class="labels-layer">
                                @php
                                    $positions = [
                                        1 => ['sign' => [47, 50], 'planets' => [32, 50]],
                                        2 => ['sign' => [23, 27], 'planets' => [12, 23]],
                                        3 => ['sign' => [27, 23], 'planets' => [22, 12]],
                                        4 => ['sign' => [50, 47], 'planets' => [50, 32]],
                                        5 => ['sign' => [73, 23], 'planets' => [78, 12]],
                                        6 => ['sign' => [77, 27], 'planets' => [88, 23]],
                                        7 => ['sign' => [53, 50], 'planets' => [68, 50]],
                                        8 => ['sign' => [77, 73], 'planets' => [88, 77]],
                                        9 => ['sign' => [73, 77], 'planets' => [78, 88]],
                                        10 => ['sign' => [50, 53], 'planets' => [50, 68]],
                                        11 => ['sign' => [27, 77], 'planets' => [22, 88]],
                                        12 => ['sign' => [23, 73], 'planets' => [12, 77]],
                                    ];
                                @endphp

                                @foreach($kundliData['houses'] as $index => $house)
                                    <div class="house-sign"
                                        style="top: {{ $positions[$index]['sign'][0] }}%; left: {{ $positions[$index]['sign'][1] }}%;">
                                        {{ $house['sign'] }}
                                    </div>

                                    @if(count($house['planets']) > 0)
                                        <div class="planet-group"
                                            style="top: {{ $positions[$index]['planets'][0] }}%; left: {{ $positions[$index]['planets'][1] }}%;">
                                            @foreach($house['planets'] as $planet)
                                                <div class="planet-item" style="color: {{ $planet['color'] }}">
                                                    {{ $planet['name'] }}-{{ $planet['degree'] }}°
                                                </div>
                                            @endforeach
                                        </div>
                                    @endif
                                @endforeach
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Right Side: Details -->
                <div class="w-full lg:w-96 space-y-8">
                    <div class="bg-slate-900/40 backdrop-blur-md border border-white/10 rounded-[2.5rem] p-8 shadow-xl">
                        <h4 class="text-white text-xl font-bold mb-6 flex items-center gap-3">
                            <i data-lucide="sparkles" class="w-5 h-5 text-yellow-500"></i>
                            Quick Stats
                        </h4>
                        <div class="space-y-4">
                            <div class="flex justify-between items-center py-3 border-b border-white/5 text-sm">
                                <span class="text-slate-400">Nakshatra</span>
                                <span class="text-white font-bold">{{ $kundliData['panchang_details']['Nakshatra'] }}</span>
                            </div>
                            <div class="flex justify-between items-center py-3 border-b border-white/5 text-sm">
                                <span class="text-slate-400">Tithi</span>
                                <span class="text-white font-bold">{{ $kundliData['panchang_details']['Tithi'] }}</span>
                            </div>
                            <div class="flex justify-between items-center py-3 text-sm">
                                <span class="text-slate-400">Sign Lord</span>
                                <span class="text-white font-bold">{{ $kundliData['avakhada_details']['Sign Lord'] }}</span>
                            </div>
                        </div>
                    </div>

                    <div class="grid grid-cols-2 gap-4">
                        <a href="{{ route('kundali.index') }}"
                            class="flex flex-col items-center justify-center p-6 bg-slate-800 hover:bg-slate-700 rounded-3xl border border-white/10 transition-all group active:scale-95">
                            <i data-lucide="plus" class="w-6 h-6 text-yellow-500 mb-2"></i>
                            <span class="text-white text-[10px] font-bold uppercase tracking-widest">New Chart</span>
                        </a>
                        <button onclick="window.print()"
                            class="flex flex-col items-center justify-center p-6 bg-slate-800 hover:bg-slate-700 rounded-3xl border border-white/10 transition-all group active:scale-95">
                            <i data-lucide="printer" class="w-6 h-6 text-yellow-500 mb-2"></i>
                            <span class="text-white text-[10px] font-bold uppercase tracking-widest">Print / Save</span>
                        </button>
                    </div>
                </div>
            </div>

            <!-- Detailed Information Sections -->
            <div class="mt-20 space-y-12">
                <div class="grid grid-cols-1 lg:grid-cols-2 gap-12">
                    <!-- Basic & Panchang Details -->
                    <div class="space-y-12">
                        <div>
                            <h3 class="text-xl font-bold text-white mb-6 flex items-center gap-3">
                                <span class="w-1.5 h-6 bg-yellow-500 rounded-full"></span>
                                Basic Details
                            </h3>
                            <div
                                class="bg-slate-900/30 backdrop-blur-sm border border-white/5 rounded-3xl p-6 overflow-hidden">
                                <div class="divide-y divide-white/5">
                                    @foreach($kundliData['basic_details'] as $label => $value)
                                        <div class="grid grid-cols-2 py-3">
                                            <span class="text-slate-500 text-sm font-medium">{{ $label }}</span>
                                            <span
                                                class="text-slate-200 text-sm font-semibold text-right sm:text-left">{{ $value }}</span>
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                        </div>

                        <div>
                            <h3 class="text-xl font-bold text-white mb-6 flex items-center gap-3">
                                <span class="w-1.5 h-6 bg-blue-500 rounded-full"></span>
                                Panchang Details
                            </h3>
                            <div
                                class="bg-slate-900/30 backdrop-blur-sm border border-white/5 rounded-3xl p-6 overflow-hidden">
                                <div class="divide-y divide-white/5">
                                    @foreach($kundliData['panchang_details'] as $label => $value)
                                        <div class="grid grid-cols-2 py-3">
                                            <span class="text-slate-500 text-sm font-medium">{{ $label }}</span>
                                            <span
                                                class="text-slate-200 text-sm font-semibold text-right sm:text-left">{{ $value }}</span>
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Avakhada Details -->
                    <div>
                        <h3 class="text-xl font-bold text-white mb-6 flex items-center gap-3">
                            <span class="w-1.5 h-6 bg-purple-500 rounded-full"></span>
                            Avakhada Details
                        </h3>
                        <div class="bg-slate-900/30 backdrop-blur-sm border border-white/5 rounded-3xl p-6 overflow-hidden">
                            <div class="divide-y divide-white/5">
                                @foreach($kundliData['avakhada_details'] as $label => $value)
                                    <div class="grid grid-cols-2 py-3">
                                        <span class="text-slate-500 text-sm font-medium">{{ $label }}</span>
                                        <span
                                            class="text-slate-200 text-sm font-semibold text-right sm:text-left">{{ $value }}</span>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection