@extends('layouts.home_siswa')

@section('title')
    Dokumen Kelengkapan
@endsection

@section('content')
    <div class="card card-flush">
        <div class="card-body">
            <div class="row">
                <div class="col-md-4">
                    <div class="menu menu-column menu-rounded menu-state-bg menu-state-title-primary menu-state-icon-primary menu-state-bullet-primary">
                        <h5 class="mt-6">Wajib Dilengkapi</h5>
                        <div class="menu-item mb-3">
                            <span class="menu-link inactive" onclick="display_notelp()" id="kolom_notelp">
                                @include('siswa.dokumen._status_data', ['value' => $siswa->notelp])
                                <span class="menu-title fw-bolder">No.HP/Wa</span>
                                @if($siswa->notelp != '')
                                    <div class="badge badge-light-success">Sudah Diisi</div>
                                @endif
                            </span>
                        </div>
                        @include('siswa.dokumen._indikator', ['dokumen' => $kartu_keluarga, 'action' => 'kk', 'title' => 'Kartu Keluarga'])
                        @include('siswa.dokumen._indikator', ['dokumen' => $akta, 'action' => 'akta', 'title' => 'Akta Lahir'])
                        @if($siswa->tingkat !== '-')
{{--                        @include('siswa.dokumen._indikator', ['dokumen' => $ktp, 'action' => 'ktp', 'title' => 'KTP Orang Tua'])--}}
{{--                            <div class="menu-item mb-3">--}}
{{--                                <span class="menu-link inactive" onclick="display_dokumen('foto_siswa')" id="kolom_foto_siswa">--}}
{{--                                    @include('siswa.dokumen._status_data', ['value' => $siswa->foto])--}}
{{--                                    <span class="menu-title fw-bolder">Foto Siswa</span>--}}
{{--                                    @if($siswa->foto != '')--}}
{{--                                        <div class="badge badge-light-success">Sudah Diisi</div>--}}
{{--                                    @endif--}}
{{--                                </span>--}}
{{--                            </div>--}}
                        @endif
                        @include('siswa.dokumen._indikator', ['dokumen' => $pernyataan, 'action' => 'pernyataan', 'title' => 'Pernyataan Orang Tua'])
                        @if($siswa->tingkat === 'SD')
{{--                            <h5 class="mt-6">Dokumen Khusus Prestasi</h5>--}}
{{--                            @include('siswa.dokumen._indikator', ['dokumen' => $piagam_1, 'action' => 'piagam_1', 'title' => 'Piagam 1'])--}}
{{--                            @include('siswa.dokumen._indikator', ['dokumen' => $piagam_2, 'action' => 'piagam_2', 'title' => 'Piagam 2'])--}}
{{--                            @include('siswa.dokumen._indikator', ['dokumen' => $piagam_3, 'action' => 'piagam_3', 'title' => 'Piagam 3'])--}}

{{--                            @include('siswa.dokumen._indikator', ['dokumen' => $keterangan_kepsek, 'action' => 'keterangan_kepsek', 'title' => 'Keterangan Kepala Sekolah'])--}}
                            @include('siswa.dokumen._indikator', ['dokumen' => $keterangan_rerata, 'action' => 'keterangan_rerata', 'title' => 'Keterangan Rerata Nilai'])
                        @endif
                        @if($siswa->kabupaten === 'KOTA KEDIRI')
{{--                            <h5 class="mt-6">Dokumen Khusus Siswa Inklusi</h5>--}}
{{--                            @include('siswa.dokumen._indikator', ['dokumen' => $keterangan_inklusif, 'action' => 'keterangan_inklusif', 'title' => 'Keterangan Inklusi'])--}}
                        @endif
                    </div>
                </div>
                <div class="col-md-8 border-dashed border-0 border-left-1 pt-10 pt-lg-4">
                    <form id="form_notelp" class="ms-5">
                        @csrf
                        <div class="d-flex flex-column align-items-start gap-3">
                            <h5>No.HP/Wa yang dapat dihubungi (Wajib diisi)</h5>
                            <x-input name="notelp" class="form-control" :value="$siswa->notelp ?? ''" />
                            <button type="submit" class="btn btn-primary px-5">Simpan</button>
                        </div>
                    </form>
                    @include('siswa.dokumen._form_kk')
                    @include('siswa.dokumen._form_akta')
                    @include('siswa.dokumen._form_ktp')
                    @include('siswa.dokumen._form_piagam_1')
                    @include('siswa.dokumen._form_piagam_2')
                    @include('siswa.dokumen._form_piagam_3')
                    @include('siswa.dokumen._form_pernyataan')
                    @include('siswa.dokumen._form_keterangan_kepsek')
                    @include('siswa.dokumen._form_keterangan_rerata')
                    @include('siswa.dokumen._form_keterangan_inklusif')
                    @include('siswa.dokumen._form_foto_siswa')
                </div>
            </div>
        </div>
        <p class="mx-6 fs-4">SILAHKAN UPLOUD DOKUMEN YANG DISYARATKAN DENGAN FORMAT EKSTENSI KHUSUS PNG, JPEG, JPG, PDF. MAKSIMAL 2MB DAN JUGA NOMOR HP, JIKA SUDAH MENGISI SEMUANYA SILAHKAN KLIK SELANJUTNYA</p>
    </div>
    <div class="d-flex justify-content-between align-items-center mt-7 pt-7 border-top">
{{--        <a href="{{ route('siswa') }}" class="btn btn-light me-5">Proses Sebelumnya</a>--}}
        <span></span>
        <p class="mb-0 fs-5">Klik Selanjutnya untuk memilih sekolah atau klik Pilih Sekolah pada menu diatas</p>
        <a href="{{ route('siswa.pilihan') }}" class="btn btn-primary ps-8">
            Proses Berikutnya
            <span class="svg-icon svg-icon-muted svg-icon-1"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
            <rect opacity="0.5" x="18" y="13" width="13" height="2" rx="1" transform="rotate(-180 18 13)" fill="currentColor"/>
            <path d="M15.4343 12.5657L11.25 16.75C10.8358 17.1642 10.8358 17.8358 11.25 18.25C11.6642 18.6642 12.3358 18.6642 12.75 18.25L18.2929 12.7071C18.6834 12.3166 18.6834 11.6834 18.2929 11.2929L12.75 5.75C12.3358 5.33579 11.6642 5.33579 11.25 5.75C10.8358 6.16421 10.8358 6.83579 11.25 7.25L15.4343 11.4343C15.7467 11.7467 15.7467 12.2533 15.4343 12.5657Z" fill="currentColor"/>
            </svg></span>
        </a>
    </div>
@endsection

@push('scripts')
    <script>
        let $form_notelp = $('#form_notelp');

        let display_notelp = () => {
            $form_notelp.show()
            $('.menu-link').attr('class', 'menu-link inactive');
            $('.form-dokumen').attr('class', 'form-dokumen d-none');
        }

        let display_dokumen = (jenis) => {
            $form_notelp.hide();
            $('.menu-link').attr('class', 'menu-link inactive');
            $('.form-dokumen').attr('class', 'form-dokumen d-none');
            $('#dokumen_' + jenis).toggleClass('active inactive');
            $('#form_' + jenis).toggleClass('d-none d-block');
        }

        let delete_piagam = (id) => {
            Swal.fire({
                title: 'Hapus Piagam ?',
                showDenyButton: true,
                confirmButtonText: 'Hapus',
                denyButtonText: 'Batal',
                confirmButtonColor: '#F46A6A',
                denyButtonColor: '#bdbdbd'
            }).then((result) => {
                if (result.isConfirmed) {
                    window.location.href = "{{ url('siswa/dokumen/delete') }}/" + id;
                }
            });
        }

        $form_notelp.submit((e) => {
            e.preventDefault();

            let notelp = $('#notelp').val();
            if (notelp.length < 10 || notelp.length > 15) {
                swal.fire('No.Hp tidak valid!');
                return;
            }

            let data = get_form_data($form_notelp);
            $.post("{{ route('siswa.dokumen.notelp') }}", data, () => {
                Swal.fire({
                    title: 'No.HP berhasil disimpan',
                    showDenyButton: false,
                    confirmButtonText: 'OK',
                }).then((result) => {
                    if (result.isConfirmed) window.location.reload();
                });
            });
        });

        @if(session()->has('success'))
            swal.fire('{{ session('success') }}');
        @endif

        // $('form').removeAttr('action');
        // $('#form_notelp').removeAttr('action');
        // $('input').attr('disabled', 'disabled');
        // $('select').attr('disabled', 'disabled');
        // $('input').addClass('bg-transparent border-0');
        // $('.form-dokumen').find('button').remove();
        // $('#form_notelp').find('button').remove();
        // $('.form-dokumen').find('[data-kt-image-input-action="change"]').remove();

        display_notelp();
    </script>
@endpush