@extends('dashboard.app')

@section('title', 'Detail Data Pendaftaran')

@section('content')
    <div class="page-content">
        <div class="row">
            <div class="col-md-12 grid-margin stretch-card">
                <div class="card">
                    <div class="card-body">
                        <!-- Header -->
                        <div class="panel-heading mb-4 pb-3" style="border-bottom: 3px solid #4e73df;">
                            <h3 class="panel-title" style="color: #ffffff; font-weight: bold; margin: 0;">
                                INFORMASI PENDAFTAR
                            </h3>
                        </div>
                        
                        <!-- 2 Grid Layout -->
                        <div class="row">
                            <!-- Kolom Kiri -->
                            <div class="col-md-6">
                                <div class="info-group">
                                    <div class="info-item">
                                        <div class="info-label">NOMOR PENDAFTARAN</div>
                                        <div class="info-value">
                                            <span class="badge-po">PO_{{ $daftar->daftar_id }}</span>
                                        </div>
                                    </div>
                                    
                                    <div class="info-item">
                                        <div class="info-label">NAMA LENGKAP</div>
                                        <div class="info-value">{{ $daftar->nama_leng }}</div>
                                    </div>
                                    
                                    <div class="info-item">
                                        <div class="info-label">NO KTP</div>
                                        <div class="info-value">{{ $daftar->no_ktp }}</div>
                                    </div>
                                    
                                    <div class="info-item">
                                        <div class="info-label">PILIHAN KAMPUS</div>
                                        <div class="info-value">{{ $daftar->kampus }}</div>
                                    </div>
                                    
                                    <div class="info-item">
                                        <div class="info-label">JURUSAN</div>
                                        <div class="info-value">{{ $daftar->jurusan }}</div>
                                    </div>
                                    
                                    <div class="info-item">
                                        <div class="info-label">LULUSAN</div>
                                        <div class="info-value">{{ $daftar->lulusan }}</div>
                                    </div>
                                    
                                    <div class="info-item">
                                        <div class="info-label">TEMPAT & TGL LAHIR</div>
                                        <div class="info-value">{{ $daftar->tmpt_lahir }}, {{ tanggal_indonesia($daftar->tgl_lahir) }}</div>
                                    </div>
                                    
                                    <div class="info-item">
                                        <div class="info-label">JENIS KELAMIN</div>
                                        <div class="info-value">{{ $daftar->j_kel == 'L' ? 'Laki-Laki' : 'Perempuan' }}</div>
                                    </div>
                                    
                                    <div class="info-item">
                                        <div class="info-label">AGAMA</div>
                                        <div class="info-value">{{ $daftar->agama }}</div>
                                    </div>
                                </div>
                            </div>
                            
                            <!-- Kolom Kanan -->
                            <div class="col-md-6">
                                <div class="info-group">
                                    <div class="info-item">
                                        <div class="info-label">ALAMAT KTP</div>
                                        <div class="info-value">{{ $daftar->al_ktp }}</div>
                                    </div>
                                    
                                    <div class="info-item">
                                        <div class="info-label">ALAMAT DOMISILI</div>
                                        <div class="info-value">{{ $daftar->al_dom }}</div>
                                    </div>
                                    
                                    <div class="info-item">
                                        <div class="info-label">NO HP</div>
                                        <div class="info-value">{{ $daftar->no_hp }}</div>
                                    </div>
                                    
                                    <div class="info-item">
                                        <div class="info-label">NO WA</div>
                                        <div class="info-value">{{ $daftar->no_wa }}</div>
                                    </div>
                                    
                                    <div class="info-item">
                                        <div class="info-label">EMAIL</div>
                                        <div class="info-value">{{ $daftar->email }}</div>
                                    </div>
                                    
                                    <div class="info-item">
                                        <div class="info-label">NAMA AYAH</div>
                                        <div class="info-value">{{ $daftar->ayah }}</div>
                                    </div>
                                    
                                    <div class="info-item">
                                        <div class="info-label">NAMA IBU</div>
                                        <div class="info-value">{{ $daftar->ibu }}</div>
                                    </div>
                                    
                                    <div class="info-item">
                                        <div class="info-label">ASAL SEKOLAH</div>
                                        <div class="info-value">{{ $daftar->sekolah }}</div>
                                    </div>
                                    
                                    <div class="info-item">
                                        <div class="info-label">BIAYA</div>
                                        <div class="info-value">{{ $daftar->biaya }}</div>
                                    </div>
                                    
                                    <div class="info-item">
                                        <div class="info-label">SUMBER INFORMASI</div>
                                        <div class="info-value">{{ $daftar->info }}</div>
                                    </div>
                                    
                                    <div class="info-item">
                                        <div class="info-label">UKURAN ALMAMATER</div>
                                        <div class="info-value">{{ $daftar->jaket }}</div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Note Section -->
                        <div class="mt-4 pt-3" style="border-top: 1px solid #e3e6f0;">
                            <div class="panel-heading mb-3">
                                <h4 class="panel-title" style="color: #ffffff; font-weight: bold; margin: 0;">
                                    NOTE
                                </h4>
                            </div>
                            <p class="mb-3" style="color: #ffffff; font-weight: bold; line-height: 1.6;">
                                Untuk semua marketing dapat memfollow up langsung pendaftar melalui button WA di bawah ini.
                            </p>
                            <a href="https://wa.me/{{ $no_wa_replaced }}?text={{ rawurlencode("Terimakasih sudah melakukan pendaftaran online di kampus *" . $daftar->kampus . "* dengan data:\n\n- No.PO : *" . $daftar->daftar_id . "*\n- Nama : *" . $daftar->nama_leng . "*\n- Jurusan : *" . $daftar->jurusan . "*\n- NIK : *" . $daftar->no_ktp . "*\n\nData sudah kami terima, kapan dapat melakukan pembayaran biaya pendaftaran?") }}"
                                target="_blank" rel="noopener noreferrer" 
                                class="btn-wa">
                                FOLLOW BY WA
                            </a>
                        </div>
                        
                        <!-- Button Back -->
                        <div class="mt-4">
                            <button onclick="window.history.go(-1); return false;" class="btn-back">
                                KEMBALI
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <style>
        .info-group {
            padding: 0 10px;
        }
        
        .info-item {
            margin-bottom: 1.5rem;
            padding-bottom: 0.75rem;
            border-bottom: 1px solid #edf2f7;
        }
        
        .info-label {
            font-size: 0.7rem;
            letter-spacing: 1px;
            color: #ffffff;
            font-weight: bold;
            margin-bottom: 0.35rem;
            text-transform: uppercase;
        }
        
        .info-value {
            font-size: 1rem;
            color: #ffffff;
            font-weight: bold;
            word-wrap: break-word;
            line-height: 1.5;
        }
        
        .badge-po {
            background: #4e73df;
            color: white;
            padding: 5px 12px;
            border-radius: 4px;
            font-size: 0.85rem;
            font-weight: bold;
            display: inline-block;
        }
        
        .btn-wa {
            display: inline-block;
            background: #25D366;
            color: white;
            padding: 10px 24px;
            border-radius: 6px;
            text-decoration: none;
            font-weight: bold;
            font-size: 0.85rem;
            letter-spacing: 0.5px;
            transition: all 0.2s ease;
            border: none;
            cursor: pointer;
        }
        
        .btn-wa:hover {
            background: #128C7E;
            text-decoration: none;
            color: white;
            transform: translateY(-1px);
        }
        
        .btn-back {
            background: #718096;
            color: white;
            padding: 8px 20px;
            border-radius: 6px;
            border: none;
            font-weight: bold;
            font-size: 0.85rem;
            letter-spacing: 0.5px;
            cursor: pointer;
            transition: all 0.2s ease;
        }
        
        .btn-back:hover {
            background: #4a5568;
            transform: translateY(-1px);
        }
        
        .card {
            border-radius: 12px;
            box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
            overflow: hidden;
            border: 1px solid #e2e8f0;
        }
        
        .card-body {
            padding: 2rem;
        }
        
        @media (max-width: 768px) {
            .card-body {
                padding: 1.25rem;
            }
            .info-item {
                margin-bottom: 1rem;
            }
            .info-group {
                padding: 0;
            }
        }
        
        /* Reset margin untuk heading */
        h3, h4 {
            margin: 0;
        }
    </style>

    @php
        function tanggal_indonesia($tanggal)
        {
            if (empty($tanggal)) {
                return 'Tanggal Tidak Diketahui';
            }

            $pecahkan = explode('-', $tanggal);

            if (count($pecahkan) == 3) {
                $bulan = [
                    1 => 'Januari',
                    'Februari',
                    'Maret',
                    'April',
                    'Mei',
                    'Juni',
                    'Juli',
                    'Agustus',
                    'September',
                    'Oktober',
                    'November',
                    'Desember',
                ];

                return $pecahkan[2] . ' ' . $bulan[(int) $pecahkan[1]] . ' ' . $pecahkan[0];
            }

            return 'Tanggal Tidak Valid';
        }
    @endphp

@endsection