@extends('member')
@section('title', 'Edit Profile')

@section('content')
    <div class="container pad0">
        <div class="directory-sec">
            <ul class="breadcrumb">
                <li><a href="/home">Dashboard</a></li>
                <li>Edit Profile</li>
            </ul>
        </div>
		<div class="success_div"></div>

        <!--========================  BIO SECTION=====================================-->
        <div class="information-section bio-section ">
            <div class="bio-text">
                <span>Bio: </span>
                <a class="editable">{{ auth()->user()->bio }}</a>
            </div>

        </div>
		<div class="button-sec">
                <a class="edit_btn" id="edit_bio" href="#">Edit</a>
                <a class="edit_btn" id="cancel_bio" href="#" style="display: none;">Cancel</a>
                <a class="update_btn" id ="bio_update" href="#" style="display: none;">Update</a>
            </div>
    </div>

    <!--====================PERSONAL INFORMATOIN SECTION=========================  -->
    <div class="information-section accordion">
        <p class="information-text ">Personal information</p>
    </div>

    <div class="panel">
        <form action="#" class="update_personal_info" id="update_personal_info">
            <div class="form_sec ">
                <div class="row">
                    <div class="col-lg-3">
                        <div class="form-group">
                            <label class="quantity-text" for="emp_id">Emp-Id:</label>
                            <input type="number" class="name-text" id="emp_id" name="emp_id"
                                value="{{ auth()->user()->employee_id }}" disabled>
                        </div>
                    </div>
                    <div class="col-lg-3">
                        <div class="form-group">
                            <label class="quantity-text" for="employee_name">Employee Name</label>
                            <input class="name-text" type="text" id="employee_name" name="employee_name"
                                value="{{ auth()->user()->name }}" disabled>
                        </div>
                    </div>
                    <div class="col-lg-3">
                        <div class="form-group">
                            <label class="quantity-text" for="fathers_name">Fathers Name:</label>
                            <input class="name-text" type="text" id="fathers_name" name="fathers_name"
                                value="{{ auth()->user()->fathers_name }}" disabled>
                        </div>
                    </div>
                    <div class="col-lg-3">
                    <div class="form-group">
					<label class="quantity-text" for="sex">Gender</label>
					<select class="name-text" id="sex" name="sex" disabled>
						<option value="">Select Gender</option>
						<option value="Male" {{ auth()->user()->gender == 'Male' ? 'selected' : '' }}>Male</option>
						<option value="Female" {{ auth()->user()->gender == 'Female' ? 'selected' : '' }}>Female</option>
					</select>
				</div>

                    </div>
                </div>

                <div class="row">
                    <!-- Date of Birth -->
                    <div class="col-lg-3">
                        <div class="form-group">
                            <label class="quantity-text" for="dob">Date of Birth:</label>
                            <input class="name-text" type="date" id="dob" name="dob"
                                value="{{ auth()->user()->date_of_birth }}"disabled>
                        </div>
                    </div>

                    <!-- Qualification -->
                    <div class="col-lg-3">
                        <div class="form-group">
                            <label class="quantity-text" for="qualification">Email</label>
                            <input class="name-text" type="email" id="qualification" name="email"
                                value="{{ auth()->user()->email }}" disabled>
                        </div>
                    </div>

                    <!-- Home District -->
                    <div class="col-lg-3">
                        <div class="form-group">
                            <label class="quantity-text" for="home_district">Home District:</label>
                            <input class="name-text" type="text" id="home_district" name="home_district"
                                value="{{ auth()->user()->home_district }}" disabled>
                        </div>
                    </div>

                    <!-- Home Mondal -->
                    <div class="col-lg-3">
                        <div class="form-group">
                            <label class="quantity-text" for="home_mondal">Home Mondal</label>
                            <input class="name-text" type="text" id="home_mondal" name="home_mondal"
                                value="{{ auth()->user()->home_mandal }}"disabled>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <!-- Category -->
                 <div class="col-lg-3">
					<div class="form-group">
						<label class="quantity-text" for="category">Category:</label>
						<select class="name-text" id="category" name="category" disabled>
							<option value="">Select Category</option>
							<option value="General" {{ auth()->user()->category == 'General' ? 'selected' : '' }}>General</option>
							<option value="OBC" {{ auth()->user()->category == 'OBC' ? 'selected' : '' }}>OBC</option>
							<option value="SC" {{ auth()->user()->category == 'SC' ? 'selected' : '' }}>SC</option>
							<option value="ST" {{ auth()->user()->category == 'ST' ? 'selected' : '' }}>ST</option>
						</select>
					</div>
				</div>


                    <!-- Religion -->
                    <div class="col-lg-3">
                        <div class="form-group">
                            <label class="quantity-text" for="religion">Religion</label>
                            <input class="name-text" type="text" id="religion" name="religion"
                                value="{{ auth()->user()->religion }}" disabled>
                        </div>
                    </div>

                    <!-- Date of Retirement -->
                    <div class="col-lg-3">
                        <div class="form-group">
                            <label class="quantity-text" for="retirement_date">Date of Retirement:</label>
                            <input class="name-text" type="date" id="retirement_date" name="retirement_date"
                                value="{{ auth()->user()->retirement_year }}" disabled>
                        </div>
                    </div>

                    <!-- Mobile No -->
                    <div class="col-lg-3">
                        <div class="form-group">
                            <label class="quantity-text" for="mobile_no">Mobile No</label>
                            <input class="name-text" type="tel" id="mobile_no" name="mobile_no"
                                value="{{ auth()->user()->contact }}" disabled>
                        </div>
                    </div>
                </div>
            </div>
            <div class="button-sec">
                <a class="edit_btn" id="edit_p_info" href="#">Edit</a>
                <a class="cancel_btn edit_btn" id="cancel_p_info" href="#" style="display: none;">Cancel</a>
                <a class="update_btn edit_btn" id="update_p_info" href="#" style="display: none;">Update</a>
            </div>
            <br>
        </form>
    </div>


    <!--=======================PRESENT POSTING===========  -->
    <div class="information-section accordion">
        <p class="information-text">Present Posting</p>
    </div>
    <div class="panel">
        <div class="form_sec">
            <form id="present_posting_form">
                <div class="row">
                    <div class="col-lg-3">
                        <div class="fotm-group">
                            <label class="quantity-text" for="quantity">Designation:</label>
                            <input type="text" id="quantity" class="name-text" name="designation"
                                value="{{ auth()->user()->designation }}" disabled required>
                        </div>
                    </div>
                    <div class="col-lg-3">
                        <div class="fotm-group">
                            <label class="quantity-text" for="current_office">Current Office:</label>
                            <input class="name-text" type="text" name="current_office"
                                value="{{ auth()->user()->current_office }}" disabled required>
                        </div>
                    </div>
                    <div class="col-lg-3">
                        <div class="fotm-group">
                            <label class="quantity-text" for="present_posting_joining_date">Date of joining for present
                                posting:</label>
                            <input class="name-text" type="date" name="present_posting_joining_date"
                                value="{{ auth()->user()->present_posting_joining_date }}" disabled required>
                        </div>
                    </div>
                    <div class="col-lg-3">
                        <div class="fotm-group">
                            <label class="quantity-text" for="zone">Current zone:</label>
                            <input class="name-text" type="text" id="zone" name="zone"
                                value="{{ auth()->user()->zone }}" disabled required>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-lg-6">
                        <div class="fotm-group cuurrent_form">
                            <label class="quantity-text" for="batch">Batch:
                            </label>
                            <input class="name-text" type="text" name="batch" value="{{ auth()->user()->batch }}"
                                disabled>
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <div class="fotm-group cuurrent_form">
                            <label class="quantity-text" for="current_mandal">Current Mandal:</label>
                            <input class="name-text" name="current_mandal" type="text"
                                value="{{ auth()->user()->current_mandal }}" disabled required>
                        </div>
                    </div>
                </div>
                <div class="button-sec">
                    <a class="edit_btn" id="edit_posting_info"href="#">Edit</a>
                    <a class="edit_btn " id="cancelt_posting_info"href="#" style="display: none;">cancel</a>
                    <a class="update_btn" id ="update_posting_info" href="#" style="display: none;">Update</a>
                </div>
            </form>
        </div>
    </div>


    <div class="information-section accordion">
        <p class="information-text">Jurisdiction Details</p>
    </div>
    <div class="form_sec panel">
        <form id="jurisdictionForm" action="#">
            <div class="row">
                <div class="col-lg-3">
                    <div class="fotm-group">
                        <label class="quantity-text" for="joiningOffice">Joining Office:</label>
                        <input class="name-text" type="text" id="joiningOffice" name="joiningOffice" disabled
                            value="{{ auth()->user()->joining_office }}">
                    </div>
                </div>
                <div class="col-lg-3">
                    <div class="fotm-group">
                        <label class="quantity-text" for="joiningDate">Date of joining:</label>
                        <input class="name-text" type="date" id="joiningDate" name="joiningDate" disabled
                            value="{{ auth()->user()->joining_year }}">
                    </div>
                </div>
                <div class="col-lg-3">
                    <div class="fotm-group">
                        <label class="quantity-text" for="orderNo">Order No:</label>
                        <input class="name-text" type="text" id="orderNo" name="orderNo" disabled value="2805">
                    </div>
                </div>
                <div class="col-lg-3">
                    <div class="fotm-group">
                        <label class="quantity-text" for="orderDate">Order Date</label>
                        <input class="name-text" type="date" id="orderDate" name="orderDate" disabled
                            value="{{ auth()->user()->order_date }}">
                    </div>
                </div>
            </div>
            <div class="button-sec">
                <a class="edit_btn" id="editBtn" href="#">Edit</a>
                <a class="edit_btn" id="cancel_jd" href="#" style="display: none;">Cancel</a>
                <a class="update_btn" id="update_jd" href="#" style="display: none;">Update</a>
            </div>
        </form>
    </div>


    <!--=====================CHANGE PASSWORD=====================  -->
    <div class="information-section accordion">
        <div class="form_sec pad0">
            <p class="information-text">Change password</p>
        </div>
    </div>
    <div class="panel">
        <div class="form_sec">
            <form action="#" id="password_form">
                <div class="row padding_css_style">
                    <div class="col-lg-6">
                        <div class="fotm-group">
                            <label class="quantity-text" for="password">New Password</label>
                            <input class="name-text" type="password" id="password" name="password"
                                placeholder="new password" disabled>
                            <span id="password_error" class="error-message" style="color: red;"></span>
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <div class="fotm-group">
                            <label class="quantity-text" for="c_password">Confirm Password</label>
                            <input class="name-text" type="password" id="c_password" name="c_password"
                                placeholder="confirm password" disabled>
                            <span id="c_password_error" class="error-message" style="color: red;"></span>
                        </div>
                    </div>
                </div>
        </div>
        <div class="button-sec">
            <a class="edit_btn" id="edit_password">Edit</a>
            <a class="edit_btn" id="cancel_password" href="#" style="display: none;">Cancel</a>
            <a class="update_btn" id="update_password" href="#" style="display: none;">Update</a>
        </div>
        <br>
        </form>
    </div>
    <br>
    </div>
    </div>

    </div>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
   <script>
    $(document).ready(function() {
        var csrfToken = $('meta[name="csrf-token"]').attr('content');

        // ============BIO UPDATE BUTTONS AND AJAX=================
        $("#edit_bio").click(function() {
            $(".bio-text a.editable").attr("contenteditable", "true").focus();
            $(this).hide();
            $("#cancel_bio").show();
            $("#bio_update").show();
        });

        $("#cancel_bio").click(function() {
            $(".bio-text a.editable").removeAttr("contenteditable");
            $(this).hide();
            $("#edit_bio").show();
            $("#bio_update").hide();
        });

        $("#bio_update").click(function() {
            var newBio = $(".bio-text a.editable").text();
            $.ajax({
                url: "{{ route('update.bio') }}",
                method: "POST",
                headers: {
                    'X-CSRF-TOKEN': csrfToken
                },
                data: { bio: newBio },
                success: function(response) {
                    alert("Bio updated successfully!");
                    location.reload(); // Reload the page after successful update
                },
                error: function(xhr, status, error) {
                    console.error(error);
                    alert("Failed to update bio. Please try again later.");
                }
            });
        });

        // ============PERSONAL INFO UPDATE BUTTONS AND AJAX=================
        $("#edit_p_info").click(function(event) {
            event.preventDefault();
            $('#update_personal_info .name-text').prop('disabled', false);
            $("input[name='emp_id']").prop("disabled", true);
            $("#update_p_info, #cancel_p_info").show();
            $("#edit_p_info").hide();
        });

        $("#cancel_p_info").click(function(event) {
            event.preventDefault();
            $("input").prop("disabled", true);
            $("select").prop("disabled", true);
            $("#update_p_info, #cancel_p_info").hide();
            $("#edit_p_info").show();
        });

        $("#update_p_info").click(function(event) {
            event.preventDefault();
            var formData = {};
            $(".update_personal_info input, .update_personal_info select").each(function() {
                formData[$(this).attr('name')] = $(this).val();
            });
            $.ajax({
                url: "{{ route('update.p_info') }}",
                method: "POST",
                headers: {
                    'X-CSRF-TOKEN': csrfToken
                },
                data: { data: formData },
                success: function(response) {
                    alert("Personal Information updated successfully!");
                    location.reload(); // Reload the page after successful update
                },
                error: function(xhr, status, error) {
                    console.error(error);
                    alert("Failed to update Personal information. Please try again later.");
                }
            });
        });

        // ============POSTING INFO UPDATE BUTTONS AND AJAX=================
        $('#edit_posting_info').click(function(event) {
            event.preventDefault();
            $('#present_posting_form .name-text').prop('disabled', false);
            $('#edit_posting_info').hide();
            $('#cancelt_posting_info, #update_posting_info').show();
        });

        $('#cancelt_posting_info').click(function(event) {
            event.preventDefault();
            $('#present_posting_form .name-text').prop('disabled', true);
            $('#edit_posting_info').show();
            $('#cancelt_posting_info, #update_posting_info').hide();
        });

        $('#update_posting_info').click(function(event) {
            event.preventDefault();
            var formData = $('#present_posting_form').serialize();
            $.ajax({
                url: '/update-posting-info',
                type: 'POST',
                data: formData,
                headers: {
                    'X-CSRF-TOKEN': csrfToken
                },
                success: function(response) {
                    if (response.success) {
                        alert('Posting info updated successfully.');
                        $('#present_posting_form .name-text').prop('disabled', true);
                        $('#edit_posting_info').show();
                        $('#cancelt_posting_info, #update_posting_info').hide();
                    } else {
                        alert('Failed to update. Please try again.');
                    }
                },
                error: function(xhr, status, error) {
                    console.error('Error:', error);
                }
            });
        });

        // ============PASSWORD UPDATE BUTTONS AND AJAX=================
        $('#edit_password').on('click', function(e) {
            e.preventDefault();
            $('#password, #c_password').prop('disabled', false);
            $('#edit_password').hide();
            $('#cancel_password, #update_password').show();
        });

        $('#cancel_password').on('click', function(e) {
            e.preventDefault();
            $('#password, #c_password').prop('disabled', true).val('');
            $('#edit_password').show();
            $('#cancel_password, #update_password').hide();
            $('.error-message').text('');
        });

        $('#update_password').on('click', function(e) {
            e.preventDefault();
            let password = $('#password').val();
            let password_confirmation = $('#c_password').val();
            let hasError = false;

            $('.error-message').text('');

            if (password.length < 6) {
                $('#password_error').text('Password must be at least 6 characters.');
                hasError = true;
            }

            if (password !== password_confirmation) {
                $('#c_password_error').text('Passwords do not match.');
                hasError = true;
            }

            if (!hasError) {
                $.ajax({
                    url: '/update-password', // Change this to your actual URL
                    type: 'POST',
                    headers: {
                        'X-CSRF-TOKEN': csrfToken
                    },
                    data: {
                        password: password,
                        password_confirmation: password_confirmation
                    },
                    success: function(response) {
                        if (response.success) {
                            alert('Password updated successfully.');
                            $('#password, #c_password').prop('disabled', true).val('');
                            $('#edit_password').show();
                            $('#cancel_password, #update_password').hide();
                        } else {
                            if (response.errors) {
                                if (response.errors.password) {
                                    $('#password_error').text(response.errors.password[0]);
                                }
                                if (response.errors.password_confirmation) {
                                    $('#c_password_error').text(response.errors.password_confirmation[0]);
                                }
                            }
                        }
                    }
                });
            }
        });

        // ============JURISDICTION DETAILS UPDATE BUTTONS AND AJAX=================
        $('#editBtn').click(function(e) {
            e.preventDefault();
            $('#editBtn').hide();
            $('#cancel_jd, #update_jd').show();
            $('#jurisdictionForm input').prop('disabled', false);
        });

        $('#cancel_jd').click(function(e) {
            e.preventDefault();
            $('#editBtn').show();
            $('#cancel_jd, #update_jd').hide();
            $('#jurisdictionForm input').prop('disabled', true);
        });

        $('#update_jd').click(function(e) {
            e.preventDefault();
            $.ajax({
                url: '/updateJurisdictionDetails',
                type: 'POST',
                data: $('#jurisdictionForm').serialize(),
                headers: {
                    'X-CSRF-TOKEN': csrfToken
                },
                success: function(response) {
                    alert('Data updated successfully!');
                    $('#editBtn').show();
                    $('#cancel_jd, #update_jd').hide();
                    $('#jurisdictionForm input').prop('disabled', true);
                },
                error: function(xhr, status, error) {
                    alert('An error occurred while updating data.');
                }
            });
        });

        // ============ACCORDION=================
        var acc = document.getElementsByClassName("accordion");
        var i;

        for (i = 0; i < acc.length; i++) {
            acc[i].addEventListener("click", function() {
                this.classList.toggle("active");
                var panel = this.nextElementSibling;
                if (panel.style.maxHeight) {
                    panel.style.maxHeight = null;
                } else {
                    panel.style.maxHeight = panel.scrollHeight + "px";
                }
            });
        }
    });
</script>
@endsection