@extends('backend.layouts.app')

@section('title', 'Contact Details')

@section('content')
    <style>
        .input-group.error {
            border-color: red;
            /* or your desired color */
        }

        .error {
            position: absolute;
            top: 100%;
            /* adjust as needed */
            left: 0;
            color: red;
            font-size: 12px;
            margin-left: 10px;
        }
    </style>
    <div class="row page-titles">
        <div class="col-md-5 align-self-center">
            <h4 class="text-themecolor">Profile</h4>
        </div>
        <div class="col-md-7 align-self-center text-right">
            <div class="d-flex justify-content-end align-items-center">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="{{ route('dashboard') }}">Dashboard</a></li>
                    <li class="breadcrumb-item active">Profile</li>
                </ol>
            </div>
        </div>
    </div>

    <div class="col-lg-12 col-xlg-9 col-md-7" style="margin-top:2%">
        <div class="card">
            <!-- Nav tabs -->
            <ul class="nav nav-tabs customtab2" role="tablist">
                <li class="nav-item">
                    <a class="nav-link @if (request()->input('tab') == 1 || !request()->has('tab')) active @endif" data-toggle="tab" href="#profile"
                        role="tab">Profile</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link @if (request()->input('tab') == 2) active @endif" data-toggle="tab" href="#settings"
                        role="tab">Change Password</a>
                </li>
            </ul>
            <!-- Tab panes -->
            <div class="tab-content">
                <!-- Profile tab -->
                <div class="tab-pane @if (request()->input('tab') == 1 || !request()->has('tab')) active @endif" id="profile" role="tabpanel">
                    <div class="card-body">
                        <!-- Display Success or Error Message -->
                        @if (session('status'))
                            <div class="alert alert-success">
                                {{ session('status') }}
                            </div>
                        @elseif (session('error'))
                            <div class="alert alert-danger">
                                {{ session('error') }}
                            </div>
                        @endif

                        <form id="update-profile-form" method="post" action="{{ route('update_profile') }}"
                            enctype="multipart/form-data">
                            @csrf
                            @method('PUT')
                            <div class="form-group">
                                <label class="col-md-12">Full Name<span
                                        style="color: red;font-size:18px;"><b>*</b></span></label>
                                <div class="col-md-12">
                                    <input type="text" name="name" value="{{ old('name', $user->name) }}"
                                        class="form-control stop_first_space">
                                    @error('name')
                                        <div class="text-danger">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>







                            <div class="form-group">
                                <label class="col-md-12">Company Name<span
                                        style="color: red;font-size:18px;"><b>*</b></span></label>
                                <div class="col-md-12">
                                    <input type="text" name="company_name"
                                        value="{{ old('company_name', $user->company_name) }}"
                                        class="form-control stop_first_space">
                                    @error('company_name')
                                        <div class="text-danger">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-md-12">Trading Name<span
                                        style="color: red;font-size:18px;"><b>*</b></span></label>
                                <div class="col-md-12">
                                    <input type="text" name="trading_name"
                                        value="{{ old('trading_name', $user->trading_name) }}"
                                        class="form-control stop_first_space">
                                    @error('trading_name')
                                        <div class="text-danger">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-md-12">Company Reg Number<span
                                        style="color: red;font-size:18px;"><b>*</b></span></label>
                                <div class="col-md-12">
                                    <input type="text" name="reg_number"
                                        value="{{ old('reg_number', $user->reg_number) }}"
                                        class="form-control stop_first_space">
                                    @error('reg_number')
                                        <div class="text-danger">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-md-12">Vat Number<span
                                        style="color: red;font-size:18px;"><b>*</b></span></label>
                                <div class="col-md-12">
                                    <input type="text" name="vat_number"
                                        value="{{ old('vat_number', $user->vat_number) }}"
                                        class="form-control stop_first_space">
                                    @error('vat_number')
                                        <div class="text-danger">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-md-12">Landline<span
                                        style="color: red;font-size:18px;"><b>*</b></span></label>
                                <div class="col-md-12">
                                    <input type="text" name="landline" value="{{ old('landline', $user->landline) }}"
                                        class="form-control stop_first_space">
                                    @error('landline')
                                        <div class="text-danger">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>






                            <input type="hidden" name="tab" value="1">
                            <div class="form-group">
                                <label for="example-email" class="col-md-12">Email</label>
                                <div class="col-md-12">
                                    <input type="email" name="email" value="{{ old('email', $user->email) }}"
                                        class="form-control stop_first_space" id="example-email" readonly>
                                    @error('email')
                                        <div class="text-danger">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-md-12">Phone No<span
                                        style="color: red;font-size:18px;"><b>*</b></span></label>
                                <div class="col-md-12">
                                    <input type="text" name="mobile" value="{{ old('mobile', $user->mobile) }}"
                                        class="form-control stop_first_space">
                                    @error('mobile')
                                        <div class="text-danger">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-md-12">Profile Image</label>
                                <div class="col-md-12">
                                    <input type="file" name="profile_image" class="form-control">
                                    @error('profile_image')
                                        <div class="text-danger">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="col-sm-12">
                                    <button class="btn btn-success" id="submitButton" type="submit">Update
                                        Profile</button>
                                </div>
                            </div>
                        </form>

                    </div>
                </div>

                <!-- Settings tab -->
                <div class="tab-pane @if (request()->input('tab') == 2) active @endif" id="settings" role="tabpanel">
                    <div class="card-body">
                        <!-- Display Success or Error Message -->
                        @if (session('status'))
                            <div class="alert alert-success">
                                {{ session('status') }}
                            </div>
                        @elseif (session('error'))
                            <div class="alert alert-danger">
                                {{ session('error') }}
                            </div>
                        @endif

                        <form id="change-password-form" method="POST" action="{{ route('change_password') }}">
                            @csrf
                            @method('PUT')
                            <div class="form-group">
                                <label class="col-md-12">Current Password<span
                                        style="color: red;font-size:18px;"><b>*</b></span></label>
                                <div class="col-md-12 input-group">
                                    <input type="password" name="currentpassword" placeholder="Current Password"
                                        class="form-control form-control-line" id="current-password">
                                    <span class="input-group-text cursor-pointer" id="toggleCurrentPassword">
                                        <i class="fa fa-eye-slash" id="eye-current-password"></i>
                                    </span>

                                    @error('currentpassword')
                                        <div class="text-danger">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-md-12">New Password<span
                                        style="color: red;font-size:18px;"><b>*</b></span></label>
                                <div class="col-md-12 input-group">
                                    <input type="password" name="newpassword" placeholder="New Password"
                                        class="form-control form-control-line" id="newpassword">
                                    <span class="input-group-text cursor-pointer" id="toggleNewPassword">
                                        <i class="fa fa-eye-slash" id="eye-new-password"></i>
                                    </span>
                                    @error('newpassword')
                                        <div class="text-danger">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-md-12">Confirm New Password<span
                                        style="color: red;font-size:18px;"><b>*</b></span></label>
                                <div class="col-md-12 input-group">
                                    <input type="password" name="newpassword_confirmation"
                                        placeholder="Confirm New Password" id="confirm-password"
                                        class="form-control form-control-line">
                                    <span class="input-group-text cursor-pointer" id="toggleConfirmPassword">
                                        <i class="fa fa-eye-slash" id="eye-confirm-password"></i>
                                    </span>
                                    @error('newpassword_confirmation')
                                        <div class="text-danger">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <input type="hidden" name="tab" value="2">
                            <div class="form-group">
                                <div class="col-sm-12">
                                    <button class="btn btn-success" type="submit">Change Password</button>
                                </div>
                            </div>
                        </form>

                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
<!-- <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.19.5/jquery.validate.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.19.5/additional-methods.min.js"></script> -->

<script>
    document.addEventListener('DOMContentLoaded', function() {

        // Existing validation code...

        // Toggle password visibility
        const togglePasswordVisibility = (toggleButton, passwordField, eyeIcon) => {
            $(toggleButton).on('click', function() {
                const fieldType = $(passwordField).attr('type') === 'password' ? 'text' :
                    'password';
                $(passwordField).attr('type', fieldType);
                $(eyeIcon).toggleClass('fa-eye fa-eye-slash');
            });
        };

        togglePasswordVisibility('#toggleCurrentPassword', '#current-password', '#eye-current-password');
        togglePasswordVisibility('#toggleNewPassword', '#newpassword', '#eye-new-password');
        togglePasswordVisibility('#toggleConfirmPassword', '#confirm-password', '#eye-confirm-password');
        // Define custom validation methods if needed
        $.validator.addMethod("noOnlySpaces", function(value, element) {
            return $.trim(value).length > 0;
        }, "Spaces are not allowed.");
        const form = $('#update-profile-form');
        // Custom method for regex validation
        $.validator.addMethod("regex", function(value, element, regexp) {
            var re = new RegExp(regexp);
            return this.optional(element) || re.test(value);
        });

        $.validator.addMethod("validateFile", function(value, element) {
            // Allowed file extensions for images
            var fileExtension = ['jpg', 'jpeg', 'png'];

            // Check if a file is selected
            if (element.files && element.files.length > 0) {
                // Extract the file extension from the selected file
                var file = element.files[0];
                var extension = file.name.split('.').pop().toLowerCase(); // Get the file extension

                // Check if the extension is in the allowed list
                return ($.inArray(extension, fileExtension) != -1);
            }
            return true; // If no file is selected, allow it (optional)
        }, "Please select a valid image file (JPG, JPEG, or PNG are allowed)");


        $.validator.addMethod("strongPassword", function(value, element) {
                return /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$/.test(value);
            },
            "Password must be at least 8 characters long and include one uppercase letter, one lowercase letter, one number, and one special character."
        );
        // Initialize jQuery Validation for the profile update form
        // Initialize jQuery Validation
        form.validate({
            rules: {
                name: {
                    required: true,
                    minlength: 5,
                    maxlength: 50,
                    noOnlySpaces: true
                },
                company_name: {
                    required: true,
                    minlength: 2,
                    maxlength: 50,
                    noOnlySpaces: true
                },
                trading_name: {
                    required: true,
                    minlength: 2,
                    maxlength: 50,
                    noOnlySpaces: true
                },
                reg_number: {
                    required: true,
                    minlength: 2,
                    maxlength: 50,
                    noOnlySpaces: true
                },
                vat_number: {
                    required: true,
                    minlength: 2,
                    maxlength: 50,
                    noOnlySpaces: true
                },
                landline: {
                    required: true,
                    minlength: 2,
                    noOnlySpaces: true,
                    maxlength: 50
                },
                mobile: {
                    required: true,
                    noOnlySpaces: true,
                    minlength: 11,
                    maxlength: 11
                },
                profile_image: {
                    validateFile: true,
                }

            },

            messages: {
                name: {
                    required: "Please enter your full name.",
                    minlength: "Name must be at least 5 characters long."
                },
                mobile: {
                    required: "Please enter your phone number.",
                    maxlength: "Mobile number must be exactly 11 digits."
                },
            },
            errorClass: "error",
            highlight: function(element) {
                $(element).addClass('is-invalid').removeClass('is-valid');
            },
            unhighlight: function(element) {
                $(element).removeClass('is-invalid');
                // .addClass('is-valid');
            },
            submitHandler: function(form) {
                var $submitButton = $('#submitButton');
                $submitButton.prop('disabled', true);
                form.submit();
            }
        });



        // Initialize jQuery Validation for the password change form
        $('#change-password-form').validate({
            rules: {
                currentpassword: {
                    required: true,
                    minlength: 8,
                    noOnlySpaces: true,
                },
                newpassword: {
                    required: true,
                    minlength: 8,
                    noOnlySpaces: true,
                    strongPassword: true,
                },
                newpassword_confirmation: {
                    required: true,
                    minlength: 8,
                    noOnlySpaces: true,
                    equalTo: "#newpassword" // Ensure this matches the new password field
                }
            },
            messages: {
                currentpassword: {
                    required: "Please enter your current password.",
                    minlength: "Your password must be at least 8 characters long."
                },
                newpassword: {
                    required: "Please enter a new password.",
                    minlength: "Your password must be at least 8 characters long.",
                },
                newpassword_confirmation: {
                    required: "Please confirm your new password.",
                    minlength: "Your password must be at least 8 characters long.",
                    equalTo: "New password and confirm password do not match."
                }
            },
            errorClass: "error",
            highlight: function(element) {
                $(element).addClass('is-invalid').removeClass('is-valid');
            },
            unhighlight: function(element) {
                $(element).removeClass('is-invalid');
                // .addClass('is-valid');
            },
            submitHandler: function(form) {
                // Form is valid, submit the form
                form.submit();
            }
        });


        $('#update-profile-form').on('submit', function(event) {
            if (!$(this).valid()) { // Check if form is valid
                event.preventDefault(); // Prevent submission if not valid
            }
        });

    });
</script>
