<div class="row">
    <div class="col-md-12 mt-2">
        <form name="" id="editUserForm" method="post" action="/coach/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="<%=userData.id%>" />
                        <div class="form-group col-md-6 col-md-6">
                            <label class="required" for="inputName">First Name</label>
                            <input type="text" id="first_name" name="first_name" class="form-control"
                                value="<%=userData.first_name%>" onkeypress="return /[a-zA-Z_\s]/i.test(event.key)"
                                placeholder="Enter first name" required>
                        </div>
                        <div class="form-group col-md-6 col-md-6">
                            <label class="required" for="inputName">Last Name</label>
                            <input type="text" id="last_name" name="last_name" class="form-control"
                                value="<%=userData.last_name%>" onkeypress="return /[a-zA-Z_\s]/i.test(event.key)"
                                placeholder="Enter last name" required>
                        </div>
                        <div class="form-group col-md-6">
                            <label class="required" for="inputName">Email</label>
                            <input type="email" readonly id="user_email" name="user_email" class="form-control"
                                value="<%=userData.user_email%>"
                                onkeypress="return /[A-Za-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6}/.test(event.key)"
                                placeholder="Enter email" required oninput="validate(this)">
                        </div>
                        <div class="form-group col-md-6">
                            <label class="required" for="inputName">Phone</label>
                            <input type="text" id="phone" name="phone_number" class="form-control"
                                value="<%=userData.phone_number%>"
                                onkeypress="if ( isNaN( String.fromCharCode(event.keyCode) )) return false;"
                                placeholder="Enter phone number" min="10" oninput="validate(this)" required>
                        </div>
                        
                        <div class="form-group col-md-12">
                            <label class="required" for="inputName">Address</label>
                            <textarea type="text" id="address" name="address" class="form-control"
                                placeholder="Enter address" value="" required oninput="validate(this)"><%=userData.address%></textarea>
                        </div>
                        <div class="form-group col-md-6 col-md-6">
                            <label class="required" for="inputName">Country</label>
                            <select id="country_id" name="country_id" class="form-control" required>
                               <option value="" <%= userData.country_id === null ? 'selected' : '' %>>Select Country
                               </option>
                               <% for(let item of countryData) { %>
                               <option value="<%= item.id %>"
                                   <%= userData.country_id && userData.country_id.toString() === item.id.toString() ? 'selected' : '' %>>
                                   <%= item.country_name %></option>
                               <% } %>

                            </select>
                        </div>
                        <div class="form-group col-md-6 col-md-6">
                            <label class="required" for="inputName">State</label>
                            <select id="state_id" name="state_id" class="form-control" required>
                                <option selected disabled>Select State</option>
                                <%for(let item of stateData){%>
                                    <option value="<%=item.id%>" <%=userData.state_id.toString()==item.id.toString()
                                        ? 'selected' : '' %> ><%=item.state_name%>
                                    </option>
                                    <%}%>
                            </select>
                        </div>
                        <div class="form-group col-md-6 col-md-6">
                            <label  for="inputName">City</label>
                            <select id="city_id" name="city_id" class="form-control" >
                                <option selected disabled>Select City</option>
                                <%for(let item of cityData){%>
                                    <option value="<%=item.id%>" <%=userData.city_id.toString()==item.id.toString()
                                        ? 'selected' : '' %> ><%=item.city_name%>
                                    </option>
                                    <%}%>
                            </select>
                        </div>
                        <div class="form-group col-md-6">
                            <label class="required" for="inputName">Postal Code</label>
                            <input type="text" id="postal_code" name="postal_code" class="form-control"
                                value="<%=userData.postal_code%>" placeholder="Enter postal code" required>
                        </div>
                        <div class="form-group  col-md-6">
                            <label for="inputName">Profile Image</label>
                            <input type="file" class="form-control imagepickerWithPreviewId"
                                data-previewelement="imagePreview" id="image" name="image" accept="image/*"
                                onchange="return fileValidation()">
                            <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 class="required" for="inputName">Approval Status</label>
                            <select id="active_status" name="active_status" class="form-control" required>
                                <option selected disabled>Select Status</option>
                                <option value="true" <%=userData.active_status==true ? 'selected' : '' %>>Approved
                                </option>
                                <option value="false" <%=userData.active_status==false ? 'selected' : '' %>>Pending
                                </option>
                            </select>
                        </div>
                       
                        <div class="form-group col-md-6">
                            <%if(userData.profile_pic !=null && userData.profile_pic !="" ){%>
                                <img class="img-thumbnail" id="imagePreview" style="width: 100px"
                                    src="/uploads/user/profile_pic/<%=userData.profile_pic %>" alt="Image">
                                <%}else{%>
                                    <img class="img-thumbnail" id="imagePreview" style="width: 100px"
                                        src="/images/no-image.jpg%>" alt="Image">
                                    <%}%>
                        </div>
                    </div>
                </div>
                <div class="card-footer">
                    <input type="hidden" id="old_profile_pic" name="old_profile_pic"
                        value="<%=userData.profile_pic %>" />
                    <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 src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>

<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);
        }
    })

</script>

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