@include('admin.common-layout.header')
<div class="dashboard-main-body">
    <div class="breadcrumb d-flex flex-wrap align-items-center justify-content-between gap-3 mb-24">
        <div class="">
            <h1 class="fw-semibold mb-4 h6 text-primary-light">Add New Teacher</h1>
            <div class="">
                <a href="javascript:void(0);" class="text-secondary-light hover-text-primary hover-underline">Dashboard </a>
                <a href="javascript:void(0);" class="text-secondary-light hover-text-primary hover-underline "> / Teacher</a>
                <span class="text-secondary-light">/ Add New Teacher</span>
            </div>
        </div>
        <a href="javascript:void(0);" class="btn btn-primary-600 d-flex align-items-center gap-6 d-none">
            <span class="d-flex text-md">
                <i class="ri-add-large-line"></i>
            </span>
            Add Teacher
        </a>
    </div>
    <form action="{{ route('teacher.store') }}" method="POST" enctype="multipart/form-data" class="mt-24">
        @csrf
        <div class="row gy-3">
            <div class="col-lg-12">
                <div class="shadow-1 radius-12 bg-base h-100 overflow-hidden">
                    <div class="card-header border-bottom bg-base py-16 px-24 d-flex align-items-center justify-content-between">
                        <h6 class="text-lg fw-semibold mb-0">Personal Info</h6>
                    </div>
                    <div class="card-body p-20">
                        <div class="row gy-3">
                            <div class="col-xxl-3 col-xl-4 col-sm-6">
                                <div class="">
                                    <label for="teacherID" class="text-sm fw-semibold text-primary-light d-inline-block mb-8">Teacher ID* <span class="text-danger-600">* </span> </label>
                                    <input type="text" name="teacher_id" class="form-control" id="teacherID" placeholder="Enter Teacher ID">
                                </div>
                            </div>
                            <div class="col-xxl-3 col-xl-4 col-sm-6">
                                <div class="">
                                    <label for="fullName" class="text-sm fw-semibold text-primary-light d-inline-block mb-8">Full Name <span class="text-danger-600">*</span> </label>
                                    <input type="text" name="name" class="form-control" id="fullName" placeholder="Enter your Full Name">
                                </div>
                            </div>
                            <div class="col-xxl-3 col-xl-4 col-sm-6">
                                <div class="">
                                    <label for="teacherSubject" class="text-sm fw-semibold text-primary-light d-inline-block mb-8">Subject</label>
                                    <select name="subject_id" class="form-control form-select">
                                        <option value="">Select Subject</option>
                                        @foreach($subjects as $subject)
                                        <option value="{{ $subject->id }}">{{ $subject->subjects_name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="col-xxl-3 col-xl-4 col-sm-6">
                                <div class="">
                                    <label for="teacherClass" class="text-sm fw-semibold text-primary-light d-inline-block mb-8">Class</label>
                                    <select name="class_id" class="form-control form-select">
                                        <option value="">Select Class</option>
                                        @foreach($classes as $class)
                                        <option value="{{ $class->id }}">{{ $class->classes_name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="col-xxl-3 col-xl-4 col-sm-6">
                                <div class="">
                                    <label for="gender" class="text-sm fw-semibold text-primary-light d-inline-block mb-8">Gender</label>
                                    <select name="gender" id="gender_id" class="form-control form-select">
                                        <option value="">Select Gender</option>
                                        @foreach($gender as $genders)
                                        <option value="{{ $genders->id }}">{{ $genders->gender_name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="col-xxl-3 col-xl-4 col-sm-6">
                                <div class="">
                                    <label for="dateOfBirth" class="text-sm fw-semibold text-primary-light d-inline-block mb-8">Date Of Birth <span class="text-danger-600">*</span> </label>
                                    <input type="date" name="dob" class="form-control" id="dateOfBirth">
                                </div>
                            </div>
                            <div class="col-xxl-3 col-xl-4 col-sm-6">
                                <div class="">
                                    <label for="age" class="text-sm fw-semibold text-primary-light d-inline-block mb-8">Age <span class="text-danger-600">*</span> </label>
                                    <input type="number" name="age" class="form-control" id="age">
                                </div>
                            </div>
                            <div class="col-xxl-3 col-xl-4 col-sm-6">
                                <div class="">
                                    <label for="fathersName" class="text-sm fw-semibold text-primary-light d-inline-block mb-8">Fathers Name </label>
                                    <input type="text" name="father_name" class="form-control" id="fathersName" placeholder="Enter Fathers Name">
                                </div>
                            </div>
                            <div class="col-xxl-3 col-xl-4 col-sm-6">
                                <div class="">
                                    <label for="mothersName" class="text-sm fw-semibold text-primary-light d-inline-block mb-8">Mothers Name </label>
                                    <input type="text" name="mother_name" class="form-control" id="mothersName" placeholder="Enter mothers Name">
                                </div>
                            </div>
                            <div class="col-xxl-3 col-xl-4 col-sm-6">
                                <div class="">
                                    <label for="meritalStatus" class="text-sm fw-semibold text-primary-light d-inline-block mb-8">Merital Status</label>
                                    <select name="marital_status" id="meritalStatus" class="form-control form-select">
                                        <option value="">Select a Merital Status</option>
                                        <option value="Married">Married</option>
                                        <option value="Unmarried">Unmarried</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-xxl-3 col-xl-4 col-sm-6">
                                <div class="">
                                    <label for="contractType" class="text-sm fw-semibold text-primary-light d-inline-block mb-8">Contract Type</label>
                                    <select name="contract_type" id="contractType" class="form-control form-select">
                                        <option value="">Select a Contract Type</option>
                                        <option value="Contractual">Contractual</option>
                                        <option value="Hourly">Hourly</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-xxl-3 col-xl-4 col-sm-6">
                                <div class="">
                                    <label for="workLocation" class="text-sm fw-semibold text-primary-light d-inline-block mb-8">Work Location </label>
                                    <input type="text" name="work_location" class="form-control" id="workLocation" placeholder="Enter work location">
                                </div>
                            </div>
                            <div class="col-xxl-3 col-xl-4 col-sm-6">
                                <div class="">
                                    <label for="joinDate" class="text-sm fw-semibold text-primary-light d-inline-block mb-8">Join Date</label>
                                    <input type="date" name="join_date" class="form-control" id="joinDate">
                                </div>
                            </div>
                            <div class="col-xxl-3 col-xl-4 col-sm-6">
                                <div class="">
                                    <label for="phoneNumber" class="text-sm fw-semibold text-primary-light d-inline-block mb-8">Phone Number <span class="text-danger-600">*</span> </label>
                                    <input type="tel" name="mobile" class="form-control" id="phoneNumber" placeholder="Enter your Phone Number">
                                </div>
                            </div>
                            <div class="col-xxl-3 col-xl-4 col-sm-6">
                                <div class="">
                                    <label for="teacherEmails" class="text-sm fw-semibold text-primary-light d-inline-block mb-8">Email <span class="text-danger-600">*</span> </label>
                                    <input type="text" name="email" class="form-control" id="teacherEmails" placeholder="Enter your Email">
                                </div>
                            </div>
                            <div class="col-xxl-3 col-xl-4 col-sm-6">
                                <div class="">
                                    <label for="wordExperience" class="text-sm fw-semibold text-primary-light d-inline-block mb-8">Experience <span class="text-danger-600">*</span> </label>
                                    <input type="text" name="experience" class="form-control" id="wordExperience" placeholder="Enter experience">
                                </div>
                            </div>
                            <div class="col-xxl-3 col-xl-4 col-sm-6">
                                <div class="">
                                    <label class="text-sm fw-semibold text-primary-light d-inline-block mb-8">Teacher Photo <span class="text-danger-600">*</span> </label>
                                    <div class=" height-44-px p-4 d-flex justify-content-center align-items-center text-center fw-medium text-md cursor-pointer border border-neutral-400 radius-8 border-dashed bg-hover-neutral-200">
                                        <!-- <span class="">Darg & drop a file here or click</span> -->
                                        <input type="file" name="photo" class="">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-12">
                <div class="shadow-1 radius-12 bg-base h-100 overflow-hidden">
                    <div class="card-header border-bottom bg-base py-16 px-24 d-flex align-items-center justify-content-between">
                        <h6 class="text-lg fw-semibold mb-0">Medical Details</h6>
                    </div>
                    <div class="card-body p-20">
                        <div class="row gy-3">
                            <div class="col-xxl-3 col-xl-4 col-sm-6">
                                <div class="">
                                    <label for="bloodGroup" class="text-sm fw-semibold text-primary-light d-inline-block mb-8">Blood Group</label>
                                    <select name="blood_group" id="bloodGroup" class="form-control form-select">
                                        <option value="">Select blood group</option>
                                        <option value="A+">A+</option>
                                        <option value="AB+">AB+</option>
                                        <option value="A-">A-</option>
                                        <option value="AB-">AB-</option>
                                        <option value="O-">O-</option>
                                        <option value="O+">O+</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xxl-12">
                <div class="shadow-1 radius-12 bg-base h-100 overflow-hidden">
                    <div class="card-header border-bottom bg-base py-16 px-24 d-flex align-items-center justify-content-between">
                        <h6 class="text-lg fw-semibold mb-0">Address</h6>
                    </div>
                    <div class="card-body p-20">
                        <div class="row gy-3">
                            <div class="col-sm-12">
                                <div class="">
                                    <label for="currentAddress" class="text-sm fw-semibold text-primary-light d-inline-block mb-8">Current Address </label>
                                    <input type="text" name="current_address" class="form-control" id="currentAddress" placeholder="Enter Current Address">
                                </div>
                            </div>
                            <div class="col-sm-12">
                                <div class="">
                                    <label for="permanentAddress" class="text-sm fw-semibold text-primary-light d-inline-block mb-8">Permanent Address </label>
                                    <input type="text" name="permanent_address" class="form-control" id="permanentAddress" placeholder="Enter Permanent Address">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xl-12">
                <div class="shadow-1 radius-12 bg-base h-100 overflow-hidden">
                    <div class="card-header border-bottom bg-base py-16 px-24 d-flex align-items-center justify-content-between">
                        <h6 class="text-lg fw-semibold mb-0">Login Details</h6>
                    </div>
                    <div class="card-body p-20">
                        <div class="row gy-3">
                            <div class="col-sm-6">
                                <div class="">
                                    <label for="your-password" class="text-sm fw-semibold text-primary-light d-inline-block mb-8">Password <span class="text-danger-600">*</span></label>
                                    <div class="position-relative">
                                        <input type="password" name="password" id="your-password" class="form-control" placeholder="Enter your password">
                                        <span class="toggle-password ri-eye-line cursor-pointer position-absolute end-0 top-50 translate-middle-y me-16 text-secondary-light" data-toggle="#your-password"></span>
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-6">
                                <div class="">
                                    <label for="your-password" class="text-sm fw-semibold text-primary-light d-inline-block mb-8">Confirm Password <span class="text-danger-600">*</span></label>
                                    <div class="position-relative">
                                        <input type="password" name="password_confirmation" id="confirm-password" class="form-control" placeholder="Confirm your password">
                                        <span class="toggle-password ri-eye-line cursor-pointer position-absolute end-0 top-50 translate-middle-y me-16 text-secondary-light" data-toggle="#confirm-password"></span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-12">
                <div class="d-flex align-items-center justify-content-center gap-3 mt-8">
                    <button type="reset" class="border border-danger-600 bg-hover-danger-200 text-danger-600 text-md px-50 py-11 radius-8">Reset</button>
                    <button type="submit" class="btn btn-primary-600 border border-primary-600 text-md px-28 py-12 radius-8">Save Changes</button>
                </div>
            </div>
        </div>
    </form>
</div>
@include('admin.common-layout.footer')