@extends('frontend.layouts.main')
@section('title', $seo['title'] ?? '')
@section('keywords', $seo['keywords'] ?? '')
@section('description', $seo['description'] ?? '')
@section('abstract', $seo['abstract'] ?? '')
@section('image', asset($header['seo_home']->image_path))
@section('content')
<link rel="stylesheet" href="{{ asset('frontend/css/about-us.css') }}" type="text/css" />

@isset($information)
<section class="tuyendung" >
    <div class="hero-section" style="background: url({{asset($information->image_path2)}});">
        <div class="search-container">
            <h1 class="search-title">{{$information->value}} <span class="brand">{{$information->slug}}</span></h1>
            <form class="search-form" action="{{route('tuyendung')}}">
                <div class="input-tuyendung">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-search absolute left-3 top-1/2 -translate-y-1/2 text-gray-300 h-4 w-4">
                        <circle cx="11" cy="11" r="8"></circle>
                        <path d="m21 21-4.3-4.3"></path>
                    </svg>
                    <input type="text" name="keyword" class="search-input" placeholder="Tìm kiếm">
                </div>
                <select class="search-select" name="branch">
                    <option value="">Ngành nghề</option>
                    @foreach($branch as $item)
                    <option value="{{ $item->id }}"
                        @if(request('branch')==$item->id) selected @endif>
                        {{ $item->name }}
                    </option>
                    @endforeach
                </select>

                <select class="search-select" name="location">
                    <option value="">Địa điểm</option>
                    @foreach($location as $item)
                    <option value="{{ $item->id }}"
                        @if(request('location')==$item->id) selected @endif>
                        {{ $item->name }}
                    </option>
                    @endforeach
                </select>

                <button type="submit" class="search-btn">Tìm kiếm</button>
            </form>
        </div>
    </div>

    <div class="main-content">
        @if(count($data) > 0)
        @foreach($data as $item)
        <div class="job-card" data-job-id="{{ $item->id }}">
            <div class="job-header">
                <div>
                    <h2 class="job-title">{{$item->name}}</h2>
                    <div class="job-tags">
                        @if(isset($item->tags) && count($item->tags) > 0)
                        @foreach($item->tags as $itemC)
                        <span class="job-tag">{{$itemC->name}}</span>
                        @endforeach
                        @endif
                    </div>
                </div>
                <div class="salary">{!!$item->description!!}</div>
            </div>
            <div class="job-info">
                {!!$item->description2!!}
            </div>
        </div>
        @endforeach
        @else
        <span>Không tìm thấy kết quả!</span>
        @endif
    </div>

    <!-- Single Popup outside the foreach loop -->
    <div class="form-popup-tuyendung">
        <div class="overlay"></div>
        <div class="box-form">
            <div class="box-content-form">
                <div class="close-form-tuyendung">
                    <span>X</span>
                </div>
                <div class="hedding-form-tuyendung">
                    <div class="line-1"></div>
                    <div class="center-svg-line">
                        <div class="number-svg">1</div>
                        <div class="number-svg-2 number-svg">2</div>
                        <svg class="size-full transform -rotate-90" viewBox="0 0 100 100">
                            <circle cx="50" cy="50" r="45" stroke-width="10" fill="transparent" stroke="rgba(0, 0, 0, 0.1)"></circle>
                            <circle cx="50" cy="50" r="45" stroke-width="10" fill="transparent" stroke="#1aace3" stroke-dasharray="282.7433388230814" stroke-dashoffset="189.43803701146453" stroke-linecap="round" style="transition: stroke-dashoffset 1s ease-in-out;"></circle>
                        </svg>
                        <span>Thông tin tuyển dụng</span>
                    </div>
                </div>

                <div class="content-start-form">
                    <div class="content-form-tuyendung">
                        <div class="py-4">
                            <div class="job-content-detail">
                                <!-- Content will be loaded here via JavaScript -->
                            </div>
                        </div>

                        <div class="btn-ungtuyen">
                            <a href="javascript:void(0)">
                                Ứng tuyển ngay
                            </a>
                        </div>
                    </div>

                    <div class="step2-form-contacts">
                        <div class="box-form-dangky">
                            <form action="{{route('hire.store')}}"
                                data-url="{{route('hire.store')}}" data-ajax="submit025"
                                data-target="alert" data-href="#modalAjax" data-content="#content"
                                data-method="POST" method="POST" name="frm" id="job-application-form" enctype="multipart/form-data">
                                <input type="hidden" name="robot_check" value="" id="robot_check">
                                @csrf
                                <div class="form-grid">
                                    <div class="form-group">
                                        <label class="form-label">Họ và tên*</label>
                                        <input type="text" name="name" class="form-input" placeholder="Nguyen Van A" />
                                    </div>

                                    <div class="form-group">
                                        <label class="form-label">Email*</label>
                                        <input type="email" name="email" class="form-input" placeholder="nguyenvana@gmail.com" />
                                    </div>

                                    <div class="form-group">
                                        <label class="form-label">SĐT*</label>
                                        <input type="tel" name="phone" class="form-input" placeholder="+84 6544 876" />
                                    </div>

                                    <div class="form-group" style="display:none">
                                        <label class="form-label">Vị trí ứng tuyển</label>
                                        <input type="text" name="position" class="form-input job-position" readonly />
                                    </div>

                                    <div class="form-group">
                                        <label class="form-label">Địa chỉ</label>
                                        <input type="text" name="address_detail" class="form-input" placeholder="Xã,Huyện,Tỉnh" />

                                    </div>

                                    <div class="form-group">
                                        <label class="form-label">Upload CV*</label>
                                        <div class="upload-container">
                                            <div class="upload-area" id="upload-area" onclick="document.getElementById('cv-upload').click()">
                                                <svg class="upload-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                                    <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
                                                    <polyline points="7,10 12,15 17,10" />
                                                    <line x1="12" y1="15" x2="12" y2="3" />
                                                </svg>
                                                <div class="upload-text">Click để tải CV</div>
                                                <div class="upload-subtitle">Định dạng file chấp nhận: PDF, DOC, DOCX</div>
                                            </div>

                                            <!-- File display area -->
                                            <div class="uploaded-file" id="uploaded-file" style="display: none;">
                                                <div class="file-info">
                                                    <svg class="file-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                                        <path d="M14,2 L18,6 L18,20 C18,21.1046 17.1046,22 16,22 L8,22 C6.89543,22 6,21.1046 6,20 L6,4 C6,2.89543 6.89543,2 8,2 L14,2 Z" />
                                                        <polyline points="14,2 14,8 20,8" />
                                                    </svg>
                                                    <div class="file-details">
                                                        <div class="file-name" id="file-name"></div>
                                                        <div class="file-size" id="file-size"></div>
                                                    </div>
                                                </div>
                                                <button type="button" class="remove-file" id="remove-file" onclick="removeFile()">
                                                    x
                                                </button>
                                            </div>
                                        </div>
                                        <input type="file" name="file" id="cv-upload" style="display: none;" accept=".pdf,.doc,.docx" />
                                    </div>

                                    <div class="form-group full-width">
                                        <label class="form-label">Vài dòng giới thiệu về bản thân</label>
                                        <textarea name="content" class="textarea-large" placeholder="Giới thiệu về bản thân..."></textarea>
                                    </div>
                                </div>

                                <input type="hidden" name="job_id" class="job-id-input" />

                                <div class="form-actions">
                                    <button type="submit" class="btn-submit">
                                        Gửi yêu cầu
                                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                            <path d="M5 12h14" />
                                            <path d="M12 5l7 7-7 7" />
                                        </svg>
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
@endisset

@endsection
@section('js')
<script>
    // Form submission handler
    $(document).on('submit', "[data-ajax='submit025']", function(event) {
        event.preventDefault();
        console.log('Form submitted');

        let myThis = $(this);
        let dataInput = $(this).data();

        var nameVal = myThis.find('[name="name"]').val().trim();
        var emailVal = myThis.find('[name="email"]').val().trim();
        var phoneVal = myThis.find('[name="phone"]').val().trim();
        var fileInput = myThis.find('[name="file"]')[0];
        var fileVal = fileInput.files.length > 0 ? fileInput.files[0] : null;

        let isEmail = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
        let isPhone = /^(03|05|07|08|09)\d{8}$/;

        let robotCheckVal = myThis.find('[name="robot_check"]').val().trim();

        if (robotCheckVal !== '') {
            Swal.fire({
                position: 'center',
                icon: 'error',
                title: "Yêu cầu không hợp lệ!",
                showConfirmButton: false,
                timer: 1500
            });
            return false;
        }

        if (nameVal === '') {
            Swal.fire({
                position: 'center',
                icon: 'error',
                title: 'Vui lòng nhập họ và tên!',
                showConfirmButton: false,
                timer: 1500
            });
            return false;
        }

        if (emailVal === '') {
            Swal.fire({
                position: 'center',
                icon: 'error',
                title: 'Vui lòng nhập email!',
                showConfirmButton: false,
                timer: 1500
            });
            return false;
        } else if (!(isEmail.test(emailVal))) {
            Swal.fire({
                position: 'center',
                icon: 'error',
                title: 'Vui lòng nhập email hợp lệ!',
                showConfirmButton: false,
                timer: 1500
            });
            return false;
        }

        if (phoneVal === '') {
            Swal.fire({
                position: 'center',
                icon: 'error',
                title: 'Vui lòng nhập số điện thoại!',
                showConfirmButton: false,
                timer: 1500
            });
            return false;
        } else if (!(isPhone.test(phoneVal))) {
            Swal.fire({
                position: 'center',
                icon: 'error',
                title: 'Vui lòng nhập số điện thoại hợp lệ!',
                showConfirmButton: false,
                timer: 1500
            });
            return false;
        }

        if (!fileVal) {
            Swal.fire({
                position: 'center',
                icon: 'error',
                title: 'Vui lòng gửi CV!',
                showConfirmButton: false,
                timer: 1500
            });
            return false;
        }

        var formData = new FormData();

        myThis.find('input, textarea, select').each(function() {
            var input = $(this);
            var name = input.attr('name');
            var type = input.attr('type');

            if (name && type !== 'file') {
                formData.append(name, input.val());
            }
        });

        if (fileVal) {
            formData.append('file', fileVal);
        }

        myThis.find('.btn-submit').prop('disabled', true).text('Đang gửi...');

        $.ajax({
            type: dataInput.method,
            url: dataInput.url,
            data: formData,
            processData: false,
            contentType: false,
            dataType: "json",
            success: function(response) {
                myThis.find('.btn-submit').prop('disabled', false).html('Gửi yêu cầu <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14" /><path d="M12 5l7 7-7 7" /></svg>');

                if (response.code == 200) {
                    myThis.find('input:not([type="hidden"]), textarea:not([type="hidden"])').val('');
                    resetFileUpload();
                    $('.form-popup-tuyendung').removeClass('active step2');

                    if (dataInput.content) {
                        $(dataInput.content).html(response.html);
                    }

                    if (dataInput.target) {
                        switch (dataInput.target) {
                            case 'modal':
                                $(dataInput.href).modal();
                                break;
                            case 'alert':
                                Swal.fire({
                                    position: 'center',
                                    icon: 'success',
                                    title: response.html,
                                    showConfirmButton: false,
                                    timer: 2000
                                });
                                break;
                            default:
                                break;
                        }
                    }
                } else {
                    Swal.fire({
                        position: 'center',
                        icon: 'error',
                        title: response.html,
                        showConfirmButton: false,
                        timer: 1500
                    });
                }
            },
            error: function(xhr, status, error) {
                console.error('AJAX Error:', xhr.responseText);
                myThis.find('.btn-submit').prop('disabled', false).html('Gửi yêu cầu <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14" /><path d="M12 5l7 7-7 7" /></svg>');

                Swal.fire({
                    position: 'center',
                    icon: 'error',
                    title: 'Gửi thông tin thất bại. Vui lòng thử lại!',
                    showConfirmButton: false,
                    timer: 1500
                });
            }
        });

        return false;
    });

    // Job data with proper error handling
    $(document).ready(function() {
        // Build job data safely
        const jobData = {};
        
        @if(isset($data) && count($data) > 0)
            @foreach($data as $item)
                jobData[{{ $item->id }}] = {
                    name: @json($item->name ?? ''),
                    content: @json($item->content ?? ''),
                    value: @json($item->value ?? '')
                };
            @endforeach
        @endif

        console.log('Job data loaded:', jobData);

        // Job card click handler
        $(document).on('click', '.job-card', function() {
            const jobId = $(this).attr('data-job-id');
            console.log('Job card clicked, ID:', jobId);
            
            if (jobId && jobData[jobId]) {
                const job = jobData[jobId];
                
                // Set job content and form data
                $('.job-content-detail').html(job.content || 'Không có thông tin chi tiết');
                $('.job-position').val(job.name || '');
                $('.job-id-input').val(jobId);

                // Show popup
                $('.form-popup-tuyendung').addClass('active');
                console.log('Popup should be visible now');
            } else {
                console.error('Job not found for ID:', jobId);
                Swal.fire({
                    position: 'center',
                    icon: 'error',
                    title: 'Không tìm thấy thông tin công việc!',
                    showConfirmButton: false,
                    timer: 1500
                });
            }
        });

        // Close popup handlers
        $(document).on('click', '.close-form-tuyendung', function() {
            $('.form-popup-tuyendung').removeClass('active step2');
            resetFileUpload();
        });

        $(document).on('click', '.overlay', function() {
            $('.form-popup-tuyendung').removeClass('active step2');
            resetFileUpload();
        });

        // Apply button handler
        $(document).on('click', '.btn-ungtuyen a', function(e) {
            e.preventDefault();
            $('.form-popup-tuyendung').addClass('step2');
        });

        // File upload handler
        $(document).on('change', '#cv-upload', function(e) {
            const file = e.target.files[0];
            if (file) {
                const allowedTypes = ['pdf', 'doc', 'docx'];
                const fileExtension = file.name.split('.').pop().toLowerCase();

                if (!allowedTypes.includes(fileExtension)) {
                    Swal.fire({
                        position: 'center',
                        icon: 'error',
                        title: 'Chỉ chấp nhận file PDF, DOC, DOCX',
                        showConfirmButton: false,
                        timer: 1500
                    });
                    this.value = '';
                    return;
                }

                const maxSize = 5 * 1024 * 1024; // 5MB
                if (file.size > maxSize) {
                    Swal.fire({
                        position: 'center',
                        icon: 'error',
                        title: 'File không được vượt quá 5MB',
                        showConfirmButton: false,
                        timer: 1500
                    });
                    this.value = '';
                    return;
                }

                showUploadedFile(file);
            }
        });
    });

    // File upload functions
    function showUploadedFile(file) {
        const uploadArea = document.getElementById('upload-area');
        const uploadedFile = document.getElementById('uploaded-file');
        const fileName = document.getElementById('file-name');
        const fileSize = document.getElementById('file-size');

        if (uploadArea && uploadedFile && fileName && fileSize) {
            uploadArea.style.display = 'none';
            uploadedFile.style.display = 'block';
            fileName.textContent = file.name;
            fileSize.textContent = formatFileSize(file.size);
        }
    }

    function removeFile() {
        const uploadArea = document.getElementById('upload-area');
        const uploadedFile = document.getElementById('uploaded-file');
        const fileInput = document.getElementById('cv-upload');

        if (fileInput) {
            fileInput.value = '';
        }

        if (uploadArea && uploadedFile) {
            uploadArea.style.display = 'block';
            uploadedFile.style.display = 'none';
        }
    }

    function resetFileUpload() {
        removeFile();
    }

    function formatFileSize(bytes) {
        if (bytes === 0) return '0 Bytes';

        const k = 1024;
        const sizes = ['Bytes', 'KB', 'MB', 'GB'];
        const i = Math.floor(Math.log(bytes) / Math.log(k));

        return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
    }
</script>

@endsection