@extends('User.layout')

@section('header')
{{-- Assuming this page might use a different header, 
    or just a plain header like below. --}}
@include('components.header-inner', [
'title' => 'Profile',
'backUrl' => route('welcome'),

])
@endsection

@section('content')
<style>
    /* 🎨 Main Container */
    .profile-container {
        margin: 0 auto;
        padding: 20px 16px;
        box-sizing: border-box;
    }

    /* 👤 User Info Section */
    .user-info {
        display: flex;
        align-items: center;
        margin-bottom: 25px;
        padding-bottom: 20px;
        border-bottom: 1px solid #eee;
        /* Subtle separator */
    }

    .avatar-wrapper {
        position: relative;
        margin-right: 15px;
    }

    .avatar {
        width: 80px;
        height: 80px;
        border-radius: 50%;
        object-fit: cover;
        /* Placeholder background for the avatar image */
        background: #f0f0f0;
        border: 1px solid #ddd;
    }

    .camera-icon {
        position: absolute;
        bottom: 0;
        right: 0;
        width: 24px;
        height: 24px;
        background: #fff;
        border: 2px solid #fff;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
    }

    .camera-icon svg {
        color: #4CAF50;
        /* Green color for the camera icon */
        width: 14px;
        height: 14px;
    }

    .user-details h2 {
        font-size: 18px;
        font-weight: 700;
        color: #222;
        margin: 0 0 4px 0;
    }

    .user-details p {
        font-size: 14px;
        color: #666;
        margin: 0;
    }

    /* 📋 Menu List */
    .menu-list {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .menu-item {
        display: flex;
        align-items: center;
        padding: 15px 0;
        border-bottom: 1px solid #f5f5f5;
        /* Light separator for menu items */
        cursor: pointer;
        transition: background-color 0.1s;
    }

    .menu-item:hover {
        background-color: #fcfcfc;
    }

    .menu-item:last-child {
        border-bottom: none;
        margin-top: 10px;
        /* Separator for the logout button */
    }

    .menu-item-icon {
        width: 24px;
        height: 24px;
        margin-right: 15px;
        color: #555;
        /* Default icon color */
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .menu-item-text {
        font-size: 16px;
        font-weight: 500;
        color: #222;
        /* Default text color */
    }

    /* 🚪 Logout Styling (Red text and icon) */
    .menu-item.logout .menu-item-icon,
    .menu-item.logout .menu-item-text {
        color: #FF4136;
        /* Red color for logout */
    }

    /* 📱 Mobile Responsiveness */
    @media (max-width: 480px) {
        .profile-container {
            padding: 15px 10px;
        }

        .user-info {
            padding-bottom: 15px;
        }

        .avatar {
            width: 70px;
            height: 70px;
        }

        .user-details h2 {
            font-size: 17px;
        }

        .menu-item {
            padding: 12px 0;
        }
    }
</style>

<div class="profile-container mt-4">

    <div class="user-info">
        <form id="profileImageForm" enctype="multipart/form-data">
            @csrf

            <div class="avatar-wrapper" style="position: relative; cursor: pointer;">
                <img class="avatar" id="profilePreview"
                    src="{{ $profile_image }}"
                    alt="User Avatar">

                <div class="camera-icon">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
                        <path d="M20 5h-3.17L15 3H9L7.17 5H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm-8 13c-3.31 0-6-2.69-6-6s2.69-6 6-6 6 2.69 6 6-2.69 6-6 6zm0-10c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4z" />
                    </svg>
                </div>

                <!-- Hidden file input -->
                <input type="file"
                    name="profile_image"
                    id="profileImageInput"
                    accept="image/*"
                    hidden>
            </div>
        </form>

        <div class="user-details">
            <h2>{{ $user->name }}</h2>
            <p>{{ $user->phone_number }}</p>
        </div>
    </div>

    <ul class="menu-list">

        <li class="menu-item">
            <a href="{{ route('terms_and_conditions') }}" class="d-flex align-items-center  text-decoration-none"><span class="menu-item-icon">
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none"
                        xmlns="http://www.w3.org/2000/svg">
                        <path d="M6 2H14L20 8V22H6V2Z"
                            stroke="#404040" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                        <path d="M14 2V8H20"
                            stroke="#404040" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                        <path d="M9 13H17"
                            stroke="#404040" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                        <path d="M9 17H17"
                            stroke="#404040" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                    </svg>
                </span>
                <span class="menu-item-text">Terms & Conditions</span>
            </a>

        </li>

        <li class="menu-item">
            <a href="{{ route('privacy_policy') }}" class="d-flex align-items-center text-decoration-none"><span class="menu-item-icon">
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none"
                        xmlns="http://www.w3.org/2000/svg">
                        <path d="M12 2L20 6V12C20 17 16.5 21.5 12 22C7.5 21.5 4 17 4 12V6L12 2Z"
                            stroke="#404040" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                        <path d="M9 11H15"
                            stroke="#404040" stroke-width="1.5" stroke-linecap="round" />
                        <path d="M9 15H13"
                            stroke="#404040" stroke-width="1.5" stroke-linecap="round" />
                    </svg>
                </span>
                <span class="menu-item-text">Privacy Policy</span>
            </a>

        </li>

        <li class="menu-item">
            <a href="{{ route('print_connection') }}" class="d-flex align-items-center text-decoration-none"><span class="menu-item-icon">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                        <rect width="24" height="24" fill="white" />
                        <path d="M18.75 17H20C20.5523 17 21 16.5523 21 16V8C21 7.44772 20.5523 7 20 7H4C3.44772 7 3 7.44772 3 8V16C3 16.5523 3.44772 17 4 17H5.25" stroke="#404040" stroke-linecap="round" stroke-linejoin="round" />
                        <path d="M6 12C6 11.4477 6.44772 11 7 11H17C17.5523 11 18 11.4477 18 12V20C18 20.5523 17.5523 21 17 21H7C6.44772 21 6 20.5523 6 20V12Z" stroke="#404040" stroke-linecap="round" stroke-linejoin="round" />
                        <path d="M6 4C6 3.44772 6.44772 3 7 3H17C17.5523 3 18 3.44772 18 4V7H6V4Z" stroke="#404040" stroke-linecap="round" stroke-linejoin="round" />
                        <path d="M8.5 13.5H15.5" stroke="#404040" stroke-linecap="round" stroke-linejoin="round" />
                        <path d="M8.5 18.5H15.5" stroke="#404040" stroke-linecap="round" stroke-linejoin="round" />
                        <path d="M8.5 16H15.5" stroke="#404040" stroke-linecap="round" stroke-linejoin="round" />
                    </svg>
                </span>
                <span class="menu-item-text">Print Connection</span>
            </a>

        </li>

        <li class="menu-item logout" type="button" data-bs-target="#logout" data-bs-toggle="modal" onclick="handleLogout()">
            <span class="menu-item-icon">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none"
                    xmlns="http://www.w3.org/2000/svg">
                    <path
                        d="M15.1001 16.4398C14.7901 20.0398 12.9401 21.5098 8.8901 21.5098L8.7601 21.5098C4.2901 21.5098 2.5001 19.7198 2.5001 15.2498L2.5001 8.72977C2.5001 4.25977 4.2901 2.46977 8.7601 2.46977L8.8901 2.46977C12.9101 2.46977 14.7601 3.91977 15.0901 7.45977"
                        stroke="#FF5F57" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                    <path d="M8.99988 12L20.3799 12" stroke="#FF5F57" stroke-width="1.5" stroke-linecap="round"
                        stroke-linejoin="round" />
                    <path d="M18.15 15.3496L21.5 11.9996L18.15 8.64961" stroke="#FF5F57" stroke-width="1.5"
                        stroke-linecap="round" stroke-linejoin="round" />
                </svg>

            </span>
            <span class="menu-item-text">Logout</span>
        </li>
    </ul>


</div>


<!-- logout -->
<div class="modal fade" id="logout" tabindex="-1" data-bs-backdrop="static" data-bs-keyboard="false">
    <div class="modal-dialog modal-sm modal-dialog-centered">
        <div class="modal-content rounded-4 text-center p-4 py-5">
            <h5 class="fw-bold mb-2">Are you sure!!</h5>
            <p class="text-muted">Are you confirm to logout ?</p>
            <div class="d-flex justify-content-center align-items-center gap-3 mt-4">
                <form id="LogoutForm" method="POST" action="{{ route('user.logout') }}">
                    @csrf
                    <button type="button" class="btn btn-outline-primary p-3 fw-semibold me-3" data-bs-dismiss="modal">
                        Cancel
                    </button>
                    <button type="submit" id="logout_btn" class="btn btn-danger p-3 fw-semibold">
                        Yes, Sure
                    </button>
                </form>
            </div>
        </div>
    </div>
</div>

<script>
    document.getElementById('LogoutForm').addEventListener('submit', function() {
        const btn = document.getElementById('logout_btn');
        btn.disabled = true;
        btn.innerText = 'processing...';
    });
</script>

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
<script>
    function showToast(message, type = 'success') {
        let toastEl = document.getElementById('liveToast');

        // If toast doesn't exist (first AJAX call), create it
        if (!toastEl) {
            document.body.insertAdjacentHTML('beforeend', `
                <div class="position-fixed top-0 end-0 p-3" style="z-index:9999">
                    <div id="liveToast" class="toast align-items-center text-white border-0" role="alert">
                        <div class="d-flex">
                            <div class="toast-body"></div>
                            <button type="button" class="btn-close btn-close-white me-2 m-auto"
                                data-bs-dismiss="toast"></button>
                        </div>
                    </div>
                </div>
            `);
            toastEl = document.getElementById('liveToast');
        }

        toastEl.classList.remove('bg-success', 'bg-danger', 'bg-warning');
        toastEl.classList.add(type === 'success' ? 'bg-success' : 'bg-danger');

        toastEl.querySelector('.toast-body').innerText = message;

        const toast = new bootstrap.Toast(toastEl, {
            delay: 2500
        });
        toast.show();
    }
</script>

<script>
    document.querySelector('.avatar-wrapper').addEventListener('click', function() {
        document.getElementById('profileImageInput').click();
    });

    document.getElementById('profileImageInput').addEventListener('change', function() {

        let file = this.files[0];
        if (!file) return;

        let reader = new FileReader();
        reader.onload = function(e) {
            document.getElementById('profilePreview').src = e.target.result;
        };
        reader.readAsDataURL(file);

        let formData = new FormData();
        formData.append('_token', '{{ csrf_token() }}');
        formData.append('profile_image', file);

        fetch("{{ route('user_profile_update') }}", {
                method: "POST",
                body: formData,
                headers: {
                    "X-CSRF-TOKEN": "{{ csrf_token() }}",
                    "Accept": "application/json"
                },
                credentials: "same-origin"
            })
            .then(res => res.json())
            .then(data => {
                if (data.success) {
                    document.getElementById('profilePreview').src =
                        data.image + '?' + Date.now();

                    showToast('Profile updated successfully', 'success');
                } else {
                    showToast(data.message || 'Upload failed', 'error');
                }
            })
            .catch(err => {
                console.error(err);
                showToast('Upload failed', 'error');
            });


    });
</script>

@endsection