@extends('layouts.app')

@section('title', 'Order Server 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>
                                Server 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.server", $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 === $servers->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">
                                                                {{ $related->time }}
                                                            </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">{{ $servers->service_name }}</h1>
                            <p class="text-gray-600 dark:text-gray-400">Professional Server 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">
                                    <span id="service_price" data-base-price="{{ $servers->final_price * $currency->rate }}">
                                        {{ $currency->icon }}{{ number_format($servers->final_price * $currency->rate, 2) }}
                                    </span>
                                </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">Delivery Time</p>
                                </div>
                                <p class="text-xl font-bold text-green-600 dark:text-green-400">{{ $servers->time }}</p>
                            </div>
                        </div>

                        <!-- Order Form -->
                        <form class="mb-4 space-y-6" action="{{ route('order.server.process') }}" method="POST">
                            @csrf
                            <input type="hidden" name="service" value="{{ $servers->slug }}">
                            @if ($servers->qnt === 1)
                                <div>
                                    <label class="text-gray-800 dark:text-gray-100 mb-2 block text-sm-medium" for="qnt">
                                        Qnt<span class="text-red-500">*</span>
                                    </label>
                                    <input
                                        type="number"
                                        id="server_qnt"
                                        class="block w-full px-4 py-3 bg-gray-50/80 dark:bg-gray-700/80 backdrop-blur-sm border border-gray-200 dark:border-gray-600 rounded-xl text-gray-900 dark:text-white placeholder-gray-500 dark:placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-300"
                                        name="qnt"
                                        required
                                    >
                                    <p class="text-sm-medium">Qnt range should be {{ number_format($servers->min_qnt, 0) }} - {{ number_format($servers->max_qnt, 0) }}</p>
                                </div>
                                @error('qnt')
                                    <div class="text-red-500">{{ $message }}</div>
                                @enderror
                            @endif
                            @foreach ($servers->inputs as $input)
                                <div>
                                    <label class="text-gray-800 dark:text-gray-100 mb-2 block text-sm-medium" for="{{ $input->field_name }}">
                                        {{ $input->field_name }}
                                        {!! $input->required === 'on' ? '<span class="text-red-500">*</span>' : '' !!}
                                    </label>
                                    <input
                                        type="text"
                                        class="block w-full px-4 py-3 bg-gray-50/80 dark:bg-gray-700/80 backdrop-blur-sm border border-gray-200 dark:border-gray-600 rounded-xl text-gray-900 dark:text-white placeholder-gray-500 dark:placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-300"
                                        name="{{ $input->field_name }}"
                                        placeholder="{{ $input->description }}"
                                        value="{{ old($input->field_name) }}"
                                        {{ $input->required === 'on' ? 'required' : '' }}
                                    >
                                </div>
                                @error($input->field_name)
                                    <div class="text-red-500">{{ $message }}</div>
                                @enderror
                            @endforeach
                            <!-- 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">
                                            {{ $currency->icon }}{{ number_format($servers->final_price * $currency->rate, 2) }}
                                        </span> 
                                        of credits in your wallet.
                                    </p>
                                    <div class="prose prose-sm dark:prose-invert max-w-none">
                                        {!! $servers->description !!}
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Features -->
                        @if (!empty($servers->features))
                            <div class="mt-6 p-6 bg-gradient-to-r from-green-50/80 to-teal-50/80 dark:from-green-900/20 dark:to-teal-900/20 rounded-xl border border-green-200/50 dark:border-teal-700/50">
                                <div class="flex items-start space-x-4">
                                    <div class="w-12 h-12 bg-gradient-to-r from-green-500 to-green-600 rounded-xl flex items-center justify-center">
                                        <i class="fas fa-check-circle text-white"></i>
                                    </div>
                                    <div class="flex-1">
                                        <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-3">Service Features</h3>
                                        <ul class="list-disc list-inside text-gray-800 dark:text-gray-100">
                                            @foreach ($servers->features as $feature)
                                                <li>{{ $feature }}</li>
                                            @endforeach
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        @endif

                        @if ($servers->download_link || $servers->login_link || $servers->register_link)
                            <div class="mt-6 p-6 bg-gradient-to-r from-purple-50/80 to-indigo-50/80 dark:from-purple-900/20 dark:to-indigo-900/20 rounded-xl border border-purple-200/50 dark:border-indigo-700/50">
                                <div class="flex items-start space-x-4">
                                    <div class="w-12 h-12 bg-gradient-to-r from-purple-500 to-indigo-600 rounded-xl flex items-center justify-center">
                                        <i class="fas fa-link text-white"></i>
                                    </div>
                                    <div class="flex-1">
                                        <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-3">Service Links</h3>
                                        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                                            @if ($servers->download_link)
                                            <a href="{{ $servers->download_link }}" target="_blank" class="flex items-center justify-center px-4 py-2 bg-blue-500 hover:bg-blue-600 text-white rounded-lg transition-colors duration-200">
                                                <i class="fas fa-download mr-2"></i> Download
                                            </a>
                                            @endif
                                            @if ($servers->login_link)
                                            <a href="{{ $servers->login_link }}" target="_blank" class="flex items-center justify-center px-4 py-2 bg-green-500 hover:bg-green-600 text-white rounded-lg transition-colors duration-200">
                                                <i class="fas fa-sign-in-alt mr-2"></i> Login
                                            </a>
                                            @endif
                                            @if ($servers->register_link)
                                            <a href="{{ $servers->register_link }}" target="_blank" class="flex items-center justify-center px-4 py-2 bg-purple-500 hover:bg-purple-600 text-white rounded-lg transition-colors duration-200">
                                                <i class="fas fa-user-plus mr-2"></i> Register
                                            </a>
                                            @endif
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection

@push('script')
    <script>
        $(document).ready(function() {
            $(document).on('keyup', '#server_qnt', function() {
                var server_qnt    = this.value;
                var service_price = $('#service_price').data('base-price');

                if (isNaN(server_qnt) || server_qnt <= 0) {
                    server_qnt = 1;
                }

                if (!isNaN(service_price)) {
                    var total = (server_qnt * service_price);
                    $('#service_price').text(total);
                }
            });
            
            // search service
            $(document).on('keyup', '#search-tools', function() {
                var keyword = this.value;
                var type = 'SERVER';

                $.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