{% extends 'admin/master.html' %}
{% load static %}

{% block content %}
<style>
    .dark-font {
        color: #000000;
    }

    .form-group {
        position: relative;
    }

    .badge-inside {
        position: absolute;
        top: 50%;
        left: 30px;
        transform: translateY(-50%);
        background-color: #ffaa16;
        color: rgb(31, 29, 29);
    }

    .form-control {
        padding-right: 80px;
    }

    .card-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .card-header .btn {
        margin-left: 10px;
    }

    .category-image {
        max-width: 150px;
        width: 150px;
        height: 150px;
        height: auto;
        margin-right: 20px;
        margin-bottom: 20px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    }

    .image-container {
        display: flex;
        align-items: center;
        margin-bottom: 20px;
    }

    .image-label {
        margin-right: 10px;
        min-width: 120px;
        text-align: right;
    }

    .img-thumbnail {
        width: 100px;     /* Set the width of the image */
        height: 100px;    /* Set the height of the image */
        padding: 10px;
        object-fit: fill;    /* Maintain aspect ratio and fill the space */
    }

    .shadow-box {
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);  /* Add a subtle shadow */
        border-radius: 8px;    /* Rounded corners for the image */
        padding: 5px;
        background-color: #fff;
    }

    /* Custom Scrollbar Styles */
    ::-webkit-scrollbar {
            width: 8px;
        }

        ::-webkit-scrollbar-track {
            background: #ffffff;
            /* border: 1px solid #343957; */
        }

        ::-webkit-scrollbar-thumb {
            background: #343957;
            border-radius: 10px;
            /* border: 1px solid #343957; */
        }

        ::-webkit-scrollbar-thumb:hover {
            background: #6b51df;
            padding: 10px
        }
        
        .password-toggle {
            cursor: pointer;
        }
        
        .text-danger {
            color: #ff4942 !important;
        }
</style>

<div class="content-body">
    <div class="container-fluid">
        <div class="row page-titles mx-0">
            <div class="col-sm-6 p-md-0">
                <div class="welcome-text">
                    <h4>Create Doctor Details</h4>
                    <span class="ml-1">Fill in the details for the new doctor</span>
                </div>
            </div>
            <div class="col-sm-6 p-md-0 justify-content-sm-end mt-2 mt-sm-0 d-flex">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="{% url "admin_dashboard" %}">Admin</a></li>
                    <li class="breadcrumb-item active"><a href="javascript:void(0)">Create Doctor Details</a></li>
                </ol>
            </div>
        </div>

        <div class="row">
            <div class="col-xl-12 col-xxl-12">
                <div class="card">
                    <div class="card-header">
                        <h4 class="card-title">Create Doctor Details</h4>
                        <div>
                            <a href="{% url "doctors_list" %}"><button type="button" class="btn btn-rounded btn-primary ml-auto"><span class="btn-icon-left text-primary"><i class="fa fa-list"></i></span>List</button></a>
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="basic-form">
                            <form class="form-valide" action="" method="post" enctype="multipart/form-data">
                                {% csrf_token %}
                                
                                <!-- Personal Information -->
                                <h3 class="mb-1">Personal Information</h3>
                                <div class="form-group row">
                                    <div class="col-lg-6">
                                      <label class="col-form-label" for="val-name">Full Name
                                          <span class="text-danger">*</span>
                                      </label>
                                      <input type="text" class="form-control" id="val-name" name="dr_name" placeholder="Enter a full name.." required>
                                  </div>
                                    <div class="col-lg-6">
                                        <label class="col-form-label" for="val-username">Username
                                            <span class="text-danger">*</span>
                                        </label>
                                        <input type="text" class="form-control" id="val-username" name="dr_username" placeholder="Enter a username.." required>
                                    </div>
                                    <div class="col-lg-6">
                                      <label class="col-form-label" for="val-gender">Gender
                                          <span class="text-danger">*</span>
                                      </label>
                                      <select class="form-control" id="val-gender" name="dr_gender" required>
                                          <option disabled selected value="">Please select</option>
                                          <option value="M">Male</option>
                                          <option value="F">Female</option>
                                          <option value="O">Other</option>
                                      </select>
                                    </div>
                                  <div class="col-lg-6">
                                    <label class="col-form-label" for="val-dob">Date of Birthday
                                        <span class="text-danger">*</span>
                                    </label>
                                    <input type="date" class="form-control" id="val-dob" name="dr_dob" required>
                                  </div>
                                    <div class="col-lg-6">
                                      <label class="col-form-label" for="val-phoneus">Phone
                                          <span class="text-danger">*</span>
                                      </label>
                                      <input type="text" class="form-control" id="val-phone" name="dr_phone" placeholder="Enter phone number" required>
                                    </div>
                                    <div class="col-lg-6">
                                        <label class="col-form-label" for="val-email">Email
                                            <span class="text-danger">*</span>
                                        </label>
                                        <input type="text" class="form-control" id="val-email" name="dr_email" placeholder="Your valid email.." required>
                                    </div>

                                    <div class="col-lg-6">
                                      <label class="col-form-label" for="password">Password <span class="text-danger">*</span></label>
                                      <input type="password" class="form-control" id="password" name="dr_password" placeholder="Password" required>
                                      <span class="position-absolute password-toggle" style="right: 15px; top: 40px;">
                                        <i class="fa fa-eye-slash" id="toggle-password"></i>
                                      </span>
                                    </div>

                                    <div class="col-lg-6">
                                        <label class="col-form-label" for="val-currency">Consultation Fees
                                            <span class="text-danger">*</span>
                                        </label>
                                        <input type="text" class="form-control" id="val-currency" name="dr_consultation_fees" placeholder="Enter consultation fees">
                                    </div>

                                    <div class="col-lg-6">
                                        <label class="col-form-label" for="status">Status
                                            <span class="text-danger">*</span>
                                        </label>
                                        <select class="form-control" name="status" required>
                                            <option selected disabled>Choose Status</option>
                                            <option value="1" selected>Active</option>
                                            <option value="0">Inactive</option>
                                        </select>
                                    </div>

                                    <div class="col-lg-6">
                                        <label class="col-form-label" for="is_recommended">Recommended
                                            <span class="text-danger">*</span>
                                        </label>
                                        <select class="form-control" name="is_recommended" required>
                                            <option disabled selected value="">Please select</option> 
                                            <option value="Y" selected>Yes</option>
                                            <option value="N">No</option>
                                        </select>
                                    </div>

                                    <div class="form-group col-12">
                                        <label>Description</label>
                                        <textarea class="form-control" name="description" rows="3" placeholder="Description"></textarea>
                                    </div>
                                </div>

                                <!-- Professional Information -->
                                <h3 class="mb-1 mt-5">Professional Information</h3>
                                <div class="form-group row">
                                  <div class="col-lg-6">
                                    <label class="col-form-label" for="val_med_license_no">Medical License Number
                                        <span class="text-danger">*</span>
                                    </label>
                                    <input type="text" class="form-control" id="val_med_license_no" name="dr_val_med_license_no" placeholder="Medical License Number.." required>
                                  </div>
                                  <div class="col-lg-6">
                                        <label class="col-form-label" for="val-specialization">Specialization
                                            <span class="text-danger">*</span>
                                        </label>
                                        <select class="form-control" id="val-specialization" name="dr_specialization" required>
                                            <option selected disabled>Please select</option>
                                            {% for speciality in specialist_categories %}
                                            <option value="{{ speciality.id }}">{{ speciality.category_name }}</option>
                                            {% endfor %}
                                        </select>
                                    </div>
                                    <div class="col-lg-6">
                                        <label class="col-form-label" for="experience">Experience
                                            <span class="text-danger">*</span>
                                        </label>
                                        <input type="text" class="form-control" id="experience" name="dr_experience" placeholder="Experience" required>
                                    </div>
                                    <div class="col-lg-6">
                                        <label class="col-form-label" for="join_date">Join Date
                                            <span class="text-danger">*</span>
                                        </label>
                                        <input type="date" class="form-control" id="join_date" name="join_date" required>
                                    </div>
                                </div>

                                <!-- Educational Background -->
                                <h3 class="mb-1 mt-5">Educational Background</h3>
                                <div class="form-group row">
                                    <div class="col-lg-6">
                                      <label class="col-form-label" for="degrees">Degrees
                                          <span class="text-danger">*</span>
                                      </label>
                                      <input type="text" class="form-control" id="degrees" name="dr_degrees" placeholder="Degrees" required>
                                    </div>

                                    <div class="col-lg-6">
                                      <label class="col-form-label" for="institutions">Institutions
                                          <span class="text-danger">*</span>
                                      </label>
                                      <input type="text" class="form-control" id="institutions" name="dr_institutions" placeholder="Institutions" required>
                                    </div>

                                    <div class="col-lg-6">
                                        <label class="col-form-label" for="graduation_years">Graduation Years
                                            <span class="text-danger">*</span>
                                        </label>
                                        <input type="text" class="form-control" id="graduation_years" name="dr_graduation_years" placeholder="Graduation Years" required>
                                    </div>

                                    <div class="col-lg-6">
                                      <label class="col-form-label" for="certification_fellowship">Certifications and Fellowships
                                          <span class="text-danger">*</span>
                                      </label>
                                      <input type="text" class="form-control" id="certification_fellowship" name="dr_certification_fellowship" placeholder="Certifications and Fellowships" required>
                                    </div>
                                </div>

                                <!-- Upload Document  -->
                                <h3 class="mb-1 mt-5">Document Upload</h3>
                                <div class="form-group row">
                                <div class="col-lg-6">
                                    <label class="col-form-label" for="profile_picture">Profile Picture
                                    <span class="text-danger">*</span>
                                    </label></br>
                                    <img id="profile_picture_preview" class="img-thumbnail mt-2 mb-2 shadow-box" />
                                    <input type="file" class="form-control" id="profile_picture" name="profile_picture" accept="image/*" onchange="previewImage(event, 'profile_picture_preview')" required>
                                </div>

                                <div class="col-lg-6">
                                    <label class="col-form-label" for="resume">Resume
                                    <span class="text-danger">*</span>
                                    </label></br>
                                    <img id="resume_preview" class="img-thumbnail mt-2 mb-2 shadow-box" />
                                    <input type="file" class="form-control" id="resume" name="resume" accept="image/*" onchange="previewImage(event, 'resume_preview')" required>
                                </div>

                                <div class="col-lg-6">
                                    <label class="col-form-label" for="medical_license_document">Medical License Document
                                    <span class="text-danger">*</span>
                                    </label></br>
                                    <img id="medical_license_preview" class="img-thumbnail mt-2 mb-2 shadow-box" />
                                    <input type="file" class="form-control" id="medical_license_document" name="medical_license_document" accept="image/*" onchange="previewImage(event, 'medical_license_preview')" required>
                                </div>

                                <div class="col-lg-6">
                                    <label class="col-form-label" for="certification_documents">Certification Documents
                                    <span class="text-danger">*</span>
                                    </label></br>
                                    <img id="certification_documents_preview" class="img-thumbnail mt-2 mb-2 shadow-box" />
                                    <input type="file" class="form-control" id="certification_documents" name="certification_documents" accept="image/*" onchange="previewImage(event, 'certification_documents_preview')" required>
                                </div>

                                <div class="col-lg-6">
                                    <label class="col-form-label" for="other_relevant_documents">Other Relevant Documents
                                    <span class="text-danger">*</span>
                                    </label></br>
                                    <img id="other_documents_preview" class="img-thumbnail mt-2 mb-2 shadow-box" />
                                    <input type="file" class="form-control" id="other_relevant_documents" name="other_relevant_documents" accept="image/*" onchange="previewImage(event, 'other_documents_preview')" required>
                                </div>
                                </div>

                                <div class="form-group row">
                                    <div class="col-lg-12 d-flex justify-content-between align-items-center">
                                        <button type="submit" class="btn btn-primary">Submit</button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    document.getElementById('toggle-password').addEventListener('click', function () 
    {
        const passwordField = document.getElementById('password');
        const type = passwordField.getAttribute('type') === 'password' ? 'text' : 'password';
        passwordField.setAttribute('type', type);
        this.classList.toggle('fa-eye');
        this.classList.toggle('fa-eye-slash');
    });

    function previewImage(event, previewId) 
    {
        var input = event.target;
        var reader = new FileReader();
        reader.onload = function()
        {
            var preview = document.getElementById(previewId);
            preview.src = reader.result;
            preview.style.display = 'block'; 
        }
        reader.readAsDataURL(input.files[0]);
    }
</script>

{% endblock %}