@extends('home_layout.layout')
@section('title', 'Formulir Pendaftaran Santri Baru PP.Al-Qodiri Jember')
@section('content')

    @include('home_layout.partials.navbar', ['navCta' => 'Cek Pendaftaran'])

    <section class="hero-aq py-5" style="min-height:240px;">
        <div class="dot-pattern"></div>
        <div class="container position-relative py-4">
            <div class="d-inline-flex align-items-center gap-2 text-aq-goldsoft text-uppercase fw-semibold mb-3"
                style="font-size:.72rem; letter-spacing:.2em;">
                <span class="diamond-aq"></span> PPDB Terpadu
            </div>
            <h1 class="text-aq-ivory fw-semibold">Formulir Pendaftaran Santri Baru</h1>
        </div>
    </section>

    <section class="py-5">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-lg-9">
                    <div class="card-aq p-4 p-lg-5">
                        <h2 class="text-center text-aq-deep fw-semibold">Assalamualaikum Wr. Wb</h2>
                        <hr>

                        <div class="alert alert-success text-center rounded-4" role="alert">
                            Pendaftaran telah berhasil dilakukan, silakan mengunduh bukti Pendaftaran pada link di
                            bawah ini!
                        </div>

                        <dl class="row gy-3 mt-2">
                            <dt class="col-lg-4">No Registrasi Pendaftaran</dt>
                            <dd class="col-lg-8 fw-bold">
                                {{ $data_santri->no_induk_santri ?? '-' }}
                                @if ($data_santri->status_santri == 'AKTIF')
                                    <span class="badge badge-aq-deep ms-1">Aktif</span>
                                @else
                                    <span class="badge bg-danger ms-1">Tidak Aktif</span>
                                @endif
                            </dd>

                            <dt class="col-lg-4">NIS</dt>
                            <dd class="col-lg-8">
                                {!! $data_santri->nis_sipptren ?? '<span class="fst-italic text-muted">Nomor akan muncul saat sudah melakukan validasi</span>' !!}
                            </dd>

                            <dt class="col-lg-4">Nama Santri</dt>
                            <dd class="col-lg-8">{{ $data_santri->nama_lengkap_santri ?? '-' }}</dd>

                            <dt class="col-lg-4">Tanggal Masuk Santri</dt>
                            <dd class="col-lg-8">
                                @if($data_santri->tanggal_masuk)
                                    {{ $data_santri->tanggal_masuk->format('d-m-Y') }}
                                @else
                                    -
                                @endif
                            </dd>

                            <dt class="col-lg-4">Jenis Kelamin</dt>
                            <dd class="col-lg-8">{{ $data_santri->jenis_kelamin ?? '-' }}</dd>

                            <dt class="col-lg-4">Tempat Lahir</dt>
                            <dd class="col-lg-8">{{ $data_santri->tempat_lahir ?? '-' }}</dd>

                            <dt class="col-lg-4">Tanggal Lahir</dt>
                            <dd class="col-lg-8">
                                @if($data_santri->tanggal_lahir)
                                    {{ $data_santri->tanggal_lahir->format('d-m-Y') }}
                                @else
                                    -
                                @endif
                            </dd>

                            <dt class="col-lg-4">Status Kewarganegaraan</dt>
                            <dd class="col-lg-8">
                                @if($data_santri->status_kewarganegaraan == 'WNI')
                                    Warga Negara Indonesia (WNI)
                                @else
                                    Warga Negara Asing (WNA) / Foreign Citizen
                                @endif
                            </dd>

                            @if ($data_santri->status_kewarganegaraan == 'WNA')
                                <dt class="col-lg-4">No Passport</dt>
                                <dd class="col-lg-8">{{ $data_santri->no_passport_santri ?? '-' }}</dd>
                            @else
                                <dt class="col-lg-4">No KK</dt>
                                <dd class="col-lg-8">{{ Str::mask($data_santri->no_kk, '*', 4) }}</dd>

                                <dt class="col-lg-4">NIK Santri</dt>
                                <dd class="col-lg-8">{{ Str::mask($data_santri->nik_santri, '*', 4) }}</dd>
                            @endif
                        </dl>

                        <hr>

                        <dl class="row gy-3">
                            @if ($data_santri->status_kewarganegaraan == 'WNA')
                                <dt class="col-lg-4">Alamat Lengkap di Negara Asal</dt>
                                <dd class="col-lg-8">{{ $data_santri->alamat_tinggal_negara_asal ?? '-' }}</dd>
                            @else
                                <dt class="col-lg-4">Provinsi</dt>
                                <dd class="col-lg-8">{{ $data_santri->nama_provinsi ?? '-' }}</dd>

                                <dt class="col-lg-4">Kabupaten/Kota</dt>
                                <dd class="col-lg-8">{{ $data_santri->nama_kabupaten ?? '-' }}</dd>

                                <dt class="col-lg-4">Kecamatan</dt>
                                <dd class="col-lg-8">{{ $data_santri->nama_kecamatan ?? '-' }}</dd>

                                <dt class="col-lg-4">Desa/Kelurahan</dt>
                                <dd class="col-lg-8">{{ $data_santri->nama_desa ?? '-' }}</dd>

                                <dt class="col-lg-4">Dusun</dt>
                                <dd class="col-lg-8">{{ $data_santri->alamat_dusun ?? '-' }}</dd>
                            @endif
                        </dl>

                        <hr>

                        <dl class="row gy-3">
                            <dt class="col-lg-4">Lembaga Pendidikan</dt>
                            <dd class="col-lg-8">
                                @php
                                    $lembagaSelected = $lembaga->firstWhere('id_lembaga', $data_santri->pendidikan_dipilih);
                                @endphp
                                {{ $lembagaSelected->nama_lembaga ?? '-' }}
                            </dd>
                        </dl>

                        <hr>

                        <dl class="row gy-3">
                            <dt class="col-lg-4">Nama Ayah</dt>
                            <dd class="col-lg-8">{{ $data_santri->nama_ayah ?? '-' }}</dd>

                            <dt class="col-lg-4">Pekerjaan Ayah</dt>
                            <dd class="col-lg-8">{{ $data_santri->pekerjaan_ayah ?? '-' }}</dd>

                            <dt class="col-lg-4">Nama Ibu</dt>
                            <dd class="col-lg-8">{{ $data_santri->nama_ibu ?? '-' }}</dd>

                            <dt class="col-lg-4">Pekerjaan Ibu</dt>
                            <dd class="col-lg-8">{{ $data_santri->pekerjaan_ibu ?? '-' }}</dd>

                            <dt class="col-lg-4">No HP</dt>
                            <dd class="col-lg-8">{{ Str::mask($data_santri->no_hp, '*', 4) }}</dd>

                            <dt class="col-lg-4">Foto Santri</dt>
                            <dd class="col-lg-8">
                                @if($data_santri->foto)
                                    <img src="{{ asset('storage/' . $data_santri->foto) }}" alt="Foto Santri"
                                        class="rounded-3" style="max-width:200px;">
                                @else
                                    -
                                @endif
                            </dd>
                        </dl>

                        <hr>

                        <div class="row">
                            <dt class="col-lg-4">Link Bukti Pendaftaran</dt>
                            <div class="col-lg-8">
                                <button type="button" class="btn btn-aq-deep" data-bs-toggle="modal" data-bs-target="#modal-bukti">
                                    Lihat Bukti Pendaftaran
                                </button>
                            </div>
                        </div>

                        <hr>

                        <div class="alert alert-info rounded-4" role="alert">
                            <h5 class="alert-heading"><i class="fas fa-info-circle me-2"></i>Informasi Penting</h5>
                            <hr>
                            Untuk validasi, silakan hubungi admin dengan menunjukkan bukti pendaftaran yang telah
                            diunduh beserta dokumen persyaratan lainnya yang diperlukan. Untuk informasi lebih lanjut,
                            Anda dapat menghubungi admin melalui kontak yang tersedia.
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    @include('home_layout.partials.footer')

    {{-- Modal Bukti Pendaftaran --}}
    <div class="modal fade" id="modal-bukti" tabindex="-1" aria-labelledby="modalBuktiLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-scrollable modal-xl">
            <div class="modal-content rounded-4">
                <div class="modal-header">
                    <h5 class="modal-title" id="modalBuktiLabel">Bukti Pendaftaran</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body text-center">
                    <div id="pdf-viewer"></div>
                </div>
                <div class="modal-footer">
                    <a href="{{ route('download_bukti', $data_santri->id) }}" class="btn btn-aq-deep">
                        Download Bukti Pendaftaran
                    </a>
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>

@endsection

@section('scripts')
    {{-- JS wilayah --}}
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/jquery.validation/1.19.5/jquery.validate.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

    <script>
        function confirmSubmit() {
            Swal.fire({
                title: 'Apakah Anda yakin?',
                text: "Data santri akan diperbarui dan data tidak dapat diubah, silakan cek kembali isi dari formulir anda",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#0E6B3A',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Ya, simpan!',
                cancelButtonText: 'Batal'
            }).then((result) => {
                if (result.isConfirmed) {
                    document.getElementById('userForm').submit();
                }
            });
        }
    </script>

    <script>
        $(document).ready(function () {
            $.get('/get-provinces', function (data) {
                $.each(data, function (key, value) {
                    $('#provinsi_santri').append('<option value="' + value.code + '">' + value.name + '</option>');
                });
            });

            $('#provinsi_santri').change(function () {
                var province_id = $(this).val();
                $('#kabupaten_santri').empty().append('<option value="">Please select</option>');
                $('#kecamatan_santri').empty().append('<option value="">Please select</option>');
                $('#desa_kelurahan_santri').empty().append('<option value="">Please select</option>');

                if (province_id) {
                    $.get('/get-cities?province_code=' + province_id, function (data) {
                        $.each(data, function (key, value) {
                            $('#kabupaten_santri').append('<option value="' + value.code + '">' + value.name + '</option>');
                        });
                    });
                }
            });

            $('#kabupaten_santri').change(function () {
                var city_id = $(this).val();
                $('#kecamatan_santri').empty().append('<option value="">Please select</option>');
                $('#desa_kelurahan_santri').empty().append('<option value="">Please select</option>');

                if (city_id) {
                    $.get('/get-districts?city_code=' + city_id, function (data) {
                        $.each(data, function (key, value) {
                            $('#kecamatan_santri').append('<option value="' + value.code + '">' + value.name + '</option>');
                        });
                    });
                }
            });

            $('#kecamatan_santri').change(function () {
                var district_id = $(this).val();
                $('#desa_kelurahan_santri').empty().append('<option value="">Please select</option>');

                if (district_id) {
                    $.get('/get-villages?district_code=' + district_id, function (data) {
                        $.each(data, function (key, value) {
                            $('#desa_kelurahan_santri').append('<option value="' + value.code + '">' + value.name + '</option>');
                        });
                    });
                }
            });
        });
    </script>

    {{-- PDF VIEWER --}}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.11.338/pdf.min.js"></script>
    <script>
        pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.11.338/pdf.worker.min.js';

        fetch("{{ route('download_bukti', $data_santri->id) }}")
            .then(response => response.blob())
            .then(blob => {
                const url = URL.createObjectURL(blob);
                pdfjsLib.getDocument(url).promise.then(function (pdf) {
                    pdf.getPage(1).then(function (page) {
                        const scale = 1.5;
                        const viewport = page.getViewport({ scale: scale });

                        const canvas = document.createElement('canvas');
                        const context = canvas.getContext('2d');
                        canvas.height = viewport.height;
                        canvas.width = viewport.width;

                        document.getElementById('pdf-viewer').appendChild(canvas);

                        page.render({
                            canvasContext: context,
                            viewport: viewport
                        });
                    });
                });
            });
    </script>
@endsection