@extends('root')
@section('title', 'Detail Pengajuan Nomor WhatsApp Dedicated')

@push('styles')
<style>
    .detail-card { border-radius: 0.75rem; border: 1px solid rgba(0,0,0,0.06); }
    .detail-row { display: flex; padding: 0.65rem 0; border-bottom: 1px solid #f5f5f5; }
    .detail-row:last-child { border-bottom: none; }
    .detail-label { min-width: 200px; font-weight: 600; color: #6c757d; font-size: 0.875rem; }
    .detail-value { flex: 1; font-size: 0.875rem; color: #212529; }
    .otp-banner {
        background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%);
        border: 1px solid #66bb6a;
        border-radius: 0.75rem;
        padding: 1.25rem;
    }
    .revision-banner {
        background: linear-gradient(135deg, #fff8e1 0%, #ffecb3 100%);
        border: 1px solid #ffc107;
        border-radius: 0.75rem;
        padding: 1.25rem;
    }
</style>
@endpush

@section('content')
<div class="container-fluid">

    @include('components.breadcrumb', [
        'title' => 'Detail Pengajuan',
        'links' => [
            ['url' => route('client.dashboard'), 'label' => 'Dashboard'],
            ['url' => route('client.wa-submission.index'), 'label' => 'Pengajuan Nomor Dedicated'],
        ],
        'current' => 'Detail #' . $submission->id
    ])

    <div class="row g-4">
        {{-- Left: Detail --}}
        <div class="col-lg-8">

            {{-- Status Banner --}}
            @if($submission->isApproved())
            <div class="otp-banner mb-4 d-flex gap-3 align-items-start">
                <i class="ti ti-circle-check text-success fs-3 mt-1"></i>
                <div>
                    <div class="fw-bold text-success mb-1">Pengajuan Disetujui!</div>
                    <p class="mb-0 text-dark" style="font-size:0.875rem;">
                        Tim kami akan segera menghubungi Anda untuk proses <strong>OTP Verification</strong>
                        guna menautkan nomor <strong>+{{ ltrim($submission->country_code, '+') }}{{ $submission->whatsapp_number }}</strong>
                        ke sistem WhatsApp Business API.
                        Harap pastikan nomor tersebut aktif dan dapat menerima SMS atau panggilan suara.
                    </p>
                </div>
            </div>
            @endif

            @if($submission->isNeedRevision())
            <div class="revision-banner mb-4 d-flex gap-3 align-items-start">
                <i class="ti ti-alert-triangle text-warning fs-3 mt-1"></i>
                <div>
                    <div class="fw-bold text-warning mb-1">Diperlukan Revisi</div>
                    <p class="mb-0 text-dark" style="font-size:0.875rem;">
                        <strong>Catatan dari Admin:</strong><br>
                        {{ $submission->admin_notes ?? 'Harap hubungi admin untuk informasi lebih lanjut.' }}
                    </p>
                </div>
            </div>
            @endif

            @if($submission->isRejected())
            <div class="alert alert-danger mb-4 d-flex gap-3 align-items-start">
                <i class="ti ti-x-circle fs-3 mt-1"></i>
                <div>
                    <div class="fw-bold mb-1">Pengajuan Ditolak</div>
                    <p class="mb-0" style="font-size:0.875rem;">
                        {{ $submission->admin_notes ?? 'Pengajuan Anda tidak dapat diproses.' }}
                    </p>
                </div>
            </div>
            @endif

            {{-- Informasi Perusahaan --}}
            <div class="card detail-card mb-4">
                <div class="card-header bg-transparent fw-semibold">
                    <i class="ti ti-building me-2 text-primary"></i> Informasi Perusahaan
                </div>
                <div class="card-body p-4">
                    <div class="detail-row">
                        <div class="detail-label">Nama Perusahaan</div>
                        <div class="detail-value fw-semibold">{{ $submission->company_name }}</div>
                    </div>
                    <div class="detail-row">
                        <div class="detail-label">Website</div>
                        <div class="detail-value">
                            @if($submission->website)
                                <a href="{{ $submission->website }}" target="_blank">{{ $submission->website }}</a>
                            @else
                                <span class="text-muted">-</span>
                            @endif
                        </div>
                    </div>
                    <div class="detail-row">
                        <div class="detail-label">Kategori Bisnis</div>
                        <div class="detail-value">{{ $submission->business_category }}</div>
                    </div>
                    <div class="detail-row">
                        <div class="detail-label">Negara</div>
                        <div class="detail-value">{{ $submission->country }}</div>
                    </div>
                    <div class="detail-row">
                        <div class="detail-label">Deskripsi Bisnis</div>
                        <div class="detail-value" style="white-space: pre-line;">{{ $submission->business_description }}</div>
                    </div>
                </div>
            </div>

            {{-- Informasi Nomor --}}
            <div class="card detail-card mb-4">
                <div class="card-header bg-transparent fw-semibold">
                    <i class="ti ti-brand-whatsapp me-2 text-success"></i> Informasi Nomor WhatsApp
                </div>
                <div class="card-body p-4">
                    <div class="detail-row">
                        <div class="detail-label">Nomor WhatsApp</div>
                        <div class="detail-value fw-semibold fs-5">
                            +{{ ltrim($submission->country_code, '+') }}{{ $submission->whatsapp_number }}
                        </div>
                    </div>
                    <div class="detail-row">
                        <div class="detail-label">Provider</div>
                        <div class="detail-value">{{ $submission->provider ?: '-' }}</div>
                    </div>
                    <div class="detail-row">
                        <div class="detail-label">Metode Verifikasi</div>
                        <div class="detail-value">
                            @if($submission->verification_method === 'SMS')
                                <i class="ti ti-message me-1 text-primary"></i> SMS
                            @else
                                <i class="ti ti-phone me-1 text-success"></i> Voice Call
                            @endif
                        </div>
                    </div>
                    <div class="detail-row">
                        <div class="detail-label">Display Name</div>
                        <div class="detail-value fw-semibold">{{ $submission->display_name }}</div>
                    </div>
                    <div class="detail-row">
                        <div class="detail-label">Bahasa Display</div>
                        <div class="detail-value">{{ strtoupper($submission->display_language) }}</div>
                    </div>
                </div>
            </div>

            {{-- Use Case --}}
            <div class="card detail-card mb-4">
                <div class="card-header bg-transparent fw-semibold">
                    <i class="ti ti-list-check me-2 text-primary"></i> Tujuan Penggunaan
                </div>
                <div class="card-body p-4">
                    <div class="d-flex flex-wrap gap-2 mb-3">
                        @foreach($submission->use_case_labels as $label)
                            <span class="badge bg-primary bg-opacity-10 text-primary px-3 py-2" style="font-size:0.8rem;">
                                <i class="ti ti-check me-1"></i>{{ $label }}
                            </span>
                        @endforeach
                    </div>
                    @if($submission->use_case_description)
                    <div class="detail-row">
                        <div class="detail-label">Deskripsi</div>
                        <div class="detail-value" style="white-space: pre-line;">{{ $submission->use_case_description }}</div>
                    </div>
                    @endif
                    @if($submission->example_message)
                    <div class="detail-row">
                        <div class="detail-label">Contoh Pesan</div>
                        <div class="detail-value">
                            <div class="bg-light rounded p-3" style="font-family: monospace; font-size: 0.875rem;">
                                {{ $submission->example_message }}
                            </div>
                        </div>
                    </div>
                    @endif
                </div>
            </div>

        </div>

        {{-- Right: Status Card --}}
        <div class="col-lg-4">
            <div class="card detail-card sticky-top" style="top: 1rem;">
                <div class="card-header bg-transparent fw-semibold">
                    <i class="ti ti-info-circle me-2 text-primary"></i> Status Pengajuan
                </div>
                <div class="card-body p-4">
                    <div class="text-center mb-4">
                        <span class="badge {{ $submission->status_badge_class }} fs-5 px-4 py-2">
                            {{ $submission->status_label }}
                        </span>
                    </div>

                    <div class="detail-row">
                        <div class="detail-label">ID Pengajuan</div>
                        <div class="detail-value fw-semibold">#{{ $submission->id }}</div>
                    </div>
                    <div class="detail-row">
                        <div class="detail-label">Tanggal Pengajuan</div>
                        <div class="detail-value">{{ $submission->created_at->format('d M Y, H:i') }}</div>
                    </div>
                    @if($submission->reviewed_at)
                    <div class="detail-row">
                        <div class="detail-label">Tanggal Review</div>
                        <div class="detail-value">{{ $submission->reviewed_at->format('d M Y, H:i') }}</div>
                    </div>
                    @endif
                    @if($submission->reviewer)
                    <div class="detail-row">
                        <div class="detail-label">Direview oleh</div>
                        <div class="detail-value">{{ $submission->reviewer->name }}</div>
                    </div>
                    @endif

                    @if($submission->isApproved())
                    <div class="alert alert-success mt-3 mb-0 p-3" style="font-size:0.8rem;">
                        <i class="ti ti-coin me-1"></i>
                        Saldo <strong>Rp {{ number_format($setupFee, 0, ',', '.') }}</strong> telah dipotong sebagai biaya setup.
                    </div>
                    @endif

                    <div class="mt-4">
                        <a href="{{ route('client.wa-submission.index') }}" class="btn btn-outline-secondary w-100">
                            <i class="ti ti-arrow-left me-1"></i> Kembali ke Daftar
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>
@endsection