@extends('layouts.master')

@section('content')

    <section class="background-radial-gradient overflow-hidden">
        <div class="container">
            <div class="row">
                <div class="col-lg-12 col-md-12 col-sm-12">
                    <h4 style="color:white; text-align:center">Request An Appointment</h4>
                    <p style="color:white; text-align:center">Request your appointment online with the top Myositis India
                        doctors. Get the best Myositis consultation & treatment with the best doctors at Myositis India </p>
                    <hr>

                    @if ($errors->any())
                        <div class="alert alert-danger">
                            <ul>
                                @foreach ($errors->all() as $error)
                                    <li>{{ $error }}</li>
                                @endforeach
                            </ul>
                        </div>
                    @endif

                    @if (Session::has('success'))
                        <p class="alert alert-info">{{ Session::get('success') }}</p>
                    @endif

                    <style>
    .s-indicator {
        color: red;
    }

    .label {
        color: white;
    }

    /* Ensure no element is blocking form fields */
    .form-control {
        background-color: #f5f5f5;
    }

    /* Fix for potential parent container overflow */
    .container {
        position: relative;
    }

    /* Added spacing to fields */
    .form-group {
        margin-bottom: 15px;
    }
</style>
<style>
  /* Emergency debug styles */
  input, textarea, select {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    z-index: 9999 !important;
    position: relative !important;
  }
  
</style>
<style>
    /* Fix for the submit button */
    .btn-primary {
        cursor: pointer !important;
        pointer-events: auto !important;
        z-index: 9999 !important;
        position: relative !important;
    }

    /* Remove any overlays blocking the button */
    .overlay, .modal-backdrop {
        display: none !important;
    }
</style>
<form id="registrationForm" action="{{ route('enquiry.store') }}" method="post">
    @csrf
    <div class="row">
        <!-- Name -->
        <div class="form-group col-md-4">
            <label for="name" class="label">Name <span class="s-indicator">*</span> </label>
            @error('name')
                <span class="text-danger">{{ $message }}</span>
            @enderror
            <input type="text" name="name" id="name" class="form-control" placeholder="Enter Your Name" value="{{ old('name') }}" required>
        </div>

        <!-- Email -->
        <div class="form-group col-md-4">
            <label for="email" class="label">Email <span class="s-indicator">*</span> </label>
            @error('email')
                <span class="text-danger">{{ $message }}</span>
            @enderror
            <input type="email" name="email" id="email" class="form-control" placeholder="Enter Your Email" value="{{ old('email') }}" required>
        </div>

        <!-- Phone -->
        <div class="form-group col-md-4">
            <label for="phone" class="label">Phone <span class="s-indicator">*</span> </label>
            @error('phone')
                <span class="text-danger">{{ $message }}</span>
            @enderror
            <input type="text" name="phone" id="phone" class="form-control" placeholder="Enter Your Phone" value="{{ old('phone') }}" required>
        </div>

        <!-- Age -->
        <div class="form-group col-md-4">
            <label for="age" class="label">Age <span class="s-indicator">*</span> </label>
            <input type="number" name="age" id="age" class="form-control" value="{{ old('age') }}" placeholder="Enter Your Age" required>
        </div>

        <!-- Gender -->
        <div class="form-group col-md-4">
            <label for="gender" class="label">Gender <span class="s-indicator">*</span> </label>
            <select name="gender" id="gender" class="form-control" required>
                <option value="">--Select--</option>
                <option value="Male" {{ old('gender') == 'Male' ? 'selected' : '' }}>Male</option>
                <option value="Female" {{ old('gender') == 'Female' ? 'selected' : '' }}>Female</option>
            </select>
        </div>

        <!-- Country -->
        <div class="form-group col-md-4">
            <label for="country" class="label">Country <span class="s-indicator">*</span> </label>
            <input type="text" name="country" id="country" value="{{ old('country') }}" class="form-control" required>
        </div>

        <!-- State -->
        <div class="form-group col-md-4">
            <label for="state" class="label">State <span class="s-indicator">*</span> </label>
            @error('state')
                <span class="text-danger">{{ $message }}</span>
            @enderror
            <input type="text" name="state" id="state" class="form-control" value="{{ old('state') }}" required>
        </div>

        <!-- City -->
        <div class="form-group col-md-4">
            <label for="city" class="label">City <span class="s-indicator">*</span> </label>
            <input type="text" name="city" id="city" value="{{ old('city') }}" class="form-control" required>
        </div>

        <!-- Message -->
        <div class="form-group col-md-12">
            <label for="message" class="label">Provide brief history and reason for appointments <span class="s-indicator">*</span> </label>
            @error('message')
                <span class="invalid-feedback bt btn-danger" role="alert">
                    <strong>{{ $message }}</strong>
                </span>
            @enderror
            <textarea name="message" id="message" cols="30" rows="3" class="form-control" placeholder="Message" required>{{ old('message') }}</textarea>
        </div>

        <!-- CAPTCHA -->
        <div class="form-group col-md-12">
            <label for="captcha" class="label">Solve the following to submit the form:</label><br>
            <div id="captchaQuestion" style="color: white;"></div>
            <input type="number" id="captchaAnswer" name="captcha_answer" class="form-control" placeholder="Your answer" required>
            <div id="captchaError" style="color: red; display: none;">Please solve the CAPTCHA correctly to submit the form.</div>
        </div>

        <!-- Submit Button -->
        <div class="form-group col-md-12 text-center">
            <button type="submit" class="btn btn-primary">SUBMIT</button>
        </div>
    </div>
</form>

<script>
    document.addEventListener('DOMContentLoaded', function () {
        // Generate random numbers and the correct answer for CAPTCHA
        const num1 = Math.floor(Math.random() * 10);
        const num2 = Math.floor(Math.random() * 10);
        const correctAnswer = num1 + num2;

        // Display the CAPTCHA question
        document.getElementById('captchaQuestion').textContent = `${num1} + ${num2} = ?`;

        // Add event listener to handle form submission
        document.getElementById('registrationForm').addEventListener('submit', function (event) {
            const userAnswer = parseInt(document.getElementById('captchaAnswer').value, 10);
            const captchaError = document.getElementById('captchaError');

            // Validate CAPTCHA
            if (isNaN(userAnswer) || userAnswer !== correctAnswer) {
                event.preventDefault();
                captchaError.textContent = 'Incorrect CAPTCHA answer. Please try again.';
                captchaError.style.display = 'block';
                
                // Highlight invalid CAPTCHA field
                document.getElementById('captchaAnswer').style.borderColor = 'red';
            } else {
                captchaError.style.display = 'none';
                document.getElementById('captchaAnswer').style.borderColor = '';
            }
        });
    });
</script>

<script>
    document.addEventListener('DOMContentLoaded', function () {
        // Check for overlapping elements and remove any that are blocking the form
        function checkForOverlappingElements() {
            const overlayElements = document.querySelectorAll('.overlay');
            overlayElements.forEach(function (overlay) {
                overlay.style.display = 'none';
            });
        }
        checkForOverlappingElements();

        // Scroll to the first invalid field (if there's a validation error)
        const firstInvalidField = document.querySelector('.is-invalid');
        if (firstInvalidField) {
            firstInvalidField.scrollIntoView({ behavior: 'smooth', block: 'center' });
        }
    });
</script>


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

@endsection