@include('temp2/common/header')
<style>
    /* Add this style to make the Close button dark */
    
</style>

<!-- main start -->
<section class="page-title parallax3 parallax-fix page-title-large"
    style="background: url({{url($title->menuimage)}}) 50% 0px;">
    <div class="opacity-medium bg-black"></div>
    <div class="container">
        <!-- ... (your existing code) ... -->
    </div>
</section>

<section id="contact-form" class="wow fadeIn animated" style="visibility: visible; animation-name: fadeIn;">
    <div class="container">
        <div class="row">
            <div class="col-md-4 col-sm-6">
                <p class="text-med text-uppercase letter-spacing-1 black-text font-weight-600">Contact Form</p>                        
            </div>
            <div class="col-md-6 col-sm-6  col-md-offset-2">
                <form id="contactusform" action="" method="get">
                    @csrf <!-- Include CSRF token -->
                    <div id="success" class="no-margin-lr" style="display: none;"></div>
                    <input name="name" type="text" placeholder="Your Name">
                    <input name="email" type="text" placeholder="Your Email">
                    <textarea placeholder="Your Message" name="comment"></textarea>
                    <button type="button"  class="btn btn-bg-dark custom-close-button" data-dismiss="modal" style="background-color: #343a40; color: #ffffff;" onclick="showSuccessMessage()">Send Message</button>
                </form>
           
            </div>
        </div>
    </div>
</section>

<!-- Bootstrap Modal for Success Message -->
<div class="modal fade" id="successModal" tabindex="-1" role="dialog" aria-labelledby="successModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="successModalLabel">Success</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                Message sent successfully!
            </div>
            <div class="modal-footer">
            <button type="button" class="btn btn-bg-dark custom-close-button" data-dismiss="modal" style="background-color: #343a40; color: #ffffff;">Close</button>

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

@include('temp2/common/footer')

<!-- JavaScript code for displaying the pop-up message -->
<script>
    function showSuccessMessage() {
        $('#successModal').modal('show'); // Show the Bootstrap modal
    }
</script>