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

@section('content')
    <x-frontend::breadcrumb title="{{ end($breadcrumb)['name'] ?? '' }}" :breadcrumbs="$breadcrumb" />

    <section class="page-news p-t-60 p-b-60">
        <div class="container">
            <!-- Top Section: About Career -->
            @if (!empty($detail))
                <div class="row m-b-60">
                    {!! $detail['detail'] ?? '' !!}
                </div>
            @endif
           
            <!-- Job Listings Section -->
            @if (!empty($list['list']))
                <div class="row">
                    <div class="col-lg-12">
                        <div class="job-listings">
                            <!-- Job Card 1 -->
                            @foreach ($list['list'] as  $ls)
                                <div class="job-card {{ $loop->index == 0 ? 'active' : '' }}">
                                    <div class="job-card-header" onclick="toggleJob(this)">
                                        <div class="job-card-left">
                                            <div class="job-icon">
                                                <i class="fa fa-user"></i>
                                            </div>
                                            <span class="job-position">{!! $ls['name'] ?? '' !!}</span>
                                        </div>
                                        <div class="job-card-right">
                                            <button
                                                type="button"
                                                class="btn-apply"
                                                data-position-id="{{ $ls['group_id'] ?? ($ls['id'] ?? '') }}"
                                                data-position-name="{{ strip_tags($ls['name'] ?? '') }}"
                                            >@lang('frontend::lang.apply')</button>
                                            <i class="fa fa-chevron-up chevron-icon {{ $loop->index == 0 ? 'fa-chevron-up' : 'fa-chevron-down' }}"></i>
                                        </div>
                                    </div>
                                    <div class="job-card-content {{ $loop->index == 0 ? 'show' : '' }}">
                                        {!! $ls['detail'] ?? '' !!}
                                    </div>
                                </div>  
                            @endforeach
                        </div>

                        @php
                            $curPage = (int) ($list['cur_page'] ?? 1);
                            $totalPages = (int) ($list['total'] ?? 1);
                            $pages = ($totalPages > 1) ? setPagination($curPage, $totalPages) : [];
                        @endphp

                        @if ($totalPages > 1)
                            <div class="row m-t-30">
                                <div class="col-lg-12">
                                    <ul class="pagination justify-content-center">
                                        <li class="page-item {{ $curPage <= 1 ? 'disabled' : '' }}">
                                            <a class="page-link {{ $curPage <= 1 ? '' : '' }}"
                                               href="{{ $curPage <= 1 ? '#' : request()->fullUrlWithQuery(['page' => max(1, $curPage - 1)]) }}"
                                               tabindex="-1"
                                               aria-disabled="{{ $curPage <= 1 ? 'true' : 'false' }}">
                                                <i class="fa fa-angle-left"></i>
                                            </a>
                                        </li>

                                        @foreach ($pages as $p)
                                            @if ($p === '...')
                                                <li class="page-item disabled" aria-disabled="true">
                                                    <span class="page-link disabled">...</span>
                                                </li>
                                            @else
                                                <li class="page-item {{ $curPage == (int) $p ? 'active' : '' }}" aria-current="{{ $curPage == (int) $p ? 'page' : '' }}">
                                                    <a class="page-link" href="{{ request()->fullUrlWithQuery(['page' => $p]) }}">{{ $p }}</a>
                                                </li>
                                            @endif
                                        @endforeach

                                        <li class="page-item {{ $curPage >= $totalPages ? 'disabled' : '' }}">
                                            <a class="page-link disabled"
                                               href="{{ $curPage >= $totalPages ? '#' : request()->fullUrlWithQuery(['page' => min($totalPages, $curPage + 1)]) }}"
                                               tabindex="-1"
                                               aria-disabled="{{ $curPage >= $totalPages ? 'true' : 'false' }}">
                                                <i class="fa fa-angle-right"></i>
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        @endif
                    </div>
                </div>
            @endif
        </div>
    </section>


    <!-- Job Application Modal -->
    @livewire('frontend::form.career')


    <script>
    function toggleJob(element) {
        const jobCard = element.closest('.job-card');
        const content = jobCard.querySelector('.job-card-content');
        const chevron = element.querySelector('.chevron-icon');
        const isActive = jobCard.classList.contains('active');

        // Close all other job cards
        document.querySelectorAll('.job-card').forEach(card => {
            if (card !== jobCard) {
                card.classList.remove('active');
                card.querySelector('.job-card-content').classList.remove('show');
                card.querySelector('.chevron-icon').classList.remove('fa-chevron-up');
                card.querySelector('.chevron-icon').classList.add('fa-chevron-down');
            }
        });

        // Toggle current card
        if (isActive) {
            jobCard.classList.remove('active');
            content.classList.remove('show');
            chevron.classList.remove('fa-chevron-up');
            chevron.classList.add('fa-chevron-down');
        } else {
            jobCard.classList.add('active');
            content.classList.add('show');
            chevron.classList.remove('fa-chevron-down');
            chevron.classList.add('fa-chevron-up');
        }
    }

    // Job Application Modal Functions
    let jobRecaptchaWidget = null;
    let currentPositionId = '';
    let currentPositionName = '';
    const isCaptchaRequired = @json(!app()->environment('local') && !empty($page_init['setting']['recapcha']));

    // Handle Apply button clicks
    document.addEventListener('DOMContentLoaded', function() {
        const applyButtons = document.querySelectorAll('.btn-apply');
        applyButtons.forEach(button => {
            button.addEventListener('click', function(e) {
                e.stopPropagation(); // Prevent triggering toggleJob
                currentPositionId = this.dataset.positionId || '';
                currentPositionName = this.dataset.positionName || '';
                openJobApplicationModal(currentPositionId, currentPositionName);
            });
        });

        // File upload handler
        const cvFileInput = document.getElementById('cv_file');
        if (cvFileInput) {
            cvFileInput.addEventListener('change', function(e) {
                const file = e.target.files[0];
                const fileNameDiv = document.getElementById('file-name');
                const fileLabelText = document.getElementById('file-label-text');
                
                if (file) {
                    const isPdfMime = (file.type || '').toLowerCase() === 'application/pdf';
                    const isPdfExt = (file.name || '').toLowerCase().endsWith('.pdf');
                    if (!isPdfMime && !isPdfExt) {
                        alert('กรุณาเลือกไฟล์ PDF เท่านั้น');
                        e.target.value = '';
                        fileNameDiv.textContent = '';
                        fileLabelText.textContent = 'คลิกเพื่อเลือกไฟล์ PDF';
                        return;
                    }
                    fileNameDiv.textContent = 'ไฟล์ที่เลือก: ' + file.name;
                    fileLabelText.textContent = file.name;
                } else {
                    fileNameDiv.textContent = '';
                    fileLabelText.textContent = 'คลิกเพื่อเลือกไฟล์ PDF';
                }
            });
        }

        // Close modal when clicking outside
        const modal = document.getElementById('jobApplicationModal');
        if (modal) {
            modal.addEventListener('click', function(e) {
                if (e.target === modal) {
                    closeJobApplicationModal();
                }
            });
        }

        // Load reCAPTCHA when modal opens
        if (isCaptchaRequired && typeof grecaptcha !== 'undefined') {
            loadRecaptcha();
        } else {
            toggleJobSubmitButton(true);
        }
    });

    function openJobApplicationModal(positionId, positionName = '') {
        const modal = document.getElementById('jobApplicationModal');
        const positionSelect = document.getElementById('position');
        
        if (modal) {
            modal.classList.add('active');
            document.body.style.overflow = 'hidden';
            
            // Set position in dropdown
            if (positionSelect && positionId) {
                const idValue = String(positionId);
                positionSelect.value = idValue;
                if (positionSelect.value !== idValue && positionName) {
                    const matchedOption = Array.from(positionSelect.options).find(
                        option => option.text.trim() === String(positionName).trim()
                    );
                    if (matchedOption) {
                        positionSelect.value = matchedOption.value;
                    }
                }
                positionSelect.dispatchEvent(new Event('change', { bubbles: true }));
            }

            // Load reCAPTCHA
            if (isCaptchaRequired && typeof grecaptcha !== 'undefined') {
                setTimeout(() => {
                    loadRecaptcha();
                }, 100);
            } else {
                toggleJobSubmitButton(true);
            }
        }
    }

    function closeJobApplicationModal() {
        const modal = document.getElementById('jobApplicationModal');
        if (modal) {
            modal.classList.remove('active');
            document.body.style.overflow = '';
            
            // Reset form
            const form = document.getElementById('jobApplicationForm');
            if (form) {
                form.reset();
                clearErrors();
            }

            // Reset file label
            const fileLabelText = document.getElementById('file-label-text');
            const fileNameDiv = document.getElementById('file-name');
            if (fileLabelText) fileLabelText.textContent = 'คลิกเพื่อเลือกไฟล์ PDF';
            if (fileNameDiv) fileNameDiv.textContent = '';

            // Reset reCAPTCHA
            if (jobRecaptchaWidget && typeof grecaptcha !== 'undefined') {
                grecaptcha.reset(jobRecaptchaWidget);
            }
            Livewire.dispatch('career-captcha-updated', { token: '' });
            Livewire.dispatch('clearFields');
            toggleJobSubmitButton(!isCaptchaRequired);
        }
    }

    function toggleJobSubmitButton(isEnabled) {
        const submitBtn = document.getElementById('submitBtn');
        if (!submitBtn) {
            return;
        }

        submitBtn.disabled = !isEnabled;
        submitBtn.classList.toggle('disabled', !isEnabled);
    }

    function loadRecaptcha() {
        if (!isCaptchaRequired) {
            toggleJobSubmitButton(true);
            return;
        }

        const recaptchaSiteKey = document.getElementById('job-recaptcha-sitekey')?.value;
        const captchaDiv = document.getElementById('job-captcha');
        
        if (recaptchaSiteKey && captchaDiv && typeof grecaptcha !== 'undefined') {
            toggleJobSubmitButton(false);
            Livewire.dispatch('career-captcha-updated', { token: '' });
            if (jobRecaptchaWidget) {
                grecaptcha.reset(jobRecaptchaWidget);
            } else {
                jobRecaptchaWidget = grecaptcha.render('job-captcha', {
                    'sitekey': recaptchaSiteKey,
                    'theme': 'light',
                    'callback': function(response) {
                        if (response) {
                            Livewire.dispatch('career-captcha-updated', { token: response });
                            toggleJobSubmitButton(true);
                        }
                    },
                    'expired-callback': function() {
                        Livewire.dispatch('career-captcha-updated', { token: '' });
                        toggleJobSubmitButton(false);
                    }
                });
            }
        }
    }

    function clearErrors() {
        const errorElements = document.querySelectorAll('.error-message');
        errorElements.forEach(el => el.textContent = '');
    }

    document.addEventListener('livewire:init', () => {
        Livewire.on('career-application-saved', () => {
            closeJobApplicationModal();
            toggleJobSubmitButton(false);
            if (jobRecaptchaWidget && typeof grecaptcha !== 'undefined') {
                grecaptcha.reset(jobRecaptchaWidget);
            }
        });
    });
    </script>

    <!-- reCAPTCHA Script -->
    @if(!empty($page_init['setting']['recapcha']))
    <script src="https://www.google.com/recaptcha/api.js?onload=loadRecaptcha&render=explicit&hl={{ app()->getLocale() }}" async defer></script>
    @endif
@endsection