<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="Zain ul Abdin">
    <title>Hackathon | GEO 4.0</title>

    <!-- CSS -->


    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
    <link href="assets/css/bootstrap.min.css" rel="stylesheet">

    <link href="assets/css/custom.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
    <style>
        input[type=text] {
            width: 100%;
            padding: 12px 20px;
            margin: 8px 0;
            box-sizing: border-box;
            border: 2px solid lightblue;
            border-radius: 4px;
            height: 40px;
        }

        input[type=number] {
            width: 100%;
            padding: 12px 20px;
            margin: 8px 0;
            box-sizing: border-box;
            border: 2px solid lightblue;
            border-radius: 4px;
            height: 40px;
        }

        /* Hide the increment and decrement buttons */
        input[type="number"]::-webkit-inner-spin-button,
        input[type="number"]::-webkit-outer-spin-button {
            -webkit-appearance: none;
            appearance: none;
            margin: 0;
        }

        input[type=email] {
            width: 100%;
            padding: 12px 20px;
            margin: 8px 0;
            box-sizing: border-box lightblue;
            border: 2px solid lightblue;
            border-radius: 4px;
            height: 40px;
        }

        input[type=file] {
            width: 100%;
            padding: 12px 20px;
            margin: 8px 0;
            box-sizing: border-box;
            border: 2px solid lightblue;
            border-radius: 4px;
            height: 60px;
        }

        .attend {
            display: flex;
            margin-top: 9%;
            margin-left: 20%;
            font-size: 14px;
            text-align: center;
            font-weight: bold;
            text-transform: uppercase;
        }

        .r1 {
            margin-right: -152px !important;
            margin-bottom: -14%;
        }

        .r2 {
            margin-right: -150px !important;
            margin-bottom: -14%;
        }

        .r3 {
            margin-right: -150px !important;
        }

        .marRight {
            margin-right: 1.5rem;
        }

        @media (max-width:991px) {
            .r1 {
                margin-right: 0px !important;
                margin-bottom: -10px;
            }

            .r2 {
                margin-right: 0px !important;
                margin-bottom: -10px;
            }

            .r3 {
                margin-right: 0px !important;
            }

            .backimg {
                height: 240px !important;
            }
        }

        @media (max-width:734px) {
            .r1 {
                margin-right: 0px !important;
            }
        }

        @media (max-width:734px) {
            .r2 {
                margin-right: 0px !important;
            }
        }

        @media (max-width:734px) {
            .r3 {
                margin-right: 0px !important;
            }
        }

        @media (max-width:763px) {
            .r1 {
                margin-top: 0rem !important;
            }

            .r2 {
                margin-top: 5rem !important;
            }

            .r3 {
                margin-top: 5rem !important;
            }
        }

        .backimg {
            height: 45vh;
        }


        @media (max-width:474px) {
            .r1 {
                margin-top: 0rem !important;
            }

            .r2 {
                margin-top: 2rem !important;
            }

            .r3 {
                margin-top: 2rem !important;
            }
        }

        @media(max-width:750px) {
            .botmedia {
                margin-bottom: 0% !important;
            }

            .imgone {
                margin-bottom: 3% !important;
            }
        }

        .conti {
            max-width: 100vw;
            padding: 20px;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .closrow {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 975px;
        }

        .closcol {
            border: 2px solid orange;
            padding: 20px;
            line-height: 39px;
            width: 80vw;
            border-radius: 10px;
        }

        @media(max-width:550px) {
            .closcol {
                line-height: 14px;
                padding: 8px;
                width: 100vw;
            }

            .colsrow {
                width: 97vw;
                display: flex;
                justify-content: center;
                align-items: center;
            }

            .conti {
                padding: 8px;
                padding-top: 0px;
                padding-bottom: 0px;
            }

            .lasth3 {
                font-size: 15px !important;
            }

            .lastp {
                line-height: 18px;
            }
    </style>
</head>

<body>
    @include('include.header')

    <div class="heroSection innerHero">
        <div class="image">
            <img src="assets/img/innerBg.png" alt="">
        </div>
        <div class="innerContent">
            <h1>Hackathon</h1>
            <!--<a href="#" class="btn btn-gredient">Download Form</a>-->
        </div>
    </div>

    <div class="container paraBox conti" style="">
        <div class="row colsrow" style="">
            <div class="col-md-12 text-center closcol" style=" ">
                <h3 class="lasth3">GEO4.0 Symposium Hackathon</h3>
                <h5 class="lasth3">21 October 2024 - Grand Hyatt Hotel, Al Khobar, Saudi Arabia</h5>
            </div>
        </div>
    </div>

    <div class="textParaSection">
        <div class="container" style="background-color: #edeef6;">
            <div class="row">
                <div class="col-sm-12">
                    <div class="paraBox">
                        <div class="head">
                            <h3>Dear Innovators, Geoscientists, Data Enthusiasts, & Curious Minds</h3>
                        </div><br>
                        <p>We are thrilled to invite you to an exciting and transformative event at the upcoming GEO4.0 Symposium in Al Khobar, Saudi Arabia – our highly anticipated Hackathon! This event is designed to challenge, inspire, and push the boundaries of what's possible with GenAI in the realm of geoscience. Whether you are a seasoned data scientist, a geoscience expert, or simply someone with a passion for technology and innovation, this hackathon is the perfect platform for you to showcase your skills, collaborate with like-minded individuals, and contribute to the future of geoscience.</p>
                        <p>Places to the Hackathon are limited and we request that you register your interest by filling in your details below:</p><br>
                        <div class="d-flex justify-content-center">
                            <a href="https://na.eventscloud.com/ereg/index.php?eventid=802508&amp;" class="btn btn-gredient" target="_blank">Register Here</a>
                        </div><br>
                    </div>
                </div>
            </div>
        </div>
    </div>



    <div class="textParaSection">
        <div class="container">
            <div class="row">
                <div class="col-sm-12">
                    <div class="paraBox">
                        <div class="head">
                            <h3 style="text-align: center; color: #071674;">About the GEO4.0 Symposium Hackathon</h3><br>
                            <h3>Overview</h3><br>
                            <h5> <b>Venue :</b>  Grand Hyatt Al Khobar</h5>
                            <h5> <b>Registration Deadline :</b> 30 September 2024</h5>
                            <h5><b>Online GEO4.0 Hackathon : </b> 15 October 2024</h5>
                            <h5><b>On-site GEO4.0 Hackathon : </b> 21 October 2024</h5>
                            <p class="font-weight-bold" style="color: #071674;"><i>Please refer the detailed program below</i></p><br>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="textParaSection">
        <div class="container" style="background-color: #edeef6;">
            <div class="row">
                <div class="col-sm-12">
                    <div class="paraBox">
                        <div class="head">
                            <h3>Task 1: Challenge the GenAI System</h3>
                        </div><br>
                        <p>This task is open to everyone, regardless of your technical background. We will provide participants with a ready-made GenAI system that has been meticulously engineered to prevent hallucinations. Your mission, should you choose to accept it, is to challenge this system by asking it tricky and complex questions. Test the limits of its capabilities, explore its responses, and try to uncover any weaknesses. This is a fantastic opportunity for those interested in artificial intelligence to engage with cutting-edge technology and gain hands-on experience in a fun and competitive environment.</p><br>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="textParaSection">
        <div class="container" style="background-color: #ffff;">
            <div class="row">
                <div class="col-sm-12">
                    <div class="paraBox">
                        <div class="head">
                            <h3>Task 2: Innovate with Geoscience Co-Pilot Systems</h3>
                        </div><br>
                        <p>For data scientists and experts in the geoscience field, this task is tailored to your advanced skill set. We will provide comprehensive training on creating agents for geoscience co-pilot systems. Your challenge will be to design and invent agents that can significantly enhance the everyday workflows of geoscience professionals. This task will leverage the latest GPUs, ensuring you have access to top-tier computational power for your innovative projects. Expect plenty of hands-on experience and opportunities to collaborate with fellow experts, pushing the frontiers of what GenAI can achieve in geoscience.</p> <br>
                    </div>
                </div>
            </div>
        </div>
    </div>



    <div class="accordianContent">
        <div class="container">
            <div class="row">
                <div class="col-sm-12">
                    <div id="accordion">
                        <div class="card">
                            <div class="card-header" id="headingData">
                                <button class="btn btn-link accordion-toggle" data-toggle="collapse" data-target="#collapseData" aria-expanded="true" aria-controls="collapseData">
                                    Why Participate?
                                </button>
                            </div>
                            <div id="collapseData" class="collapse show" aria-labelledby="headingData" data-parent="#accordion">
                                <div class="card-body">
                                    <ul>
                                        <div style="border-bottom: 1px solid black;border-right: 1px solid black;">
                                            <ul>
                                                <li><b>Hands-On Experience</b>: Gain practical knowledge and experience with the latest GenAI technologies, supported by state-of-the-art GPUs.</li>
                                                <li><b>Collaborate and Network</b>: Work alongside industry experts, data scientists, and passionate individuals. Build connections that could lead to future collaborations and career opportunities.</li>
                                                <li><b>Innovate and Create</b>: Use your skills and creativity to develop new, impactful solutions for the geoscience community. Your innovations will shape the future!</li>
                                                <li><b>Challenge Yourself</b>: Whether you are trying to break the GenAI system or designing a new agent, this hackathon will push your problem-solving abilities and technical skills to new heights.</li>
                                                <li><b>Limited Seats, Unlimited Potential</b>: With limited seats available, ensure you register early to secure your spot in this groundbreaking event.</li>
                                            </ul>
                                        </div>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="card">
                            <div class="card-header" id="headingProcess">
                                <button class="btn btn-link accordion-toggle collapsed" data-toggle="collapse" data-target="#collapseProcess" aria-expanded="false" aria-controls="collapseProcess">
                                    Who Should Attend?
                                </button>
                            </div>

                            <div id="collapseProcess" class="collapse" aria-labelledby="headingProcess" data-parent="#accordion">
                                <div class="card-body">
                                    <ul>
                                        <div style="border-bottom: 1px solid black;border-right: 1px solid black;">
                                            <ul>
                                                <li><b>Students</b>: Gain invaluable experience and showcase your talent in front of industry leaders.</li>
                                                <li><b>Experts</b>: Contribute your knowledge and expertise to groundbreaking projects and network with peers.</li>
                                                <li><b>Curious Minds</b>: Whether you have a background in geoscience or simply a keen interest in AI, this hackathon welcomes anyone eager to explore the possibilities of GenAI.</li>
                                            </ul>
                                        </div>
                                    </ul>
                                </div>
                            </div>
                        </div>

                        <div class="card">
                            <div class="card-header" id="headingProcess">
                                <button class="btn btn-link accordion-toggle collapsed" data-toggle="collapse" data-target="#collapseProcesss" aria-expanded="false" aria-controls="collapseProcess">
                                    What You Need to Bring
                                </button>
                            </div>

                            <div id="collapseProcesss" class="collapse" aria-labelledby="headingProcess" data-parent="#accordion">
                                <div class="card-body">
                                    <ul>
                                        <ul>
                                            <li><b>Your Laptop</b>: Bring your own laptop equipped with the necessary software tools to participate in the hackathon tasks.</li>
                                            <li><b>Your Team (Optional)</b>: While you can work individually, bringing a team can enhance the brainstorming process and the execution of your ideas.</li>
                                        </ul>
                                </div>

                                </ul>

                            </div>
                        </div>
                        <div class="card">
                            <div class="card-header" id="hackathon">
                                <button class="btn btn-link accordion-toggle collapsed" data-toggle="collapse" data-target="#collapsehackathon" aria-expanded="false" aria-controls="collapseProcess">
                                    Hackathon Program
                                </button>
                            </div>

                            <div id="collapsehackathon" class="collapse" aria-labelledby="hackathon" data-parent="#accordion">
                            <div class="container">
        
        <!-- Header Section -->
        <div class="header-section mt-4">
            <!-- <h1 class="fw-bold mt-4 mb-3">Hackathon Program</h1> -->
            <img src="assets/img/collapse/img.png" class="img-fluid" alt="Event Banner">
        </div>
    
        <!-- Event Details -->
         <div  class="row  justify-content-center " >
         <div class="col-lg-9 col-12" >
         <div class="paraBox">
                       
            <p class="font-weight-bold fs-3">Tuesday, Octobar 15,2024</p>
            <p class="mt-2">Online via MS Teams / Zoom Link:  Introduction & Information</p>
            <ul class="mt-1">
                <li class="font-weight-semibold">10:00am - 12pm</li>
                <li>Welcome Note</li>
                <li>Meet GenAI: how does it work and how you can break it
                </li>
                <li>Learn about agents and multi-agent LLMs
                </li>
                <li>Start planning your approach to the tasks</li>
            </ul>
            </div>

        </div>
    
             <div class="col-lg-3 col-12 event-buttons" >
                <p class="font-weight-bold text-center">Hackathon Detail</p>
                 <button><b>Event Date:</b> Oct 21, 2024</button>
                 <button><b>Event Duration:</b> 10:00 AM - 4:00 PM</button>
                 <button> <b>Venue:</b> Grand Hyatt Al Khobar, Hotel and Residences</button>
             </div>
         
         </div>

        <!-- Welcome Section -->
        <h1 class="fw-bolder my-4 text-center text-color">10:00 AM - Welcome And Opening Remarks</h1>
        
        <div class="section-header">
                <h4 class="text-center"><b>10:30 AM & 10:45 AM</b> - Introduction to Hackathon Tasks</h4>
                <h4 class="text-center"><b>11:00 AM</b> - Initial Q&A Session</h4>
        </div>
    
        <!-- Timeline Section -->
        <div class="container timeline">
            <!-- First Task --> 
             <!-- <div class="row ">
                <div class="event col-lg-6   col-12 row gap-1">
                    <div class="col-md-4 col-8 border-card-orange">
                        <img src="Vector.png" alt="Task 1 Image">
                    </div>
                    <div class="col-md-6 col-8 border-card-blue-right">
                        <div class="card">
                            <h4 class="card-title">Start of Task 1</h4>
                            <p>Task 1 description and details about what participants need to do for the task.</p>
                            
                        </div>
                    </div>
                </div>
        
                <div class="event col-lg-6  col-12 row gap-1">
                    <div class="col-5  border-card-blue">
                        <div class="card">
                            <h4 class="card-title">Start of Task 2</h4>
                            <p>Task 2 description and details about what participants need to do for the task.</p>
                        </div>
                    </div>
                    <div class="col-5 border-card-orange-right">
                        <img src="Vector.png" alt="Task 2 Image">
                    </div>
                </div>
                
        
             </div> -->
                        <!-- Resuming Work -->
                        
            <h1 class="fw-bolder my-4 text-center text-color">11:15 AM</h1>
            <div class="event row">
                <div class="col-lg-5 col-12">
                    <img src="assets/img/collapse/1.png" alt="Resuming Task 1 Image">
                </div>
            
    
                <div class="col-lg-5 col-12">
                    <img src="assets/img/collapse/2.png" alt="Resuming Task 2 Image">
                </div>
            </div>
            <!-- Lunch Break -->
            
            <div class="section-header">
                <h4 class="text-center"><b>12:30 PM</b> - Lunch Break</h4>
                <ul>
                    <li>Coffee, food, and networking! Participants are encouraged to share their ideas and connect with peers during this time.</li>
                    <li>Participants  willing to change tasks can do so at the end of the lunch break.</li>
                </ul>
            </div>
           
            <h1 class="fw-bolder my-4 text-center text-color">01:30 PM</h1>
            <!-- Resuming Work -->
            <div class="event row">
                <div class="col-lg-5 col-12">
                    <img src="assets/img/collapse/3.png" alt="Resuming Task 1 Image">
                </div>
            
    
                <div class="col-lg-5 col-12">
                    <img src="assets/img/collapse/4.png" alt="Resuming Task 2 Image">
                </div>
            </div>
    
    
            <!-- Submission Section -->
            <div class="section-header">
                <h4 class="text-center"><b>3:30 PM</b> - Submission of Final Projects</h4>
            </div>
    
            <!-- Closing Ceremony -->
            <div class="footer-section">
                <h4><b>4:00 PM </b> - Closing Ceremony</h4>
                <ul>
                    <li>Event organizers deliver closing remarks</li>
                    <li>Winners are announced</li>
                    <li>Certificates are distributed to participants</li>
                    <li>Outstanding projects are presented with their awards during the Gala dinner on 22 October</li>
                </ul>
            </div>
        </div>
        </d.div>

                                </ul>

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

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

    <div class="textParaSection">
        <div class="container">
            <div class="row">
                <div class="col-sm-12">
                    <div class="paraBox">
                        <div class="head">
                            <h3>Registration Details</h3><br>
                            <p>Seats are limited, and we encourage you to register as soon as possible to secure your place in this exciting event. Registration is straightforward and requires no prerequisites other than a desire to test the boundaries of GenAI and a passion for innovation.</p>
                            <p>Join us at the GEO4.0 Symposium Hackathon and be a part of an extraordinary journey into the future of geoscience and artificial intelligence. We look forward to seeing you in Al Khobar!</p>
                            <br>
                            <p style="color: #ffa000; font-style: italic;"><b>*Signing up your team for the hackathon is free, each university or organization can nominate a maximum of 1 team consisting of 3 participants.</b></p>
                            <h3 style="color: #0c2098;">Students:</h3>
                            <p style="color: #ffa000; font-style: italic;">Registration for the hackathon is free. Should you wish to attend the technical sessions taking place from 22nd - 24th October, you will need to register separately for the symposium as the hackathon registration covers only the 21 October.</p>
                            <h3 style="color: #0c2098;">Organizations:</h3>
                            <p style="color: #ffa000; font-style: italic;">All team members must be registered for the full symposium to register and participate in the hackathon</p>
                            <br>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div> <br><br>

    <div class=" modal-dialog-centered modal-dialog-scrollable">
        <div class="modal fade" id="exampleModal2" tabindex="-1" aria-labelledby="exampleModalLabel2" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content pt-5 techCommitteeRepresent">
                    <form action="#" method="post" id="requestQuoteForm">
                        @csrf
                        <div class="modal-header"><a class="navbar-brand" href="#"><img
                                    src="assets/img/header-logo.png"></a>
                            <button type="button" class="btn-close bg-light mt-2" data-bs-dismiss="modal"
                                aria-label="Close"></button>
                        </div>
                        <div class="modal-body">
                            <input type="text" name="name" placeholder="Name" required> <br>
                            <input type="text" name="title" placeholder="Job Title or education degree" required> <br>
                            <input type="text" name="company" placeholder="Company or University" required> <br>
                            <input type="text" name="study" placeholder="Professional/ Study Background" required> <br>
                            <input type="email" name="email" placeholder="Email Address" required> <br>
                            <input type="number" name="phoneNo" placeholder="Contact No" required> <br>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary btn btn-gredient" style="width: 30%;" data-bs-dismiss="modal">Close</button>
                            {{--<button type="submit" class="btn btn-primary btn btn-gredient" style="width: 30%;">Send</button>--}}
                            <button type="submit" class="btn btn-primary btn btn-gredient" style="width: 30%;" id="submitBtn">
                                Send
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="exampleModal3" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content techCommitteeRepresent" style="padding: 0;">
                <div class="modal-header">
                    <a class="navbar-brand" href="#"><img src="assets/img/header-logo.png"></a>
                    <button type="button" class="btn-close bg-light mt-2" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body text-center">
                    <p>Email Sent Successfully</p>
                    <p>We appreciate your interest. <br> Our dedicated team will reach out to you shortly.</p>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="exampleModal4" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content techCommitteeRepresent" style="padding: 0;">
                <div class="modal-header">
                    <a class="navbar-brand" href="#"><img src="assets/img/header-logo.png"></a>
                    <button type="button" class="btn-close bg-light mt-2" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body text-center">
                    <p>Form Not Submitted</p>
                    <p>An error occurred. Please try again.</p>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="exampleModal5" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content techCommitteeRepresent" style="padding: 0;">
                <div class="modal-header">
                    <a class="navbar-brand" href="#"><img src="assets/img/header-logo.png"></a>
                    <button type="button" class="btn-close bg-light mt-2" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body text-center">
                    <p>Form Not Submitted</p>
                    <p>Something went wrong try again later..!</p>
                </div>
            </div>
        </div>
    </div>

    @include('include.footer')

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script>
    <script>
        window.jQuery || document.write('<script src="/docs/4.6/assets/js/vendor/jquery.slim.min.js"><\/script>')
    </script>
    <script src="assets/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
    <script src="assets/js/custom.js"></script>

    <!-- jQuery -->
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="https://js.hcaptcha.com/1/api.js" async defer></script>


    <script>
        $(document).ready(function() {
            $('#requestQuoteForm').on('submit', function(e) {
                e.preventDefault();

                $("#submitBtn").prop('disabled', true);
                $("#submitBtn").text('Sending...');
                //return false;

                $.ajax({
                    url: "{{ route('hackathon.email') }}",
                    method: "POST",
                    data: $(this).serialize(),
                    success: function(response) {
                        //alert(response);
                        console.log(response.code);

                        $('#exampleModal2').modal('hide');
                        if (response.code === "200") {
                            $('#exampleModal3').modal('show');
                        } else {
                            $('#exampleModal4').modal('show');
                            $("#submitBtn").prop('disabled', false);
                            $("#submitBtn").text('Send');
                        }

                        setTimeout(function() {
                            window.location.reload()
                        }, 4000);

                        //alert('Form submitted successfully.');
                        // Optionally, you can handle the response here
                    },
                    error: function(xhr, status, error) {
                        //alert('An error occurred. Please try again.');
                        $('#exampleModal4').modal('show');
                        $("#submitBtn").prop('disabled', false);
                        $("#submitBtn").text('Send');
                        console.error(xhr.responseText);
                    }
                });
            });
        });
    </script>

    @php
    if(session('success')) {
    echo "
    <script>
        $(document).ready(function() {
            $('#exampleModal3').modal('show');
        });
    </script>
    ";
    }
    if(session('error')) {
    echo "
    <script>
        $(document).ready(function() {
            $('#exampleModal4').modal('show');
        });
    </script>
    ";
    }
    @endphp

    <script>
        $(document).ready(function() {
            $('#fileInput').on('change', function() {
                var allowedExtensions = ['.docx', '.pdf'];
                var filePath = $(this).val();
                var fileExtension = filePath.substr(filePath.lastIndexOf('.'));

                if (allowedExtensions.indexOf(fileExtension.toLowerCase()) === -1) {
                    // Display the error message and clear the file input
                    $('#fileError').show();
                    $(this).val('');
                } else {
                    // Hide the error message
                    $('#fileError').hide();
                }
            });
        });
    </script>

</body>

</html>