@extends('layouts.master-without-nav')
@section('title')
    Daftarkan Perangkat
@endsection
@section('content')
    <div class="authentication-bg min-vh-100 d-flex align-items-center justify-content-center">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-md-6 col-lg-5">
                    <div class="card overflow-hidden">
                        <div class="card-body p-4">
                            <div class="text-center mb-4">
                                <i class="bx bx-mobile-alt" style="font-size: 48px; color: #556ee6;"></i>
                                <h4 class="mt-2">Daftarkan Perangkat Ini</h4>
                                <p class="text-muted">
                                    {{ $mahasiswa->nama }} — NIM {{ $mahasiswa->nim }}
                                </p>
                            </div>

                            @if (session('status'))
                                <div class="alert alert-success">{{ session('status') }}</div>
                            @endif
                            @if ($errors->any())
                                <div class="alert alert-danger">
                                    @foreach ($errors->all() as $error)
                                        <div>{{ $error }}</div>
                                    @endforeach
                                </div>
                            @endif

                            <p class="text-muted small">
                                HP yang Anda pakai untuk membuka halaman ini sekarang akan dijadikan
                                <strong>satu-satunya perangkat resmi</strong> untuk presensi akun Anda. Pastikan Anda
                                membukanya dari HP Anda sendiri, bukan HP orang lain.
                            </p>

                            <form method="POST" action="{{ url()->full() }}" id="form-daftar-perangkat">
                                @csrf
                                <input type="hidden" name="device_id" id="device_id">
                                <button type="submit" class="btn btn-primary w-100">
                                    <i class="bx bx-check-shield me-1"></i> Daftarkan Perangkat Ini
                                </button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('scripts')
    <script>
        (function () {
            try {
                var key = 'presensi_device_id';
                var id = localStorage.getItem(key);
                if (!id) {
                    id = (window.crypto && crypto.randomUUID)
                        ? crypto.randomUUID()
                        : (Date.now().toString(16) + Math.random().toString(16).slice(2));
                    localStorage.setItem(key, id);
                }
                document.getElementById('device_id').value = id;
            } catch (e) {
                // localStorage tidak tersedia (mode privat dll) -- form tetap
                // bisa dikirim, tapi server akan menolak karena device_id kosong
                // (lihat AuthController::daftarPerangkat()).
            }
        })();
    </script>
@endsection