@extends(getTemplate().'.layouts.app')

@push('styles_top')
    <style>
        .diploma-card {
            border: 1px solid #e0e0e0;
            border-radius: 8px;
            padding: 20px;
            margin-bottom: 20px;
            transition: all 0.3s ease;
        }
        .diploma-card:hover {
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
            transform: translateY(-2px);
        }
        .diploma-card.selected {
            border-color: #007bff;
            background-color: #f0f8ff;
        }
    </style>
@endpush

@php
    $dipHero = view('web.default.pages.partials.simple_banner_hero_inner', [
        'bannerTitle' => $bannerTitle ?? 'تسجيل الدبلومات',
        'bannerDescription' => $bannerDescription ?? null,
    ])->render();
@endphp

@section('content')
    @include('web.default.includes.premium.page_hero', [
        'variant' => 'image',
        'backgroundUrl' => $bannerImage ?? '/store/1/default_images/category_cover.png',
        'backgroundAlt' => $bannerTitle ?? '',
        'title' => '',
        'kicker' => trans('product.courses'),
        'extra' => $dipHero,
    ])

    <div class="container">
        <section class="mt-50">
            @if(!empty(session()->has('msg')))
                <div class="alert alert-success my-25 d-flex align-items-center">
                    <i data-feather="check-square" width="50" height="50" class="mr-2"></i>
                    {{ session()->get('msg') }}
                </div>
            @endif

            <div class="row">
                @if($showDiplomasList ?? true)
                <div class="col-12 col-lg-8">
                    <h2 class="font-24 font-weight-bold text-dark-blue mb-30">برامج الدبلوم المتاحة</h2>
                    
                    @forelse($diplomas as $diploma)
                        <div class="diploma-card" data-diploma-id="{{ $diploma->id }}">
                            <div class="d-flex align-items-start">
                                @if($diploma->thumbnail)
                                    <img src="{{ $diploma->thumbnail }}" alt="{{ $diploma->title }}" class="rounded" style="width: 120px; height: 80px; object-fit: cover; margin-left: 15px;">
                                @endif
                                <div class="flex-grow-1">
                                    <h3 class="font-18 font-weight-bold text-dark-blue mb-10">{{ $diploma->title }}</h3>
                                    @if($diploma->seo_description)
                                        <p class="font-14 text-gray mb-10">{{ \Illuminate\Support\Str::limit($diploma->seo_description, 150) }}</p>
                                    @endif
                                    <button type="button" class="btn btn-sm btn-outline-primary select-diploma-btn" data-id="{{ $diploma->id }}" data-title="{{ $diploma->title }}">
                                        اختر هذا الدبلوم
                                    </button>
                                </div>
                            </div>
                        </div>
                    @empty
                        <div class="alert alert-info">
                            <p class="mb-0">لا توجد برامج دبلوم متاحة حالياً</p>
                        </div>
                    @endforelse
                </div>
                @endif

                <div class="col-12 {{ ($showDiplomasList ?? true) ? 'col-lg-4' : 'col-lg-8 offset-lg-2' }}">
                    <div class="rounded-lg shadow-sm p-25">
                        <h2 class="font-20 font-weight-bold text-dark-blue mb-25">نموذج التسجيل</h2>

                        <form action="/diploma-registration/store" method="post" id="diplomaRegistrationForm">
                            {{ csrf_field() }}

                            <input type="hidden" name="diploma_id" id="selected_diploma_id" value="" required>

                            <div class="form-group">
                                <label class="input-label font-weight-500">الاسم الكامل <span class="text-danger">*</span></label>
                                <input type="text" name="full_name" value="{{ old('full_name') }}" class="form-control @error('full_name') is-invalid @enderror" required>
                                @error('full_name')
                                <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="form-group">
                                <label class="input-label font-weight-500">البريد الإلكتروني <span class="text-danger">*</span></label>
                                <input type="email" name="email" value="{{ old('email') }}" class="form-control @error('email') is-invalid @enderror" required>
                                @error('email')
                                <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="form-group">
                                <label class="input-label font-weight-500">رقم الهاتف <span class="text-danger">*</span></label>
                                <input type="text" name="mobile" value="{{ old('mobile') }}" class="form-control @error('mobile') is-invalid @enderror" required>
                                @error('mobile')
                                <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="form-group">
                                <label class="input-label font-weight-500">الدبلوم المختار</label>
                                <input type="text" id="selected_diploma_name" class="form-control" readonly placeholder="اختر دبلوم من القائمة">
                                @error('diploma_id')
                                <div class="text-danger font-12 mt-1">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="form-group">
                                <label class="input-label font-weight-500">رسالة أو ملاحظات (اختياري)</label>
                                <textarea name="message" rows="4" class="form-control @error('message') is-invalid @enderror">{{ old('message') }}</textarea>
                                @error('message')
                                <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            @if($requireCaptcha ?? true)
                            <div class="form-group">
                                <label class="input-label font-weight-500">الكابتشا <span class="text-danger">*</span></label>
                                <div class="row align-items-center">
                                    <div class="col">
                                        <input type="text" name="captcha" class="form-control @error('captcha') is-invalid @enderror" required>
                                        @error('captcha')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                    <div class="col d-flex align-items-center">
                                        <img id="captchaImage" class="captcha-image" src="">
                                        <button type="button" id="refreshCaptcha" class="btn-transparent ml-15">
                                            <i data-feather="refresh-ccw" width="24" height="24"></i>
                                        </button>
                                    </div>
                                </div>
                            </div>
                            @endif

                            <button type="submit" class="btn btn-primary btn-block mt-20">إرسال طلب التسجيل</button>
                        </form>
                    </div>
                </div>
            </div>
        </section>
    </div>
@endsection

@push('scripts_bottom')
    <script>
        @if($requireCaptcha ?? true)
        // Load captcha on page load
        function loadCaptcha() {
            fetch('/captcha/create', {
                method: 'POST',
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}',
                    'Content-Type': 'application/json'
                }
            })
            .then(response => response.json())
            .then(data => {
                if (data.captcha_src) {
                    document.getElementById('captchaImage').src = data.captcha_src;
                }
            });
        }

        // Refresh captcha
        const refreshCaptchaBtn = document.getElementById('refreshCaptcha');
        if (refreshCaptchaBtn) {
            refreshCaptchaBtn.addEventListener('click', function() {
                loadCaptcha();
            });
        }

        // Load captcha on page load
        loadCaptcha();
        @endif

        // Select diploma
        document.querySelectorAll('.select-diploma-btn').forEach(btn => {
            btn.addEventListener('click', function() {
                const diplomaId = this.getAttribute('data-id');
                const diplomaTitle = this.getAttribute('data-title');
                
                // Set hidden input
                document.getElementById('selected_diploma_id').value = diplomaId;
                document.getElementById('selected_diploma_name').value = diplomaTitle;
                
                // Update visual selection
                document.querySelectorAll('.diploma-card').forEach(card => {
                    card.classList.remove('selected');
                });
                this.closest('.diploma-card').classList.add('selected');
                
                // Scroll to form
                document.getElementById('diplomaRegistrationForm').scrollIntoView({ behavior: 'smooth', block: 'nearest' });
            });
        });

        // Load captcha on page load
        loadCaptcha();
    </script>
@endpush