<div class="row">
    <div class="col-md-12 mt-2">
        <form name="" id="editUserForm" method="post" action="/coach/information/update" enctype="multipart/form-data"
            novalidate>
            <div class="card card-info">
                <div class="card-header">
                    <h4 class="card-title">
                        <%=sectionTitle%>
                    </h4>
                </div>
                <div class="card-body">
                    <div class="form-row">
                        <input type="hidden" id="id" name="id" value="<%=user_id%>" />
                        <div class="form-group col-md-6">
                            <label class="required" for="inputName">Gender</label>
                            <select id="gender" name="gender" class="form-control" required>
                                <option selected disabled>Select Gender</option>
                                <option value="Male" <%=userData.gender=='Male' ? 'selected' : '' %>>Male</option>
                                <option value="Female" <%=userData.gender=='Female' ? 'selected' : '' %>>Female</option>
                                <option value="Others" <%=userData.gender=='Others' ? 'selected' : '' %>>Others</option>
                            </select>
                        </div>
                        <div class="form-group col-md-6">
                            <label class="required" for="inputName">Age</label>
                            <input type="text" id="age" name="age" class="form-control" value="<%=userData.age%>"
                                onkeypress="if ( isNaN( String.fromCharCode(event.keyCode) )) return false;"
                                placeholder="Enter age" min="1" max="99" oninput="validate(this)" required>
                        </div>
                        <div class="form-group col-md-12 col-md-12">
                            <label class="required" for="inputName">Education Details</label>
                            <textarea type="text" id="education_details" name="education_details" class="form-control"
                                value="<%=userData.education_details%>" oninput="validate(this)"
                                placeholder="Enter education details" required><%=userData.education_details%></textarea>
                        </div>
                        <div class="form-group col-md-6 col-md-6">
                            <label class="required" for="inputName">Work Experience</label>
                            <input type="text" id="work_experience" name="work_experience" class="form-control"
                                value="<%=userData.work_experience%>" onkeypress="if ( isNaN( String.fromCharCode(event.keyCode) )) return false;"
                                placeholder="Enter work experience" required>
                        </div>
                       
                        <div class="form-group col-md-6">
                            <label class="required" for="inputName">Lesson Cost</label>
                            <input type="text" id="lesson_cost" name="lesson_cost" class="form-control"
                                value="<%=userData.lesson_cost%>"
                                onkeypress="if ( isNaN( String.fromCharCode(event.keyCode) )) return false;"
                                placeholder="Enter lesson cost"  oninput="validate(this)" required>
                        </div>
                        <div class="form-group col-md-6">
                            <label class="required" for="inputName">Lesson Method</label>
                            <select id="lesson_method" name="lesson_method" class="form-control" required>
                                <option selected disabled>Select method</option>
                                <%for(let item of methods){%>
                                    <option value="<%=item.id%>" <%=item.id===userData.lesson_method ? 'selected' : '' %> ><%=item.method_name%></option>
                                    <%}%>
                                <!-- <option value="Online" <%=userData.lesson_method=='Online' ? 'selected' : '' %>>Online</option>
                                <option value="Park" <%=userData.lesson_method=='Park,' ? 'selected' : '' %>>Park</option>
                                <option value="Home" <%=userData.lesson_method=='Home,' ? 'selected' : '' %>>Home</option>
                                <option value="Gym" <%=userData.lesson_method=='Gym' ? 'selected' : '' %>>Gym</option> -->
                            </select>
                        </div>
                        <div class="form-group col-md-12">
                            <label  for="inputName">Lesson Location</label>
                            <textarea type="text" id="lesson_location" name="lesson_location" class="form-control"
                                placeholder="Enter lesson location" value=""  oninput="validate(this)"><%=userData.lesson_location%></textarea>
                        </div>
                        <div class="form-group col-md-6">
                            <label  for="inputName">Postal Code</label>
                            <input type="text" id="lesson_postal_code" name="lesson_postal_code" class="form-control"
                                value="<%=userData.lesson_postal_code%>" placeholder="Enter postal code">
                        </div>
                        <div class="form-group form col-md-6">
                            <label class="required" for="inputName">Workout Types</label>
                            <select id="workouts" name="workouts" class="form-control multi-select" multiple required>
                                <option disabled>Select workouts</option>
                                <%for(let item of workouTypes){%>
                                <option value="<%=item.id%>" <%=couchWorkouts.includes(item.id)==true ? 'selected' : '' %> ><%=item.workout_name%></option>
                                <%}%>
                            </select>
                        </div>
                        <div class="form-group form col-md-6">
                            <label class="required" for="inputName">Workout Time</label>
                            <select id="workout_time" name="workout_time" class="form-control" required>
                                <option selected disabled>Select workout time</option>
                                <option value="Morning" <%=userData.workout_time=='Morning' ? 'selected' : '' %>>Morning</option>
                                <option value="Afternoon" <%=userData.workout_time=='Afternoon,' ? 'selected' : '' %>>Afternoon</option>
                                <option value="Evening" <%=userData.workout_time=='Evening,' ? 'selected' : '' %>>Evening</option>
                            </select>
                        </div>
                       
                        <div class="form-group  col-md-6">
                            <label for="inputName">Background Picture</label>
                            <input type="file" class="form-control imagepickerWithPreviewId"
                                data-previewelement="imagePreview" id="image" name="background_picture" accept="image/*"
                                onchange="return fileValidation()"  style="padding: 4px 4px;">
                            <label id="image-error" style="display: none;" class="error" for="image">Please upload file
                                having extensions .jpeg/.jpg/.png/.gif only.</label>
                        </div>
                        <div class="form-group  col-md-6">
                            <label for="inputName">Certificate</label>
                            <input type="file" class="form-control imagepickerWithPreviewId"
                                data-previewelement="imagePreview" id="certificate" name="certificate" accept="application/pdf"
                                onchange="return pdfFileValidation()"  style="padding: 4px 4px;">
                            <label id="file-error" style="display: none;" class="error" for="image">Please upload file
                                having extensions .pdf only.</label>
                        </div>
                       
                        <div class="form-group col-md-6">
                            <%if(userData.background_picture !=null && userData.background_picture !="" ){%>
                                <img class="img-thumbnail" id="imagePreview" style="width: 100px"
                                    src="/uploads/user/profile_pic/<%=userData.background_picture %>" alt="Image">
                                <%}else{%>
                                    <img class="img-thumbnail" id="imagePreview" style="width: 100px"
                                        src="/images/no-image.jpg%>" alt="Image">
                                    <%}%>
                        </div>
                        <div class="form-group col-md-6">
                            <%if(userData.certificate !=null && userData.certificate !=""&& userData.certificate !="undefined" ){%>
                                <a href="/uploads/user/profile_pic/<%=userData.certificate %>" target="_blank">
                                    <img class="img-thumbnail" id="imagePreview" style="width: 50px" src="/images/PDF_file_icon.png%>"
                                        alt="Image">
                                  </a>
                                <%}%>
                        </div>
                    </div>
                </div>
                <div class="card-footer">
                    <input type="hidden" id="old_background_picture" name="old_background_picture" value="<%=userData.background_picture %>" />
                    <input type="hidden" id="old_certificate" name="old_certificate" value="<%=userData.certificate %>" />
                    <button type="submit" class="btn btn-info">Update</button>
                    <button type="button" class="btn btn-default">
                        <a href="/coach/list">Cancel</a>
                    </button>
                </div>
            </div>
        </form>
    </div>
</div>


<script>
    // const togglePassword = document.querySelector('#togglePassword');
    // const password = document.querySelector('#password');

    // togglePassword.addEventListener('click', function (e) {
    //     const type = password.getAttribute('type') === 'password' ? 'text' : 'password';
    //     password.setAttribute('type', type);
    //     this.classList.toggle('fa-eye-slash');
    // });
    $('#country_id').change(async (e) => {
        console.log(e.target.value);
        const url = `${window.location.protocol}//${window.location.host}/coach/get-state/${e.target.value}`;
        var select = document.getElementById("state_id");
        try {
            const response = await fetch(url, { method: "POST" });
            if (!response.ok) {
                throw new Error(`Response status: ${response.status}`);
            }

            const json = await response.json();
            console.log(json);
            let data = json.state;
            $('#state_id').find('option').not(':first').remove();
            for (let i = 0; i < data.length; i++) {
                var option = document.createElement("option");
                option.text = data[i].state_name;
                option.value = data[i].id;
                select.appendChild(option);
            }

        } catch (error) {
            console.error(error.message);
        }
    })
    $('#state_id').change(async (e) => {
        console.log(e.target.value);
        const url = `${window.location.protocol}//${window.location.host}/coach/get-city/${e.target.value}`;
        var select = document.getElementById("city_id");
        try {
            const response = await fetch(url, { method: "POST" });
            if (!response.ok) {
                throw new Error(`Response status: ${response.status}`);
            }

            const json = await response.json();
            console.log(json);
            let data = json.city;
            $('#city_id').find('option').not(':first').remove();
            for (let i = 0; i < data.length; i++) {
                var option = document.createElement("option");
                option.text = data[i].city_name;
                option.value = data[i].id;
                select.appendChild(option);
            }

        } catch (error) {
            console.error(error.message);
        }
    })
//     $(document).ready(function () {
//     $("#workout_time").select2({
//       placeholder: "Select option",
//       tags: true,
//     });
//   })
</script>

<%- contentFor('pageStyleSection')%>
    <link rel="stylesheet" href="/stylesheets/style.css" />