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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Book Appointment - TGP Hospital</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

    <!-- Flatpickr CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">

    <!-- Flatpickr JS -->
    <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>



    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

        :root {
            --primary: #1a73e8;
            --primary-dark: #0d5bbb;
            --secondary: #34a853;
            --accent: #f9345e;
            --light: #f8f9fa;
            --dark: #202124;
            --text: #3c4043;
            --shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
            --gradient: linear-gradient(135deg, #1a73e8 0%, #34a853 100%);
        }

        body {
            background-color: #f9f9f9;
            color: var(--text);
            line-height: 1.6;
        }

        .container {
            width: 100%;
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
        }

        /* Appointment Section Styles */
        .appointment-section {
            padding: 80px 0;
            background: linear-gradient(rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.95)),
                url('https://images.unsplash.com/photo-1586773860418-d37222d8fce3?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1473&q=80');
            background-size: cover;
            background-position: center;
            background-attachment: fixed;
        }

        .section-title {
            text-align: center;
            margin-bottom: 50px;
        }

        .section-title h2 {
            font-size: 2.5rem;
            color: var(--dark);
            margin-bottom: 15px;
        }

        .section-title p {
            color: var(--text);
            max-width: 700px;
            margin: 0 auto;
            font-size: 1.1rem;
        }

        .appointment-container {
            display: flex;
            background: white;
            border-radius: 15px;
            overflow: hidden;
            box-shadow: var(--shadow);
        }

        .appointment-info {
            flex: 1;
            background: var(--gradient);
            color: white;
            padding: 40px;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        .appointment-info h3 {
            font-size: 1.8rem;
            margin-bottom: 20px;
        }

        .appointment-info p {
            margin-bottom: 25px;
            font-size: 1.1rem;
            opacity: 0.9;
        }

        .benefits-list {
            list-style: none;
            margin-top: 20px;
        }

        .benefits-list li {
            display: flex;
            align-items: center;
            margin-bottom: 15px;
            font-size: 1rem;
        }

        .benefits-list i {
            margin-right: 10px;
            background: rgba(255, 255, 255, 0.2);
            width: 30px;
            height: 30px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
        }

        .appointment-form {
            flex: 1.5;
            padding: 40px;
        }

        .form-group {
            margin-bottom: 20px;
        }

        .form-group label {
            display: block;
            margin-bottom: 8px;
            font-weight: 500;
            color: var(--dark);
        }

        .form-group input,
        .form-group select,
        .form-group textarea {
            width: 100%;
            padding: 15px;
            border: 2px solid #e1e5eb;
            border-radius: 10px;
            font-size: 1rem;
            transition: all 0.3s;
            outline: none;
        }

        .form-group input:focus,
        .form-group select:focus,
        .form-group textarea:focus {
            border-color: var(--primary);
            box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.2);
        }

        .form-row {
            display: flex;
            gap: 20px;
        }

        .form-row .form-group {
            flex: 1;
        }

        .btn-primary {
            width: 100%;
            padding: 15px;
            background: var(--gradient);
            border: none;
            border-radius: 10px;
            color: white;
            font-size: 1.1rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s;
            box-shadow: 0 4px 15px rgba(26, 115, 232, 0.3);
            margin-top: 10px;
        }

        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(26, 115, 232, 0.4);
        }

        .success-message {
            display: none;
            text-align: center;
            padding: 20px;
            background-color: rgba(52, 168, 83, 0.1);
            border-radius: 10px;
            margin-top: 20px;
            color: var(--secondary);
        }

        .success-message i {
            font-size: 2.5rem;
            margin-bottom: 15px;
            display: block;
        }

        /* Responsive Styles */
        @media (max-width: 992px) {
            .appointment-container {
                flex-direction: column;
            }

            .appointment-info {
                padding: 30px;
            }

            .appointment-form {
                padding: 30px;
            }
        }

        @media (max-width: 576px) {
            .form-row {
                flex-direction: column;
                gap: 0;
            }

            .section-title h2 {
                font-size: 2rem;
            }

            .appointment-info,
            .appointment-form {
                padding: 25px;
            }
        }

        /* Animation */
        @keyframes  fadeIn {
            from {
                opacity: 0;
                transform: translateY(20px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .appointment-form {
            animation: fadeIn 0.8s ease-out;
        }
    </style>
</head>

<body>
    <!-- Appointment Section -->
    <section class="appointment-section">
        <div class="container">

            <div class="section-title">
                <h2>Book an Appointment</h2>
                <p>Schedule your visit with our healthcare professionals. We're here to provide you with the best care
                    possible.</p>
            </div>

            <div class="appointment-container">

                <div class="appointment-info">
                    <h3>Why Book With Us?</h3>
                    <p>At TGP Hospital, we make it easy to schedule appointments that work with your busy life. Our
                        patient-centered approach ensures you receive the care you need when you need it.</p>

                    <ul class="benefits-list">
                        <li><i class="fas fa-calendar-check"></i> Flexible scheduling options</li>
                        <li><i class="fas fa-clock"></i> Short waiting times</li>
                        <li><i class="fas fa-user-md"></i> Expert medical professionals</li>
                        <li><i class="fas fa-bell"></i> Appointment reminders</li>
                        <li><i class="fas fa-video"></i> Telemedicine options available</li>
                    </ul>
                </div>

                <div class="appointment-form">
                    <form id="appointmentForm">
                        <div class="form-row">
                            <div class="form-group">
                                <label for="firstName">First Name</label>
                                <input type="text" id="firstName" name="firstName" required>
                            </div>

                            <div class="form-group">
                                <label for="lastName">Last Name</label>
                                <input type="text" id="lastName" name="lastName" required>
                            </div>
                        </div>

                        <div class="form-row">
                            <div class="form-group">
                                <label for="email">Email Address</label>
                                <input type="email" id="email" name="email" required>
                            </div>

                            <div class="form-group">
                                <label for="phone">Phone Number</label>
                                <input type="tel" id="phone" name="phone" required>
                            </div>
                        </div>

                        <div class="form-row">
                            <div class="form-group">
                                <label for="department">Department</label>
                                <select id="department" name="department" required>
                                    <option value="">Select Department</option>
                                    <?php $__currentLoopData = $departments; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $department): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                    <option value="<?php echo e($department->id); ?>"><?php echo e($department->name); ?></option>
                                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                                </select>
                            </div>

                            <div class="form-group">
                                <label for="doctor">Preferred Doctor (Optional)</label>
                                <select id="doctor" name="doctor">
                                    <option value="">Any Available Doctor</option>
                                    <?php $__currentLoopData = $doctors; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $doctor): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                    <option value="<?php echo e($doctor->id); ?>"><?php echo e($doctor->name); ?> -
                                        <?php echo e($doctor->specialty->name); ?></option>
                                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                                </select>
                            </div>
                        </div>

                        <div class="form-row">
                            <div class="form-group">
                                <label for="appointmentDate">Preferred Date</label>
                                <input type="date" id="appointmentDate" name="appointmentDate" required>
                            </div>

                            <div class="form-group">
                                <label for="appointmentTime">Preferred Time</label>
                                <input type="text" id="appointmentTime" name="appointmentTime" class="form-control"
                                    placeholder="Select time" required>
                            </div>


                        </div>

                        <div class="form-group">
                            <label for="reason">Reason for Appointment</label>
                            <textarea id="reason" name="reason" rows="4"
                                placeholder="Please describe the reason for your visit"></textarea>
                        </div>

                        <button type="submit" class="btn-primary">Book Appointment</button>
                    </form>

                    <div class="success-message" id="successMessage">
                        <i class="fas fa-check-circle"></i>
                        <h3>Appointment Request Received!</h3>
                        <p>We've received your appointment request and will contact you shortly to confirm your visit.
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </section>



    <script>
        flatpickr("#appointmentTime", {
            enableTime: true,
            noCalendar: true,
            dateFormat: "h:i K", // e.g., 09:00 AM
            time_24hr: false,
            minuteIncrement: 10,
            disableMobile: true
        });
    </script>

    <script>
        // Form Submission
        document.getElementById('appointmentForm').addEventListener('submit', function (e) {
            e.preventDefault();
            
            const form = this;
            const submitBtn = form.querySelector('.btn-primary');
            const successMsg = document.getElementById('successMessage');
            
            const firstName = form.firstName.value.trim();
            const lastName = form.lastName.value.trim();
            const email = form.email.value.trim();
            const phone = form.phone.value.trim();
            const department = form.department.value;
            const appointmentDate = form.appointmentDate.value;
            const appointmentTime = form.appointmentTime.value;
            
            // Basic Validation
            if (!firstName || !lastName || !email || !phone || !department || !appointmentDate || !appointmentTime) {
            alert('Please fill in all required fields.');
            return;
            }
            
            // Email validation
            const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
            if (!emailPattern.test(email)) {
            alert('Please enter a valid email address.');
            return;
            }
            
            // Phone validation (basic)
            const phonePattern = /^[0-9+\-\s()]{10,}$/;
            if (!phonePattern.test(phone)) {
            alert('Please enter a valid phone number.');
            return;
            }
            
            // Ensure date is not in the past
            const today = new Date();
            const selectedDate = new Date(appointmentDate);
            
            today.setHours(0, 0, 0, 0);
            selectedDate.setHours(0, 0, 0, 0);
            
            if (selectedDate < today) { alert('Please select a future date for your appointment.'); return; } // Simulate submission
            submitBtn.innerHTML='<i class="fas fa-spinner fa-spin"></i> Processing...' ; submitBtn.disabled=true;
            setTimeout(()=> {
            form.style.display = 'none';
            successMsg.style.display = 'block';
            }, 2000);
            });

        // Set minimum date to today for the date picker
        document.getElementById('appointmentDate').min = new Date().toISOString().split('T')[0];
    </script>
</body>

</html><?php /**PATH /home/techgian/hospital2.techgiantpro.com/resources/views/home/booking.blade.php ENDPATH**/ ?>