@extends('admin.layout.master')
@section('title', 'My Profile')
@section('content')
    <div class="d-flex flex-column flex-column-fluid">
        <div id="kt_app_toolbar" class="app-toolbar py-3 py-lg-6">
            <div id="kt_app_toolbar_container" class="app-container container-xxl d-flex flex-stack">
                <div class="page-title d-flex flex-column justify-content-center flex-wrap me-3">
                    <ul class="breadcrumb breadcrumb-separatorless fw-semibold fs-7 my-0 pt-1">
                        <li class="breadcrumb-item text-muted">
                            <a href="{{ route('admin_dashboard') }}" class="text-muted text-hover-primary">Dashboard</a>
                        </li>
                        <li class="breadcrumb-item">
                            <span class="bullet bg-gray-400 w-5px h-2px"></span>
                        </li>
                        <li class="breadcrumb-item text-muted">My Profile</li>
                    </ul>
                </div>
            </div>
        </div>
        <div id="kt_app_content" class="app-content flex-column-fluid">
            <div id="kt_app_content_container" class="app-container container-xxl index-container">
                <div class="d-flex flex-column flex-row-fluid gap-7 gap-lg-10">
                    <ul class="nav nav-custom nav-tabs nav-line-tabs nav-line-tabs-2x border-0 fs-4 fw-semibold mb-n2">
                        <li class="nav-item">
                            <a class="nav-link text-active-primary pb-4 @if (session('tab') == 'my_profile') active @elseif (!session('tab')) active @endif"
                                data-bs-toggle="tab" href="#kt_superadmin_profile">My Profile</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link text-active-primary pb-4 @if (session('tab') == 'change_password') active @endif"
                                data-bs-toggle="tab" href="#kt_superadmin_password">Change Password</a>
                        </li>
                    </ul>
                    <div class="tab-content">
                        <div class="tab-pane fade  @if (session('tab') == 'my_profile') show active @elseif (!session('tab')) show  active @endif"
                            id="kt_superadmin_profile" role="tab-panel">
                            <form method="post" id="personal_details" action="{{ route('profile_personal_info') }}"
                                enctype="multipart/form-data">
                                @csrf
                                <div class="d-flex">
                                    <div class="d-flex flex-column gap-7 gap-lg-10 mb-7 me-lg-10">
                                        <div class="card card-flush py-4">
                                            <div class="card-header">
                                                <div class="card-title">
                                                    <h2>Profile Image</h2>
                                                </div>
                                            </div>
                                            <div class="card-body text-center pt-0">
                                                <style>
                                                    .image-input-placeholder {
                                                        background-image: url({{ asset('assets/images/svg/files/blank-image.svg') }});
                                                    }

                                                    [data-theme="dark"] .image-input-placeholder {
                                                        background-image: url({{ asset('assets/images/svg/files/blank-image-dark.svg') }});
                                                    }
                                                </style>
                                                <div class="image-input image-input-empty image-input-outline image-input-placeholder mb-3"
                                                    data-kt-image-input="true">
                                                    <div class="image-input-wrapper w-150px h-150px" data-image_type="profile_image_"
                                                    style="background-repeat: no-repeat; background-size: 140px; background-position: center;
                                                    @if(Auth::user()->profile_image) background-image: url({{asset("backend/images/user_profile/".Auth::user()->profile_image)}}) @endif
                                                    "></div>

                                                    <label
                                                        class="btn btn-icon btn-circle btn-active-color-primary w-25px h-25px bg-body shadow"
                                                        data-kt-image-input-action="change" data-bs-toggle="tooltip"
                                                        title="Upload">
                                                        <i class="bi bi-pencil-fill fs-7"></i>
                                                        <input type="file" name="profile_image" id="profile_image" data-name="profile_image_"  onChange="image_validation(this,event);"/>
                                                        <input type="hidden" name="avatar_remove" />
                                                    </label>

                                                    <span
                                                        class="btn btn-icon btn-circle btn-active-color-primary w-25px h-25px bg-body shadow"
                                                        data-kt-image-input-action="cancel" data-bs-toggle="tooltip"
                                                        title="Cancel">
                                                        <i class="bi bi-x fs-2"></i>
                                                    </span>
                                                    <span
                                                        class="btn btn-icon btn-circle btn-active-color-primary w-25px h-25px bg-body shadow"
                                                        data-kt-image-input-action="remove" data-bs-toggle="tooltip"
                                                        title="Remove">
                                                        <i class="bi bi-x fs-2"></i>
                                                    </span>
                                                </div>
                                                @if ($errors->has('profile_image'))
                                                    <p class="text-danger">{{ $errors->first('profile_image') }}</p>
                                                @endif
                                                <div class="text-muted fs-7">Set the profile image. Only *.png, *.jpg and
                                                    *.jpeg image files are accepted</div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="d-flex flex-column gap-7 gap-lg-10 w-100">
                                        <div class="card">
                                            <div class="card-header mb-4">
                                                <div class="card-title">
                                                    <h2>My Profile</h2>
                                                </div>
                                            </div>
                                            <div class="card-body pt-0">
                                                <div class="mb-5 fv-row">
                                                    <label class="required form-label">First Name</label>
                                                    <input type="text" autocomplete="off" name="first_name"
                                                        value="{{ Auth::user()->first_name }}" class="form-control"
                                                        placeholder="First name" data-error="#first_name_error" />
                                                    <span class="error" id="first_name_error"></span>
                                                    @if ($errors->has('first_name'))
                                                    <br/> <span class="text-danger">{{ $errors->first('first_name') }}</span>
                                                    @endif
                                                </div>
                                                <div class="mb-5 fv-row">
                                                    <label class="required form-label">Last Name</label>
                                                    <input type="text" autocomplete="off" name="last_name"
                                                        value="{{ Auth::user()->last_name }}" class="form-control"
                                                        placeholder="Last name" data-error="#last_name_error" />
                                                    <span class="error" id="last_name_error"></span>
                                                    @if ($errors->has('last_name'))
                                                    <br/> <span class="text-danger">{{ $errors->first('last_name') }}</span>
                                                    @endif
                                                </div>
                                                <div class="mb-5 fv-row">
                                                    <label class="required form-label">Email</label>
                                                    <input type="email" autocomplete="off" name="email"
                                                        value="{{ Auth::user()->email }}" class="form-control" disabled
                                                        placeholder="Email" />
                                                </div>
                                                <div class="mb-5 fv-row">
                                                    <label class="required form-label">Phone No.</label>
                                                    <input type="text" autocomplete="off" name="phone"
                                                        value="{{ Auth::user()->phone }}" class="form-control"
                                                        placeholder="Phone no." data-error="#phone_error"
                                                        oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');" />
                                                    <span class="error" id="phone_error"></span>
                                                    @if ($errors->has('phone'))
                                                    <br/><span class="text-danger">{{ $errors->first('phone') }}</span>
                                                    @endif
                                                </div>
                                                <div class="mb-5 fv-row">
                                                    <label class="required form-label">Address</label>
                                                    <input type="text" autocomplete="off" name="address" value="{{ Auth::user()->address }}" class="form-control" placeholder="Address" data-error="#address_error" />
                                                    <span class="error" id="address_error"></span>
                                                    @if ($errors->has('address'))
                                                    <br/> <span class="text-danger">{{ $errors->first('address') }}</span>
                                                    @endif
                                                </div>
                                                <div class="d-flex justify-content-end">
                                                    <button type="submit" id="ktadd_product_submit"
                                                        class="btn btn-primary me-3">
                                                        <span class="indicator-label">Update</span>
                                                    </button>
                                                    <a href="{{ route('admin_dashboard') }}" id="kt_ecommerce_add_product_cancel"
                                                        class="btn btn-light">Back</a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                        <div class="tab-pane fade  @if (session('tab') == 'change_password') show active @endif"
                            id="kt_superadmin_password" role="tab-panel">
                            <form method="post" id="change_password" action="{{ route('change_password') }}">
                                @csrf
                                <div class="d-flex flex-column gap-7 gap-lg-10 w-100">
                                    <div class="card">
                                        <div class="card-header mb-4">
                                            <div class="card-title">
                                                <h2>Change Password</h2>
                                            </div>
                                        </div>
                                        <div class="card-body pt-0">
                                            <div class="mb-5 fv-row">
                                                <div class="position-relative">
                                                <label class="required form-label">Old Password</label>
                                                <input type="password" name="old_password" class="form-control login_eyes password_feild"
                                                    placeholder="**********"  data-iconType="open" data-error="#old_password_error" />
                                                    <span id="icon_class" class="btn btn-sm btn-icon position-absolute translate-middle top-50 end-0 me-n2 mt-4">
                                                        <i class="bi bi-eye fs-4 change_icon" title="show"></i></span>

                                                </div>
                                                <span class="error" id="old_password_error"></span>
                                                @if ($errors->has('old_password'))
                                                    <span class="text-danger">{{ $errors->first('old_password') }}</span>
                                                @endif
                                            </div>
                                            <div class="mb-5 fv-row">
                                                <div class="position-relative">
                                                <label class="required form-label">New Password</label>
                                                <input type="password" name="new_password" id="new_password" class="form-control password_feild1 login_eyes"  data-iconType="open" placeholder="**********" data-error="#new_password_error" />
                                                <span id="icon_class1" class="btn btn-sm btn-icon position-absolute translate-middle top-50 end-0 me-n2 mt-4">
                                                    <i class="bi bi-eye fs-4 change_icon1" title="show"></i></span>
                                                </div>
                                                    <span class="error" id="new_password_error"></span>
                                                @if ($errors->has('new_password'))
                                                    <span class="text-danger">{{ $errors->first('new_password') }}</span>
                                                @endif
                                            </div>
                                            <div class="mb-5 fv-row">
                                                <div class="position-relative">
                                                <label class="required form-label">Confirm Password</label>
                                                <input type="password" name="confirm_new_password" class="form-control password_feild2 login_eyes"
                                                    placeholder="**********"  data-iconType="open" data-error="#confirm_new_password_error" />
                                                    <span id="icon_class2" class="btn btn-sm btn-icon position-absolute translate-middle top-50 end-0 me-n2 mt-4">
                                                     <i class="bi bi-eye fs-4 change_icon2" title="show"></i></span>
                                                </div>
                                                <span class="error" id="confirm_new_password_error"></span>
                                                @if ($errors->has('confirm_new_password'))
                                                    <span
                                                        class="text-danger">{{ $errors->first('confirm_new_password') }}</span>
                                                @endif
                                            </div>
                                            <div class="d-flex justify-content-end">
                                                <button type="submit" id="kt_ecommerceproduct_submit"
                                                    class="btn btn-primary me-3">
                                                    <span class="indicator-label">Submit</span>
                                                </button>
                                                <a href="{{ route('admin_dashboard') }}" id="kt_ecommerce_roduct_cancel"
                                                    class="btn btn-light">Back</a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                       
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@push('js')
    <script>
        $(document).on('click', '.change_icon', function(){
            if($('.password_feild').attr('data-iconType') == "open"){
                $('.password_feild').attr('type', "text");
                $('.password_feild').attr('data-iconType', 'close');
                $('#icon_class').html('<i class="bi bi-eye-slash fs-4 change_icon" title="hide"></i>');
            }else{
                $('.password_feild').attr('type', "password");
                $('.password_feild').attr('data-iconType', 'open');
                $('#icon_class').html('<i class="bi bi-eye fs-4 change_icon" title="show"></i>');
            }
        });

        $(document).on('click', '.change_icon1', function(){
            if($('.password_feild1').attr('data-iconType') == "open"){
                $('.password_feild1').attr('type', "text");
                $('.password_feild1').attr('data-iconType', 'close');
                $('#icon_class1').html('<i class="bi bi-eye-slash fs-4 change_icon1" title="hide"></i>');
            }else{
                $('.password_feild1').attr('type', "password");
                $('.password_feild1').attr('data-iconType', 'open');
                $('#icon_class1').html('<i class="bi bi-eye fs-4 change_icon1" title="show"></i>');
            }
        });

        $(document).on('click', '.change_icon2', function(){
            if($('.password_feild2').attr('data-iconType') == "open"){
                $('.password_feild2').attr('type', "text");
                $('.password_feild2').attr('data-iconType', 'close');
                $('#icon_class2').html('<i class="bi bi-eye-slash fs-4 change_icon2" title="hide"></i>');
            }else{
                $('.password_feild2').attr('type', "password");
                $('.password_feild2').attr('data-iconType', 'open');
                $('#icon_class2').html('<i class="bi bi-eye fs-4 change_icon2" title="show"></i>');
            }
        });

        $(document).ready(function() {
            jQuery.validator.addMethod("alphanumeric", function(value, element) {
                    return this.optional(element) ||
                        /^(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*[!@#$?%^&*])[a-zA-Z0-9!?@#<>."':;,-/_~`$^%&*]+$/i.test(value);
                },
                "Must contain at least one number and one uppercase and lowercase letter, and one symbol and  at least 8 or more characters"
            );

            $("#personal_details").validate({
                errorPlacement: function(error, element) {
                    var placement = $(element).data("error");
                    if (placement) {
                        $(placement).append(error)
                    } else {
                        error.insertAfter(element);
                    }
                },
                rules: {
                    first_name: {
                        required: true,
                        maxlength: 15
                    },
                    last_name: {
                        required: true,
                        maxlength: 15
                    },
                    phone: {
                        required: true,
                        minlength: 8,
                        maxlength: 11
                    },
                    address: {
                        required: true,
                        maxlength: 100,
                    },
                },
                messages: {
                    first_name: {
                        required: "First name field is required.",
                        maxlength: 'First name must not be greater than 15 characters.',
                    },
                    last_name: {
                        required: "Last name field is required.",
                        maxlength: 'Last name must not be greater than 15 characters.',
                    },
                    phone: {
                        required: "Phone field is required.",
                        minlength: 'Phone number must not be less than 8 digits.',
                        maxlength: 'Phone number must not be greater than 11 digits.',
                    },
                    address: {
                        required: "Address field is required.",
                        maxlength: 'Address must not be greater than 100 characters.',
                    },
                },
                submitHandler: function(form) {
                    document.getElementById('ktadd_product_submit').disabled = true;
                    setTimeout(() => {
                        form.submit();  
                    }, 200);
                },
                showErrors: function(errorMap, errorList) {
                    this.defaultShowErrors();
                    $('input').removeClass('error');
                },
            });

            $("#change_password").validate({
                errorPlacement: function(error, element) {
                    var placement = $(element).data("error");
                    if (placement) {
                        $(placement).append(error)
                    } else {
                        error.insertAfter(element);
                    }
                },
                rules: {
                    old_password: {
                        required: true,
                        minlength: 8,
                        alphanumeric: true
                    },
                    new_password: {
                        required: true,
                        minlength: 8,
                        alphanumeric: true
                    },
                    confirm_new_password: {
                        required: true,
                        minlength: 8,
                        equalTo: "#new_password"
                    },
                },
                messages: {
                    old_password: {
                        required: "Old password field is required.",
                        minlength: 'Old Password must be at least 8 characters long.',
                    },
                    new_password: {
                        required: "New password field is required.",
                        minlength: 'New password must be at least 8 characters long.',
                    },
                    confirm_new_password: {
                        required: "Confirm password field is required.",
                        minlength: 'Confirm password must be at least 8 characters long.',
                        equalTo: "Confirm password does not match."
                    },
                },
                submitHandler: function(form) {
                    document.getElementById('kt_ecommerceproduct_submit').disabled = true;
                    setTimeout(() => {
                        form.submit();  
                    }, 200);
                }
            });
       });

        function image_validation(tag, event) {
            const fileTypeAccepted = ['image/png', 'image/jpeg', 'image/jpg'];
            
            const fileSize = tag.files[0].size / 1024 / 1024;
            const fileType = tag.files[0].type;
            
            let image_name = $(tag).attr("data-name");
            if (fileSize > 5) {
                $("#profile_image").val('');
                $(`div[data-image_type="${image_name}"]`).css('background-image', '');
                Swal.fire({
                    icon: 'warning',
                    title: 'Oops...',
                    text: 'Image size should not be greater than 5MB.',
                });
            }else if(!fileTypeAccepted.includes(fileType) ){
                $("#profile_image").val('');
                $(`div[data-image_type="${image_name}"]`).css('background-image', '');
                Swal.fire({
                    icon: 'warning',
                    title: 'Oops...',
                    text: 'Only .png .jpeg .jpg file format accepted.',
                });
            }else {
                return true;
            }
        }

    </script>
@endpush