@extends('template.layouts.template-base')
@section('title', 'Profile')

@section('styles')
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css" />
    <script src="https://cdn.ckeditor.com/4.21.0/standard/ckeditor.js"></script>
    <script>
        CKEDITOR.config.removePlugins = 'notification,notificationaggregator';
    </script>
    <style>
        .page-content {
            background-color: #F0F4F8 !important;
            padding: 80px 10px;
        }
    </style>
@endsection

@section('content')
    <section class="product-page add-service master-vehicle-page profile-main-page">
        <!-- Header -->
        <div class="page-header">
            <div class="container-fluid">
                <div class="row align-items-center">
                    <div class="col">
                        <div class="page-title">
                            <span>Profile</span>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-lg-12">
                        <div class="container-fluid product-table-sec p-0">
                            <div class="content-wrapper">
                                <div class="filter-section">
                                    <div class="row profile-page">
                                        <div class="col-lg-9">
                                            <div class="master-vehicle">
                                                <div class="custom-tabs" role="tablist">
                                                    <button class="custom-tab-btn active" id="personal-details-tab"
                                                        data-bs-toggle="tab" data-bs-target="#personal-details" type="button"
                                                        role="tab">
                                                        Personal Details
                                                    </button>
                                                    <button class="custom-tab-btn" id="change-Password-tab" data-bs-toggle="tab"
                                                        data-bs-target="#change-Password" type="button" role="tab">
                                                        Change Password
                                                    </button>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-lg-3 d-flex gap-2 justify-content-end align-items-center">
                                        </div>
                                    </div>
                                </div>

                                <div class="tab-content ">
                                    <div class="tab-pane profile-desc fade show active profile-wrapper" id="personal-details"
                                        role="tabpanel">
                                        <div class="container-fluid p-0">
                                            <div class="row">
                                                <div class="col-lg-9">
                                                    <form id="productForm"
                                                        action="{{ route('backend.profile.update', $user->id) }}"
                                                        method="POST" enctype="multipart/form-data">
                                                        @csrf
                                                        <div class="add-product-section">
                                                            <div class="row mb-0 py-2">
                                                                <div class="col-lg-6">
                                                                    <label>Name<span class="required">*</span></label><br>
                                                                    <input type="text" name="name"
                                                                        placeholder="Enter Name"
                                                                        value="{{ old('name', $user->name) }}" />
                                                                    @error('name')
                                                                        <small class="text-danger">{{ $message }}</small>
                                                                    @enderror
                                                                </div>
                                                                <div class="col-lg-6">
                                                                    <label>Phone Number <span
                                                                            class="required">*</span></label>
                                                                    <input type="text" name="mobile"
                                                                        placeholder="Enter Your Number Here"
                                                                        value="{{ old('mobile', $user->mobile) }}" />
                                                                    @error('mobile')
                                                                        <small class="text-danger">{{ $message }}</small>
                                                                    @enderror
                                                                </div>
                                                            </div>
                                                            <div class="row mb-0">
                                                                <div class="col-lg-6 py-2">
                                                                    <label>Mail <span class="required">*</span></label><br>
                                                                    <input type="text" name="email"
                                                                        placeholder="Enter Your Mail Here"
                                                                        value="{{ old('email', $user->email) }}" />
                                                                    @error('email')
                                                                        <small class="text-danger">{{ $message }}</small>
                                                                    @enderror
                                                                </div>
                                                                <div class="col-lg-6 py-2">
                                                                    <label>Role</label><br>
                                                                    <input type="text"
                                                                        value="{{ $user->role?->name ?: '-' }}" readonly />
                                                                </div>
                                                            </div>
                                                            <!-- Action Buttons -->
                                                            <div class="action-buttons py-4">
                                                                <button type="button" class="btn btn-secondary"
                                                                    onclick="window.location.reload();">Cancel</button>
                                                                <button type="submit" class="btn btn-primary">Update</button>
                                                            </div>
                                                        </div>
                                                    </form>
                                                </div>
                                                <div class="col-lg-3">
                                                    <div class="change-profile-sec">
                                                        <div>
                                                            <img src="{{ \App\Helpers\Helper::get_image($user->image) }}"
                                                                alt="{{ $user->name ?: 'Profile' }}"
                                                                class="change-profile-item" />
                                                        </div>
                                                        <div class="upload-wrapper">
                                                            <input type="file" id="fileInput1" name="image"
                                                                class="file-input" hidden form="productForm"
                                                                accept=".jpg,.jpeg,.png,.webp">
                                                            <label for="fileInput1"
                                                                class="btn upload-btn d-flex align-items-center mb-0">
                                                                <span class="btn-add-category">
                                                                    Change Profile<i class=" ri-edit-fill fs-5"></i>
                                                                </span>
                                                            </label>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="tab-pane fade profile-wrapper" id="change-Password" role="tabpanel">
                                        <div class="container-fluid p-0 thirpy-profile">
                                            <div class="col-lg-9">
                                                <form>

                                                    <div class="add-product-section profile-input-sec">
                                                        <div class="row mb-0 py-2">
                                                            <div class="col-lg-6">
                                                                <div class="key-input-wrapper">
                                                                    <div class="d-flex justify-content-between">
                                                                        <label class="form-label">Old Password <span
                                                                                class="required">*</span></label>
                                                                        <a href="javascript:void(0);" class="forgot-text"
                                                                            data-bs-toggle="modal"
                                                                            data-bs-target=".forgot-password">Forgot
                                                                            Password</a>
                                                                    </div>
                                                                    <input type="password" id="oldpassword"
                                                                        class="key-input "
                                                                        placeholder="Enter Your Old Password" />
                                                                    <span class="eye-toggle" id="oldtoggle">
                                                                        <i class="ri-eye-off-fill"></i>
                                                                    </span>
                                                                </div>
                                                            </div>
                                                            <div class="col-lg-6">
                                                                <div class="key-input-wrapper">
                                                                    <label class="form-label">New Password <span
                                                                            class="required">*</span></label>
                                                                    <input type="password" id="newpassword"
                                                                        class="key-input "
                                                                        placeholder="Enter Your New Password" />
                                                                    <span class="eye-toggle" id="newtoggle">
                                                                        <i class="ri-eye-off-fill"></i>
                                                                    </span>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="row mb-0">
                                                            <div class="col-lg-6 my-2">
                                                                <div class="key-input-wrapper">
                                                                    <label class="form-label">Confirm Password <span
                                                                            class="required">*</span></label>
                                                                    <input type="password" id="confirmpassword"
                                                                        class="key-input "
                                                                        placeholder="Enter Your Confirm Password" />
                                                                    <span class="eye-toggle" id="confirmtoggle">
                                                                        <i class="ri-eye-off-fill"></i>
                                                                    </span>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <!-- Action Buttons -->
                                                        <div class="action-buttons py-4">
                                                            <button class="btn btn-secondary">Cancel</button>
                                                            <button type="button" class="btn btn-primary show-toast"
                                                                data-toast-target="#passwordChangeToast">Save</button>
                                                        </div>
                                                    </div>
                                                </div>

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

                        </div>
                    </div>
                    </div>
                    </div>
    </section>
    <div class="modal fade forgot-password forgot-popup-screen" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content rounded-4">
                <div class="modal-header">
                    <div class="d-flex flex-column">
                        <h5>Forgot Password?</h5><br>
                        <p>Enter your registered email address. We'll send you a link to reset your password</p>
                    </div>
                </div>
                <div class="modal-body inquiry-preview-modal p-4">
                    <div class="stock-wrapper">
                        <div class="stock-row">
                            <div class="stock-field">
                                <label>Mail</label>
                                <input type="text" name="Phone Number" placeholder="Enter Your Mail Here" />
                            </div>
                        </div>
                    </div>
                    <div class="hstack gap-2 w-100 mt-4 justify-content-end">
                        <button type="button" data-bs-dismiss="modal" class="btn cancel-btn">
                            Cancel
                        </button>
                        <button type="button" class="btn delete-btn" data-bs-toggle="modal"
                            data-bs-target=".verify-password">
                            Send Link
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade verify-password forgot-popup-screen" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content rounded-4">
                <div class="modal-header">
                    <div class="d-flex flex-column gap-2">
                        <h5>Verify Your Email</h5>
                        <p>Kindly enter the 4-digit unique code sent to parthi@cloudi5.com.</p>
                    </div>
                </div>
                <div class="modal-body inquiry-preview-modal p-4 modal-verify">
                    <div>
                        <div class="row field-container">
                            <div class="otp-box">
                                <input type="number" maxlength="1" inputmode="numeric" pattern="[0-9]*" class="otp-input">
                                <input type="number" maxlength="1" inputmode="numeric" pattern="[0-9]*" class="otp-input">
                                <input type="number" maxlength="1" inputmode="numeric" pattern="[0-9]*" class="otp-input">
                                <input type="number" maxlength="1" inputmode="numeric" pattern="[0-9]*" class="otp-input">
                            </div>
                            <div class="resend-text">
                                Resend Code
                            </div>
                        </div>
                    </div>
                    <!-- Buttons -->
                    <div class="hstack gap-2 w-100 mt-4 justify-content-end">
                        <button type="button" data-bs-dismiss="modal" class="btn cancel-btn">
                            Cancel
                        </button>
                        <button type="button" class="btn delete-btn" data-bs-toggle="modal" data-bs-target=".new-password">
                            Verify
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade new-password forgot-popup-screen" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content rounded-4">
                <div class="modal-header">
                    <div class="d-flex flex-column gap-2">
                        <h5>Set New Password</h5>
                        <p class="mb-0">Your password must be 8+ characters with an uppercase letter, a number, and a
                            special character.</p>
                    </div>
                </div>
                <div class="modal-body inquiry-preview-modal p-4">
                    <div class="row mb-0 py-2 ">
                        <div class="col-lg-12 profile-input-sec">
                            <div class="key-input-wrapper">
                                <label class="form-label">New Password <span class="required">*</span></label>
                                <input type="password" id="newpasswordmodal" class="key-input "
                                    placeholder="Enter New Password" />
                                <span class="eye-toggle" id="newtogglemodal">
                                    <i class="ri-eye-off-fill"></i>
                                </span>
                            </div>
                        </div>
                        <div class="col-lg-12 profile-input-sec profile-new-pwsd my-4">
                            <div class="key-input-wrapper">
                                <label class="form-label">Confirm Password <span class="required">*</span></label>
                                <input type="password" id="confirmpasswordmodal" class="key-input "
                                    placeholder="Enter Confirm Password" />
                                <span class="eye-toggle" id="confirmtogglemodal">
                                    <i class="ri-eye-off-fill"></i>
                                </span>
                            </div>
                        </div>
                    </div>
                    <!-- Buttons -->
                    <div class="hstack gap-2 w-100 mt-4 justify-content-end">
                        <button type="button" data-bs-dismiss="modal" class="btn cancel-btn">
                            Cancel
                        </button>
                        <button type="button" class="btn delete-btn show-toast" data-toast-target="#passwordSetToast">
                            Submit
                        </button>
                    </div>
                </div>
            </div>
        </div>

         <div class="position-fixed top-0 start-50 translate-middle-x p-4" style="z-index: 1090">
        <div id="passwordSetToast" class="toast login-success-toast" role="alert" aria-live="assertive"
            aria-atomic="true">
            <div class="toast-body d-flex align-items-center gap-3">
                <div class="toast-left">
                    <div class="check-circle">
                        ✓
                    </div>
                </div>
                <div class="toast-right">
                    <h6>Password Set Successfully</h6>
                    <p>Your password has been set successfully. You can now log in using your new password.</p>
                </div>
            </div>
        </div>
    </div>
         <div class="position-fixed top-0 start-50 translate-middle-x p-4" style="z-index: 1090">
        <div id="passwordChangeToast" class="toast login-success-toast" role="alert" aria-live="assertive"
            aria-atomic="true">
            <div class="toast-body d-flex align-items-center gap-3">
                <div class="toast-left">
                    <div class="check-circle">
                        ✓
                    </div>
                </div>
                <div class="toast-right">
                    <h6>Password Change Successfully</h6>
                    <p>Your password has been chaanged successfully. You can now log in using your new password.</p>
                </div>
            </div>
        </div>
    </div>

@endsection


    @section('scripts')
        <link href="https://unpkg.com/@yaireo/tagify/dist/tagify.css" rel="stylesheet">
        <script src="https://unpkg.com/@yaireo/tagify"></script>

        <script>
            const selectAll = document.getElementById('selectAll');
            const checkboxes = document.querySelectorAll('.category-checkbox');
            const bulkActions = document.getElementById('bulkActions');

            // Toggle buttons visibility
            function toggleBulkActions() {
                const anyChecked = [...checkboxes].some(cb => cb.checked);
                bulkActions.classList.toggle('d-none', !anyChecked);
            }

            // Select All checkbox
            selectAll?.addEventListener('change', function () {
                checkboxes.forEach(cb => cb.checked = this.checked);
                toggleBulkActions();
            });

            // Individual checkbox change
            checkboxes.forEach(cb => {
                cb.addEventListener('change', () => {
                    selectAll.checked = [...checkboxes].every(c => c.checked);
                    toggleBulkActions();
                });
            });
        </script>

        <script>
            document.querySelectorAll(".custom-tab-btn").forEach((button) => {
                button.addEventListener("click", function () {
                    document.querySelectorAll(".custom-tab-btn").forEach((btn) => btn.classList.remove(
                        "active"));
                    this.classList.add("active");
                });
            });
        </script>
        <script>
            document.getElementById("oldtoggle").addEventListener("click", function () {
                const input = document.getElementById("oldpassword");
                const icon = this.querySelector("i");

                if (input.type === "password") {
                    input.type = "text";
                    icon.classList.remove("ri-eye-off-fill");
                    icon.classList.add("ri-eye-fill");
                } else {
                    input.type = "password";
                    icon.classList.remove("ri-eye-fill");
                    icon.classList.add("ri-eye-off-fill");
                }
            });
        </script>
        <script>
            document.getElementById("newtoggle").addEventListener("click", function () {
                const input = document.getElementById("newpassword");
                const icon = this.querySelector("i");

                if (input.type === "password") {
                    input.type = "text";
                    icon.classList.remove("ri-eye-off-fill");
                    icon.classList.add("ri-eye-fill");
                } else {
                    input.type = "password";
                    icon.classList.remove("ri-eye-fill");
                    icon.classList.add("ri-eye-off-fill");
                }
            });
        </script>
        <script>
            document.getElementById("confirmtoggle").addEventListener("click", function () {
                const input = document.getElementById("confirmpassword");
                const icon = this.querySelector("i");

                if (input.type === "password") {
                    input.type = "text";
                    icon.classList.remove("ri-eye-off-fill");
                    icon.classList.add("ri-eye-fill");
                } else {
                    input.type = "password";
                    icon.classList.remove("ri-eye-fill");
                    icon.classList.add("ri-eye-off-fill");
                }
            });
        </script>
        <script>
            document.getElementById("newtogglemodal").addEventListener("click", function () {
                const input = document.getElementById("newpasswordmodal");
                const icon = this.querySelector("i");

                if (input.type === "password") {
                    input.type = "text";
                    icon.classList.remove("ri-eye-off-fill");
                    icon.classList.add("ri-eye-fill");
                } else {
                    input.type = "password";
                    icon.classList.remove("ri-eye-fill");
                    icon.classList.add("ri-eye-off-fill");
                }
            });
        </script>
        <script>
            document.getElementById("confirmtogglemodal").addEventListener("click", function () {
                const input = document.getElementById("confirmpasswordmodal");
                const icon = this.querySelector("i");

                if (input.type === "password") {
                    input.type = "text";
                    icon.classList.remove("ri-eye-off-fill");
                    icon.classList.add("ri-eye-fill");
                } else {
                    input.type = "password";
                    icon.classList.remove("ri-eye-fill");
                    icon.classList.add("ri-eye-off-fill");
                }
            });
        </script>

        <script>
            document.addEventListener("DOMContentLoaded", () => {
                const inputs = document.querySelectorAll(".otp-input");
                inputs.forEach((input, index) => {
                    input.addEventListener("input", () => {
                        if (input.value.length === 1 && index < inputs.length - 1) {
                            inputs[index + 1].focus();
                        }
                    });
                    input.addEventListener("keydown", (e) => {
                        if (e.key === "Backspace" && input.value === "" && index > 0) {
                            inputs[index - 1].focus();
                        }
                    });

                });
            });
        </script>

    @endsection