<!DOCTYPE html>
<html dir="ltr" lang="en-US">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="author" content="Granny Restaurant">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="description" content="Server Profile - Granny Restaurant">
    <link href="../assets/images/favicon/favicon.png" rel="icon">

    <link href="https://fonts.googleapis.com/css?family=Raleway:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet" type="text/css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css">
    <link rel="stylesheet" href="server-styles.css">

    <title>Server Profile - Granny Restaurant</title>

    <style>
        .dashboard-container {
            min-height: 100vh;
            padding: 30px;
        }

        .profile-wrap {
            max-width: 900px;
            margin: 0 auto;
        }

        .profile-card {
            background: #fff;
            border-radius: 14px;
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
            overflow: hidden;
        }

        .profile-head {
            background: linear-gradient(135deg, #d4a574 0%, #c49257 100%);
            color: #fff;
            padding: 28px;
            display: flex;
            align-items: center;
            gap: 16px;
        }

        .profile-avatar {
            width: 64px;
            height: 64px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.2);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
            font-weight: 700;
        }

        .profile-name {
            margin: 0;
            font-size: 26px;
            font-weight: 700;
        }

        .profile-role {
            margin: 6px 0 0;
            opacity: 0.95;
            font-size: 14px;
        }

        .profile-body {
            padding: 24px;
        }

        .details-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 14px;
        }

        .detail-item {
            background: #f8f9fa;
            border-radius: 10px;
            padding: 14px;
        }

        .detail-label {
            font-size: 12px;
            text-transform: uppercase;
            color: #6c757d;
            font-weight: 700;
            margin-bottom: 6px;
        }

        .detail-value {
            color: #2e3640;
            font-size: 16px;
            font-weight: 600;
            word-break: break-word;
        }

        .status-pill {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 6px 10px;
            border-radius: 999px;
            font-size: 13px;
            font-weight: 700;
        }

        .status-pill.online {
            background: #e9f8ef;
            color: #1d8d4a;
        }

        .status-pill.offline {
            background: #fdecec;
            color: #b32f2f;
        }

        @media (max-width: 768px) {
            .dashboard-container {
                padding: 20px 14px;
            }

            .details-grid {
                grid-template-columns: 1fr;
            }
        }
    </style>
</head>

<body>
    <div class="sidebar-overlay" id="sidebarOverlay" onclick="closeSidebarMenu()"></div>

    <aside class="sidebar">
        <div class="logo">
            <i class="fas fa-utensils"></i>
            <span>Granny Restaurant</span>
        </div>

        <ul class="sidebar-nav">
            <li><a href="dashboard.php"><i class="fas fa-home"></i> Dashboard</a></li>
            <li><a href="profile.php" class="active"><i class="fas fa-user"></i> My Profile</a></li>
        </ul>

        <div class="sidebar-section">
            <div class="sidebar-section-title">Actions</div>
            <button class="logout-btn" onclick="logout()">
                <i class="fas fa-sign-out-alt"></i> Logout
            </button>
        </div>
    </aside>

    <div class="dashboard-container">
        <div class="header">
            <div class="header-left">
                <button id="hamburgerBtn" class="hamburger-btn" onclick="toggleSidebar()">
                    <i class="fas fa-bars"></i>
                </button>
                <h1>My Profile</h1>
            </div>
            <div class="header-right">
                <div class="user-info">
                    <span id="serverNameTop">Loading...</span>
                </div>
            </div>
        </div>

        <div class="profile-wrap">
            <div class="profile-card">
                <div class="profile-head">
                    <div class="profile-avatar" id="profileAvatar">S</div>
                    <div>
                        <h2 class="profile-name" id="profileName">Loading...</h2>
                        <p class="profile-role">Server - Granny Restaurant</p>
                    </div>
                </div>

                <div class="profile-body">
                    <div class="details-grid">
                        <div class="detail-item">
                            <div class="detail-label">Employee ID</div>
                            <div class="detail-value" id="employeeId">-</div>
                        </div>
                        <div class="detail-item">
                            <div class="detail-label">Phone</div>
                            <div class="detail-value" id="phone">-</div>
                        </div>
                        <div class="detail-item">
                            <div class="detail-label">Shift Timing</div>
                            <div class="detail-value" id="shift">-</div>
                        </div>
                        <div class="detail-item">
                            <div class="detail-label">Rating</div>
                            <div class="detail-value" id="rating">-</div>
                        </div>
                        <div class="detail-item">
                            <div class="detail-label">Account Status</div>
                            <div class="detail-value" id="accountStatus">-</div>
                        </div>
                        <div class="detail-item">
                            <div class="detail-label">Joined On</div>
                            <div class="detail-value" id="joinedOn">-</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.all.min.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            loadProfile();
        });

        async function loadProfile() {
            try {
                const response = await fetch('../backend/server_profile.php');
                const result = await response.json();

                if (!result.success || !result.data) {
                    window.location.href = 'login.php';
                    return;
                }

                const server = result.data;
                const initials = (server.name || 'S').split(' ').map(part => part[0]).join('').slice(0, 2).toUpperCase();
                const shiftStart = formatTime(server.shift_start);
                const shiftEnd = formatTime(server.shift_end);
                const shiftText = (shiftStart && shiftEnd) ? `${shiftStart} - ${shiftEnd}` : 'Not assigned';

                document.getElementById('serverNameTop').textContent = server.name || '-';
                document.getElementById('profileAvatar').textContent = initials || 'S';
                document.getElementById('profileName').textContent = server.name || '-';
                document.getElementById('employeeId').textContent = server.employee_id || '-';
                document.getElementById('phone').textContent = server.phone || '-';
                document.getElementById('shift').textContent = shiftText;
                document.getElementById('rating').textContent = server.rating !== null ? Number(server.rating).toFixed(1) : 'N/A';

                const statusHtml = `<span class="status-pill ${server.is_online ? 'online' : 'offline'}">${server.status || 'N/A'} (${server.is_online ? 'Online' : 'Offline'})</span>`;
                document.getElementById('accountStatus').innerHTML = statusHtml;

                document.getElementById('joinedOn').textContent = formatDate(server.created_at);
            } catch (error) {
                console.error('Profile load error:', error);
                Swal.fire('Error', 'Unable to load profile details', 'error');
            }
        }

        function formatDate(dateValue) {
            if (!dateValue) return '-';
            const date = new Date(dateValue);
            if (Number.isNaN(date.getTime())) return '-';
            return date.toLocaleDateString('en-IN', {
                year: 'numeric',
                month: 'short',
                day: 'numeric'
            });
        }

        function formatTime(timeValue) {
            if (!timeValue) return '';
            const fakeDate = new Date(`1970-01-01T${timeValue}`);
            if (Number.isNaN(fakeDate.getTime())) return '';
            return fakeDate.toLocaleTimeString('en-IN', {
                hour: '2-digit',
                minute: '2-digit'
            });
        }

        async function logout() {
            const result = await Swal.fire({
                title: 'Confirm Logout',
                text: 'Are you sure you want to logout?',
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#d4a574',
                cancelButtonColor: '#6c757d',
                confirmButtonText: 'Yes, Logout'
            });

            if (!result.isConfirmed) return;

            try {
                await fetch('../backend/server_logout.php');
            } catch (error) {
                console.error('Logout error:', error);
            } finally {
                localStorage.removeItem('serverData');
                window.location.href = 'login.php';
            }
        }

        function toggleSidebar() {
            const sidebar = document.querySelector('.sidebar');
            const overlay = document.getElementById('sidebarOverlay');
            sidebar.classList.toggle('show');
            overlay.classList.toggle('show');
        }

        function closeSidebarMenu() {
            const sidebar = document.querySelector('.sidebar');
            const overlay = document.getElementById('sidebarOverlay');
            sidebar.classList.remove('show');
            overlay.classList.remove('show');
        }

        document.addEventListener('DOMContentLoaded', () => {
            const navLinks = document.querySelectorAll('.sidebar-nav a');
            navLinks.forEach(link => {
                link.addEventListener('click', () => {
                    if (window.innerWidth <= 768) {
                        closeSidebarMenu();
                    }
                });
            });
        });
    </script>
</body>

</html>
