@extends('backend.template.layouts.template-base')
@section('title', 'Profile')
@section('content')
    <section>
        <div class=" page-head-title mb-4">
            <div class=" profile d-flex align-items-center justify-content-between">
                <div>
                    <a href="{{ route('backend.template.product-list.index') }}" class="d-inline-block">
                        <h2 class="text-title fw-semibold mb-0 d-flex align-items-center"><i
                                class="ri-arrow-left-s-line fs-1 me-2"></i>Profile
                        </h2>
                    </a>
                </div>
                <div>
                    <button type="button" class=" mt-2 button-green p-2 px-3 view-btn-all">
                        Update Changes

                    </button>

                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-12">
                <div>

                    <!-- Success Message -->
                    @if (session('success'))
                        <div class="alert alert-success">
                            {{ session('success') }}
                        </div>
                    @endif

                    <!-- Error Messages -->
                    @if ($errors->any())
                        <div class="alert alert-danger">
                            <ul>
                                @foreach ($errors->all() as $error)
                                    <li>{{ $error }}</li>
                                @endforeach
                            </ul>
                        </div>
                    @endif
                    <form action="{{ route('backend.template.profile.update', $user->id) }}" method="POST"
                        id="form-validate" enctype="multipart/form-data">
                        @csrf
                        <div class="profile-card  d-flex gap-3 align-items-start">

                            <!-- Left Card -->
                            <div class="card flex-shrink-0" style="width: 280px;">
                                <div class="card-body d-flex flex-column justify-content-center align-items-center">
                                    <svg width="150" height="150" viewBox="0 0 200 200" fill="none"
                                        xmlns="http://www.w3.org/2000/svg">
                                        <rect width="200" height="200" rx="100" fill="#D9D9D9" />
                                        <path
                                            d="M87.1192 101.003C88.0316 99.6073 89.9069 99.2235 91.2942 100.148L101.219 106.765C102.733 107.774 104.789 107.215 105.583 105.578L116.275 83.5255C117.553 80.8897 121.463 81.46 121.935 84.3509L128.003 121.517C128.301 123.342 126.892 125 125.042 125H76.9746C74.5906 125 73.1591 122.354 74.4637 120.358L87.1192 101.003Z"
                                            fill="white" />
                                        <circle cx="100" cy="88.2655" r="6.12245" fill="white" />
                                    </svg>
                                    <button type="button" class=" mt-2 button-green p-2 px-3 view-btn-all">
                                        Upload Profile Image

                                    </button>

                                </div>
                            </div>

                            <!-- Right Card -->
                            <div class="card flex-grow-1">
                                <div class="card-body2">

                                    <div class="row gy-4 ">

                                        <div class="col-xxl-3 col-md-6">
                                            <div>
                                                <label class="form-label">User ID</label>
                                                <input type="text" class="form-control" name="name"
                                                    placeholder="Enter the Name" value="{{ old('name', $user->name) }}">
                                            </div>
                                        </div>

                                        <div class="col-xxl-3 col-md-6">
                                            <div>
                                                <label class="form-label">User Name</label>
                                                <input type="text" class="form-control" name="name"
                                                    placeholder="Enter the Name" value="{{ old('name', $user->name) }}">
                                            </div>
                                        </div>

                                        <div class="col-xxl-3 col-md-6">
                                            <div>
                                                <label class="form-label">Email Address</label>
                                                <input type="text" class="form-control" name="email"
                                                    placeholder="Enter the Email" value="{{ old('email', $user->email) }}">
                                            </div>
                                        </div>

                                        <div class="col-xxl-3 col-md-6">
                                            <div>
                                                <label class="form-label">Contact Number</label>
                                                <input type="text" class="form-control" name="mobile"
                                                    placeholder="Phone Number" value="{{ old('mobile', $user->mobile) }}">
                                            </div>
                                        </div>

                                    </div>
                                    <div class="change-password-section">

                                        <div class="d-flex gap-3 align-items-start justify-content-between">
                                            <div class="leftp">
                                                <h2>Change Password</h2>
                                                <p>You can create new password by entering present password.</p>
                                            </div>

                                            <div class="rightp d-flex mt-2">
                                                <a href="{{ route('backend.template.password.change') }}">
                                                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none"
                                                        xmlns="http://www.w3.org/2000/svg">
                                                        <path fill-rule="evenodd" clip-rule="evenodd"
                                                            d="M14.5862 12.485L7.51521 19.556L8.92921 20.97L16.7072 13.192C16.8947 13.0045 17 12.7502 17 12.485C17 12.2198 16.8947 11.9655 16.7072 11.778L8.92921 4L7.51521 5.414L14.5862 12.485Z"
                                                            fill="#0AA437" />
                                                    </svg>
                                                </a>

                                            </div>
                                        </div>
                                    </div>

                                </div>
                            </div>

                        </div>

                    </form>
                </div>
            </div>
            <!--end col-->
        </div>
    </section>
@endsection

@section('scripts')
    <script>
        $(document).ready(function() {
            $("#form-validate").validate({
                rules: {
                    name: {
                        required: true,
                    },
                    email: {
                        required: true,
                    },
                    mobile: {
                        required: true,
                        maxlength: 10,
                        minlength: 10,
                        digit: true,
                    },
                },

                messages: {},
                highlight: function(element) {
                    $(element).closest('.form-group').addClass('has-error');
                },
                unhighlight: function(element) {
                    $(element).closest('.form-group').removeClass('has-error');
                }
            });
        });
    </script>
    <script>
        function toggleNewPassword() {

            const input = document.getElementById('newPassword');
            const icon = document.getElementById('newPasswordIcon');

            if (input.type === 'password') {

                input.type = 'text';

                icon.classList.remove('ri-eye-off-line');
                icon.classList.add('ri-eye-line');

            } else {

                input.type = 'password';

                icon.classList.remove('ri-eye-line');
                icon.classList.add('ri-eye-off-line');
            }
        }

        function toggleConfirmPassword() {

            const input = document.getElementById('confirmPassword');
            const icon = document.getElementById('confirmPasswordIcon');

            if (input.type === 'password') {

                input.type = 'text';

                icon.classList.remove('ri-eye-off-line');
                icon.classList.add('ri-eye-line');

            } else {

                input.type = 'password';

                icon.classList.remove('ri-eye-line');
                icon.classList.add('ri-eye-off-line');
            }
        }
    </script>
@endsection