@extends('layouts.app')

@section('title', 'Order Tools Service')

@section('main')
    <section class="min-h-screen bg-gradient-to-br from-slate-50 via-blue-50 to-indigo-50 dark:from-gray-900 dark:via-slate-900 dark:to-gray-900 py-8">
        <div class="mx-auto px-4 px-4 lg:px-16">
            <div class="flex flex-col lg:flex-row gap-8">

                <!-- Left Column: Service List -->
                <div class="w-full lg:w-1/3">
                    <div class="sticky top-8">
                        <div class="bg-white/80 dark:bg-gray-800/80 backdrop-blur-lg rounded-2xl shadow-xl border border-white/20 dark:border-gray-700/50 p-6 h-[80vh] overflow-hidden">
                            <h2 class="text-2xl font-bold text-gray-900 dark:text-white mb-4 flex items-center">
                                <div class="w-8 h-8 bg-gradient-to-r from-blue-500 to-purple-600 rounded-lg flex items-center justify-center mr-3">
                                    <i class="fas fa-mobile-alt text-white text-sm"></i>
                                </div>
                                Tools Services
                            </h2>
                            <figure class="w-full m-0 relative">
                                <div class="flex items-center border border-gray-300 dark:border-gray-700 rounded-xl ps-4 relative">
                                    <i class="fa-solid fa-search text-gray-800 dark:text-gray-100 cursor-pointer"></i>
                                    <input type="text" id="search-tools" class="w-full block border-none focus:ring-0 rounded-xl bg-white dark:bg-gray-900 text-gray-800 dark:text-gray-100" placeholder="Search Services" />
                                </div>
                                <div id="search-tools-area" class="absolute left-0 w-full z-20 px-3 hidden">
                                </div>
                            </figure>
                            <div class="overflow-y-auto h-full styled-scrollbar mt-5">
                                <nav>
                                    <ul class="space-y-2">
                                        @foreach($related_service as $index => $related)
                                            <li>
                                                <a href="{{ route("order.tools", $related->slug) }}" 
                                                   class="group block p-4 rounded-xl text-gray-700 dark:text-gray-300 hover:bg-gradient-to-r hover:from-blue-50 hover:to-purple-50 dark:hover:from-blue-900/20 dark:hover:to-purple-900/20 transition-all duration-300 border border-transparent hover:border-blue-200/50 dark:hover:border-blue-700/50 {{ $related->slug === $tools->slug ? 'bg-gradient-to-r from-blue-50 to-purple-50 dark:from-blue-900/30 dark:to-purple-900/30 border-blue-200 dark:border-blue-700' : '' }}">
                                                    <div class="flex items-center space-x-3">
                                                        <div class="w-10 h-10 bg-gradient-to-r from-blue-400 to-purple-500 rounded-lg flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
                                                            <span class="text-white font-bold text-sm">{{ $index + 1 }}</span>
                                                        </div>
                                                        <div class="flex-1 min-w-0">
                                                            <p class="font-medium text-sm group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors duration-300 truncate">
                                                                {{ $related->service_name }}
                                                            </p>
                                                            <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">
                                                                Validity: {{ $related->tools_group->expire_in ." ". $related->tools_group->expire_unit }}
                                                            </p>
                                                        </div>
                                                        <i class="fas fa-chevron-right text-gray-400 group-hover:text-blue-500 group-hover:translate-x-1 transition-all duration-300"></i>
                                                    </div>
                                                </a>
                                            </li>
                                        @endforeach
                                    </ul>
                                </nav>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Right Column: Service Details and Order Form -->
                <div class="w-full lg:w-2/3">
                    <div class="bg-white/80 dark:bg-gray-800/80 backdrop-blur-lg rounded-2xl shadow-xl border border-white/20 dark:border-gray-700/50 p-8">
                        <div>
                            @if (session('error'))
                                <h2 class="text-red-500 font-sans font-normal text-[clamp(10px,2vw+0.5rem,20px)] mb-0 pt-4 text-center">{{ session('error') }}</h2>
                            @endif
                            @if (session('success'))
                                <h2 class="text-green-500 font-sans font-normal text-[clamp(10px,2vw+0.5rem,20px)] mb-0 pt-4 text-center">{{ session('success') }}</h2>
                            @endif
                        </div>
                        
                        <!-- Service Header -->
                        <div>
                            <h1 class="text-2xl font-bold text-gray-900 dark:text-white">{{ $tools->service_name }}</h1>
                            <p class="text-gray-600 dark:text-gray-400">Professional Tools service solution</p>
                        </div>

                        <!-- Pricing -->
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6 my-6">
                            <div class="group bg-gradient-to-r from-blue-50 to-blue-100 dark:from-blue-900/20 dark:to-blue-800/20 p-4 rounded-xl border border-blue-200/50 dark:border-blue-700/50">
                                <div class="flex items-center mb-3">
                                    <div class="w-8 h-8 bg-gradient-to-r from-blue-500 to-blue-600 rounded-lg flex items-center justify-center mr-3">
                                        <i class="fas fa-dollar-sign text-white"></i>
                                    </div>
                                    <p class="text-sm font-medium text-blue-700 dark:text-blue-300">Service Price</p>
                                </div>
                                <p class="text-xl font-bold text-blue-600 dark:text-blue-400">
                                    @if ($user_group?->price_type === "Fixed Rate")
                                        {{ $currency->icon }}{{ number_format((($tools->credit + $user_group->price) * $currency->rate), 2) }}
                                    @elseif ($user_group?->price_type === "Percentage")
                                        {{ $currency->icon }}{{ number_format((($tools->credit * (1 + ($user_group->price / 100))) * $currency->rate), 2) }}
                                    @else
                                        {{ $currency->icon }}{{ number_format(($tools->credit * $currency->rate), 2) }}
                                    @endif
                                </p>
                            </div>
                            <div class="group bg-gradient-to-r from-green-50 to-green-100 dark:from-green-900/20 dark:to-green-800/20 p-4 rounded-xl border border-green-200/50 dark:border-green-700/50">
                                <div class="flex items-center mb-3">
                                    <div class="w-8 h-8 bg-gradient-to-r from-green-500 to-green-600 rounded-lg flex items-center justify-center mr-3">
                                        <i class="fas fa-clock text-white"></i>
                                    </div>
                                    <p class="text-sm font-medium text-green-700 dark:text-green-300">Validity Time</p>
                                </div>
                                <p class="text-xl font-bold text-green-600 dark:text-green-400">
                                    {{ $related->tools_group->expire_in ." ". $related->tools_group->expire_unit }}
                                </p>
                            </div>
                        </div>

                        <!-- Order Form -->
                        <form class="mb-4 space-y-6" action="{{ route('order.tools.process') }}" method="POST">
                            @csrf
                            <input type="hidden" name="service" value="{{ $tools->slug }}">
                            <!-- Terms -->
                            <div class="flex items-start space-x-3 p-4 bg-gray-50/50 dark:bg-gray-700/50 rounded-xl border border-gray-200/50 dark:border-gray-600/50">
                                <input type="checkbox" id="terms_conditions" class="h-5 w-5 text-blue-600 rounded" checked required>
                                <label for="terms_conditions" class="text-sm text-gray-700 dark:text-gray-300">
                                    I agree to the <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline font-medium">terms and conditions</a>
                                </label>
                            </div>

                            <!-- Submit -->
                            <button type="submit" class="group relative w-full mt-3 py-3 px-6 bg-gradient-to-r from-blue-600 to-purple-600 text-white font-semibold rounded-xl hover:from-blue-700 hover:to-purple-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transform hover:scale-[1.02] transition-all duration-300 shadow-lg hover:shadow-xl">
                                <span class="relative z-10 flex items-center justify-center items-center">
                                    <i class="fas fa-shopping-cart mr-3 group-hover:animate-bounce"></i>
                                    Place Order
                                </span>
                                <div class="absolute inset-0 bg-gradient-to-r from-blue-700 to-purple-700 rounded-xl opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
                            </button>
                        </form>

                        <!-- Description -->
                        <div class="mt-6 p-6 bg-gradient-to-r from-blue-50/80 to-purple-50/80 dark:from-blue-900/20 dark:to-purple-900/20 rounded-xl border border-blue-200/50 dark:border-blue-700/50">
                            <div class="flex items-start space-x-4">
                                <div class="w-12 h-12 bg-gradient-to-r from-blue-500 to-purple-600 rounded-xl flex items-center justify-center">
                                    <i class="fas fa-info-circle text-white"></i>
                                </div>
                                <div class="flex-1">
                                    <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-3">Service Information</h3>
                                    <p class="text-gray-800 dark:text-gray-100 text-wrap mt-2 mb-4 font-normal font-sans">
                                        Simply fill in the details and proceed to pay for your orders using your credit balance. You currently have 
                                        <span class="font-bold text-blue-600 dark:text-blue-400">
                                            @if ($user_group?->price_type === 'Fixed Rate')
                                                {{ $currency->icon }}{{ number_format((($tools->credit + $user_group->price) * $currency->rate), 2) }}
                                            @elseif ($user_group?->price_type === 'Percentage')
                                                {{ $currency->icon }}{{ number_format((($tools->credit * (1 + ($user_group->price / 100))) * $currency->rate), 2) }}
                                            @else
                                                {{ $currency->icon }}{{ number_format(($tools->credit * $currency->rate), 2) }}
                                            @endif
                                        </span> 
                                        of credits in your wallet.
                                    </p>
                                    <div class="prose prose-sm dark:prose-invert max-w-none">
                                        {!! $tools->description !!}
                                    </div>
                                </div>
                            </div>
                        </div>  
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection

@push('script')
    <script>
        $(document).ready(function() {
            $(document).on('keyup', '#search-tools', function() {
                var keyword = this.value;
                var type = 'TOOL';

                $.ajax({
                    method: 'POST',
                    url: "{{ route('order.search_tool') }}",
                    data: {
                        keyword: keyword,
                        type: type,
                        _token: $('meta[name="csrf-token"]').attr('content')
                    },
                    success: function(data) {
                        if(data.trim() === '') {
                            $('#search-tools-area').addClass('hidden').empty();
                        } else {
                            $('#search-tools-area').removeClass('hidden').html(data);
                        }
                    }
                });
            });

            // Hide area if clicked outside input or area
            $(document).on('click', function (e) {
                if (!$(e.target).closest('#search-tools, #search-tools-area').length) {
                    $('#search-tools-area').addClass('hidden');
                }
            });

            // Show area again on focus
            $(document).on('focus', '#search-tools', function () {
                $('#search-tools-area').removeClass('hidden');
            });
        });
    </script>
@endpush