@extends('user.layout')

@section('content')
    <style>
        .form-control:focus,
        .form-select:focus {
            border-color: #0d6efd;
            box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
        }

        input::placeholder {
            color: #adb5bd;
            font-style: italic;
        }

        .form-label {
            font-weight: 500;
        }

        .rounded-pill {
            border-radius: 50px !important;
        }

        .btn-success {
            padding: 10px 30px;
            font-weight: 500;
        }

        .is-invalid {
            border-color: #dc3545;
        }

        .invalid-feedback {
            display: none;
            color: #dc3545;
            font-size: 0.875rem;
        }

        .is-invalid+.invalid-feedback {
            display: block;
        }
    </style>

    <div class="wrapper">
        <!-- Sidebar -->
          @include('user.templates.navbar')
        <!-- Main Content -->
        <div class="main">
            <!-- Topbar -->
              @include('user.templates.top-bar')

            <div class="container py-4">
                <div class="card shadow-sm border-0 rounded-4">
                    <div class="card-header bg-primary text-white rounded-top">
                        <h5 class="mb-0"><i class="bi bi-person-plus-fill me-2"></i> Add New Patient</h5>
                    </div>

                    <div class="card-body">
                        <form id="patientForm" method="POST" action="{{ route('user.patient.store') }}">
                            @csrf

                            <div class="row g-3">
                                <div class="col-12 col-md-6">
                                    <label class="form-label">Patient Name <span class="text-danger">*</span></label>
                                    <input type="text" name="patient_name" class="form-control rounded-pill"
                                        placeholder="Enter full name">
                                    <div class="invalid-feedback">Please enter a valid name (letters only).</div>
                                </div>

                                <div class="col-12 col-md-6">
                                    <label class="form-label">Phone <small class="text-muted">(optional)</small></label>
                                    <input type="tel" name="phone" class="form-control rounded-pill"
                                        placeholder="10-digit number" maxlength="10">
                                    <div class="invalid-feedback">Enter a valid 10-digit phone number.</div>
                                </div>

                                <div class="col-12 col-md-6">
                                    <label class="form-label">Age <span class="text-danger">*</span></label>
                                    <input type="number" name="age" class="form-control rounded-pill"
                                        placeholder="Enter age">
                                    <div class="invalid-feedback">Please enter a valid age.</div>
                                </div>

                                <div class="col-12 col-md-6">
                                    <label class="form-label">Gender <span class="text-danger">*</span></label>
                                    <select name="gender" class="form-select rounded-pill">
                                        <option value="">Select</option>
                                        <option>Male</option>
                                        <option>Female</option>
                                    </select>
                                    <div class="invalid-feedback">Please select gender.</div>
                                </div>

                                <div class="col-12 col-md-6">
                                    <label class="form-label">Doctor Name <span class="text-danger">*</span></label>
                                    <input type="text" name="dr_name" class="form-control rounded-pill"
                                        placeholder="Dr. Full Name">
                                    <div class="invalid-feedback">Please enter doctor name.</div>
                                </div>

                                <div class="col-12 col-md-6">
                                    <label class="form-label">Hospital Name <small
                                            class="text-muted">(optional)</small></label>
                                    <input type="text" name="hospital_name" class="form-control rounded-pill"
                                        placeholder="Hospital/Clinic Name">
                                </div>
                            </div>

                            <div class="mt-4 text-end">
                                <button type="submit" class="btn btn-success rounded-pill">
                                    <i class="bi bi-check-circle me-1"></i> Submit Patient
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>
        document.getElementById('patientForm').addEventListener('submit', function(e) {
            const form = e.target;
            let valid = true;

            form.querySelectorAll('input, select').forEach(field => {
                field.classList.remove('is-invalid');
            });

            const name = form.patient_name.value.trim();
            const phone = form.phone.value.trim();
            const age = form.age.value.trim();
            const gender = form.gender.value.trim();
            const dr = form.dr_name.value.trim();

            if (!/^[a-zA-Z\s]+$/.test(name)) {
                markInvalid(form.patient_name);
            }

            if (phone && !/^\d{10}$/.test(phone)) {
                markInvalid(form.phone);
            }

            if (age === '' || isNaN(age) || age <= 0 || age > 150) {
                markInvalid(form.age);
            }

            if (gender === '') {
                markInvalid(form.gender);
            }

            if (dr.length < 2) {
                markInvalid(form.dr_name);
            }

            if (form.querySelectorAll('.is-invalid').length > 0) {
                e.preventDefault();
            }

            function markInvalid(field) {
                field.classList.add('is-invalid');
                valid = false;
            }
        });
    </script>
@endsection