@extends('layout.app')
@section('content')
    <style>
        #searchResults {
            max-height: 300px;
            overflow-y: auto;
            background: #fff;
            border: 1px solid #ccc;
            border-radius: 4px;
        }

        #searchResults ul {
            padding-left: 0;
        }

        #searchResults li {
            cursor: pointer;
        }

        .top-slider-banner {
            top: 0;
            left: 0;
            width: 100%;
            background: linear-gradient(90deg, #32CD32 0%, #9BE7FF 50%, #32CD32 100%);
            color: #fff;
            overflow: hidden;
            height: 40px;
            display: flex;
            align-items: center;
            font-size: 16px;
            font-weight: bold;
            border-radius: 10px;
        }

        .slider-content {
            display: inline-block;
            white-space: nowrap;
            padding-left: 100%;
            animation: slide-left 80s linear infinite;
            cursor: pointer;
        }

        @keyframes slide-left {
            0% {
                transform: translateX(0);
            }
            100% {
                transform: translateX(-100%);
            }
        }

    </style>
    <div class="top-slider-banner" onclick="openAdvertiseModal()">
        <div class="slider-content">
            📢 Want More Customers? Promote Your Business Here — Advertise Now & Reach Thousands! 🚀 &nbsp;&nbsp;&nbsp;&nbsp;
            📢 $50/for 2 weeks; $75/for month. There is a 20% discount for small businesses <20 employees. 🚀 &nbsp;&nbsp;&nbsp;&nbsp;
        </div>
    </div>
    <section class="chat-page profile-page notification-sec">
        <div class="container">
            <div class="row">

                <div class="col-lg-3 col-md-3">

                    <div class="postjob-card">

                        <div class="post-flex">
                            @if (Auth::check() && \Illuminate\Support\Facades\Auth::user()->hasRole('user'))
                                <a href="{{route('post.job.create')}}" class="themeBtn">Post a Job</a>
                            @else
                                <a href="{{route('guest.user')}}" class="themeBtn">Post a Job</a>
                            @endif
                        </div>

                    </div>
                    <div class="suggestion-card">
                        <div class="d-flex">
                            <h2>Search</h2>
                        </div>


                        <div class="search-container">
                            <input type="text" placeholder="Job title,keywords, or company" id="searchJob">
                        </div>

                    </div>
                    <div id="searchResults" class="mt-3"></div>


                </div>

                <div class="col-lg-6 col-md-6">
                    <div id="postsWrapper">
                    </div>
                    @if(!$highlightPost && $otherPosts->isEmpty())
                        <h3 id="nojob">No Jobs Found!</h3>
                    @else

                        @if($highlightPost)
                            <div class="post-coment" style="border: 4px solid #3e94e7; padding: 10px;">
                                <div class="cmnt-jhn">
                                    <div class="d-flex">
                                        <figure>
                                            <img
                                                src="{{ $highlightPost->user->getFirstMediaUrl('profile_image') ?? '' }}"
                                                class="img-fluid" alt="img">
                                        </figure>
                                        <div>
                                            <h4>{{ $highlightPost->user->name ?? '' }}</h4>
                                            <span><i class="fad fa-clock"></i> {{ $highlightPost->created_at->diffForHumans() ?? '' }}</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="senir-wrodpres">
                                    <h3>{{ $highlightPost->title ?? '' }}</h3>
                                    <div class="full-time">
                                        <a href="#"
                                           class="time">{{ ucfirst(str_replace('_', ' ', $highlightPost->job_type)) }}</a>
                                        <span>${{ $highlightPost->fees }} @if($highlightPost->job_type === 'hourly')/
                                            hr @endif</span>
                                    </div>
                                    @php
                                        $words = explode(' ', $highlightPost->description);
                                        $shortDescription = implode(' ', array_slice($words, 0, 50));
                                        $fullDescription = implode(' ', array_slice($words, 50));
                                        $tags = explode(',', $highlightPost->tags);
                                    @endphp
                                    <p>
                                        {{ $shortDescription }}
                                        @if(count($words) > 50)
                                            <span class="more-text d-none">{{ $fullDescription }}</span>
                                            <a href="javascript:void(0);" class="view toggle-more">View More</a>
                                        @endif
                                    </p>
                                    <ul class="course">
                                        @foreach($tags as $tag)
                                            <li><a href="#">{{ trim($tag) }}</a></li>
                                        @endforeach
                                    </ul>
                                </div>
                                @if($highlightPost->user_id !== \Illuminate\Support\Facades\Auth::id())
                                    <div class="like-comnt" style="justify-content: end!important;">

                                        <div class="view-50">
                                            @php
                                                $alreadyApplied = $highlightPost->postApply->where('user_id', auth()->id())->count() > 0;
                                            @endphp

                                            @if($alreadyApplied)
                                                <button class="btn btn-success" disabled>
                                                    Applied
                                                </button>
                                            @else
                                                <button class="btn btn-primary apply-btn" data-bs-toggle="modal"
                                                        data-bs-target="#editProfileModal"
                                                        data-job_id="{{ $highlightPost->id }}">
                                                    Apply
                                                </button>
                                            @endif
                                        </div>

                                    </div>
                                @endif
                            </div>
                        @endif

                        @foreach($otherPosts as $post)
                            <div class="post-coment">
                                <div class="cmnt-jhn">
                                    <div class="d-flex">
                                        <figure>
                                            <img src="{{ $post->user->getFirstMediaUrl('profile_image') }}"
                                                 class="img-fluid" alt="img">
                                        </figure>
                                        <div>
                                            <h4>{{ $post->user->name }}</h4>
                                            <span><i class="fad fa-clock"></i> {{ $post->created_at->diffForHumans() }}</span>
                                        </div>
                                    </div>

                                    <div class="dropdown">
                                        <button class="btn btn-secondary dropdown-toggle" type="button"
                                                id="dropdownMenuButton"
                                                data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                            <i class="far fa-ellipsis-v"></i>
                                        </button>
                                        <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                                            <a class="dropdown-item" href="#">Report</a>
                                        </div>
                                    </div>
                                </div>
                                <div class="epic-flex">
                                    <div class="loc-flex">
                                        <a href="#"><img src="{{asset('images/epic-icon.png')}}" class="img-fluid"
                                                         alt="img">{{$post->company_name}}</a>
                                        <a href="#"><img src="{{asset('images/loc-icon.png')}}" class="img-fluid"
                                                         alt="img">{{$post->location}}</a>
                                    </div>
                                    <div class="bokmark">
                                        <a href="#"><i class="fal fa-bookmark"></i></a>
                                        <a href="#"><i class="fal fa-envelope"></i></a>
                                    </div>
                                </div>
                                <div class="senir-wrodpres">
                                    <h3>{{ $post->title }}</h3>
                                    <div class="full-time">
                                        <a href="#"
                                           class="time">{{ ucfirst(str_replace('_', ' ', $post->job_type)) }}</a>
                                        <span>${{ $post->fees }} @if($post->job_type === 'hourly')/ hr @endif</span>
                                    </div>
                                    @php
                                        $words = explode(' ', $post->description);
                                        $shortDescription = implode(' ', array_slice($words, 0, 50));
                                        $fullDescription = implode(' ', array_slice($words, 50));
                                        $tags = explode(',', $post->tags);
                                    @endphp
                                    <p>
                                        {{ $shortDescription }}
                                        @if(count($words) > 50)
                                            <span class="more-text d-none">{{ $fullDescription }}</span>
                                            <a href="javascript:void(0);" class="view toggle-more">View More</a>
                                        @endif
                                    </p>
                                    <ul class="course">
                                        @foreach($tags as $tag)
                                            <li><a href="#">{{ trim($tag) }}</a></li>
                                        @endforeach
                                    </ul>
                                </div>
                                @if($post->user_id !== \Illuminate\Support\Facades\Auth::id())
                                    <div class="like-comnt" style="justify-content: end!important;">

                                        <div class="view-50">
                                            @php
                                                $alreadyApplied = $post->postApply->where('user_id', auth()->id())->count() > 0;
                                            @endphp

                                            @if($alreadyApplied)
                                                <button class="btn btn-success" disabled>
                                                    Applied
                                                </button>
                                            @else
                                                <button class="btn btn-primary apply-btn" data-bs-toggle="modal"
                                                        data-bs-target="#editProfileModal"
                                                        data-job_id="{{ $post->id }}">
                                                    Apply
                                                </button>
                                            @endif
                                        </div>

                                    </div>
                                @endif
                            </div>
                        @endforeach

                    @endif

                </div>
                <div class="col-lg-3 col-md-3">


                    @include('components.view-advertisement')
                    <div class="help-card mt-4">
                        <ul>
                            <li>
                                <a href="{{route('newsPage')}}">News</a>
                                <a href="#">About</a>
                                <a href="#">Privacy Policy</a>
                            </li>
                            <li>
                                <a href="{{route('contact')}}">Contact</a>
                                <a href="#">Cookies Policy</a>
                            </li>
                            <li>
                                <a href="#">Career</a>
                                <a href="#">Language</a>
                                <a href="#">Copyright Policy</a>
                            </li>
                        </ul>
                        <div class="copyrght-chat">
                            <a href="#" class="cht-bold">404 Chats</a>
                            <span><i class="fas fa-copyright"></i>Copyright 2025</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </section>

    {{--    <div class="modal fade" id="postModal" tabindex="-1" aria-labelledby="postModalLabel" aria-hidden="true">--}}
    {{--        <div class="modal-dialog modal-lg">--}}
    {{--            <div class="modal-content shadow-lg rounded-4">--}}
    {{--                <div class="modal-header bg-primary text-white">--}}
    {{--                    <h5 class="modal-title" id="postModalLabel"><span id="modalTypeLabel">Post a Job</span></h5>--}}
    {{--                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"--}}
    {{--                            aria-label="Close"></button>--}}
    {{--                </div>--}}
    {{--                <form id="postForm">--}}
    {{--                    <div class="modal-body">--}}
    {{--                        <div class="mb-3">--}}
    {{--                            <label class="form-label">Company Name</label>--}}
    {{--                            <input type="text" class="form-control" name="company_name"--}}
    {{--                                   placeholder="Enter company name">--}}
    {{--                        </div>--}}

    {{--                        <div class="row">--}}
    {{--                            <div class="col-md-6 mb-3">--}}
    {{--                                <label class="form-label">Position</label>--}}
    {{--                                <input type="text" class="form-control" name="position" required--}}
    {{--                                       placeholder="Enter position">--}}
    {{--                            </div>--}}
    {{--                            <div class="col-md-6 mb-3">--}}
    {{--                                <label class="form-label">Location</label>--}}
    {{--                                <input type="text" class="form-control" name="location" required--}}
    {{--                                       placeholder="Enter location">--}}
    {{--                            </div>--}}
    {{--                        </div>--}}

    {{--                        <div class="row">--}}
    {{--                            <div class="col-md-6 mb-3">--}}
    {{--                                <label class="form-label">Type</label>--}}
    {{--                                <select class="form-select" name="job_type" required>--}}
    {{--                                    <option value="" disabled selected>Select type</option>--}}
    {{--                                    <option value="full_time">Full Time</option>--}}
    {{--                                    <option value="half_time">Half Time</option>--}}
    {{--                                    <option value="hourly">Hourly</option>--}}
    {{--                                </select>--}}
    {{--                            </div>--}}
    {{--                            <div class="col-md-6 mb-3">--}}
    {{--                                <label class="form-label">Service Fee (Hourly)</label>--}}
    {{--                                <input type="number" class="form-control" name="service_fee" min="0" step="0.01"--}}
    {{--                                       placeholder="Enter hourly fee">--}}
    {{--                            </div>--}}
    {{--                        </div>--}}

    {{--                        <div class="mb-3">--}}
    {{--                            <label class="form-label">Select up to 5 Skills/Tags</label>--}}

    {{--                            <div class="dropdown">--}}
    {{--                                <button class="btn btn-outline-primary dropdown-toggle w-100 text-start" type="button"--}}
    {{--                                        data-bs-toggle="dropdown" aria-expanded="false">--}}
    {{--                                    Choose Tags--}}
    {{--                                </button>--}}
    {{--                                <ul class="dropdown-menu p-3" style="width: 100%; max-height: 250px; overflow-y: auto;">--}}
    {{--                                    <li>--}}
    {{--                                        <div class="form-check">--}}
    {{--                                            <input class="form-check-input tag-checkbox" name="tags[]" type="checkbox"--}}
    {{--                                                   id="tag1" value="Design">--}}
    {{--                                            <label class="form-check-label" for="tag1">Design</label>--}}
    {{--                                        </div>--}}
    {{--                                    </li>--}}
    {{--                                    <li>--}}
    {{--                                        <div class="form-check">--}}
    {{--                                            <input class="form-check-input tag-checkbox" name="tags[]" type="checkbox"--}}
    {{--                                                   id="tag2" value="Development">--}}
    {{--                                            <label class="form-check-label" for="tag2">Development</label>--}}
    {{--                                        </div>--}}
    {{--                                    </li>--}}
    {{--                                    <li>--}}
    {{--                                        <div class="form-check">--}}
    {{--                                            <input class="form-check-input tag-checkbox" name="tags[]" type="checkbox"--}}
    {{--                                                   id="tag3" value="SEO">--}}
    {{--                                            <label class="form-check-label" for="tag3">SEO</label>--}}
    {{--                                        </div>--}}
    {{--                                    </li>--}}
    {{--                                    <li>--}}
    {{--                                        <div class="form-check">--}}
    {{--                                            <input class="form-check-input tag-checkbox" name="tags[]" type="checkbox"--}}
    {{--                                                   id="tag4" value="Marketing">--}}
    {{--                                            <label class="form-check-label" for="tag4">Marketing</label>--}}
    {{--                                        </div>--}}
    {{--                                    </li>--}}
    {{--                                    <li>--}}
    {{--                                        <div class="form-check">--}}
    {{--                                            <input class="form-check-input tag-checkbox" name="tags[]" type="checkbox"--}}
    {{--                                                   id="tag5" value="Support">--}}
    {{--                                            <label class="form-check-label" for="tag5">Support</label>--}}
    {{--                                        </div>--}}
    {{--                                    </li>--}}
    {{--                                    <li>--}}
    {{--                                        <div class="form-check">--}}
    {{--                                            <input class="form-check-input tag-checkbox" name="tags[]" type="checkbox"--}}
    {{--                                                   id="tag6" value="Writing">--}}
    {{--                                            <label class="form-check-label" for="tag6">Writing</label>--}}
    {{--                                        </div>--}}
    {{--                                    </li>--}}
    {{--                                </ul>--}}
    {{--                            </div>--}}

    {{--                            <small class="text-muted">You can select up to 5 tags.</small>--}}
    {{--                        </div>--}}

    {{--                        <div class="mb-3">--}}
    {{--                            <label class="form-label">Description</label>--}}
    {{--                            <textarea class="form-control" name="description" rows="4" required--}}
    {{--                                      placeholder="Describe the job/project in detail..."></textarea>--}}
    {{--                        </div>--}}
    {{--                    </div>--}}

    {{--                    <div class="modal-footer">--}}
    {{--                        <button type="submit" class="btn btn-primary w-100">Submit</button>--}}
    {{--                    </div>--}}
    {{--                </form>--}}
    {{--            </div>--}}
    {{--        </div>--}}
    {{--    </div>--}}

    <!-- Edit Profile Modal -->
    {{--    <div class="modal fade" id="editProfileModal" tabindex="-1" aria-labelledby="editProfileModalLabel"--}}
    {{--         aria-hidden="true">--}}
    {{--        <div class="modal-dialog modal-dialog-centered">--}}
    {{--            <div class="modal-content shadow-lg">--}}
    {{--                <div class="modal-header bg-primary text-white">--}}
    {{--                    <h5 class="modal-title" id="editProfileModalLabel">View Profile</h5>--}}
    {{--                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>--}}
    {{--                </div>--}}

    {{--                <form action="{{route('apply.job')}}" method="POST">--}}
    {{--                    @csrf--}}
    {{--                    <input type="hidden" name="job_id" id="job_id_field">--}}

    {{--                    <div class="modal-body">--}}

    {{--                        <div class="mb-3">--}}
    {{--                            <label for="name" class="form-label">Full Name</label>--}}
    {{--                            <input type="text" name="name" class="form-control" value="{{ auth()->user()->name ?? ''}}"--}}
    {{--                                   required>--}}
    {{--                        </div>--}}

    {{--                        <div class="mb-3">--}}
    {{--                            <label for="email" class="form-label">Email Address</label>--}}
    {{--                            <input type="email" name="email" class="form-control" value="{{ auth()->user()->email }}"--}}
    {{--                                   required>--}}
    {{--                        </div>--}}

    {{--                        <div class="mb-3">--}}
    {{--                            <label for="occupation" class="form-label">Occupation</label>--}}
    {{--                            <select name="country" id="country" required class="form-control"--}}
    {{--                                    style="padding: 0.375rem 2.75rem!important;">--}}
    {{--                                @php--}}
    {{--                                    $titles = [--}}

    {{--        'AI/ML Engineer','Business Development','Cloud Architect','Cybersecurity Analyst','Data Analyst','Data Scientist','DevOps Engineer','Database Administrator','IT Project Manager','IT Support Specialist','Network Administrator','Software Developer','Sales','Systems Engineer','UX/UI Designer','Web Developer','Other',--}}
    {{--                                    ];--}}
    {{--                                @endphp--}}
    {{--                                @foreach($titles as $title)--}}
    {{--                                    <option--}}
    {{--                                        value="{{ $title }}" {{ Auth::user()->title === $title ? 'selected' : '' }}>--}}
    {{--                                        {{ $title }}--}}
    {{--                                    </option>--}}
    {{--                                @endforeach--}}
    {{--                            </select>--}}
    {{--                        </div>--}}

    {{--                        <div class="mb-3">--}}
    {{--                            <label for="country" class="form-label">Country</label>--}}
    {{--                            <select name="country" id="country" required class="form-control"--}}
    {{--                                    style="padding: 0.375rem 2.75rem!important;">--}}
    {{--                                @php--}}
    {{--                                    $countries = [--}}
    {{--        "United States","Afghanistan", "Albania", "Algeria", "American Samoa", "Andorra", "Angola", "Anguilla", "Antarctica",--}}
    {{--        "Antigua and Barbuda", "Argentina", "Armenia", "Australia", "Austria", "Azerbaijan", "Bahamas", "Bahrain",--}}
    {{--        "Bangladesh", "Barbados", "Belarus", "Belgium", "Belize", "Benin", "Bhutan", "Bolivia",--}}
    {{--        "Bosnia and Herzegovina", "Botswana", "Brazil", "Brunei Darussalam", "Bulgaria", "Burkina Faso", "Burundi",--}}
    {{--        "Cambodia", "Cameroon", "Canada", "Cape Verde", "Cayman Islands", "Central African Republic", "Chad",--}}
    {{--        "Chile", "China", "Christmas Island", "Cocos (Keeling) Islands", "Colombia", "Comoros", "Congo",--}}
    {{--        "Congo (Democratic Republic)", "Cook Islands", "Costa Rica", "Croatia", "Cuba", "Cyprus", "Czech Republic",--}}
    {{--        "Denmark", "Djibouti", "Dominica", "Dominican Republic", "Ecuador", "Egypt", "El Salvador",--}}
    {{--        "Equatorial Guinea", "Eritrea", "Estonia", "Ethiopia", "Falkland Islands (Malvinas)", "Faroe Islands",--}}
    {{--        "Fiji", "Finland", "France", "French Guiana", "French Polynesia", "French Southern Territories", "Gabon",--}}
    {{--        "Gambia", "Georgia", "Germany", "Ghana", "Gibraltar", "Greece", "Greenland", "Grenada", "Guam",--}}
    {{--        "Guatemala", "Guernsey", "Guinea", "Guinea-Bissau", "Guyana", "Haiti", "Heard Island and McDonald Islands",--}}
    {{--        "Honduras", "Hong Kong", "Hungary", "Iceland", "India", "Indonesia", "Iran", "Iraq", "Ireland", "Israel",--}}
    {{--        "Italy", "Ivory Coast", "Jamaica", "Japan", "Jersey", "Jordan", "Kazakhstan", "Kenya", "Kiribati",--}}
    {{--        "Korea (North)", "Korea (South)", "Kuwait", "Kyrgyzstan", "Laos", "Latvia", "Lebanon", "Lesotho",--}}
    {{--        "Liberia", "Libya", "Liechtenstein", "Lithuania", "Luxembourg", "Macau", "Macedonia", "Madagascar",--}}
    {{--        "Malawi", "Malaysia", "Maldives", "Mali", "Malta", "Marshall Islands", "Martinique", "Mauritania",--}}
    {{--        "Mauritius", "Mayotte", "Mexico", "Micronesia", "Moldova", "Monaco", "Mongolia", "Montserrat", "Morocco",--}}
    {{--        "Mozambique", "Myanmar", "Namibia", "Nauru", "Nepal", "Netherlands", "Netherlands Antilles",--}}
    {{--        "New Caledonia", "New Zealand", "Nicaragua", "Niger", "Nigeria", "Niue", "Norfolk Island",--}}
    {{--        "Northern Mariana Islands", "Norway", "Oman", "Pakistan", "Palau", "Palestinian Territory", "Panama",--}}
    {{--        "Papua New Guinea", "Paraguay", "Peru", "Philippines", "Pitcairn", "Poland", "Portugal", "Puerto Rico",--}}
    {{--        "Qatar", "Réunion", "Romania", "Russia", "Rwanda", "Saint Barthélemy", "Saint Helena",--}}
    {{--        "Saint Kitts and Nevis", "Saint Lucia", "Saint Martin (French part)", "Saint Pierre and Miquelon",--}}
    {{--        "Saint Vincent and the Grenadines", "Samoa", "San Marino", "Sao Tome and Principe", "Saudi Arabia",--}}
    {{--        "Senegal", "Serbia", "Seychelles", "Sierra Leone", "Singapore", "Sint Maarten (Dutch part)", "Slovakia",--}}
    {{--        "Slovenia", "Solomon Islands", "Somalia", "South Africa", "South Georgia and the South Sandwich Islands",--}}
    {{--        "South Sudan", "Spain", "Sri Lanka", "Sudan", "Suriname", "Svalbard and Jan Mayen", "Eswatini (Swaziland)",--}}
    {{--        "Sweden", "Switzerland", "Syria", "Taiwan", "Tajikistan", "Tanzania", "Thailand", "Timor-Leste", "Togo",--}}
    {{--        "Tokelau", "Tonga", "Trinidad and Tobago", "Tunisia", "Turkey", "Turkmenistan",--}}
    {{--        "Turks and Caicos Islands", "Tuvalu", "Uganda", "Ukraine", "United Arab Emirates", "United Kingdom",--}}
    {{--        "Uruguay", "Uzbekistan", "Vanuatu", "Vatican City", "Venezuela", "Vietnam",--}}
    {{--        "Wallis and Futuna", "Western Sahara", "Yemen", "Zambia", "Zimbabwe"--}}
    {{--        ];--}}

    {{--                                @endphp--}}
    {{--                                @foreach($countries as $name)--}}
    {{--                                    <option--}}
    {{--                                        value="{{ $name }}" {{ Auth::user()->country === $name ? 'selected' : '' }}>--}}
    {{--                                        {{ $name }}--}}
    {{--                                    </option>--}}
    {{--                                @endforeach--}}
    {{--                            </select>--}}
    {{--                        </div>--}}

    {{--                        <div class="mb-3">--}}
    {{--                            <label for="state" class="form-label">State</label>--}}
    {{--                            <input type="text" name="state" class="form-control" value="{{ auth()->user()->state }}">--}}
    {{--                        </div>--}}

    {{--                        <div class="mb-3">--}}
    {{--                            <label for="city" class="form-label">City</label>--}}
    {{--                            <input type="text" name="city" class="form-control" value="{{ auth()->user()->city }}">--}}
    {{--                        </div>--}}

    {{--                    </div>--}}

    {{--                    <div class="modal-footer">--}}
    {{--                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>--}}
    {{--                        <button type="submit" class="btn btn-success">Submit</button>--}}
    {{--                    </div>--}}

    {{--                </form>--}}
    {{--            </div>--}}
    {{--        </div>--}}
    {{--    </div>--}}


@endsection
@push('script')
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const applyButtons = document.querySelectorAll('.apply-btn');

            applyButtons.forEach(btn => {
                btn.addEventListener('click', function () {
                    const jobId = this.getAttribute('data-job_id');
                    document.getElementById('job_id_field').value = jobId;
                });
            });
        });

        document.querySelectorAll('.toggle-more').forEach(function (btn) {
            btn.addEventListener('click', function () {
                const moreText = this.previousElementSibling;
                moreText.classList.toggle('d-none');
                this.textContent = moreText.classList.contains('d-none') ? 'View More' : 'View Less';
            });
        });


        $('#postForm').on('submit', function (e) {
            e.preventDefault();

            let form = $(this);

            $.ajax({
                url: '{{route('job.store')}}',
                method: 'POST',
                data: form.serialize(),
                success: function (response) {
                    if (response.success) {
                        // Show toast
                        showToast(response.message);
                        $('#nojob').hide()
                        const postHtml = generatePostHtml(response.data, response.user, response.profile);
                        $('#postsWrapper').prepend(postHtml);
                        $('#postForm')[0].reset();
                        $('#postModal').modal('hide');
                    }
                },
                error: function (xhr) {
                    if (xhr.status === 422) {
                        let errors = xhr.responseJSON.errors;
                        let errorMessages = '';

                        for (let field in errors) {
                            errorMessages += errors[field][0] + '\n';
                        }

                        alert(errorMessages); // Show all validation errors
                    } else {
                        alert('Something went wrong. Please try again.');
                    }
                }
            });
        });

        function showToast(message, type = 'success') {
            $('#liveToast').removeClass('bg-success bg-danger').addClass('bg-' + type);
            $('#toastMessage').html(message);
            const toast = new bootstrap.Toast(document.getElementById('liveToast'));
            toast.show();
        }

        function generatePostHtml(data, userName, profile) {
            return `
    <div class="post-coment">
        <div class="cmnt-jhn">
            <div class="d-flex">
                <figure>
                    <img src="${profile}" class="img-fluid" alt="img" style="    border-radius: 27px;     height: 56px;">
                </figure>
                <div>
                    <h4>${userName}</h4>
                    <span><i class="fad fa-clock"></i>Just now</span>
                </div>
            </div>
            <div class="dropdown">
                                    <button class="btn btn-secondary dropdown-toggle" type="button"
                                            id="dropdownMenuButton"
                                            data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                        <i class="far fa-ellipsis-v"></i>
                                    </button>
                                    <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                                        <a class="dropdown-item" href="#">Delete</a>
                                        <a class="dropdown-item" href="#">Report</a>
                                    </div>
                                </div>
        </div>
        <div class="epic-flex">
            <div class="loc-flex">
                <a href="#"><img src="{{asset('images/epic-icon.png')}}" class="img-fluid" alt="img">${data.company_name}</a>
                <a href="#"><img src="{{asset('images/loc-icon.png')}}" class="img-fluid" alt="img">${data.location}</a>
            </div>
            <div class="bokmark">
                <a href="#"><i class="fal fa-bookmark"></i></a>
                <a href="#"><i class="fal fa-envelope"></i></a>
            </div>
        </div>
        <div class="senir-wrodpres">
            <h3>${data.title}</h3>
            <div class="full-time">
                <a href="#" class="time">${
                data.job_type === 'full_time' ? 'Full Time' :
                    data.job_type === 'half_time' ? 'Half Time' :
                        'Hourly'
            }</a>
                <span>$${data.fees} ${data.job_type === 'hourly' ? '/hr' : ''}</span>
            </div>
            <p>${data.description}</p>

            <ul class="course">
                ${data.tags.split(',').map(tag => `<li><a href="#">${tag}</a></li>`).join('')}
            </ul>
        </div>

    </div>`;
        }

        $(document).ready(function () {
            // Live search as user types
            $('#searchJob').on('keyup', function () {
                let query = $(this).val().trim();

                if (query.length < 2) {
                    $('#searchResults').html('');
                    return;
                }

                $.ajax({
                    url: "{{ route('jobs.search') }}",
                    method: "GET",
                    data: {query: query},
                    success: function (response) {
                        let suggestions = response.suggestions;
                        let html = '';

                        if (suggestions.length === 0) {
                            html = '<p style="display: flex; justify-content: center;" class="text-muted">No results found.</p>';
                        } else {
                            html = '<ul class="list-group">';
                            suggestions.forEach(post => {
                                html += `
                            <li class="list-group-item" data-id="${post.id}">
                                <strong>${post.title}</strong><br>
                                <small>${post.company} – ${post.location}</small>
                            </li>`;
                            });
                            html += '</ul>';
                        }

                        $('#searchResults').html(html);
                    }
                });
            });

            // When a suggestion is clicked
            $('#searchResults').on('click', '.list-group-item', function () {
                const postId = $(this).data('id');

                if (!postId) return;

                $.ajax({
                    url: `{{asset('/job/preview/')}}/${postId}`,
                    method: 'GET',
                    success: function (res) {
                        $('#postsWrapper').html(res.html);
                        $('#searchResults').empty(); // Clear suggestions
                        $('#searchJob').val(''); // Clear input (optional)
                    },
                    error: function () {
                        $('#searchResults').html('<p class="text-danger">Failed to load preview.</p>');
                    }
                });
            });
        });


    </script>
@endpush