

<?php $__env->startSection('content'); ?>
<style>
    img.responsive-img {
        width: 50%; /* Default for mobile */
    }

    @media (min-width: 768px) {
        img.responsive-img {
            width: 15%; /* Applies on tablets & desktops */
        }
    }
    .card-body{
        padding:0px;
    }
</style>
<?php if(session('success')): ?>
<script>
    Swal.fire({
    title: "Success!",
            text: "<?php echo e(session('success')); ?>",
            icon: "success",
            showConfirmButton: false,
            timer: 3000
    });</script>
<?php endif; ?>

<?php if(session('error')): ?>
<script>
    Swal.fire({
    title: "Error!",
            text: "<?php echo e(session('error')); ?>",
            icon: "error",
            showConfirmButton: true
    });</script>
<?php endif; ?>
<!-- Main -->    
<main>

    <div class="p-top-90 p-bottom-90 bg-gray-gradient" data-aos="fade">

        <!-- Title -->
        <section class="container">
            <div class="d-lg-flex align-items-lg-end pb-4">
                <div class="block-title me-auto">
                    <small class="sub-title">Profile!</small>
                    <h1 class="display-5 title">My eSims</h1>
                </div>
            </div>
        </section>
        <!-- Title -->

        <!-- Completed -->
        <section class="container">
            <div class="card border-0 shadow-sm" data-aos="fade">
                <div class="card-body">
                    <?php if($esims_details): ?>
                    <div class="accordion" id="installationAccordion">
                        <?php $__currentLoopData = $esims_details; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $index => $sim_details): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                       <?php
    $gradientStart = $sim_details['package_details']['gradient_start'] ?? '#ffffff';
    $gradientEnd = $sim_details['package_details']['gradient_end'] ?? '#f0f0f0';
?>

<div class="accordion-item" style="margin:20px; padding:10px; background: linear-gradient(90deg, <?php echo e($gradientStart); ?>, <?php echo e($gradientEnd); ?>);">
                            <h2 class="accordion-header" id="heading<?php echo e($index); ?>" 
                                >

                                <input type="hidden" value="<?php echo e($sim_details['package_details']['countries'][0]['country_code'] ?? ''); ?>" name="country_code"/>

                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                                        data-bs-target="#collapse<?php echo e($index); ?>" aria-expanded="false">

                                    <img src="<?php echo e($sim_details['package_details']['image']['url'] ?? 'default-image.jpg'); ?>"
     class="rounded responsive-img"
     style="margin-left:-60px; padding-right:10px; height:auto;"
     alt="">
                                    <h5 style="text-transform: uppercase;">
                                        <span style="font-size:16px;"><?php echo e($sim_details['package_details']['countries'][0]['title'] ?? ''); ?></span><br>
                                        <?php echo e($sim_details['name']); ?>

                                        <span style="font-size:12px;">
    <?php if(isset($sim_details['usage']['remaining'], $sim_details['usage']['total'])): ?>
        <?php
            $remainingMB = floatval($sim_details['usage']['remaining']);
            $totalMB     = floatval($sim_details['usage']['total']);
            $usedMB      = max(0, $totalMB - $remainingMB);

            // Decimal values in GB
            $usedGB      = number_format($usedMB / 1024, 2);
            $totalGB     = number_format($totalMB / 1024, 2);

            $statusValue = strtoupper(trim($sim_details['usage']['status'] ?? ''));
            $isActive    = ($statusValue === 'ACTIVE');
        ?>

        <!-- Usage Display -->
        <div style="font-size: 12px; color: #666;">
            Remaining Data: <?php echo e($usedGB); ?> / <?php echo e($totalGB); ?> GB
        </div>

        <!-- Status Badge -->
        <div style="margin-top: 8px;">
            <span style="
                display: inline-block;
                padding: 3px 10px;
                font-size: 11px;
                font-weight: 600;
                border-radius: 12px;
                background-color: <?php echo e($isActive ? '#5cb85c' : '#d9534f'); ?>;
                color: white;">
                <?php echo e($isActive ? 'Active' : 'Inactive'); ?>

            </span>
        </div>
    <?php endif; ?>
</span>
                                    </h5>
                                </button>
                               
                            </h2>
                            
                            <div id="collapse<?php echo e($index); ?>" class="accordion-collapse collapse" aria-labelledby="heading<?php echo e($index); ?>"
                                 data-bs-parent="#installationAccordion">
                                <div class="accordion-body">
                                    <p style='color:white;'><strong>Data:</strong> <?php echo e($sim_details['data']); ?></p>
                                    <p style="color:white;"><strong>Validity:</strong> <?php echo e($sim_details['validity']); ?></p>

                                    <!-- Android Installation Accordion -->
                                    <?php if(!empty($sim_details['instructions']['android'])): ?>
                                    <div class="accordion-item">
                                        <h2 class="accordion-header">
                                            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                                                    data-bs-target="#androidGuide<?php echo e($index); ?>">
                                                Installation Instructions for Android
                                            </button>
                                        </h2>
                                        <div id="androidGuide<?php echo e($index); ?>" class="accordion-collapse collapse" data-bs-parent="#collapse<?php echo e($index); ?>">
                                            <div class="card mt-3 shadow-sm">
                                                <div class="card-body">
                                                    <?php $__currentLoopData = $sim_details['instructions']['android']; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $android): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                                    <h6 class="card-title">Model: <?php echo e($android['model']); ?> | Version: <?php echo e($android['version']); ?></h6>

                                                    <!-- QR Code Installation Accordion -->
                                                    <?php if(!empty($android['installation_via_qr_code'])): ?>
                                                    <div class="accordion-item">
                                                        <h2 class="accordion-header">
                                                            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                                                                    data-bs-target="#qrCode<?php echo e($index); ?>">
                                                                📷 QR Code Installation
                                                            </button>
                                                        </h2>
                                                        <div id="qrCode<?php echo e($index); ?>" class="accordion-collapse collapse" data-bs-parent="#androidGuide<?php echo e($index); ?>">
                                                            <div class="accordion-body">
                                                                <div class="row align-items-center">
                                                                    <div class="col-12 col-md-8">
                                                                        <ul>
                                                                            <?php $__currentLoopData = $android['installation_via_qr_code']['steps']; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $steps): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                                                            <li><?php echo e(is_array($steps) ? implode(', ', $steps) : $steps); ?></li>
                                                                            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                                                                        </ul>
                                                                    </div>
                                                                    <div class="col-12 col-md-4 text-center mt-3 mt-md-0">
                                                                        <a href="intent://android.intent.action.ACTIVATE_EUICC?activationCode=<?php echo e(urlencode($android['installation_manual']['smdp_address_and_activation_code'] ?? '')); ?>#Intent;scheme=android;s.action=android.intent.action.ACTIVATE_EUICC;end">
                                                                        <img src="<?php echo e($android['installation_via_qr_code']['qr_code_url']); ?>" 
                                                                             alt="QR Code" style="width:150px; height:auto;">
                                                                        </a>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <?php endif; ?>

                                                    <!-- Manual Installation Accordion -->
                                                    <div class="accordion-item">
                                                        <h2 class="accordion-header">
                                                            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                                                                    data-bs-target="#manualInstall<?php echo e($index); ?>">
                                                                📄 Manual Installation
                                                            </button>
                                                        </h2>
                                                        <div id="manualInstall<?php echo e($index); ?>" class="accordion-collapse collapse" data-bs-parent="#androidGuide<?php echo e($index); ?>">
                                                            <div class="accordion-body">
                                                                <ul>
                                                                    <?php $__currentLoopData = $android['installation_manual']['steps']; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $steps): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                                                    <li><?php echo e(is_array($steps) ? implode(', ', $steps) : $steps); ?></li>
                                                                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                                                                </ul>
                                                                <p>
                                                                    <strong>SMDP Address & Activation Code:</strong> 
                                                                    <span id="smdpCode<?php echo e($index); ?>" style="font-weight:bold"><?php echo e($android['installation_manual']['smdp_address_and_activation_code']); ?></span>
                                                                    <a href="javascript:void(0);" onclick="copyToClipboard('smdpCode<?php echo e($index); ?>')" 
                                                                       class="text-primary ms-2">Copy to Clipboard</a>
                                                                </p>
                                                                <!-- Install eSIM Button -->
                                                                <button class="btn btn-primary" 
                                                                        onclick="installESim('<?php echo e($android['installation_manual']['smdp_address_and_activation_code']); ?>')">
                                                                    Install eSIM Now
                                                                </button>
                                                            </div>
                                                        </div>
                                                    </div>

                                                    <!-- Network Setup Accordion -->
                                                    <?php if(!empty($android['network_setup'])): ?>
                                                    <div class="accordion-item">
                                                        <h2 class="accordion-header">
                                                            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                                                                    data-bs-target="#networkSetup<?php echo e($index); ?>">
                                                                🌐 Network Setup
                                                            </button>
                                                        </h2>
                                                        <div id="networkSetup<?php echo e($index); ?>" class="accordion-collapse collapse" data-bs-parent="#androidGuide<?php echo e($index); ?>">
                                                            <div class="accordion-body">
                                                                <ul>
                                                                    <?php $__currentLoopData = $android['network_setup']['steps']; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $steps): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                                                    <li><?php echo e(is_array($steps) ? implode(', ', $steps) : $steps); ?></li>
                                                                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                                                                </ul>
                                                                <p><strong>APN Type:</strong> <?php echo e(ucfirst($android['network_setup']['apn_type'])); ?></p>
                                                                <p><strong>APN Value:</strong> <?php echo e($android['network_setup']['apn_value']); ?></p>
                                                                <p><strong>Roaming:</strong> <?php echo e($android['network_setup']['is_roaming'] == 1 ? 'Yes' : 'N/A'); ?></p>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <?php endif; ?>
                                                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                                                    <br>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <?php endif; ?>

                                    <!-- Apple Installation Accordion -->
                                    <?php if(!empty($sim_details['instructions']['ios'])): ?>
                                    <div class="accordion-item">
                                        <h2 class="accordion-header">
                                            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                                                    data-bs-target="#appleGuide<?php echo e($index); ?>">
                                                Installation Instructions for Apple
                                            </button>
                                        </h2>
                                        <div id="appleGuide<?php echo e($index); ?>" class="accordion-collapse collapse" data-bs-parent="#collapse<?php echo e($index); ?>">
                                            <div class="card mt-3 shadow-sm">
                                                <div class="card-body">
                                                    <?php $__currentLoopData = $sim_details['instructions']['ios']; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $apple): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                                    <h6 class="card-title">Model: <?php echo e($apple['model']); ?> | Version: <?php echo e($apple['version']); ?></h6>
                                                    <span>
                                                        <a class="btn btn-sm btn-success" href="<?php echo e($apple['direct_apple_installation_url']); ?>">
                                                            Tap to Install into iOS Device Directly
                                                        </a>
                                                    </span>

                                                    <!-- QR Code Installation Accordion -->
                                                    <?php if(!empty($apple['installation_via_qr_code'])): ?>
                                                    <div class="accordion-item">
                                                        <h2 class="accordion-header">
                                                            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                                                                    data-bs-target="#qrCodeApple<?php echo e($index); ?>">
                                                                📷 QR Code Installation
                                                            </button>
                                                        </h2>
                                                        <div id="qrCodeApple<?php echo e($index); ?>" class="accordion-collapse collapse" data-bs-parent="#appleGuide<?php echo e($index); ?>">
                                                            <div class="accordion-body">
                                                                <div class="row align-items-center">
                                                                    <div class="col-12 col-md-8">
                                                                        <ul>
                                                                            <?php $__currentLoopData = $apple['installation_via_qr_code']['steps']; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $steps): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                                                            <li><?php echo e(is_array($steps) ? implode(', ', $steps) : $steps); ?></li>
                                                                            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                                                                        </ul>
                                                                    </div>
                                                                    <div class="col-12 col-md-4 text-center mt-3 mt-md-0">
                                                                        <img src="<?php echo e($apple['installation_via_qr_code']['qr_code_url']); ?>" 
                                                                             alt="QR Code" style="width:150px; height:auto;">
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <?php endif; ?>

                                                    <!-- Manual Installation Accordion -->
                                                    <div class="accordion-item">
                                                        <h2 class="accordion-header">
                                                            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                                                                    data-bs-target="#manualInstallApple<?php echo e($index); ?>">
                                                                📄 Manual Installation
                                                            </button>
                                                        </h2>
                                                        <div id="manualInstallApple<?php echo e($index); ?>" class="accordion-collapse collapse" data-bs-parent="#appleGuide<?php echo e($index); ?>">
                                                            <div class="accordion-body">
                                                                <ul>
                                                                    <?php $__currentLoopData = $apple['installation_manual']['steps']; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $steps): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                                                    <li><?php echo e(is_array($steps) ? implode(', ', $steps) : $steps); ?></li>
                                                                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                                                                </ul>
                                                                <p>
                                                                    <strong>SMDP Address & Activation Code:</strong> 
                                                                    <span id="smdpCodeApple<?php echo e($index); ?>" style="font-weight:bold"><?php echo e($apple['installation_manual']['smdp_address_and_activation_code']); ?></span>
                                                                    <a href="javascript:void(0);" onclick="copyToClipboard('smdpCodeApple<?php echo e($index); ?>')" 
                                                                       class="text-primary ms-2">Copy to Clipboard</a>
                                                                </p>
                                                            </div>
                                                        </div>
                                                    </div>

                                                    <!-- Network Setup Accordion -->
                                                    <?php if(!empty($apple['network_setup'])): ?>
                                                    <div class="accordion-item">
                                                        <h2 class="accordion-header">
                                                            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                                                                    data-bs-target="#networkSetupApple<?php echo e($index); ?>">
                                                                🌐 Network Setup
                                                            </button>
                                                        </h2>
                                                        <div id="networkSetupApple<?php echo e($index); ?>" class="accordion-collapse collapse" data-bs-parent="#appleGuide<?php echo e($index); ?>">
                                                            <div class="accordion-body">
                                                                <ul>
                                                                    <?php $__currentLoopData = $apple['network_setup']['steps']; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $steps): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                                                    <li><?php echo e(is_array($steps) ? implode(', ', $steps) : $steps); ?></li>
                                                                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                                                                </ul>
                                                                <p><strong>APN Type:</strong> <?php echo e(ucfirst($apple['network_setup']['apn_type'])); ?></p>
                                                                <p><strong>APN Value:</strong> <?php echo e($apple['network_setup']['apn_value']); ?></p>
                                                                <p><strong>Roaming:</strong> <?php echo e($apple['network_setup']['is_roaming'] == 1 ? 'Yes' : 'N/A'); ?></p>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <?php endif; ?>
                                                    <br>
                                                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <?php endif; ?>
                                </div>
                            </div>
                        </div>
                        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                    </div>
                    <?php endif; ?>
                    <br><br>
                    <a href="<?php echo e(url('contact')); ?>" class="fw-medium">
                        <span>Need Help?</span>
                        <i class="hicon hicon-thin-circle-arrow-left"></i>
                    </a>
                </div>
            </div>
        </section>
        <!-- /Completed -->

    </div>

</main>
<!-- /Main --> 
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
    function copyToClipboard(id) {
    var copyText = document.getElementById(id).innerText;

    navigator.clipboard.writeText(copyText).then(function() {
        Swal.fire({
            icon: 'success',
            title: 'Copied!',
            text: 'Value copied to clipboard: ' + copyText,
            timer: 2000,
            showConfirmButton: false
        });
    }).catch(function(error) {
        console.error("Error copying text: ", error);
    });
}
// Install eSIM
    function installESim(smdpCode) {
        // Copy the code to clipboard first
        navigator.clipboard.writeText(smdpCode).then(() => {
            // Attempt to launch Android eSIM activation intent
            const intentUri = `android.intent.action.ACTIVATE_EUICC?activationCode=${encodeURIComponent(smdpCode)}`;
            const deepLink = `intent://${intentUri}#Intent;scheme=android;s.action=android.intent.action.ACTIVATE_EUICC;end`;
            
            // Try to open the intent
            window.location.href = deepLink;

            // Fallback instructions
            setTimeout(() => {
                alert('If the eSIM installation screen did not open, please follow these steps:\n' +
                      '1. Go to Settings > Connections > SIM card manager.\n' +
                      '2. Tap Add mobile plan > Enter activation code.\n' +
                      '3. Paste the copied SM-DP+ Address & Activation Code.\n' +
                      '4. Tap Connect, then Confirm.');
            }, 1000); // Delay to allow the intent to attempt opening
        }).catch(err => {
            console.error('Failed to copy: ', err);
            alert('Failed to copy the code. Please copy it manually and go to Settings > Connections > SIM card manager to enter it.');
        });
    }
</script>

<?php $__env->stopSection(); ?>

<?php echo $__env->make('layouts.master', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?><?php /**PATH C:\wamp64\www\enexsim-frontend\resources\views/customer/esims.blade.php ENDPATH**/ ?>