<x-app-layout>
    <x-slot name="header">
        <h2 class="font-semibold text-xl text-gray-800 leading-tight">
            {{ __('BERANDA') }}
        </h2>
    </x-slot>

    <div class="py-12">
        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
            <div class="bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg">
                <div class="p-6 text-gray-900">
                    @if (Auth::check())
                        @php
                            $userId = Auth::id();
                            $mentor = \App\Models\Guru::where('id_user', $userId)->first();
                        @endphp

                        <strong>Selamat datang</strong>, {{ Auth::user()->name }} di Sistem Konseling Digital di SMKN 1
                        Bojongpicung dengan Rujukan ke Spesialis Kejiwaan!
                    @endif
                </div>
            </div>

            @hasrole('Admin')
                <style>
                    @media (min-width: 640px) {
                        .responsive-margin>div {
                            margin: 0 !important;
                        }
                    }

                    a:hover {
                        transition-duration: 0.25s;
                        color: black;
                        text-decoration: none;
                    }
                </style>
                <div class="grid grid-cols-1 pt-4 sm:grid-cols-2 md:grid-cols-3 gap-3 w-full">
                    <div class="bg-amber-950 rounded-md shadow-sm text-white p-2">
                        <h2 class="font-bold text-base leading-tight">Data Siswa/i</h2>
                        <hr class="my-1 bg-white h-[1px] rounded">
                        <small class="text-xs">ini data siswa/i yang terdata pada layanan bimbingan dan konseling di SMKN 1
                            Bojongpicung</small>
                        <p class="font-extrabold text-2xl text-right py-1 pr-2">{{ App\Models\Siswa::count() }}</p>
                        <hr class="my-1 bg-white h-[1px] rounded">
                        <a href="{{ route('siswa.index') }}" class="text-white text-xs">Lihat Data Siswa/i ></a>
                    </div>

                    <div class="bg-sky-950 rounded-md shadow-sm text-white p-2">
                        <h2 class="font-bold text-base leading-tight">Data Guru</h2>
                        <hr class="my-1 bg-white h-[1px] rounded">
                        <small class="text-xs">Data guru BK, wali kelas, pengajar di SMKN 1 Bojongpicung</small>
                        <p class="font-extrabold text-2xl text-right py-1 pr-2">{{ App\Models\Guru::count() }}</p>
                        <hr class="my-1 bg-white h-[1px] rounded">
                        <a href="{{ route('guru.index') }}" class="text-white text-xs">Lihat Data Guru ></a>
                    </div>

                    <div class="bg-red-950 rounded-md shadow-sm text-white p-2">
                        <h2 class="font-bold text-base leading-tight">Data Spesialis Kejiwaan</h2>
                        <hr class="my-1 bg-white h-[1px] rounded">
                        <small class="text-xs">Data spesialis psikolog, psikiater di RSUD Cianjur</small>
                        <p class="font-extrabold text-2xl text-right py-1 pr-2">{{ App\Models\Spesialis::count() }}</p>
                        <hr class="my-1 bg-white h-[1px] rounded">
                        <a href="{{ route('spesialis.index') }}" class="text-white text-xs">Lihat Data Spesialis ></a>
                    </div>
                </div>

                <div class="flex flex-wrap gap-4 pt-4 responsive-margin">
                    <div class="maps m-auto">
                        <iframe
                            src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3961.3215450310095!2d107.2708085749959!3d-6.852006393146332!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x2e6855bb05740d83%3A0xd05e8d5a6f38d2ac!2sSMKN%201%20Bojongpicung!5e0!3m2!1sid!2sid!4v1753207257288!5m2!1sid!2sid"
                            width="600" height="300" style="border:0;" allowfullscreen="" loading="lazy"
                            referrerpolicy="no-referrer-when-downgrade"></iframe>
                    </div>
                </div>
            @endhasrole

            @hasanyrole('GuruBK')
                <style>
                    @media (min-width: 640px) {
                        .responsive-margin>div {
                            margin: 0 !important;
                        }
                    }

                    a:hover {
                        transition-duration: 0.25s;
                        color: black;
                        text-decoration: none;
                    }
                </style>
                <div class="flex flex-wrap pt-4 gap-4 responsive-margin w-full">
                    <div style="width: 218.5px;" class="bg-green-950 overflow-hidden shadow-sm sm:rounded-lg m-auto">
                        <div class="p-3 text-white">
                            <h2 class="font-bold text-xl text-white leading-tight">Data Siswa</h2>

                            <hr style="height: 1px; background-color: white;" class="rounded">
                            <small>Daftar siswa yang pernah melakukan bimbingan konseling</small>
                            <p class="font-extrabold text-4xl text-right py-2 pr-4">{{ App\Models\Siswa::count() }}</p>

                            <hr style="height: 1px; background-color: white;" class="rounded">
                            <a href="{{ route('siswa.index') }}" class="text-white">Lihat Data Siswa ></a>
                        </div>
                    </div>

                    <div style="width: 218.5px;" class="bg-sky-950 overflow-hidden shadow-sm sm:rounded-lg m-auto">
                        <div class="p-3 text-white">
                            <h2 class="font-bold text-xl text-white leading-tight">Data Spesialis</h2>

                            <hr style="height: 1px; background-color: white;" class="rounded">
                            <small>Daftar spesialis psikolog, psikiater</small>
                            <p class="font-extrabold text-4xl text-right py-2 pr-4">{{ App\Models\Spesialis::count() }}</p>

                            <hr style="height: 1px; background-color: white;" class="rounded">
                            <a href="{{ route('spesialis.index') }}" class="text-white">Lihat Data Spesialis ></a>
                        </div>
                    </div>

                    @php
                        $enum = App\Enums\JenisPengaduan::cases();

                        $pengaduanCounts = [];
                        foreach ($enum as $jenis) {
                            $pengaduanCounts[$jenis->value] = App\Models\Pengaduan::where(
                                'jenis_pengaduan',
                                $jenis,
                            )->count();
                        }
                    @endphp

                    <div style="width: 25%;" class="bg-amber-950 overflow-hidden shadow-sm sm:rounded-lg m-auto">
                        <div class="p-3 text-white">
                            <h2 class="font-bold text-xl text-white leading-tight">Data Pengaduan Siswa</h2>
                            <hr style="height: 1px; background-color: white;" class="rounded">
                            <small>Daftar pengaduan BK</small>

                            <div class="py-2">
                                @foreach ($enum as $jenis)
                                    <a href="{{ route('pengaduan.jenis', ['jenis' => $jenis->value]) }}"
                                        class="text-white">
                                        Jumlah pengaduan {{ $jenis->label() }} = {{ $pengaduanCounts[$jenis->value] }}
                                    </a>
                                    <br>
                                @endforeach
                            </div>
                        </div>
                    </div>

                    <div style="width: 28%;" class="bg-yellow-950 overflow-hidden shadow-sm sm:rounded-lg m-auto">
                        <div class="p-3 text-white">
                            <h2 class="font-bold text-xl text-white leading-tight">Data Rekap Kuesioner Siswa</h2>

                            <hr style="height: 1px; background-color: white;" class="rounded">
                            <small>Daftar rekap hasil kuesioner</small>

                            <div class="py-4">
                                <a href="{{ route('rekap-kuesioner.index') }}" class="text-white">
                                    Lihat Rekap >
                                </a>
                            </div>

                            <hr style="height: 1px; background-color: white;" class="rounded">
                            <small>Data ini diambil berdasarkan wawancara secara langsung dengan siswa secara
                                offline</small>
                        </div>
                    </div>
                </div>

                <div class="flex flex-wrap pt-4 gap-4 responsive-margin w-full">
                    <div class="maps m-auto">
                        <iframe
                            src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3961.3215450310095!2d107.2708085749959!3d-6.852006393146332!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x2e6855bb05740d83%3A0xd05e8d5a6f38d2ac!2sSMKN%201%20Bojongpicung!5e0!3m2!1sid!2sid!4v1753207257288!5m2!1sid!2sid"
                            width="600" height="300" style="border:0;" allowfullscreen="" loading="lazy"
                            referrerpolicy="no-referrer-when-downgrade"></iframe>
                    </div>
                </div>
            @endhasanyrole

            @hasanyrole('Spesialis')
                <style>
                    @media (min-width: 640px) {
                        .responsive-margin>div {
                            margin: 0 !important;
                        }
                    }

                    a:hover {
                        transition-duration: 0.25s;
                        color: black;
                        text-decoration: none;
                    }
                </style>
                <div class="flex flex-wrap pt-4 gap-4 responsive-margin w-full">
                    <div style="width: 25%;" class="bg-amber-950 overflow-hidden shadow-sm sm:rounded-lg m-auto">
                        <div class="p-3 text-white">
                            <h2 class="font-bold text-xl text-white leading-tight">Data Siswa</h2>

                            <hr style="height: 1px; background-color: white;" class="rounded">
                            <small>Daftar siswa yang pernah melakukan bimbingan konseling</small>
                            <p class="font-extrabold text-4xl text-right py-2 pr-4">{{ App\Models\Siswa::count() }}</p>

                            <hr style="height: 1px; background-color: white;" class="rounded">
                            <a href="{{ route('siswa.index') }}" class="text-white">Lihat Data Siswa ></a>
                        </div>
                    </div>

                    @php
                        $userId = Auth::id();
                        $spesialis = \App\Models\Spesialis::where('id_user', $userId)->first();
                    @endphp

                    <!-- @if ($spesialis && $spesialis->spesialis == 'Psikolog')
                        <div style="width: 25%;" class="bg-sky-950 overflow-hidden shadow-sm sm:rounded-lg m-auto">
                            <div class="p-3 text-white">
                                <h2 class="font-bold text-xl text-white leading-tight">Data Penanganan</h2>

                                <hr style="height: 1px; background-color: white;" class="rounded">
                                <small>Daftar siswa yang belum ditangani</small>
                                <p class="font-extrabold text-4xl text-right py-2 pr-4">{{ App\Models\Psikolog::count() }}
                                </p>

                                <hr style="height: 1px; background-color: white;" class="rounded">
                                <a href="{{ route('psikolog.index') }}" class="text-white">Lihat Data Penanganan ></a>
                            </div>
                        </div>
                    @elseif ($spesialis && $spesialis->spesialis == 'Psikiater')
                        <div style="width: 25%;" class="bg-sky-950 overflow-hidden shadow-sm sm:rounded-lg m-auto">
                            <div class="p-3 text-white">
                                <h2 class="font-bold text-xl text-white leading-tight">Data Penanganan</h2>

                                <hr style="height: 1px; background-color: white;" class="rounded">
                                <small>Daftar siswa yang belum ditangani</small>
                                <p class="font-extrabold text-4xl text-right py-2 pr-4">
                                    {{ App\Models\Psikiater::count() }}
                                </p>

                                <hr style="height: 1px; background-color: white;" class="rounded">
                                <a href="{{ route('psikiater.index') }}" class="text-white">Lihat Data Penanganan
                                    ></a>
                            </div>
                        </div>
                    @endif -->
                </div>

                <div class="flex flex-wrap gap-4 pt-4 responsive-margin">
                    <div class="maps m-auto">
                        <iframe
                            src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d821.3354714779155!2d107.14080856906533!3d-6.811088670065175!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x2e68530039bbcaab%3A0x74e67c2249531954!2sPintu%20pejalan%20kaki%20RSUD!5e0!3m2!1sid!2sid!4v1753209064018!5m2!1sid!2sid"
                            width="500" height="300" style="border:0;" allowfullscreen="" loading="lazy"
                            referrerpolicy="no-referrer-when-downgrade"></iframe>
                    </div>
                </div>
            @endhasanyrole

            @hasanyrole('Siswa')
                <style>
                    @media (min-width: 640px) {
                        .responsive-margin>div {
                            margin: 0 !important;
                        }
                    }

                    a:hover {
                        transition-duration: 0.25s;
                        color: black;
                        text-decoration: none;
                    }
                </style>

                @php
                    $userId = Auth::id();
                    $siswa = \App\Models\Siswa::where('id_user', $userId)->first();
                    $totalSaldo = \App\Models\Pelanggaran::where('id_siswa', $siswa->id_siswa)->sum(
                        'saldo_pelanggaran',
                    );
                @endphp

                @if ($totalSaldo > 30)
                    <div class="bg-white mt-4 overflow-hidden shadow-sm sm:rounded-lg">
                        <div class="p-6 text-gray-900">
                            <strong>Peringatan!</strong> {{ Auth::user()->name }} telah melakukan pelanggaran!
                            <span class="bg-red-950 text-white px-2 py-1 rounded">Pemanggilan Orang Tua</span>
                        </div>
                    </div>
                @else
                    <div class="bg-white mt-4 overflow-hidden shadow-sm sm:rounded-lg">
                        <div class="p-6 text-gray-900">
                            <strong>{{ __('Belum melakukan pelanggaran') }}</strong>
                        </div>
                    </div>
                @endif

                <div class="flex flex-wrap justify-center pt-4 gap-4 responsive-margin w-full">
                    <div style="width: 20%;" class="bg-sky-950 overflow-hidden shadow-sm sm:rounded-lg m-auto">
                        <div class="p-3 text-white">
                            <h2 class="font-bold text-xl text-white leading-tight">Informasi Guru</h2>

                            <hr style="height: 1px; background-color: white;" class="rounded">
                            <small>Daftar guru bk, wali kelas, guru pengajar</small>
                            <p class="font-extrabold text-4xl text-right py-4 pr-4">{{ App\Models\Guru::count() }}</p>

                            <hr style="height: 1px; background-color: white;" class="rounded">
                            <a href="{{ route('siswa.index') }}" class="text-white">Lihat Data guru ></a>
                        </div>
                    </div>

                    <div style="width: 20%;" class="bg-amber-950 overflow-hidden shadow-sm sm:rounded-lg m-auto">
                        <div class="p-3 text-white">
                            <h2 class="font-bold text-xl text-white leading-tight">Data Jadwal Bimbingan</h2>

                            <hr style="height: 1px; background-color: white;" class="rounded">
                            <small>Daftar jadwal guru bk dan spesialis</small>

                            <div class="py-2">
                                <a href="{{ route('jadwalbk.index') }}" class="text-white">
                                    Lihat Jadwal BK >
                                </a>
                                <br>
                                <a href="{{ route('jadwaljiwa.index') }}" class="text-white">
                                    Lihat Jadwal Spesialis >
                                </a>
                            </div>

                            <hr style="height: 1px; background-color: white;" class="rounded">
                            <small>Lakukan bimbingan pada jam sesuai jadwal yang sudah ditentukan</small>
                        </div>
                    </div>

                    @php
                        $siswa = \App\Models\Siswa::where('id_user', Auth::id())->first();
                        $saldo = \App\Models\Pelanggaran::where('id_siswa', $siswa->id_siswa)->sum('saldo_pelanggaran');
                    @endphp

                    <div style="width: 20%;" class="bg-red-950 overflow-hidden shadow-sm sm:rounded-lg m-auto">
                        <div class="p-3 text-white">
                            <h2 class="font-bold text-xl text-white leading-tight">Informasi Pelanggaran</h2>

                            <hr style="height: 1px; background-color: white;" class="rounded">
                            <small>Saldo pelanggaran siswa</small>
                            <p class="font-extrabold text-4xl text-right py-8 pr-4">{{ $saldo }}</p>

                            <hr style="height: 1px; background-color: white;" class="rounded">
                            <a href="{{ route('pelanggaran.index') }}" class="text-white">Lihat Data Pelanggaran ></a>
                        </div>
                    </div>

                    <div style="width: 20%; background-color: rgb(53, 0, 53);"
                        class="overflow-hidden shadow-sm sm:rounded-lg m-auto">
                        <div class="p-3 text-white">
                            <h2 class="font-bold text-xl text-white leading-tight">Daftar Pelanggaran</h2>

                            <hr style="height: 1px; background-color: white;" class="rounded">

                            <br>
                            <p>Tatib pelanggaran di SMK Negeri 1 Bojongpicung</p>

                            <br>
                            <a href="{{ asset('pdf/Data Tatib SMK.pdf') }}" target="_blank" class="btn btn-light mt-3">
                                Lihat Data
                            </a>
                        </div>
                    </div>
                </div>

                <div class="flex flex-wrap gap-4 justify-center pt-4 responsive-margin">
                    <div class="maps m-auto">
                        <iframe
                            src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3961.3215450310095!2d107.2708085749959!3d-6.852006393146332!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x2e6855bb05740d83%3A0xd05e8d5a6f38d2ac!2sSMKN%201%20Bojongpicung!5e0!3m2!1sid!2sid!4v1753207257288!5m2!1sid!2sid"
                            width="500" height="300" style="border:0;" allowfullscreen="" loading="lazy"
                            referrerpolicy="no-referrer-when-downgrade"></iframe>
                    </div>

                    <div class="maps m-auto">
                        <iframe
                            src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d821.3354714779155!2d107.14080856906533!3d-6.811088670065175!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x2e68530039bbcaab%3A0x74e67c2249531954!2sPintu%20pejalan%20kaki%20RSUD!5e0!3m2!1sid!2sid!4v1753209064018!5m2!1sid!2sid"
                            width="500" height="300" style="border:0;" allowfullscreen="" loading="lazy"
                            referrerpolicy="no-referrer-when-downgrade"></iframe>
                    </div>
                </div>
            @endhasanyrole

            @hasanyrole('KepalaSekolah|WaliKelas')
                <style>
                    @media (min-width: 640px) {
                        .responsive-margin>div {
                            margin: 0 !important;
                        }
                    }

                    a:hover {
                        transition-duration: 0.25s;
                        color: black;
                        text-decoration: none;
                    }
                </style>

                <div class="grid grid-cols-1 pt-4 sm:grid-cols-2 md:grid-cols-3 gap-3 w-full">
                    <div class="bg-amber-950 rounded-md shadow-sm text-white p-2">
                        <h2 class="font-bold text-base leading-tight">Data Siswa/i</h2>
                        <hr class="my-1 bg-white h-[1px] rounded">
                        <small class="text-xs">ini data siswa/i yang terdata pada layanan bimbingan dan konseling di SMKN 1
                            Bojongpicung</small>
                        <p class="font-extrabold text-2xl text-right py-1 pr-2">{{ App\Models\Siswa::count() }}</p>
                        <hr class="my-1 bg-white h-[1px] rounded">
                        <a href="{{ route('siswa.index') }}" class="text-white text-xs">Lihat Data Siswa/i ></a>
                    </div>
                </div>

                <div class="flex flex-wrap gap-4 pt-4 responsive-margin">
                    <div class="maps m-auto">
                        <iframe
                            src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3961.3215450310095!2d107.2708085749959!3d-6.852006393146332!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x2e6855bb05740d83%3A0xd05e8d5a6f38d2ac!2sSMKN%201%20Bojongpicung!5e0!3m2!1sid!2sid!4v1753207257288!5m2!1sid!2sid"
                            width="500" height="300" style="border:0;" allowfullscreen="" loading="lazy"
                            referrerpolicy="no-referrer-when-downgrade"></iframe>
                    </div>
                </div>
            @endhasanyrole
        </div>
    </div>
</x-app-layout>
