@extends('frontend::layouts.master')

@push('styles')
    <link href="{{ asset('modules/frontend/plugins/register-script/register-style.css') }}" rel="stylesheet">
@endpush

@section('content')
    <div class="bg-med-gray">
        <div class="container mx-auto px-6 py-16">
            <div class="flex-grow flex items-center justify-center">
                <div class="max-w-5xl w-full space-y-8">
                    <div class="text-center">
                        <h1 class="text-3xl font-bold text-med-dark">{{ __('frontend::lang.page.register.step1.title') }}</h1>
                        <p class="mt-2 text-gray-500">{{ __('frontend::lang.page.register.step1.title_desc') }}</p>
                    </div>
                    <div class="max-w-2xl mx-auto text-center">
                        <div class="relative flex items-baseline justify-between w-full">
                            <div class="absolute left-0 top-1/2 transform -translate-y-1/2 w-full h-1 bg-gray-300 z-1"></div>
                            <div class="flex flex-col items-center bg-med-gray px-2 z-10">
                                <div class="w-10 h-10 rounded-full flex items-center justify-center bg-med-primary text-white font-bold border-4 border-white shadow-sm">
                                    1
                                </div>
                                <span class="mt-2 text-sm font-semibold text-med-primary">
                                    {{ __('frontend::lang.page.register.progress.step1') }}
                                </span>
                            </div>
                            <div class="flex flex-col items-center bg-med-gray px-2 z-10">
                                <div class="w-10 h-10 rounded-full flex items-center justify-center bg-white text-gray-400 font-bold border-4 border-gray-200">
                                    2
                                </div>
                                <span class="mt-2 text-sm font-medium text-gray-400">
                                    {{ __('frontend::lang.page.register.progress.step2') }}
                                </span>
                            </div>
                        </div>
                    </div>
                    <div class="bg-white p-6 md:p-10 rounded-2xl shadow-lg border border-gray-100 mt-8">
                        <h3 class="text-xl font-semibold mb-6 text-med-dark">{{ __('frontend::lang.page.register.step1.please_select') }}</h3>
                        @if (!empty($member_types['list'][0]))
                            @php
                                $icon = [
                                    'general' => 'fa-solid fa-user',
                                    'wholesale' => 'fa-solid fa-store',
                                    'pharmacy' => 'fa-solid fa-user-doctor',
                                ];
                            @endphp
                            <div class="grid grid-cols-1 md:grid-cols-3 gap-6" id="selection-container">
                                @foreach ($member_types['list'] as $type)
                                    <div class="option-card cursor-pointer relative rounded-xl border-2 border-gray-200 p-6 flex flex-col items-center text-center group h-full" id="card-{{ $type['sku'] }}" onclick="selectType('{{ $type['sku'] }}')">
                                        <div class="w-16 h-16 rounded-full bg-gray-100 flex items-center justify-center mb-4 group-hover:bg-med-primary group-hover:text-white transition-colors duration-300 text-med-secondary">
                                            <i class="{{ $icon[$type['sku']] }} text-2xl"></i>
                                        </div>
                                        <h4 class="text-lg font-bold text-med-dark mb-2">{{ $type['name'] }}</h4>
                                        <p class="text-sm text-gray-500 leading-relaxed">
                                            {{ $type['desc'] ?? '' }}
                                        </p>
                                        <div class="check-icon hidden absolute top-4 right-4 text-med-primary">
                                            <i class="fa-solid fa-circle-check text-xl"></i>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                            <input id="selectedUserType" name="userType" type="hidden" value="">
                        @endif
                        <div class="mt-10 flex flex-col-reverse md:flex-row justify-between items-center gap-4">
                            <a class="cursor-pointer w-full md:w-auto px-8 py-3 rounded-full font-semibold text-gray-500 hover:text-med-dark hover:bg-gray-100 transition-colors border border-gray-300 hover:border-gray-400 flex justify-center items-center gap-2 text-center" href="{{ mwz_route('frontend.login') }}">
                                {{ __('frontend::lang.btn.cancel') }}
                            </a>
                            <a class="w-full md:w-auto bg-gray-300 text-white px-8 py-3 rounded-full font-semibold flex justify-center items-center gap-2 transition-colors cursor-not-allowed pointer-events-none text-center" id="nextBtn" href="{{ mwz_route('frontend.register_step2') }}">
                                {{ __('frontend::lang.btn.next') }}
                                <i class="fa-solid fa-arrow-right"></i>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        let currentSelection = null;
        const CARDS = ['general', 'wholesale', 'pharmacy'];

        const selectType = (type) => {
            currentSelection = type;
            const selectedUserTypeInput = document.getElementById('selectedUserType');
            if (selectedUserTypeInput) selectedUserTypeInput.value = type;

            CARDS.forEach((cardId) => {
                const cardElement = document.getElementById(`card-${cardId}`);
                if (!cardElement) return;
                const checkIcon = cardElement.querySelector('.check-icon');
                cardElement.classList.remove('selected-card', 'ring-2', 'ring-med-primary');
                cardElement.classList.add('border-gray-200');
                checkIcon?.classList.add('hidden');
            });

            const selectedCard = document.getElementById(`card-${type}`);
            if (!selectedCard) return;
            const selectedIcon = selectedCard.querySelector('.check-icon');
            selectedCard.classList.remove('border-gray-200');
            selectedCard.classList.add('selected-card', 'ring-2', 'ring-med-primary');
            selectedIcon?.classList.remove('hidden');

            const nextBtn = document.getElementById('nextBtn');
            if (nextBtn) {
                nextBtn.classList.remove('bg-gray-300', 'cursor-not-allowed', 'pointer-events-none');
                nextBtn.classList.add('bg-med-primary', 'hover:bg-med-secondary', 'shadow-md');
                nextBtn.href = "{{ mwz_route('frontend.register_step2') }}?type=" + type;
            }
        };

        window.selectType = selectType;
    </script>
@endpush