<div>
    
    <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php if($show && $climbing): ?>
    
    <?php 
        // MEMBULATKAN ANGKA JAM AGAR TIDAK ADA DESIMAL BANYAK (SESUAI PERMINTAAN)
        $jamMendaki = floor(\Carbon\Carbon::parse($climbing->created_at)->diffInHours(now()));
        $isOverdue = !$climbing->check_out_date && $jamMendaki > 25;
    ?>

    <div class="modal fade show d-block" tabindex="-1" style="background: rgba(13, 17, 23, 0.85); backdrop-filter: blur(4px); z-index: 9999;">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content" style="background: #161b22; border: 1px solid <?php echo e($isOverdue ? '#f85149' : '#30363d'); ?>; border-radius: 16px; box-shadow: 0 20px 50px rgba(0,0,0,0.5); overflow: hidden;">
                
                
                <div class="modal-header" style="border-bottom: 1px solid #30363d; padding: 20px; <?php echo e($isOverdue ? 'background: rgba(248,81,73,0.1);' : ''); ?>">
                    <div class="d-flex align-items-center gap-3">
                        <div style="width: 45px; height: 45px; background: <?php echo e($isOverdue ? 'linear-gradient(135deg, #f85149, #b62323)' : 'linear-gradient(135deg, #39d0c8, #58a6ff)'); ?>; border-radius: 12px; display: grid; place-items: center; font-size: 20px;">
                            <?php echo e($isOverdue ? '⚠️' : '⛰️'); ?>

                        </div>
                        <div>
                            <h5 class="modal-title" style="font-family: 'Sora', sans-serif; font-weight: 700; color: <?php echo e($isOverdue ? '#f85149' : '#f0f6fc'); ?>; margin: 0;">
                                <?php echo e($isOverdue ? 'Detail Darurat' : 'Detail Pendaki'); ?>

                            </h5>
                            <span style="font-size: 11px; color: #8b949e; text-transform: uppercase; letter-spacing: 1px;">ID: #<?php echo e(str_pad($climbing->id, 5, '0', STR_PAD_LEFT)); ?></span>
                        </div>
                    </div>
                    <button type="button" wire:click="close" class="btn-close btn-close-white" style="font-size: 12px;"></button>
                </div>

                
                <div class="modal-body" style="padding: 24px;">
                    <div class="d-flex flex-column gap-4">
                        
                        <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php if($isOverdue): ?>
                            <div class="p-3 rounded-3 d-flex align-items-center gap-3" 
                                 style="background: #f85149; color: white; animation: danger-pulse 0.8s infinite alternate;">
                                <i class="bi bi-exclamation-octagon-fill fs-3"></i>
                                <div>
                                    <div class="fw-bold" style="font-size: 13px;">PERINGATAN: TERLAMBAT TURUN!</div>
                                    
                                    <div style="font-size: 11px; opacity: 0.9;">Sudah berada di jalur selama <strong><?php echo e($jamMendaki); ?> Jam</strong>.</div>
                                </div>
                            </div>
                        <?php endif; ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>

                        
                        <div class="p-3 rounded-3" style="background: #0d1117; border: 1px solid #21262d;">
                            <label style="font-size: 11px; color: #8b949e; font-weight: 600; text-transform: uppercase; margin-bottom: 4px; display: block;">Nama Lengkap</label>
                            <div style="font-size: 18px; font-weight: 700; color: #58a6ff;"><?php echo e($climbing->name); ?></div>
                            <div class="mt-2">
                                <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php if($climbing->check_out_date): ?>
                                    <span class="badge" style="background: rgba(63, 185, 80, 0.15); color: #3fb950; border: 1px solid rgba(63, 185, 80, 0.3);">✅ Sudah Turun</span>
                                <?php elseif($isOverdue): ?>
                                    <span class="badge" style="background: rgba(248, 81, 73, 0.2); color: #f85149; border: 1px solid #f85149;">🚨 Bahaya: Terlambat</span>
                                <?php else: ?>
                                    <span class="badge" style="background: rgba(249, 130, 108, 0.15); color: #f9826c; border: 1px solid rgba(249, 130, 108, 0.3);">🥾 Masih di Jalur</span>
                                <?php endif; ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>
                            </div>
                        </div>

                        
                        <div class="row g-3">
                            <div class="col-6">
                                <label style="font-size: 11px; color: #8b949e; display: block;">Asal / Domisili</label>
                                <span style="color: #c9d1d9; font-weight: 500;"><?php echo e($climbing->residence ?? '-'); ?></span>
                            </div>
                            <div class="col-6">
                                <label style="font-size: 11px; color: #8b949e; display: block;">Nomor WhatsApp</label>
                                <a href="https://wa.me/<?php echo e($climbing->phone_number); ?>" target="_blank" style="color: #39d0c8; text-decoration: none; font-weight: 600;">
                                    <i class="bi bi-whatsapp"></i> <?php echo e($climbing->phone_number); ?>

                                </a>
                            </div>
                            <div class="col-6">
                                <label style="font-size: 11px; color: #8b949e; display: block;">Jenis Tiket</label>
                                <span style="color: #e3b341; font-weight: 600;">🎫 <?php echo e($climbing->ticket->name ?? 'N/A'); ?></span>
                            </div>
                            <div class="col-6">
                                <label style="font-size: 11px; color: #8b949e; display: block;">Guide Pendamping</label>
                                <span style="color: #bc8cff; font-weight: 600;">🪖 <?php echo e($climbing->group->guide->name ?? ($climbing->guide->name ?? 'Tanpa Guide')); ?></span>
                            </div>
                        </div>

                        
                        <div style="border-top: 1px dashed #30363d; padding-top: 15px;">
                            <div class="row text-center mt-3">
                                <div class="col-6 border-end" style="border-color: #30363d !important;">
                                    <label style="font-size: 10px; color: #8b949e; text-transform: uppercase;">Waktu Naik</label>
                                    <div style="font-size: 12px; color: #c9d1d9;"><?php echo e($climbing->created_at->timezone('Asia/Makassar')->format('d M Y, H:i')); ?> WITA</div>
                                </div>
                                <div class="col-6">
                                    <label style="font-size: 10px; color: #8b949e; text-transform: uppercase;">Waktu Turun</label>
                                    <div style="font-size: 12px; color: <?php echo e($isOverdue ? '#f85149' : '#c9d1d9'); ?>;">
                                        <?php echo e($climbing->check_out_date ? \Carbon\Carbon::parse($climbing->check_out_date)->timezone('Asia/Makassar')->format('d M Y, H:i') . ' WITA' : ($isOverdue ? 'MELEBIHI BATAS' : 'Belum Turun' )); ?>

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

                    </div>
                </div>

                
                <div class="modal-footer" style="border-top: 1px solid #30363d; padding: 15px 24px;">
                    <button type="button" wire:click="close" class="btn btn-secondary w-100" style="background: #21262d; border: 1px solid #30363d; border-radius: 8px; font-weight: 600;">Tutup Detail</button>
                </div>
            </div>
        </div>
    </div>
    
    <style>
        @keyframes danger-pulse {
            0% { transform: scale(1); box-shadow: 0 0 0px rgba(248,81,73, 0); }
            100% { transform: scale(1.02); box-shadow: 0 0 15px rgba(248,81,73, 0.4); }
        }
    </style>
    <?php endif; ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>

    <script>
        document.addEventListener('keydown', e => {
            if (e.key === 'Escape') {
                window.Livewire.find('<?php echo e($_instance->getId()); ?>').close();
            }
        });
    </script>
</div><?php /**PATH C:\laragon\www\Pendaki_App-main\resources\views/livewire/climbing-detail.blade.php ENDPATH**/ ?>