@extends('layouts.master_landing')
@section('content')

@php
    $userPeserta = Auth::guard('peserta')->user();
    $isProfileComplete = false;
    
    if ($userPeserta) {
        $isProfileComplete = !empty($userPeserta->nik) &&
                             !empty($userPeserta->npwp) &&
                             !empty($userPeserta->nama) &&
                             !empty($userPeserta->email) &&
                             !empty($userPeserta->jk) &&
                             !empty($userPeserta->golongan_darah) &&
                             !empty($userPeserta->tinggi) &&
                             !empty($userPeserta->berat) &&
                             !empty($userPeserta->tempat_lahir) &&
                             !empty($userPeserta->tanggal_lahir) &&
                             !empty($userPeserta->no_tlp) &&
                             !empty($userPeserta->pendidikan_terakir) &&
                             !empty($userPeserta->alamat);
    }
@endphp

<div class="content-wrapper">
    <div class="container-xxl flex-grow-1 container-p-y">

        <div class="row mb-12 g-6">
            <div class="row g-6"> 
                @foreach($magangs as $magang)
                @php
                    // CEK KEDALUWARSA, KUOTA, DAN PENDAFTARAN GANDA
                    $isExpired = date('Y-m-d') > $magang->tgl_selesai;
                    $isPenuh = $magang->sisa_kuota <= 0;
                    $isSudahDaftar = in_array($magang->id, $sudah_daftar);
                    $isDisabled = $isExpired || $isPenuh || $isSudahDaftar; 
                @endphp
                <div class="col-md-6 col-lg-4 mb-4">
                    <div class="card h-100 shadow-sm border-0 {{ $isDisabled ? 'bg-lighter' : '' }}">
                        
                        <div class="position-relative">
                            @if($magang->foto && file_exists(public_path('foto_magang/' . $magang->foto)))
                                <img class="card-img-top {{ $isDisabled ? 'opacity-50' : '' }}" src="{{ asset('foto_magang/' . $magang->foto) }}" alt="{{ $magang->nama }}" style="height: 200px; object-fit: cover;" />
                            @else
                                <img class="card-img-top {{ $isDisabled ? 'opacity-50' : '' }}" src="{{ asset('assets/img/elements/2.png') }}" alt="Default Image" style="height: 200px; object-fit: cover;" />
                            @endif

                            {{-- LABEL KONDISI DI ATAS FOTO --}}
                            @if($isSudahDaftar)
                                <div class="position-absolute top-0 end-0 m-3">
                                    <span class="badge bg-success fs-6 shadow-sm"><i class="bx bx-check-circle me-1"></i> Sudah Diikuti</span>
                                </div>
                            @elseif($isExpired)
                                <div class="position-absolute top-0 end-0 m-3">
                                    <span class="badge bg-danger fs-6 shadow-sm"><i class="bx bx-time-five me-1"></i> Telah Selesai</span>
                                </div>
                            @elseif($isPenuh)
                                <div class="position-absolute top-0 end-0 m-3">
                                    <span class="badge bg-dark fs-6 shadow-sm"><i class="bx bx-group me-1"></i> Kuota Penuh</span>
                                </div>
                            @endif
                        </div>

                        <div class="card-body d-flex flex-column justify-content-between p-4">
                            <div>
                                <h5 class="card-title text-dark fw-bold mb-2" style="font-size: 1.15rem; line-height: 1.4;">
                                    {{ $magang->nama }}
                                </h5>
                                
                                <div class="d-flex align-items-center justify-content-between mb-3">
                                    <span class="badge {{ $isDisabled ? 'bg-label-secondary' : 'bg-label-success' }} px-2.5 py-1.5 fw-semibold text-uppercase" style="font-size: 0.75rem;">
                                        {{ $magang->type }}
                                    </span>
                                    <span class="text-primary fw-bold fs-5 {{ $isDisabled ? 'text-muted' : '' }}">
                                        {{ $magang->biaya == 0 ? 'Gratis' : 'Rp ' . number_format($magang->biaya, 0, ',', '.') }}
                                    </span>
                                </div>

                                <hr class="my-2 text-light">

                                <div class="mb-3 small text-muted">
                                    <div class="d-flex align-items-center mb-1.5">
                                        <i class="bx bx-group me-2 {{ $isDisabled ? 'text-secondary' : 'text-warning' }} fs-5"></i>
                                        <span>Sisa Kuota: <strong class="{{ $isPenuh ? 'text-danger' : 'text-dark' }}">{{ $magang->sisa_kuota > 0 ? $magang->sisa_kuota : 0 }} Peserta</strong> / {{ $magang->kuota }}</span>
                                    </div>
                                    <div class="d-flex align-items-center">
                                        <i class="bx bx-calendar me-2 {{ $isDisabled ? 'text-secondary' : 'text-info' }} fs-5"></i>
                                        <span class="text-truncate">
                                            Jadwal: <strong class="{{ $isExpired ? 'text-danger' : 'text-dark' }}">{{ \Carbon\Carbon::parse($magang->tgl_mulai)->translatedFormat('d M') }} - {{ \Carbon\Carbon::parse($magang->tgl_selesai)->translatedFormat('d M Y') }}</strong>
                                        </span>
                                    </div>
                                </div>

                                <p class="card-text text-secondary mb-4" style="display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; min-height: 40px; font-size: 0.9rem;">
                                    {{ strip_tags($magang->uraian) }}
                                </p>
                            </div>

                            <div class="row g-2">
                                <div class="col-6">
                                    <button type="button" class="btn btn-outline-secondary w-100 py-2 fw-semibold" data-bs-toggle="modal" data-bs-target="#modalDetail{{ $magang->id }}">
                                        <i class="bx bx-info-circle me-1"></i> Detail
                                    </button>
                                </div>
                                <div class="col-6">
                                    {{-- LOGIKA TOMBOL DAFTAR DI CARD --}}
                                    @if($isSudahDaftar)
                                        <button type="button" class="btn btn-success w-100 py-2 fw-semibold" disabled>
                                            <i class="bx bx-check"></i> Terdaftar
                                        </button>
                                    @elseif($isExpired)
                                        <button type="button" class="btn btn-secondary w-100 py-2 fw-semibold" disabled>
                                            Selesai
                                        </button>
                                    @elseif($isPenuh)
                                        <button type="button" class="btn btn-dark w-100 py-2 fw-semibold" disabled>
                                            Penuh
                                        </button>
                                    @elseif($isProfileComplete)
                                        <a href="{{ route('pelatihan_tersedia.checkout', $magang->id) }}" class="btn btn-primary w-100 py-2 fw-semibold">
                                            Daftar
                                        </a>
                                    @else
                                        <button type="button" class="btn btn-primary w-100 py-2 fw-semibold btn-perlu-lengkap">
                                            Daftar
                                        </button>
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- MODAL DETAIL --}}
                <div class="modal fade" id="modalDetail{{ $magang->id }}" tabindex="-1" aria-hidden="true">
                    <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
                        <div class="modal-content">
                            <div class="modal-header border-bottom pb-3">
                                <h5 class="modal-title fw-bold text-dark" id="modalDetailTitle{{ $magang->id }}">
                                    <i class="bx bx-book-open me-2 text-primary"></i> Informasi Lengkap Pelatihan
                                </h5>
                                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                            </div>
                            
                            <div class="modal-body p-4">
                                @if($magang->foto && file_exists(public_path('foto_magang/' . $magang->foto)))
                                    <img src="{{ asset('foto_magang/' . $magang->foto) }}" alt="{{ $magang->nama }}" class="img-fluid rounded mb-4 shadow-sm {{ $isDisabled ? 'opacity-75' : '' }}" style="width: 100%; max-height: 300px; object-fit: cover;" />
                                @endif

                                <h4 class="fw-bold text-dark mb-2">{{ $magang->nama }}</h4>
                                
                                <div class="d-flex align-items-center gap-3 mb-4">
                                    <span class="badge {{ $isDisabled ? 'bg-label-secondary' : 'bg-label-success' }} px-3 py-2 text-uppercase fw-semibold">{{ $magang->type }}</span>
                                    <span class="text-primary fw-bold fs-4 {{ $isDisabled ? 'text-muted' : '' }}">{{ $magang->biaya == 0 ? 'Gratis' : 'Rp ' . number_format($magang->biaya, 0, ',', '.') }}</span>
                                </div>

                                <div class="row g-3 mb-4 p-3 bg-light rounded mx-0 border">
                                    <div class="col-sm-6 border-end border-sm-0">
                                        <small class="text-muted d-block uppercase fw-semibold" style="font-size: 0.75rem;">Ketersediaan Kuota</small>
                                        <div class="d-flex align-items-center mt-1">
                                            <i class="bx bx-group me-2 {{ $isDisabled ? 'text-secondary' : 'text-warning' }} fs-3"></i>
                                            <span class="fw-bold {{ $isPenuh ? 'text-danger' : 'text-dark' }} fs-5">{{ $magang->sisa_kuota > 0 ? $magang->sisa_kuota : 0 }} Tersedia (dari {{ $magang->kuota }})</span>
                                        </div>
                                    </div>
                                    <div class="col-sm-6">
                                        <small class="text-muted d-block uppercase fw-semibold" style="font-size: 0.75rem;">Durasi Pelaksanaan</small>
                                        <div class="d-flex align-items-center mt-1">
                                            <i class="bx bx-calendar me-2 {{ $isDisabled ? 'text-secondary' : 'text-info' }} fs-3"></i>
                                            <span class="fw-bold {{ $isExpired ? 'text-danger' : 'text-dark' }} fs-5">
                                                {{ \Carbon\Carbon::parse($magang->tgl_mulai)->translatedFormat('d M Y') }} s/d {{ \Carbon\Carbon::parse($magang->tgl_selesai)->translatedFormat('d M Y') }}
                                            </span>
                                        </div>
                                    </div>
                                </div>

                                <h5 class="fw-bold text-dark mb-3">Deskripsi & Kualifikasi Pelatihan:</h5>
                                <div class="text-secondary style-html-content" style="line-height: 1.7; font-size: 0.95rem;">
                                    {!! $magang->uraian !!} 
                                </div>
                            </div>

                            <div class="modal-footer border-top pt-3">
                                <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Tutup Jendela</button>
                                
                                {{-- LOGIKA TOMBOL DAFTAR DI MODAL --}}
                                @if($isSudahDaftar)
                                    <button type="button" class="btn btn-success px-4 fw-semibold" disabled>
                                        <i class="bx bx-check-circle me-1"></i> Anda Sudah Terdaftar
                                    </button>
                                @elseif($isExpired)
                                    <button type="button" class="btn btn-secondary px-4 fw-semibold" disabled>
                                        <i class="bx bx-block me-1"></i> Pendaftaran Ditutup
                                    </button>
                                @elseif($isPenuh)
                                    <button type="button" class="btn btn-dark px-4 fw-semibold" disabled>
                                        <i class="bx bx-group me-1"></i> Kuota Sudah Penuh
                                    </button>
                                @elseif($isProfileComplete)
                                    <a href="{{ route('pelatihan_tersedia.checkout', $magang->id) }}" class="btn btn-primary px-4 fw-semibold">
                                        <i class="bx bx-check-shield me-1"></i> Mulai Daftar Sekarang
                                    </a>
                                @else
                                    <button type="button" class="btn btn-primary px-4 fw-semibold btn-perlu-lengkap">
                                        <i class="bx bx-check-shield me-1"></i> Mulai Daftar Sekarang
                                    </button>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
                @endforeach
            </div>
        </div>
        </div>
    <div class="content-backdrop fade"></div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function () {
        const alertButtons = document.querySelectorAll('.btn-perlu-lengkap');
        
        alertButtons.forEach(button => {
            button.addEventListener('click', function (e) {
                e.preventDefault();
                
                const modalElement = button.closest('.modal');
                if (modalElement) {
                    const modalInstance = bootstrap.Modal.getInstance(modalElement);
                    if (modalInstance) {
                        modalInstance.hide();
                    }
                }

                Swal.fire({
                    title: 'Data Belum Lengkap!',
                    text: 'Silakan lengkapi data profil Anda terlebih dahulu (NIK, NPWP, No. HP, Alamat, dll.) sebelum mendaftar pelatihan.',
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#696cff',
                    cancelButtonColor: '#8592a3',
                    confirmButtonText: '<i class="bx bx-user me-1"></i> Lengkapi Data',
                    cancelButtonText: 'Batal',
                    customClass: {
                        confirmButton: 'btn btn-primary me-3',
                        cancelButton: 'btn btn-outline-secondary'
                    },
                    buttonsStyling: false
                }).then((result) => {
                    if (result.isConfirmed) {
                        window.location.href = "{{ route('account.index') }}"; 
                    }
                });
            });
        });
    });
</script>

@endsection