@extends('layoutsutama.master3')
@section('content')
        <!-- dari sini -->

       
<section class="py-24 bg-white">
    <div class="mx-auto max-w-6xl w-full px-4">
        <div class="flex justify-center w-full">
            <div class="flex w-1/2 gap-6">
                <div class="w-[30%] bg-white">
                      <!-- <img src="{{ URL::to('assets/images/benner/1749117582893-480712360.webp') }}" alt="" style="width: 14cm; height: 7.5cm; object-fit: cover; border-radius: 0.75rem"> -->
                       <img src="{{ URL::to('assets/upload/banner/'.$tickets[0]->banner) }}" alt="" style="width: 14cm; height: 7.5cm; object-fit: cover; border-radius: 0.75rem">
                </div>
                <br>
                <!-- List Cart (30%) -->
                <div class="w-[40%] bg-white rounded-lg shadow-lg p-6 text-black space-y-4">
                      <!-- Judul Event -->
                       @php
                            $wrapText = function($text, $maxLength = 15) {
                                $words = explode(' ', $text);
                                $lines = [];
                                $currentLine = '';

                                foreach ($words as $word) {
                                    if (strlen($currentLine . ' ' . $word) <= $maxLength) {
                                        $currentLine = trim($currentLine . ' ' . $word);
                                    } else {
                                        $lines[] = $currentLine;
                                        $currentLine = $word;
                                    }
                                }

                                if (!empty($currentLine)) {
                                    $lines[] = $currentLine;
                                }

                                return $lines;
                            };

                            $text = $tickets[0]->event_name;
                            $lines = $wrapText($text);
                        @endphp

                    <h5 class="text-xl font-bold leading-hight">
                        @foreach($lines as $line)
                            {{ $line }}<br>
                        @endforeach

                    </h5>
                    
                  
                        <!-- Tanggal -->
                    <div class="flex items-center text-xs text-gray-700 gap-2 py-2">
                        <i data-lucide="calendar-days" class="w-4 h-4"></i>
                        <span>{{ \Carbon\Carbon::parse($tickets[0]->date_event)->format('j F Y') }}</span>
                    </div>
                    @php
                        $kata = $tickets[0]->address_event;

                        $wrapText = function($text, $maxLength = 20) {
                            $words = explode(' ', $text);
                            $lines1 = [];
                            $currentLine = '';

                            foreach ($words as $word) {
                                if (strlen($currentLine . ' ' . $word) <= $maxLength) {
                                    $currentLine = trim($currentLine . ' ' . $word);
                                } else {
                                    $lines1[] = $currentLine;
                                    $currentLine = $word;
                                }
                            }

                            if (!empty($currentLine)) {
                                $lines1[] = $currentLine;
                            }

                            return $lines1;
                        };

                        $lines1 = $wrapText($kata);
                    @endphp

                     <div class="flex items-center text-[12px] text-gray-700 gap-2 py-1">
                        <i data-lucide="map-pin" class="w-4 h-4"></i>
                        <span>
                            @foreach($lines1 as $line)
                           <div> {{ $line }}</div>
                        @endforeach</span>
                    </div>

                     <hr class="py-2">
                    
                   <!-- Organizer -->
                    <div class="text-center">
                        <p class="text-sm text-gray-600">Organizer By</p>
                        <p class="text-base font-bold">{{$tickets[0]->company_name}}</p>
                    </div>          
                </div>
            </div> 
        </div>
    </div>


    <!-- Tab Header -->
 

<!-- Wrapper -->
<div class="w-full px-4" x-data="{ tab: 'tiket' }">
    <!-- Tab Navigation -->
    <div class="flex justify-center w-full">
        <div class="card-body !px-2.5 !py-0">
            <ul class="flex flex-wrap w-full text-lg font-medium text-center nav-tabs">
                <!-- Tab Tiket -->
                <li>
                    <a href="javascript:void(0);"
                        @click="tab = 'tiket'"
                        class="inline-block px-4 py-2 text-lg rounded-t-md border-b-2"
                        :class="tab === 'tiket' ? 'text-sky-500 border-b-sky-500 font-semibold' : 'text-sky-500 hover:text-sky-500 border-transparent'">
                        Tiket
                    </a>
                </li>

                <!-- Tab Peserta -->
                <li class="ml-4">
                    <a href="{{ url('/peserta/'.$tickets[0]->event_id) }}"
                        class="inline-block px-4 py-2 text-lg rounded-t-md text-slate-500 hover:text-custom-500 border-b-2 border-transparent">
                        List Peserta
                    </a>
                </li>
            </ul>
        </div>
    </div>

    <!-- Content -->
    <div>
        <!-- Tiket Tab -->
        <div x-show="tab === 'tiket'" class="flex flex-wrap justify-center gap-6 mt-6">
            <!-- Card 1 -->
            @foreach($priceWithParticipants as $tick)

                <div class="w-[38vw] bg-white border rounded-lg shadow p-6 transition hover:shadow-lg">
                    <div class="flex items-center">
                        <div class="mr-auto">
                            <h3 class="text-xl font-semibold text-slate-900">{{ $tick->ticket_name }} ({{ $tick->category_ticket_name }})</h3>
                            <div class="flex flex-wrap gap-2 text-sm">
                                @foreach($tick->participants as $item)
                                    @php
                                        $name = strtolower($item->participant_name);
                                        $styles = match($name) {
                                            'open' => 'bg-green-100 text-green-700 border border-green-300',
                                            'master' => 'bg-red-100 text-red-700 border border-red-300',
                                            'pelajar' => 'bg-yellow-100 text-yellow-700 border border-yellow-300',
                                            default => 'bg-purple-100 text-purple-700 border border-purple-300',
                                        };
                                    @endphp

                                    <span class="rounded px-2 py-1 {{ $styles }}">
                                        {{ $item->participant_name }}
                                    </span>
                                @endforeach
                            </div>

   
                            <p class="text-base text-slate-800"><b>Rp {{ number_format($tick->price, 0, ',', '.') }}</b></p>
                            <p class="text-sm text-gray-500">Harga hanya untuk 1 orang</p>
                        </div>
                        <div class="w-12"></div>
                        
                        <div>
                            @php
                                $now = \Carbon\Carbon::now();
                                $start = \Carbon\Carbon::parse($tick->start_date);
                                $end = \Carbon\Carbon::parse($tick->end_date);
                            @endphp
                            @if($now->lt($start))
                                <button class="btn bg-yellow-400 text-white cursor-not-allowed" disabled>Coming Soon</button>
                            @elseif($now->gt($end))
                                <button class="btn bg-slate-300 text-white cursor-not-allowed" disabled>Closed</button>
                            @elseif($tick->peserta_count < $tick->kuota_ticket )
                                <a href="{{ url::to('/order/'.$tick->ticket_id) }}" class="text-white btn bg-sky-500 border-sky-500 hover:bg-custom-600 focus:ring focus:ring-custom-100">
                                    <span class="align-middle">Registrasi</span>
                                </a>
                            @else
                                <button class="btn bg-slate-300 text-white cursor-not-allowed" disabled>Quota full</button>
                              
                            @endif
                        </div>
                    </div>
                </div>
            @endforeach
            
        </div>

        
    </div>
</div>




 
</section>




        @section('script')
                        

        <script>
        function showTab(tabId) {
            const tabs = document.querySelectorAll('.tab-content');
            tabs.forEach(tab => tab.classList.add('hidden'));

            document.getElementById(tabId).classList.remove('hidden');

            const links = document.querySelectorAll('.tab-link');
            links.forEach(link => link.parentElement.classList.remove('active'));

            event.target.parentElement.classList.add('active');
        }
        </script>

        @endsection
@endsection