@extends('root')
@section('title', 'Detail Pengajuan #' . $submission->id)

@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; }
    .review-panel { border-radius: 0.75rem; border: 2px solid #0d6efd; }
    .balance-ok { background: rgba(25,135,84,0.08); border: 1px solid #198754; border-radius: 0.5rem; }
    .balance-low { background: rgba(220,53,69,0.08); border: 1px solid #dc3545; border-radius: 0.5rem; }
    .status-btn { min-width: 130px; }
</style>
@endpush

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

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

    <div class="row g-4">

        {{-- ══════════════════════════════════════════ --}}
        {{-- LEFT: Data Pengajuan --}}
        {{-- ══════════════════════════════════════════ --}}
        <div class="col-lg-8">

            {{-- Informasi Perusahaan --}}
            <div class="card detail-card mb-4">
                <div class="card-header bg-transparent d-flex align-items-center gap-2 fw-semibold">
                    <i class="ti ti-building 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" class="text-primary">
                                    {{ $submission->website }} <i class="ti ti-external-link ms-1" style="font-size:0.75rem;"></i>
                                </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 d-flex align-items-center gap-2 fw-semibold">
                    <i class="ti ti-brand-whatsapp 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-bold fs-5 text-success">
                            +{{ ltrim($submission->country_code, '+') }}{{ $submission->whatsapp_number }}
                        </div>
                    </div>
                    <div class="detail-row">
                        <div class="detail-label">Provider / Operator</div>
                        <div class="detail-value">{{ $submission->provider ?: '-' }}</div>
                    </div>
                    <div class="detail-row">
                        <div class="detail-label">Metode Verifikasi</div>
                        <div class="detail-value">
                            <span class="badge {{ $submission->verification_method === 'SMS' ? 'bg-primary' : 'bg-success' }} bg-opacity-10 text-{{ $submission->verification_method === 'SMS' ? 'primary' : 'success' }} px-3 py-2">
                                <i class="ti {{ $submission->verification_method === 'SMS' ? 'ti-message' : 'ti-phone' }} me-1"></i>
                                {{ $submission->verification_method }}
                            </span>
                        </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 d-flex align-items-center gap-2 fw-semibold">
                    <i class="ti ti-list-check text-primary"></i> Tujuan Penggunaan (Use Case)
                </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 Penggunaan</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: Panel Review + Info Client --}}
        {{-- ══════════════════════════════════════════ --}}
        <div class="col-lg-4">

            {{-- Info Client & Saldo --}}
            <div class="card detail-card mb-4">
                <div class="card-header bg-transparent d-flex align-items-center gap-2 fw-semibold">
                    <i class="ti ti-user text-primary"></i> Info Client
                </div>
                <div class="card-body p-4">
                    <div class="detail-row">
                        <div class="detail-label">Nama</div>
                        <div class="detail-value fw-semibold">{{ $submission->user->name ?? '-' }}</div>
                    </div>
                    <div class="detail-row">
                        <div class="detail-label">Email</div>
                        <div class="detail-value">{{ $submission->user->email ?? '-' }}</div>
                    </div>
                    <div class="detail-row">
                        <div class="detail-label">Tgl. Pengajuan</div>
                        <div class="detail-value">{{ $submission->created_at->format('d M Y, H:i') }}</div>
                    </div>

                    {{-- Saldo Client --}}
                    @if($client)
                    @php
                        $balance = (float) $client->balance;
                        $isSufficient = $balance >= $setupFee;
                    @endphp
                    <div class="mt-3 p-3 {{ $isSufficient ? 'balance-ok' : 'balance-low' }} rounded">
                        <div class="d-flex align-items-center gap-2 mb-1">
                            <i class="ti {{ $isSufficient ? 'ti-circle-check text-success' : 'ti-alert-circle text-danger' }} fs-5"></i>
                            <span class="fw-semibold" style="font-size:0.8rem;">Saldo Client</span>
                        </div>
                        <div class="fs-5 fw-bold {{ $isSufficient ? 'text-success' : 'text-danger' }}">
                            Rp {{ number_format($balance, 0, ',', '.') }}
                        </div>
                        @if(!$isSufficient)
                        <div class="text-danger small mt-1">
                            <i class="ti ti-x me-1"></i>
                            Saldo tidak mencukupi untuk approve (min. Rp {{ number_format($setupFee, 0, ',', '.') }})
                        </div>
                        @else
                        <div class="text-success small mt-1">
                            <i class="ti ti-check me-1"></i>
                            Saldo mencukupi untuk approve
                        </div>
                        @endif
                    </div>
                    @endif
                </div>
            </div>

            {{-- Status Saat Ini --}}
            <div class="card detail-card mb-4">
                <div class="card-body p-4 text-center">
                    <div class="text-muted small mb-2">Status Saat Ini</div>
                    <span class="badge {{ $submission->status_badge_class }} fs-5 px-4 py-2">
                        {{ $submission->status_label }}
                    </span>
                    @if($submission->admin_notes)
                    <div class="alert alert-light mt-3 mb-0 text-start" style="font-size:0.8rem;">
                        <strong><i class="ti ti-notes me-1"></i>Catatan Admin:</strong><br>
                        {{ $submission->admin_notes }}
                    </div>
                    @endif
                    @if($submission->reviewer)
                    <div class="text-muted small mt-2">
                        Direview oleh: <strong>{{ $submission->reviewer->name }}</strong><br>
                        {{ $submission->reviewed_at?->format('d M Y, H:i') }}
                    </div>
                    @endif
                </div>
            </div>

            {{-- Panel Review (hanya tampil jika bisa di-review) --}}
            @if($submission->canBeReviewedByAdmin())
            <div class="card review-panel">
                <div class="card-header bg-primary text-white fw-semibold">
                    <i class="ti ti-edit me-2"></i> Panel Review Admin
                </div>
                <div class="card-body p-4">
                    <div class="mb-3">
                        <label class="form-label fw-semibold small text-muted">CATATAN ADMIN (opsional)</label>
                        <textarea class="form-control" id="adminNotes" rows="3"
                                  placeholder="Tulis catatan untuk client (diperlukan saat NEED_REVISION atau REJECTED)..."
                                  maxlength="1000"></textarea>
                    </div>

                    <div class="d-grid gap-2">
                        {{-- Under Review --}}
                        <button class="btn btn-outline-warning status-btn"
                                onclick="updateStatus('UNDER_REVIEW', 'Tandai sebagai Under Review?')">
                            <i class="ti ti-eye me-1"></i> Under Review
                        </button>

                        {{-- Need Revision --}}
                        <button class="btn btn-outline-secondary status-btn"
                                onclick="updateStatus('NEED_REVISION', 'Minta revisi ke client?', true)">
                            <i class="ti ti-edit me-1"></i> Need Revision
                        </button>

                        {{-- Approve --}}
                        @if($client && (float)$client->balance >= $setupFee)
                        <button class="btn btn-success status-btn fw-semibold"
                                onclick="updateStatus('APPROVED', 'Approve pengajuan ini dan potong saldo client Rp {{ number_format($setupFee, 0, \',\', \'.\') }}?')">
                            <i class="ti ti-check me-1"></i> Approve & Potong Saldo
                        </button>
                        @else
                        <button class="btn btn-success status-btn fw-semibold" disabled
                                title="Saldo client tidak mencukupi">
                            <i class="ti ti-check me-1"></i> Approve (Saldo Kurang)
                        </button>
                        @endif

                        {{-- Reject --}}
                        <button class="btn btn-danger status-btn"
                                onclick="updateStatus('REJECTED', 'Tolak pengajuan ini?', true)">
                            <i class="ti ti-x me-1"></i> Reject
                        </button>
                    </div>

                    <div class="mt-3">
                    <small class="text-muted">
                        <i class="ti ti-info-circle me-1"></i>
                        Saat <strong>APPROVED</strong>, saldo client akan dipotong
                        <strong>Rp {{ number_format($setupFee, 0, ',', '.') }}</strong> secara otomatis.
                    </small>
                    </div>
                </div>
            </div>
            @else
            <div class="alert alert-secondary">
                <i class="ti ti-lock me-2"></i>
                Pengajuan ini sudah berstatus <strong>{{ $submission->status_label }}</strong> dan tidak dapat diubah lagi.
            </div>
            @endif

            <div class="mt-3">
                <a href="{{ route('admin.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>

{{-- Modal konfirmasi (hidden, digunakan oleh JS) --}}
<div class="modal fade" id="confirmModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Konfirmasi</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body" id="confirmMessage"></div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
                <button type="button" class="btn btn-primary" id="btnConfirm">Ya, Lanjutkan</button>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
let pendingStatus = null;

function updateStatus(status, message, requireNotes = false) {
    const notes = document.getElementById('adminNotes').value.trim();

    if (requireNotes && !notes) {
        Swal.fire({
            icon: 'warning',
            title: 'Catatan Diperlukan',
            text: 'Harap isi catatan admin sebelum memilih status ini.',
        });
        document.getElementById('adminNotes').focus();
        return;
    }

    pendingStatus = status;

    Swal.fire({
        title: 'Konfirmasi',
        text: message,
        icon: status === 'APPROVED' ? 'warning' : (status === 'REJECTED' ? 'error' : 'question'),
        showCancelButton: true,
        confirmButtonText: 'Ya, Lanjutkan',
        cancelButtonText: 'Batal',
        confirmButtonColor: status === 'APPROVED' ? '#198754' : (status === 'REJECTED' ? '#dc3545' : '#0d6efd'),
    }).then((result) => {
        if (result.isConfirmed) {
            doUpdateStatus(status, document.getElementById('adminNotes').value.trim());
        }
    });
}

function doUpdateStatus(status, notes) {
    const url    = '{{ route("admin.wa-submission.update-status", $submission->id) }}';
    const token  = document.querySelector('meta[name="csrf-token"]').getAttribute('content');

    fetch(url, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': token,
            'Accept': 'application/json',
        },
        body: JSON.stringify({ status, admin_notes: notes }),
    })
    .then(r => r.json())
    .then(data => {
        if (data.success) {
            Swal.fire({
                icon: 'success',
                title: 'Berhasil',
                text: data.message,
                confirmButtonText: 'OK',
            }).then(() => location.reload());
        } else {
            Swal.fire({
                icon: 'error',
                title: 'Gagal',
                text: data.message,
            });
        }
    })
    .catch(() => {
        Swal.fire({ icon: 'error', title: 'Error', text: 'Terjadi kesalahan. Coba lagi.' });
    });
}
</script>
@endpush