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

{% block content %}
<style>
    .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;
    }
</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>Edit Doctor Details</h4>
                    <span class="ml-1">Update the details for the 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)">Edit 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">Edit 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" value="{{ doctor.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" value="{{ doctor.user.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 value="" disabled {% if not doctor.dr_gender %}selected{% endif %}>Please select</option >
                                            <option value="M" {% if doctor.gender == 'M' %}selected{% endif %}>Male</option>
                                            <option value="F" {% if doctor.gender == 'F' %}selected{% endif %}>Female</option>
                                            <option value="O" {% if doctor.gender == 'O' %}selected{% endif %}>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" value="{{ doctor.dob|date:'Y-m-d' }}" required> 
                                    </div>
                                    <div class="col-lg-6">
                                        <label class="col-form-label" for="val-phone">Phone <span class="text-danger">*</span></label>
                                        <input type="text" class="form-control" id="val-phone" name="dr_phone" value="{{ doctor.phone }}" placeholder="Enter phone number" required>
                                    </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" value="{{ doctor.consultation_fee }}" placeholder="Enter consultation fees">
                                    </div>

                                    <div class="col-lg-6">
                                        <label class="col-form-label" for="val-email">Email <span class="text-danger">*</span></label>
                                        <input type="email" class="form-control" id="val-email" name="dr_email" value="{{ doctor.user.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">
                                        <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="status">Status <span class="text-danger">*</span></label>
                                        <select class="form-control" name="status" required>
                                            <option value="1" {% if doctor.status == "1" %}selected{% endif %}>Active</option>
                                            <option value="0" {% if doctor.status == "0" %}selected{% endif %}>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 value="Y" {% if doctor.is_recommended == 'Y' %}selected{% endif %}>Yes</option>
                                            <option value="N" {% if doctor.is_recommended == 'N' %}selected{% endif %}>No</option>
                                        </select>
                                    </div>

                                    <div class="form-group col-12">
                                        <label>Description</label>
                                        <textarea class="form-control" name="description" rows="3" placeholder="Description">{{ doctor.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" value="{{ doctor.medical_license }}" 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 }}" {% if speciality.id == doctor.specialist.id %}selected{% endif %}>{{ 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" value="{{ doctor.experience }}" placeholder="Experience">
                                    </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" value="{{ doctor.join_date|date:'Y-m-d' }}" 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" value="{{ doctor.qualification }}" placeholder="Degrees">
                                    </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" value="{{ doctor.institution }}" placeholder="Institutions">
                                    </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" value="{{ doctor.graduation_year }}" name="dr_graduation_years" placeholder="Graduation Years">
                                    </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" value="{{ doctor.additional_qualification }}" name="dr_certification_fellowship" placeholder="Certifications and Fellowships">
                                    </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 src="{% if doctor.profile_img %}{{ doctor.profile_img.url }}{% else %}{% static 'images/default_image.png' %}{% endif %}"  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')">
                                </div>

                                <div class="col-lg-6">
                                    <label class="col-form-label" for="resume">Resume
                                        <span class="text-danger">*</span>
                                    </label><br/>
                                    <img src="{% if doctor.resume %}{{ doctor.resume.url }}{% else %}{% static 'images/default_image.png' %}{% endif %}" 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')" >
                                </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 src="{% if doctor.medical_license_doc %}{{ doctor.medical_license_doc.url }}{% else %}{% static 'images/default_image.png' %}{% endif %}" 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')" >
                                </div>
                                
                                <div class="col-lg-6">
                                    <label class="col-form-label" for="certification_documents">Certification Documents
                                        <span class="text-danger">*</span>
                                    </label><br/>
                                    <img src="{% if doctor.certification %}{{ doctor.certification.url }}{% else %}{% static 'images/default_image.png' %}{% endif %}" 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')">
                                </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 src="{% if doctor.other %}{{ doctor.other.url }}{% else %}{% static 'images/default_image.png' %}{% endif %}" 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')">
                                </div>
                                </div>

                                <div class="form-group row">
                                    <div class="col-lg-12">
                                        <button type="submit" class="btn btn-primary">Update</button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    // Password toggle functionality
    const togglePassword = document.getElementById('toggle-password');
    const passwordField = document.getElementById('password');

    togglePassword.addEventListener('click', function () {
        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 output = document.getElementById(previewId);
        output.src = URL.createObjectURL(event.target.files[0]);
        output.onload = function() {
            URL.revokeObjectURL(output.src); 
        }
    }


    // function previewImage(event, previewId) {
    //     const reader = new FileReader();
    //     reader.onload = function() {
    //         const output = document.getElementById(previewId);
    //         output.src = reader.result;
    //     };
    //     reader.readAsDataURL(event.target.files[0]);
    // }
</script>
{% endblock %}