<!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="">
            <!-- <img src="assets/img/ai-generated.jpg assets/img/innerBg.png" alt=""> -->

        </div>
        <div class="innerContent">
            <h1>Short Course</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 mb-2">Introduction to Scientific Machine Learning for Geophysicists</h3>
                <h5 class="lasth3">Monday, 21st October 2024, 08:00 – 17:00 | Grand Hyatt Al Khobar Hotel</h5>
            </div>
        </div>
    </div>
    <div class="heroSection innerHero container">
        <div class="image">
            <img src="assets/img/ai-generated.jpg" alt="">
        </div>
        <!-- <div class="innerContent">
            <h1>Short Course</h1>
            <a href="#" class="btn btn-gredient">Download Form</a>
        </div> -->
    </div>
    <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 Now</a>
    </div><br>
    <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>Outline/Objective</h3>
                        </div><br>
                        <p class="pb-4">The rapid evolution of machine learning technologies has revolutionized
                            numerous fields, including geophysics, by offering advanced solutions to
                            complex problems that were previously intractable. Geophysical modeling
                            and inversion, critical to the exploration of Earth’s subsurface, have
                            significantly benefited from these advancements. The core objective of
                            this course is to explain basic theories of scientific machine learning
                            (SciML) and equip participants with skills in implementing these tools
                            to solve partial differential equations (PDEs) and the associated
                            inverse problems, with a particular focus on eikonal and wave equations.</p>
                        <!-- <div class="d-flex justify-content-center">
                            <a href="#" data-bs-toggle="modal" data-bs-target="#exampleModal2" class="btn btn-gredient" target="_blank">Register Here</a>
                        </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>Overview</h3><br>
                            <p>This one-day course will cover theoretical concepts associated with
                                physics-informed neural networks and neural operators. Subsequently,
                                these methods will be used to solve geophysical forward and inverse
                                problems, followed by emerging research trends related to the topic.
                            </p>
                            <br />
                            <h5>The following topics will be covered during this short course :</h5>
                            <br />
                            <ul>
                                <li>Introduction to PINNs</li>
                                <li>PINNs for solving forward and inverse problems in Geophysics</li>
                                <li>Introduction to Neural Operators</li>
                                <li>Solution of forward and inverse problems using neural operators</li>
                                <li>Physics-informed Neural Operators</li>
                                <li>Emerging trends in Scientific Machine Learning</li>
                            </ul><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>Outcome</h3>
                        </div><br>
                        <p class="pb-4">Participants will gain a solid theoretical foundation in SciML concepts
                            and learn how to apply these techniques to geophysical modeling and
                            inversion, with a focus on solving partial differential equations (PDEs)
                            such as the eikonal and wave equations. Additionally, the course will
                            provide insights into emerging trends and future research directions,
                            preparing participants to contribute to advancements in geophysical
                            modeling and inversion using SciML.</p>
                    </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>Who Should Attend</h3><br>
                            <p>The course is targeted towards computational geophysicists who have some
                                familiarity with neural networks and programming in Python.
                            </p>

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

    <div class="container">
        <!-- First Task -->
        <div class="row ">
            <div class="event   d-flex justify-content-center col-12 row gap-1">
                </br>
                </br>
                <h1 class="font-weight-bold text-center ">Instructor</h1>
                <div class="col-md-3 col-8 d-flex justify-content-center border-card-orange">
                    <img src="assets/img/Umair bin Waheed.jpg" alt="Task 1 Image">
                </div>
                <div class="col-md-6 col-8 border-card-blue-right">
                    <div class="card-instructor">
                        <div class="d-flex justify-content-center flex-column">
                            <h3 style="text-align: center;">Umair Bin Waheed</h3>
                            <p class="font-weight-bold fs-5 mb-0">Assistant Professor of
                                Geophysics, KFUPM</p>
                            <a href="instructor" class="btn btn-gredient mx-auto mt-4">See Bio</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="textParaSection  mb-5 mt-5">
            <div class="container">
                <div class="row ">
                    <div class="col-sm-12">
                        <div class="paraBox">
                            <div class="head">
                                <h4 class="mb-2 font-weight-bold">Registration Fee (if registered for symposium)</h4>
                                <h5> Standard Rate : $420</h5>
                                <h5> Student Rate : $100</h5>
                                <br>
                                <h4 class="mb-2 font-weight-bold">Short Course Only Registration Fee</h4>
                                <h5> Standard Rate : $420</h5>
                                <h5> Student Rate : $100</h5>
                                <br>
                                <h4 class="mb-2 font-weight-bold">Registration Deadline</h4>
                                <h5>10th October 2024</h5>
                            </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>Important Notes</h3>
                            </div><br>
                            <ul>
                                <li>The short course is limited in size and is reserved on a first-come,
                                    first-served basis and must be accompanied by a full payment.</li>
                                <li>A wait list is automatically created if the short course sells out.
                                    The organizers will notify you if space becomes available.</li>
                                <li>Before purchasing non-refundable airline tickets, confirm that the
                                    course will take place, as the course may be cancelled if
                                    undersubscribed.</li>
                                <li>Please register well before the deadline of 10 October 2024.
                                    Cancellation due to low enrollment will be considered at this time. No
                                    refunds will be allowed on short courses after 10 October 2024.</li>
                                <li>We will continue to take registrations for the short course if it’s
                                    not cancelled until it’s either sold out or closed.</li>
                                <li>The course will take place at the Grand Hyatt Al Khobar Hotel.
                                    Participants will be advised via email of the specific room
                                    approximately two weeks prior to the course.</li>
                            </ul><br>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="textParaSection mt-5 mb-5">
            <div class="container" style="background-color: #edeef6;">
                <div class="row">
                    <div class="col-sm-12">
                        <div class="paraBox">
                            <div class="head">
                                <h3>Cancellation Policy</h3>
                            </div><br>
                            <ul>
                                <li>Cancellations can be made by contacting Snjezana MacLean on or
                                    before 10 October 2024. at <b><a href="smaclean@aapg.org">smaclean@aapg.org</a></b></li>
                                <li>Cancellations received on or before 10 October 2024 will receive a
                                    refund LESS a US $75 processing fee.</li>
                                <li>Refunds will not be issued after 10 October 2024 or for “no
                                    shows.”</li>
                                <li>You may substitute one participant for another.</li>
                            </ul><br>
                        </div>
                    </div>
                </div>
            </div>
        </div>


        <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>

    <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>