
<?php $__env->startSection('title', 'Manage Hosting - ' . $hosting->domain); ?>
<?php $__env->startSection('contents'); ?>


<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<style>
    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
    body { font-family: 'Inter', sans-serif; background-color: #f4f7fe; color: #334155; }


/* স্ট্যাটাস ব্যাজ (ডায়নামিক কালার) */
    .status-badge { padding: 8px 16px; border-radius: 12px; font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; }
    
    .status-active { background: #dcfce7; color: #15803d; }
    .status-suspended { background: #fee2e2; color: #991b1b; }
    .status-pending { background: #fef9c3; color: #854d0e; }


    /* ================= আপনার সাইডবার স্টাইল (অপরিবর্তিত) ================= */
    .sidebar-card { background: #fff; border-radius: 20px; box-shadow: 0 10px 30px rgba(0,0,0,0.05); overflow: hidden; border: 1px solid #edf2f7; position: sticky; top: 20px; }
    .user-profile-box { text-align: center; padding: 35px 20px; background: #fff; border-bottom: 1px solid #f1f5f9; }
    .user-avatar-wrapper { position: relative; width: 100px; height: 100px; margin: 0 auto 15px; }
    .user-avatar { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; border: 3px solid #4e73df; background-color: #eee; }
    .menu-link { display: flex; align-items: center; padding: 14px 20px; color: #64748b; text-decoration: none; border-radius: 12px; margin: 5px 15px; transition: 0.3s; font-weight: 500; font-size: 15px; }
    .menu-link i { width: 30px; font-size: 18px; }
    .menu-link:hover, .menu-link.active { background: #f1f5f9; color: #4e73df; }
    .menu-link.active { font-weight: 700; background: #eef2ff; color: #4e73df; }

    /* ================= সুপার প্রিমিয়াম ডিটেইলস এরিয়া ================= */
    .main-content-wrapper { background: transparent; }
    .premium-card { background: #fff; border-radius: 24px; border: none; box-shadow: 0 4px 25px rgba(0,0,0,0.03); padding: 30px; margin-bottom: 25px; }
    
    /* হেডার সেকশন */
    .service-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 30px; }
    .domain-title { font-size: 24px; font-weight: 800; color: #1e293b; margin: 0; letter-spacing: -0.5px; }
    
    /* স্ট্যাটাস ব্যাজ */
    .badge-active { background: #dcfce7; color: #15803d; padding: 6px 16px; border-radius: 12px; font-size: 12px; font-weight: 700; }
    
    /* ইনফো গ্রিড */
    .info-label { font-size: 11px; font-weight: 700; color: #94a3b8; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 4px; }
    .info-value { font-size: 15px; font-weight: 700; color: #334155; }

    /* অ্যাকশন টাইলস (cPanel Style) */
    .action-tile { 
        background: #ffffff; border: 1px solid #f1f5f9; border-radius: 20px; padding: 25px 15px; 
        text-align: center; transition: 0.3s; text-decoration: none; display: block; height: 100%;
        box-shadow: 0 4px 12px rgba(0,0,0,0.02);
    }
    .action-tile:hover { transform: translateY(-8px); border-color: #4e73df; box-shadow: 0 15px 30px rgba(78, 115, 223, 0.12); }
    .tile-icon { width: 60px; height: 60px; border-radius: 16px; display: flex; align-items: center; justify-content: center; margin: 0 auto 15px; font-size: 24px; }
    .tile-title { font-size: 14px; font-weight: 700; color: #1e293b; margin-bottom: 5px; display: block; }
    .tile-desc { font-size: 11px; color: #94a3b8; line-height: 1.4; display: block; }

    /* কালার থিমস */
    .bg-soft-orange { background: #fff7ed; color: #f97316; }
    .bg-soft-blue { background: #eff6ff; color: #3b82f6; }
    .bg-soft-green { background: #f0fdf4; color: #22c55e; }
    .bg-soft-purple { background: #faf5ff; color: #a855f7; }

    /* ইউজড বার */
    .usage-container { margin-top: 20px; }
    .usage-header { display: flex; justify-content: space-between; margin-bottom: 8px; font-size: 12px; font-weight: 700; }
    .progress-thin { height: 6px; border-radius: 10px; background: #f1f5f9; }
</style>

<div class="section-padding py-5">
    <div class="container">
        <div class="row g-4">
            
            
            <div class="col-lg-3">
                <div class="sidebar-card">
                    <div class="user-profile-box">
                        <div class="user-avatar-wrapper">
                            <img src="<?php echo e(Auth::user()->photo ? asset('assets/images/users/'.Auth::user()->photo) : 'https://cdn-icons-png.flaticon.com/512/149/149071.png'); ?>" class="user-avatar">
                        </div>
                        <h6 class="fw-bold text-dark mb-0"><?php echo e(Auth::user()->name); ?></h6>
                        <span class="badge bg-light text-primary border mt-2">ক্লায়েন্ট</span>
                    </div>
                    <div class="py-3">
                        <a href="<?php echo e(route('user.dashboard')); ?>" class="menu-link"><i class="fa-solid fa-table-columns"></i> ড্যাশবোর্ড</a>
<a href="<?php echo e(route('user.domains.index')); ?>" class="menu-link <?php echo e(request()->routeIs('user.domains.index') ? 'active' : ''); ?>">
    <i class="fa-solid fa-globe"></i> আমার ডোমেইন
</a>

<a href="<?php echo e(route('user.hostings.index')); ?>" class="menu-link <?php echo e(request()->routeIs('user.hostings.index') ? 'active' : ''); ?>">
    <i class="fa-solid fa-server"></i> আমার হোস্টিং
</a>
			<div class="menu-item-group">
    <a href="javascript:void(0);" class="menu-link d-flex justify-content-between align-items-center" onclick="toggleSubMenu(event, 'fraudSubMenu')">
        <span><i class="fa-solid fa-shield-halved"></i> ফ্রড সার্ভিস</span>
        <i class="fa-solid fa-chevron-down mt-1" style="font-size: 12px;"></i>
    </a>
    
    <div id="fraudSubMenu" class="submenu-container" style="<?php echo e(request()->is('user/fraud*') || request()->is('user/api*') ? 'display: block;' : 'display: none;'); ?>">
        <a href="<?php echo e(route('user.fraud.check')); ?>" class="menu-link ps-5 <?php echo e(request()->routeIs('user.fraud.check') ? 'active' : ''); ?>">
            <i class="fa-solid fa-user-shield"></i> ফ্রড চেকার
        </a>
        
        <a href="<?php echo e(route('user.fraud.pricing')); ?>" class="menu-link ps-5 <?php echo e(request()->routeIs('user.fraud.pricing') ? 'active' : ''); ?>">
            <i class="fa-solid fa-tags"></i> প্যাকেজ কিনুন
        </a>
        
        <a href="<?php echo e(route('user.api.docs')); ?>" class="menu-link ps-5 <?php echo e(request()->routeIs('user.api.docs') ? 'active' : ''); ?>">
            <i class="fa-solid fa-code"></i> API ডকুমেন্টেশন
        </a>
    </div>
</div>
<style>
    .submenu-container {
    background: #fdfdfd; /* সাব-মেনুর জন্য হালকা আলাদা ব্যাকগ্রাউন্ড */
    border-radius: 12px;
    margin: 2px 15px;
}

.ps-5 {
    padding-left: 45px !important; /* সাব-মেনু আইটেমগুলোকে একটু ভেতরে সরানোর জন্য */
    font-size: 14px !important;    /* সাব-মেনু ফন্ট একটু ছোট */
}

.menu-link i.fa-chevron-down {
    transition: transform 0.3s ease;
}

.menu-link.open i.fa-chevron-down {
    transform: rotate(180deg);
}
</style>
<script>
    function toggleSubMenu(event, menuId) {
        event.preventDefault();
        const menu = document.getElementById(menuId);
        const link = event.currentTarget;
        
        if (menu.style.display === "none") {
            menu.style.display = "block";
            link.classList.add('open');
        } else {
            menu.style.display = "none";
            link.classList.remove('open');
        }
    }
</script>

<div class="menu-item-group">
    
    <a href="javascript:void(0);" class="menu-link d-flex justify-content-between align-items-center <?php echo e(request()->is('user/sms*') || request()->is('user/recharge*') ? 'open' : ''); ?>" onclick="toggleSubMenu(event, 'smsSubMenu')">
        <span><i class="fa-solid fa-comment-sms"></i> এসএমএস সার্ভিস</span>
        <i class="fa-solid fa-chevron-down mt-1" style="font-size: 12px;"></i>
    </a>
    
    
    <div id="smsSubMenu" class="submenu-container" style="<?php echo e(request()->is('user/sms*') || request()->is('user/recharge*') ? 'display: block;' : 'display: none;'); ?>">
        
        <a href="<?php echo e(route('user.sms.panel')); ?>" class="menu-link ps-5 <?php echo e(request()->routeIs('user.sms.panel') ? 'active' : ''); ?>">
            <i class="fa-solid fa-paper-plane"></i> এসএমএস পাঠান
        </a>
        
<a href="<?php echo e(route('user.sms.history')); ?>" class="menu-link ps-5 <?php echo e(request()->routeIs('user.sms.history') ? 'active' : ''); ?>">
    <i class="fa-solid fa-history"></i> এসএমএস হিস্ট্রি
</a>
        <a href="<?php echo e(route('user.recharge.index')); ?>" class="menu-link ps-5 <?php echo e(request()->routeIs('user.recharge.index') ? 'active' : ''); ?>">
            <i class="fa-solid fa-wallet"></i> রিচার্জ করুন
        </a>
<a href="<?php echo e(route('user.sms.api_docs')); ?>" class="menu-link ps-5 <?php echo e(request()->routeIs('user.sms.api_docs') ? 'active' : ''); ?>">
    <i class="fa-solid fa-code"></i> এপিআই ডকুমেন্টেশন
</a>
    </div>
</div>
    
                        <a href="<?php echo e(route('user.licenses')); ?>" class="menu-link">
                            <i class="fa-solid fa-key"></i> আমার লাইসেন্স
                        </a>
                        <a href="<?php echo e(route('user.support')); ?>" class="menu-link">
                            <i class="fa-solid fa-headset"></i> সাপোর্ট টিকেট
                        </a>
                        <a href="<?php echo e(route('user.profile')); ?>" class="menu-link">
                            <i class="fa-solid fa-user-gear"></i> প্রোফাইল সেটিংস
                        </a>
                        <a href="<?php echo e(route('user.logout')); ?>" class="menu-link text-danger mt-4"><i class="fa-solid fa-power-off"></i> লগআউট</a>
                    </div>
                </div>
            </div>

            
            <div class="col-lg-9">
                
                
                <div class="premium-card">
                    <div class="service-header">
                        <div>
                            <h2 class="domain-title"><?php echo e($hosting->domain); ?></h2>
                            <p class="text-muted small mb-0">প্যাকেজ: <span class="text-primary fw-bold"><?php echo e($hosting->plan->name ?? 'Enterprise Pro'); ?></span></p>
                        </div>
                   <div>
        
        <?php if($hosting->status == 'Active'): ?>
            <span class="status-badge status-active">
                <i class="fa-solid fa-circle-check me-1"></i> সচল (Active)
            </span>
        <?php elseif($hosting->status == 'Suspended'): ?>
            <span class="status-badge status-suspended">
                <i class="fa-solid fa-circle-exclamation me-1"></i> স্থগিত (Suspended)
            </span>
        <?php else: ?>
            <span class="status-badge status-pending">
                <i class="fa-solid fa-clock me-1"></i> অপেক্ষমান (<?php echo e($hosting->status); ?>)
            </span>
        <?php endif; ?>
    </div>
                    </div>

                    <div class="row g-4">
                        <div class="col-md-3 col-6">
                            <div class="info-label">সার্ভার আইপি</div>
                            <div class="info-value"><?php echo e($hosting->ip_address ?? '103.145.110.1'); ?></div>
                        </div>
                        <div class="col-md-3 col-6">
                            <div class="info-label">ইউজারনেম</div>
                            <div class="info-value"><?php echo e($hosting->username ?? 'user_base'); ?></div>
                        </div>
                        <div class="col-md-3 col-6">
                            <div class="info-label">বিলিং সাইকেল</div>
                            <div class="info-value text-capitalize"><?php echo e($hosting->billing_cycle); ?></div>
                        </div>
                        <div class="col-md-3 col-6">
                            <div class="info-label">নেক্সট ইনভয়েস</div>
                            <div class="info-value text-danger"><?php echo e($hosting->next_due_date ? \Carbon\Carbon::parse($hosting->next_due_date)->format('d M, Y') : 'N/A'); ?></div>
                        </div>
                    </div>

<div class="usage-container row">
    
    <div class="col-md-6 mt-4">
        <div class="usage-header">
            <span>Disk Usage</span>
            <span>
                <?php echo e(round($stats['disk_used'])); ?> MB / 
                <?php if($stats['disk_limit'] === 'unlimited'): ?>
                    Unlimited
                <?php else: ?>
                    <?php echo e($stats['disk_limit']); ?> MB
                <?php endif; ?>
            </span>
        </div>
        <div class="progress progress-thin">
            <div class="progress-bar <?php echo e($stats['disk_percent'] > 90 ? 'bg-danger' : 'bg-primary'); ?>" 
                 style="width: <?php echo e($stats['disk_percent']); ?>%">
            </div>
        </div>
    </div>

    
    <?php
        // ব্যান্ডউইথ ক্যালকুলেশন (ডাটাবেস প্ল্যান থেকে)
        $bwLimit = $hosting->plan->bandwidth ?? 'Unlimited'; 
        $bwUsed = 0; // বর্তমানে ০ রাখা হলো, লাইভ শোbw এপিআই কল না করলে এটা পাওয়া কঠিন
        $bwPercent = 5; // ডিফল্ট ৫%
    ?>

    <div class="col-md-6 mt-4">
        <div class="usage-header">
            <span>Bandwidth (Monthly)</span>
            <span><?php echo e($hosting->plan->name ?? 'Standard'); ?> Package</span>
        </div>
        <div class="progress progress-thin">
            
            <div class="progress-bar bg-success" style="width: 10%"></div>
        </div>
        <small class="text-muted" style="font-size: 10px;">
            Limit: <?php echo e($bwLimit); ?> (Live stats update every 24h)
        </small>
    </div>
</div>
                </div>

                
                <div class="row g-4">
                    <div class="col-md-3 col-6">
                        <a href="<?php echo e(route('user.hosting.cp_login', $hosting->id)); ?>" target="_blank" class="action-tile">
                            <div class="tile-icon bg-soft-orange"><i class="fa-brands fa-cpanel"></i></div>
                            <span class="tile-title">cPanel</span>
                            <span class="tile-desc">কন্ট্রোল প্যানেলে অটো লগইন</span>
                        </a>
                    </div>
                    <div class="col-md-3 col-6">
                        <a href="javascript:void(0)" data-bs-toggle="modal" data-bs-target="#passwordModal" class="action-tile">
                            <div class="tile-icon bg-soft-blue"><i class="fa-solid fa-key"></i></div>
                            <span class="tile-title">Password</span>
                            <span class="tile-desc">সিপ্যানেল পাসওয়ার্ড পরিবর্তন</span>
                        </a>
                    </div>
                    <div class="col-md-3 col-6">
                        <a href="https://<?php echo e($hosting->domain); ?>:2096" target="_blank" class="action-tile">
                            <div class="tile-icon bg-soft-green"><i class="fa-solid fa-envelope"></i></div>
                            <span class="tile-title">Webmail</span>
                            <span class="tile-desc">ইমেইল একাউন্ট ম্যানেজ করুন</span>
                        </a>
                    </div>
                    <div class="col-md-3 col-6">
                        <a href="<?php echo e(route('user.support')); ?>" class="action-tile">
                            <div class="tile-icon bg-soft-purple"><i class="fa-solid fa-headset"></i></div>
                            <span class="tile-title">Support</span>
                            <span class="tile-desc">সাপোর্ট টিকেট ওপেন করুন</span>
                        </a>
                    </div>
                </div>

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


<div class="modal fade" id="passwordModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content border-0 shadow-lg rounded-4">
            <div class="modal-header border-0 bg-light p-4 rounded-top-4">
                <h5 class="fw-bold mb-0 text-dark"><i class="fa-solid fa-shield-halved me-2 text-primary"></i>সিকিউরিটি আপডেট</h5>
                <button type="button" class="btn-close shadow-none" data-bs-dismiss="modal"></button>
            </div>
            <form action="<?php echo e(route('user.hosting.password.update', $hosting->id)); ?>" method="POST">
                <?php echo csrf_field(); ?>
                <div class="modal-body p-4">
                    <p class="text-muted small mb-4">আপনার নতুন পাসওয়ার্ডটি সরাসরি সার্ভারে আপডেট করা হবে। অন্তত ১০ ক্যারেক্টার ব্যবহার করুন।</p>
                    
                    <div class="mb-3">
                        <label class="info-label">নতুন পাসওয়ার্ড লিখুন</label>
                        <div class="input-group">
                            <span class="input-group-text border-0 bg-light"><i class="fa-solid fa-lock text-muted"></i></span>
                            <input type="password" name="new_password" id="new_password" class="form-control border-0 bg-light py-2 shadow-none" placeholder="পাসওয়ার্ড দিন" required>
                            <button class="btn btn-light border-0" type="button" onclick="togglePass()"><i class="fa-solid fa-eye" id="eyeIcon"></i></button>
                        </div>
                    </div>
                </div>
                <div class="modal-footer border-0 p-4 pt-0">
                    <button type="button" class="btn btn-light rounded-pill px-4 fw-bold" data-bs-dismiss="modal">বাতিল</button>
                    <button type="submit" class="btn btn-primary rounded-pill px-5 shadow fw-bold">পাসওয়ার্ড পরিবর্তন করুন</button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
    function togglePass() {
        const passInput = document.getElementById('new_password');
        const icon = document.getElementById('eyeIcon');
        if (passInput.type === "password") {
            passInput.type = "text";
            icon.classList.replace('fa-eye', 'fa-eye-slash');
        } else {
            passInput.type = "password";
            icon.classList.replace('fa-eye-slash', 'fa-eye');
        }
    }
</script>

<?php if(session('success')): ?>
<script>
    Swal.fire({ icon: 'success', title: 'সফল!', text: "<?php echo e(session('success')); ?>", timer: 3000, showConfirmButton: false, toast: true, position: 'top-end' });
</script>
<?php endif; ?>

<?php $__env->stopSection(); ?>
<?php echo $__env->make('layouts.front', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?><?php /**PATH C:\xampp\htdocs\project\resources\views/user/hosting/details.blade.php ENDPATH**/ ?>