@extends('layout.app')

@section('content')
{{--    <style>--}}
{{--        .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%);--}}
{{--            }--}}
{{--        }--}}


{{--        /* Modal Styling */--}}
{{--        .modal-overlay {--}}
{{--            position: fixed;--}}
{{--            top: 0;--}}
{{--            left: 0;--}}
{{--            width: 100%;--}}
{{--            height: 100%;--}}
{{--            background: rgba(0, 0, 0, 0.6);--}}
{{--            display: none;--}}
{{--            justify-content: center;--}}
{{--            align-items: center;--}}
{{--            z-index: 10000;--}}
{{--        }--}}

{{--        .modal-box {--}}
{{--            background: #fff;--}}
{{--            padding: 30px;--}}
{{--            border-radius: 8px;--}}
{{--            width: 90%;--}}
{{--            max-width: 500px;--}}
{{--            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);--}}
{{--            animation: fadeIn 0.3s ease;--}}
{{--            text-align: center;--}}
{{--        }--}}

{{--        .modal-header {--}}
{{--            font-size: 20px;--}}
{{--            font-weight: bold;--}}
{{--            margin-bottom: 20px;--}}
{{--        }--}}

{{--        .modal-btn {--}}
{{--            background: #3e94e7;--}}
{{--            color: #fff;--}}
{{--            padding: 10px 20px;--}}
{{--            border: none;--}}
{{--            border-radius: 6px;--}}
{{--            margin-top: 20px;--}}
{{--            cursor: pointer;--}}
{{--        }--}}

{{--        .modal-btn:hover {--}}
{{--            background: #2c7ac2;--}}
{{--        }--}}


{{--        @keyframes spin {--}}
{{--            0% {--}}
{{--                transform: rotate(0deg);--}}
{{--            }--}}
{{--            100% {--}}
{{--                transform: rotate(360deg);--}}
{{--            }--}}
{{--        }--}}

{{--    </style>--}}

    <section class="chat-page profile-page notification-sec py-5">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-lg-10 col-md-12">
                    <div class="notification text-center mb-5">
                        <h2 class="fw-bold">Advertisement Information</h2>
                        <p class="text-muted">All ads are <strong class="text-danger">free till October 31st, 2025</strong></p>
                    </div>

                    <!-- Card for Banner Ad Rates -->
                    <div class="card shadow-sm rounded-4 p-4 mb-4" onclick="openModal('Banner Ad Rates', [
                        { name: 'Small Business Discount', price: '30', duration: 'week' }
                    ])">
                        <h4 class="text-primary mb-3">Banner Ad Rates (IT-related only)</h4>
                        <ul class="list-unstyled">
                            <li><strong>$30/week</strong></li>
                            <li><strong>Small Business Discount:</strong> 20% off (for businesses with < 20 employees)</li>
                        </ul>
                    </div>

                    <!-- Card for MarketPlace Ad Rates -->
                    <div class="card shadow-sm rounded-4 p-4 mb-4" onclick="openModal('MarketPlace Ad Rates', [
                            { name: 'New Products', price: '20', duration: '1 week' },
                        { name: 'Used Items (< $500)', price: '0', duration: '2 weeks' },
                        { name: 'Consulting Services', price: '50', duration: '2 weeks' },
                    ])">
                        <h4 class="text-primary mb-3">MarketPlace Ad Rates (IT-related only)</h4>
                        <ul class="list-unstyled">
                            <li><strong>New Products:</strong> $20/week</li>
                            <li><strong>Used Items (&lt; $500):</strong> Free for 2 weeks</li>
                            <li><strong>Consulting Services:</strong> $50 per fortnight</li>
                            <li><strong>Word Limit:</strong> 300 words</li>
                        </ul>
                    </div>

                    <!-- Card for Job Ad Rates -->
                    <div class="card shadow-sm rounded-4 p-4 mb-4" onclick="openModal('Job Ad Rates', [
                        { name: 'Small Business Discount', price: '50', duration:'2 weeks' },
                        { name: 'Small Business Discount', price: '75', duration:'1 month' },
                        { name: 'Non-profits', price: '0' , duration: '1 month' }
                    ])">
                        <h4 class="text-primary mb-3">Job Ad Rates (IT-related only)</h4>
                        <ul class="list-unstyled">
                            <li><strong>$50</strong> for 2 weeks</li>
                            <li><strong>$75</strong> for a month</li>
                            <li><strong>Small Business Discount:</strong> 20% (approval required)</li>
                            <li><strong>Non-profits:</strong> Free for the first month</li>
                        </ul>
                    </div>

                    <!-- Card for Training Ad Rates -->
                    <div class="card shadow-sm rounded-4 p-4 mb-4" onclick="openModal('Training Ad Rates', [
                      { name: 'Small Organization', price: '50', duration:'2 weeks' },
                        { name: 'Small Organization', price: '75', duration:'1 month' },

                    ])">
                        <h4 class="text-primary mb-3">Training Ad Rates</h4>
                        <ul class="list-unstyled">
                            <li><strong>$50</strong> for 2 weeks</li>
                            <li><strong>$75</strong> for a month</li>
                            <li><strong>Small Organization Discount:</strong> 20% (approval required for &lt; 20 employees)</li>
                        </ul>
                    </div>

                    <!-- Contact Info -->
                    <div class="card shadow-sm rounded-4 p-4 mt-5">
                        <h4 class="text-dark mb-3">Need Help?</h4>
                        <p>For questions or queries please contact:</p>
                        <ul>
                            <li><strong>Operations:</strong> <a href="mailto:varyticorp@gmail.com">varyticorp@gmail.com</a></li>
                        </ul>
                        <p>Or fill the form below. We will respond at the earliest:</p>
                    </div>

                </div>
            </div>
        </div>
    </section>

    <!-- Modal -->
{{--    <div class="modal-overlay" id="adModal" style="display: none;">--}}
{{--        <form action="{{ route('advertisement.form') }}" method="POST" enctype="multipart/form-data" onsubmit="return showLoader()">--}}
{{--            @csrf--}}
{{--            <input type="hidden" name="ad_package" id="ad_package_id">--}}
{{--            <input type="hidden" name="price" id="priceId">--}}
{{--            <input type="hidden" name="duration" id="durationId">--}}

{{--            <div class="modal-box" id="modalStep3" style="text-align: left;">--}}
{{--                <div class="modal-header" style="text-align: center;">Submit Your Advertisement</div>--}}
{{--                <p style="text-align: center; font-size: 14px; color: #555; margin-bottom: 20px;">--}}
{{--                    Complete the form below to promote your brand, product, or business on our marketplace.--}}
{{--                </p>--}}
{{--                <label style="font-weight: bold; margin-bottom: 5px; display: block;">Your Name / Brand</label>--}}
{{--                <input type="text" name="ad_name" placeholder="Enter your brand or business name"--}}
{{--                       style="width: 100%; padding: 10px; margin-bottom: 15px; border: 1px solid #ccc; border-radius: 5px;" required>--}}

{{--                <label style="font-weight: bold; margin-bottom: 5px; display: block;">Advertisement Category</label>--}}
{{--                <select name="ad_category" style="width: 100%; padding: 10px; margin-bottom: 15px; border: 1px solid #ccc; border-radius: 5px;" required>--}}
{{--                    <option value=""  selected disabled>Choose an Option</option>--}}
{{--                    <option value="Banner Ad Rates" disabled>Banner Ad Rates</option>--}}
{{--                    <option value="MarketPlace Ad Rates" disabled>MarketPlace Ad Rates</option>--}}
{{--                    <option value="Job Ad Rates" disabled>Job Ad Rates</option>--}}
{{--                    <option value="Training Ad Rates" disabled>Training Ad Rates</option>--}}
{{--                </select>--}}

{{--                <label style="font-weight: bold; margin-bottom: 5px; display: block;">Select Item</label>--}}
{{--                <select name="ad_item" id="adItem" style="width: 100%; padding: 10px; margin-bottom: 15px; border: 1px solid #ccc; border-radius: 5px;" required>--}}
{{--                    <option value="" selected disabled>Choose an Item</option>--}}
{{--                </select>--}}

{{--                <label style="font-weight: bold; margin-bottom: 5px; display: block;">Advertisement Category</label>--}}
{{--                <select name="employment" style="width: 100%; padding: 10px; margin-bottom: 15px; border: 1px solid #ccc; border-radius: 5px;" required>--}}
{{--                    <option value="10-20">10-20 Employees</option>--}}
{{--                    <option value="20-50">20-50 Employees</option>--}}
{{--                    <option value="50-100">50-100 Employees</option>--}}
{{--                    <option value="100-250">100-250 Employees</option>--}}
{{--                    <option value="250-500">250-500 Employees</option>--}}
{{--                    <option value="500-1000">500-1000 Employees</option>--}}
{{--                </select>--}}
{{--                <label style="font-weight: bold; margin-bottom: 5px; display: block;">Upload Image / Video</label>--}}
{{--                <input type="file" name="ad_media" accept="image/*,video/*" style="margin-bottom: 15px; display: block;" required>--}}

{{--                <label style="font-weight: bold; margin-bottom: 5px; display: block;">Short Description</label>--}}
{{--                <textarea name="ad_description" placeholder="Briefly describe your advertisement..."--}}
{{--                          style="width: 100%; height: 80px; padding: 10px; border: 1px solid #ccc; border-radius: 5px;" required></textarea>--}}

{{--                <button type="submit" class="modal-btn" style="margin-top: 20px; width: 100%;">Submit Advertisement</button>--}}
{{--                <button type="button" class="modal-btn" style="margin-top: 20px; width: 100%; background-color: #fd1d1d" onclick="closeModal()">Close</button>--}}
{{--            </div>--}}
{{--        </form>--}}
{{--    </div>--}}
{{--    <div id="adLoader"--}}
{{--         style="position: fixed; top:0; left:0; width:100%; height:100%; background: rgba(0,0,0,0.7); color:#fff; z-index: 10001; display: none; justify-content: center; align-items: center; font-size: 20px; flex-direction: column; ">--}}
{{--        <div class="spinner"--}}
{{--             style="border: 5px solid #fff; border-top: 5px solid #fd1d1d; border-radius: 50%; width: 50px; height: 50px; animation: spin 1s linear infinite; margin-bottom: 20px;"></div>--}}
{{--        Processing your Advertisement...--}}
{{--    </div>--}}
@endsection

{{--@push('script')--}}
{{--    <script>--}}
{{--        function openModal(category, items) {--}}
{{--            // Set the selected category in the dropdown--}}
{{--            const selectElement = document.querySelector('select[name="ad_category"]');--}}
{{--            selectElement.value = category;--}}

{{--            // Populate the item dropdown dynamically--}}
{{--            const adItemSelect = document.getElementById('adItem');--}}
{{--            adItemSelect.innerHTML = ''; // Clear previous options--}}

{{--            items.forEach(function(item) {--}}
{{--                const option = document.createElement('option');--}}
{{--                option.value = item.name;--}}
{{--                option.textContent = item.name + ' - ' + item.price;--}}
{{--                adItemSelect.appendChild(option);--}}
{{--            });--}}

{{--            // Show the modal--}}
{{--            document.getElementById('adModal').style.display = 'flex';--}}
{{--        }--}}

{{--        function closeModal() {--}}
{{--            document.getElementById('adModal').style.display = 'none';--}}
{{--        }--}}
{{--        function showLoader() {--}}
{{--            document.getElementById('adLoader').style.display = 'flex';--}}
{{--            return true;--}}
{{--        }--}}
{{--    </script>--}}
{{--@endpush--}}