@extends('layouts.app')

@section('content')
    <div class="page-wrapper">
        <div class="page-header d-print-none">
            <div class="container-xl">
                <div class="row g-2 align-items-center">
                    <div class="col">
                        <div class="page-pretitle">Akun</div>
                        <h2 class="page-title">Status Verifikasi Akun</h2>
                    </div>
                    <div class="col-auto ms-auto">
                        <div class="btn-list">
                            <a href="{{ route('user.dashboard') }}"
                                class="btn btn-outline-secondary d-none d-sm-inline-block">
                                <i class="ti ti-arrow-left me-2"></i>Kembali ke Dashboard
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="page-body">
            <div class="container-xl">
                <div class="row justify-content-center">
                    <div class="col-md-12">
                        {{-- Bagian Daftar Kartu Verifikasi --}}
                        <div class="card">
                            <div class="card-header">
                                <h3 class="card-title">
                                    <i class="ti ti-id me-2 text-primary"></i>Ajukan Verifikasi Baru
                                </h3>
                            </div>
                            <div class="card-body">
                                <div class="row row-cards">
                                    {{-- Kartu untuk Verifikasi Cover Creator --}}
                                    <div class="col-md-4">
                                        <div class="card card-stacked">
                                            <div class="card-body">
                                                <h4 class="card-title">Verifikasi sebagai Cover Creator</h4>
                                                <p class="text-muted">Ajukan verifikasi untuk mengunggah dan monetisasi
                                                    karya cover lagu.</p>
                                                <div class="d-flex justify-content-end mt-3">
                                                    @php
                                                        $pendingCover = $verifications
                                                            ->where('type', 'cover')
                                                            ->where('status', 'pending')
                                                            ->first();
                                                        $approvedCover = $verifications
                                                            ->where('type', 'cover')
                                                            ->where('status', 'approved')
                                                            ->first();
                                                    @endphp

                                                    @if ($approvedCover)
                                                        <button type="button" class="btn btn-success text-white" disabled>
                                                            <i class="ti ti-check me-2"></i>Approved
                                                        </button>
                                                    @elseif ($pendingCover)
                                                        <button type="button" class="btn btn-warning text-white" disabled>
                                                            <i class="ti ti-clock me-2"></i>Menunggu
                                                        </button>
                                                    @else
                                                        <button type="button" class="btn btn-primary"
                                                            data-bs-toggle="modal" data-bs-target="#verificationModal"
                                                            data-type="cover">Ajukan Sekarang</button>
                                                    @endif
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    {{-- Kartu untuk Verifikasi Artist --}}
                                    <div class="col-md-4">
                                        <div class="card card-stacked">
                                            <div class="card-body">
                                                <h4 class="card-title">Verifikasi sebagai Artis</h4>
                                                <p class="text-muted">Ajukan verifikasi untuk mengunggah dan monetisasi
                                                    karya orisinal.</p>
                                                <div class="d-flex justify-content-end mt-3">
                                                    @php
                                                        $pendingArtist = $verifications
                                                            ->where('type', 'artist')
                                                            ->where('status', 'pending')
                                                            ->first();
                                                        $approvedArtist = $verifications
                                                            ->where('type', 'artist')
                                                            ->where('status', 'approved')
                                                            ->first();
                                                    @endphp

                                                    @if ($approvedArtist)
                                                        <button type="button" class="btn btn-success text-white" disabled>
                                                            <i class="ti ti-check me-2"></i>Approved
                                                        </button>
                                                    @elseif ($pendingArtist)
                                                        <button type="button" class="btn btn-warning text-white" disabled>
                                                            <i class="ti ti-clock me-2"></i>Menunggu
                                                        </button>
                                                    @else
                                                        <button type="button" class="btn btn-primary"
                                                            data-bs-toggle="modal" data-bs-target="#verificationModal"
                                                            data-type="artist">Ajukan Sekarang</button>
                                                    @endif
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    {{-- Kartu untuk Verifikasi Composer --}}
                                    <div class="col-md-4">
                                        <div class="card card-stacked">
                                            <div class="card-body">
                                                <h4 class="card-title">Verifikasi sebagai Composer</h4>
                                                <p class="text-muted">Ajukan verifikasi untuk mendapatkan royalti dari karya
                                                    sebagai komposer.</p>
                                                <div class="d-flex justify-content-end mt-3">
                                                    @php
                                                        $pendingComposer = $verifications
                                                            ->where('type', 'composer')
                                                            ->where('status', 'pending')
                                                            ->first();
                                                        $approvedComposer = $verifications
                                                            ->where('type', 'composer')
                                                            ->where('status', 'approved')
                                                            ->first();
                                                    @endphp

                                                    @if ($approvedComposer)
                                                        <button type="button" class="btn btn-success text-white" disabled>
                                                            <i class="ti ti-check me-2"></i>Approved
                                                        </button>
                                                    @elseif ($pendingComposer)
                                                        <button type="button" class="btn btn-warning text-white" disabled>
                                                            <i class="ti ti-clock me-2"></i>Menunggu
                                                        </button>
                                                    @else
                                                        <button type="button" class="btn btn-primary"
                                                            data-bs-toggle="modal" data-bs-target="#verificationModal"
                                                            data-type="composer">Ajukan Sekarang</button>
                                                    @endif
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="card mt-3">
                            <div class="card-body">
                                <h3 class="card-title">
                                    <i class="ti ti-info-circle me-2 text-primary"></i>Status Verifikasi Anda
                                </h3>
                                @if ($verifications->isEmpty())
                                    <p class="text-muted">Belum ada pengajuan verifikasi.</p>
                                @else
                                    <ul class="list-group">
                                        @foreach ($verifications as $ver)
                                            <li class="list-group-item d-flex justify-content-between align-items-center">
                                                <div>
                                                    <strong>{{ ucfirst($ver->type) }}</strong>
                                                    <br>
                                                    <small class="text-muted">Diajukan pada:
                                                        {{ $ver->created_at->format('d M Y') }}</small>
                                                </div>
                                                @if ($ver->status == 'pending')
                                                    <span class="badge bg-warning">Menunggu</span>
                                                @elseif($ver->status == 'approved')
                                                    <span class="badge bg-success">Approved</span>
                                                @else
                                                    <span class="badge bg-danger">Ditolak</span>
                                                @endif
                                            </li>
                                        @endforeach
                                    </ul>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Modal untuk Pengajuan Verifikasi --}}
    <div class="modal modal-blur fade" id="verificationModal" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Pengajuan Verifikasi <span id="modal-title-type"></span></h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form id="verification-form" action="{{ route('verification.submit') }}" method="POST"
                        enctype="multipart/form-data">
                        @csrf
                        <input type="hidden" name="type" id="verification-type-input">
                        <div class="mb-3">
                            <label for="document_ktp" class="form-label">Dokumen KTP</label>
                            <input type="file" name="document_ktp" id="document_ktp" class="form-control"
                                accept="application/pdf,image/*" required>
                            <small class="form-text text-muted">Format: PDF, JPG, PNG (Maks. 5MB)</small>
                        </div>
                        <div class="mb-3" id="npwp-field" style="display: none;">
                            <label for="document_npwp" class="form-label">Dokumen NPWP</label>
                            <input type="file" name="document_npwp" id="document_npwp" class="form-control"
                                accept="application/pdf,image/*">
                            <small class="form-text text-muted">Format: PDF, JPG, PNG (Maks. 5MB)</small>
                        </div>
                        <div class="form-footer">
                            <button type="submit" class="btn btn-primary w-100">Ajukan Verifikasi</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Logika untuk menampilkan modal
            const verificationModal = document.getElementById('verificationModal');
            verificationModal.addEventListener('show.bs.modal', function(event) {
                const button = event.relatedTarget;
                const type = button.getAttribute('data-type');
                const modalTitleType = verificationModal.querySelector('#modal-title-type');
                const verificationTypeInput = verificationModal.querySelector('#verification-type-input');
                const npwpField = verificationModal.querySelector('#npwp-field');

                modalTitleType.textContent = type.charAt(0).toUpperCase() + type.slice(1);
                verificationTypeInput.value = type;

                if (type === 'composer') {
                    npwpField.style.display = 'block';
                    npwpField.querySelector('input').required = true;
                } else {
                    npwpField.style.display = 'none';
                    npwpField.querySelector('input').required = false;
                }
            });

            document.querySelectorAll('input[type="file"]').forEach(input => {
                input.addEventListener('change', function() {
                    if (this.files[0] && this.files[0].size > 2 * 1024 * 1024) {
                        alert('Ukuran file maksimal adalah 2MB.');
                        this.value = '';
                    }
                });
            });
        });
    </script>
@endsection