@extends('admin.layouts.app')

@section('content')
<div class="container-fluid py-4">
    <nav aria-label="breadcrumb">
        <ol class="breadcrumb bg-transparent mb-0 pb-0 px-0 me-sm-6 me-5">
            <li class="breadcrumb-item text-sm"><a class="opacity-5 text-dark" href="{{ route('admin.dashboard') }}">Dashboard</a>
            </li>
            <li class="breadcrumb-item text-sm text-dark active font-weight-bolder" aria-current="page">
                Profile</li>
        </ol>
    </nav>
    <div class="row">
        <div class="col-12">
            <div class="row justify-content-between">
                <div class="col-md-3">
                    {{-- <a class="btn bg-gradient-info mb-3" href="./dashboard.html">Back</a> --}}
                </div>
            </div>
        </div>
    </div>
    <div class="row mt-4">
        <div class="col-12">
            <form role="form" method="POST" action="{{ route('admin.profile.update') }}" id="profileForm">
                @csrf
                <input type="hidden" name="admin_id" value="{{ auth('admin')->user()->id }}">
                <div class="row justify-content-center">
                    <div class="col-md-8 col-sm-12">
                        <div class="card pt-4 mb-4">
                            <div class="card-body pt-0 pb-2">
                                {{-- <div class="row">
                                    <div class="col-md-6">
                                        <label>Full Name <span class="requered-mark">*</span></label>
                                        <div class="mb-3">
                                            <input type="text" class="form-control" id="full_name" name="full_name"
                                                placeholder="Ankush" aria-label="Full Name" value="{{ @$admin->full_name }}"
                                                required>
                                            <div id="full_name_error" class="text-danger"></div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <label>Email <span class="requered-mark">*</span></label>
                                        <div class="mb-3">
                                            <input type="email" class="form-control" name="email" id="email"
                                                placeholder="yourname@domain.com" aria-label="Email"
                                                aria-describedby="username-addon" value="{{ @$admin->email }}" required>
                                            <div id="email_error" class="text-danger"></div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="row">
                                            <div class="col-md-12">
                                                <label>Phone <span class="requered-mark">*</span></label>
                                                <div class="mb-3">
                                                    <input type="tel" class="form-control" id="phone" name="phone"
                                                        placeholder="9805363015" aria-label="Phone"
                                                        aria-describedby="phone-addon" value="{{ @$admin->phone }}">
                                                    <div id="phone_error" class="text-danger"></div>
                                                </div>
                                            </div>
                                            <div class="col-md-12">
                                                <label>Pincode <span class="requered-mark">*</span></label>
                                                <div class="mb-3">
                                                    <input type="number" name="pincode" id="pincode" class="form-control"
                                                        placeholder="176001" aria-label="Pincode"
                                                        aria-describedby="pincode-addon" value="{{ @$admin->pincode }}">
                                                    <div id="pincode_error" class="text-danger"></div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <label>Address line 1</label>
                                        <div class="mb-3">
                                            <textarea name="address_line_first" id="address" style="height: 128px;"
                                                class="form-control" placeholder="Address line 1">{{ @$admin->address_line_first }}</textarea>
                                            <div id="address_error" class="text-danger"></div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <label>Password</label>
                                        <div class="mb-3">
                                            <input type="password" id="password" name="password" class="form-control" autocomplete="new-password">
                                            <div id="password_error" class="text-danger"></div>
                                        </div>
                                        <input type="hidden" name="old_password" value="{{ @$admin->password }}"
                                            id="old_password">
                                    </div>
                                    <div class="col-12">
                                        <button type="button" class="btn bg-gradient-info mb-3" style="float: right;"
                                            id="saveButton">Save</button>
                                    </div>
                                </div> --}}

                                <div class="row justify-content-center">
                                    <div class="col-md-9 mb-3">
                                        <div class="row align-items-center">
                                            <div class="col-md-3">
                                                <label>Full Name <span class="requered-mark">*</span></label>
                                            </div>
                                            <div class="col-md-9">
                                                <div class="">
                                                    <input type="text" class="form-control" id="full_name" name="full_name"
                                                        placeholder="Ankush" aria-label="Full Name" value="{{ @$admin->full_name }}"
                                                        required>
                                                    <div id="full_name_error" class="text-danger"></div>
                                                </div>
                                            </div>
                                        </div>
                                        
                                        
                                    </div>
                                    <div class="col-md-9 mb-3">
                                        <div class="row align-items-center">
                                            <div class="col-md-3">
                                                <label>Email <span class="requered-mark">*</span></label>
                                            </div>
                                            <div class="col-md-9">
                                                <div class="">
                                                    <input type="email" class="form-control" name="email" id="email"
                                                        placeholder="yourname@domain.com" aria-label="Email"
                                                        aria-describedby="username-addon" value="{{ @$admin->email }}" required>
                                                    <div id="email_error" class="text-danger"></div>
                                                </div>
                                            </div>
                                        </div>
                                        
                                        
                                    </div>
                                    <div class="col-md-9 mb-3">
                                        <div class="row align-items-center">
                                            <div class="col-md-3"><label>Phone <span class="requered-mark">*</span></label></div>
                                            <div class="col-md-9">
                                                <div class="">
                                                    <input type="tel" class="form-control" id="phone" name="phone"
                                                        placeholder="9805363015" aria-label="Phone"
                                                        aria-describedby="phone-addon" value="{{ @$admin->phone }}">
                                                    <div id="phone_error" class="text-danger"></div>
                                                </div>
                                            </div>
                                        </div>
                                        
                                        
                                    </div>
                                    <div class="col-md-9 mb-3">
                                        <div class="row align-items-center">
                                            <div class="col-md-3"><label>Pincode <span class="requered-mark">*</span></label></div>
                                            <div class="col-md-9">
                                                <div class="">
                                                    <input type="number" name="pincode" id="pincode" class="form-control"
                                                        placeholder="176001" aria-label="Pincode"
                                                        aria-describedby="pincode-addon" value="{{ @$admin->pincode }}">
                                                    <div id="pincode_error" class="text-danger"></div>
                                                </div>
                                            </div>
                                        </div>
                                        
                                        
                                    </div>
                                    <div class="col-md-9 mb-3">
                                        <div class="row align-items-center">
                                            <div class="col-md-3"><label>Address line 1</label></div>
                                            <div class="col-md-9">
                                                <div class="">
                                                <textarea name="address_line_first" id="address" style="height: 128px;"
                                                    class="form-control" placeholder="Address line 1">{{ @$admin->address_line_first }}</textarea>
                                                <div id="address_error" class="text-danger"></div>
                                            </div></div>
                                        </div>
                                        
                                        
                                    </div>
                                    <div class="col-md-9 mb-3">
                                        <div class="row align-items-center">
                                            <div class="col-md-3"><label>Password</label></div>
                                            <div class="col-md-9">
                                                <div class="">
                                                    <input type="password" id="password" name="password" class="form-control" autocomplete="new-password">
                                                    <div id="password_error" class="text-danger"></div>
                                                </div>
                                                <input type="hidden" name="old_password" value="{{ @$admin->password }}"
                                                    id="old_password">
                                            </div>
                                        </div>
                                        
                                        
                                    </div>
                                    <div class="row justify-content-center">
                                        <button type="button" class="btn bg-gradient-info mb-3" style="max-width: 150px;"
                                            id="saveButton">Save</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
        <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-body pb-0">
                        <h1 class="modal-title fs-5" id="exampleModalLabel">Information</h1>
                        <p><span style="color: #198754;">Information Updated Successfully.</span>
                        </p>
                    </div>
                    <div class="modal-footer border-0 pt-0">
                        <!-- <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                  <button type="button" class="btn btn-primary">Save changes</button> -->
                        <a class="btn bg-gradient-info mb-0 mr-2 btn-sm" href="{{ route('admin.dashboard') }}">Ok</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    $(document).ready(function () {
        $("#saveButton").click(function () {
            // Remove any existing error messages
            $(".text-danger").html('');

            // Perform client-side validation
            var isValid = true;

            // Validate Full Name
            var fullName = $("#full_name").val();
            if (!fullName) {
                $("#full_name_error").text("Full Name is required.");
                isValid = false;
            }

            // Validate Email (add email validation logic here)
            var email = $("#email").val();
            var emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
            if (!email) {
                $("#email_error").text("Email is required.");
                isValid = false;
            } else if (!emailPattern.test(email)) {
                $("#email_error").text("Please enter a valid email address.");
                isValid = false;
            }

            // Validate Phone (add phone validation logic here)
            var phone = $("#phone").val();
            if (!phone) {
                $("#phone_error").text("Phone number is required.");
                isValid = false;
            } else if (!/^\d{10}$/.test(phone)) {
                $("#phone_error").text("Phone number must be 10 digits.");
                isValid = false;
            }

            // Validate Pincode (add pincode validation logic here)
            var pincode = $("#pincode").val();
            if (pincode && !/^\d{6}$/.test(pincode)) {
                $("#pincode_error").text("Pincode must be 6 digits.");
                isValid = false;
            }

            // Validate Address Line 1 (add address validation logic here)
            // var address = $("#address").val();
            // if (!address) {
            //     $("#address_error").text("Address is required.");
            //     isValid = false;
            // }

            // Validate Password (add password validation logic here)
            var password = $("#password").val();
            var old_password = $("#old_password").val();

            // Check if the password is being updated (not in case of editing profile without changing password)
            if (old_password == null) {
                if (!password) {
                    $("#password_error").text("Password is required.");
                    isValid = false;
                } else if (
                    !/^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[^a-zA-Z\d]).{6,30}$/.test(password)
                ) {
                    $("#password_error").text(
                        "Password must be between 6 and 30 characters and include at least one uppercase letter, one lowercase letter, one symbol, and one number."
                    );
                    isValid = false;
                }
            }

            if (password != null) {
                if (!password) {
                    isValid = true;
                } else if (
                    !/^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[^a-zA-Z\d]).{6,30}$/.test(password)
                ) {
                    $("#password_error").text(
                        "Password must be between 6 and 30 characters and include at least one uppercase letter, one lowercase letter, one symbol, and one number."
                    );
                    isValid = false;
                }
            }

            if (isValid) {
                // If the form is valid, proceed with form submission
                var formData = $("#profileForm").serialize();

                // Send an AJAX POST request
                $.ajax({
                    type: "POST",
                    url: "{{ route('admin.profile.update') }}",
                    data: formData,
                    success: function (response) {
                        // Handle the response here (e.g., show a success message)
                        console.log(response);

                        // Check if the response indicates a successful update
                        if (response.success) {
                            // Show the modal
                            $("#exampleModal").modal("show");
                        }
                    },
                    error: function (xhr, status, error) {
                        // Handle errors here
                        console.error(xhr.responseText);
                    }
                });
            }
        });
    });
</script>

@endsection