@extends('layouts.auth', ['title' => 'Registrasi'])

@section('content')
<div class="auth-panel-top">
    <span class="auth-panel-badge">Registrasi Operator</span>
    <h1 class="auth-title">Buat Akun SILONTAR</h1>
    <p class="auth-subtitle">
        Lengkapi data berikut untuk mendaftarkan akun operator dan mulai menggunakan layanan SILONTAR.
    </p>
</div>

<div class="auth-form-card">
    @if($errors->any())
        <div class="alert alert-danger">
            <ul class="mb-0 pl-3">
                @foreach($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    <form action="{{ route('register.post') }}" method="POST" enctype="multipart/form-data">
        @csrf

        <div class="row">
            <div class="col-md-6">
                <div class="form-group">
                    <label for="name">Nama Lengkap</label>
                    <div class="input-group">
                        <input
                            type="text"
                            name="name"
                            id="name"
                            class="form-control"
                            placeholder="Masukkan nama lengkap"
                            value="{{ old('name') }}"
                            required
                        >
                        <div class="input-group-append">
                            <span class="input-group-text">
                                <i class="fas fa-user"></i>
                            </span>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-md-6">
                <div class="form-group">
                    <label for="email">Email</label>
                    <div class="input-group">
                        <input
                            type="email"
                            name="email"
                            id="email"
                            class="form-control"
                            placeholder="Masukkan email"
                            value="{{ old('email') }}"
                            required
                        >
                        <div class="input-group-append">
                            <span class="input-group-text">
                                <i class="fas fa-envelope"></i>
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="form-group">
            <label for="perguruan_tinggi_id">Perguruan Tinggi</label>
            <select
                name="perguruan_tinggi_id"
                id="perguruan_tinggi_id"
                class="form-control"
                data-searchable-select="true"
                data-search-placeholder="Cari perguruan tinggi..."
                data-search-hint="Ketik nama perguruan tinggi agar daftar kampus lebih cepat ditemukan."
                required
            >
                <option value="">-- Pilih Perguruan Tinggi --</option>
                @foreach($perguruanTinggi as $pt)
                    <option value="{{ $pt->id }}" {{ old('perguruan_tinggi_id') == $pt->id ? 'selected' : '' }}>
                        {{ $pt->nama ?? $pt->nama_pt ?? $pt->nama_perguruan_tinggi ?? ('PT #' . $pt->id) }}
                    </option>
                @endforeach
            </select>
        </div>

        <div class="row">
            <div class="col-md-6">
                <div class="form-group">
                    <label for="password">Password</label>
                    <div class="input-group">
                        <input
                            type="password"
                            name="password"
                            id="password"
                            class="form-control"
                            placeholder="Masukkan password"
                            required
                        >
                        <div class="input-group-append">
                            <span class="input-group-text toggle-password" onclick="togglePassword('password', 'iconPassword')">
                                <i class="fas fa-eye" id="iconPassword"></i>
                            </span>
                        </div>
                    </div>
                    <small class="auth-note">Password minimal 6 karakter.</small>
                </div>
            </div>

            <div class="col-md-6">
                <div class="form-group">
                    <label for="password_confirmation">Konfirmasi Password</label>
                    <div class="input-group">
                        <input
                            type="password"
                            name="password_confirmation"
                            id="password_confirmation"
                            class="form-control"
                            placeholder="Ulangi password"
                            required
                        >
                        <div class="input-group-append">
                            <span class="input-group-text toggle-password" onclick="togglePassword('password_confirmation', 'iconConfirmPassword')">
                                <i class="fas fa-eye" id="iconConfirmPassword"></i>
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="form-group">
            <label for="file_surat">Upload Surat Permohonan Akun Silontar <span class="text-danger">*</span></label>
            <input
                type="file"
                name="file_surat"
                id="file_surat"
                class="form-control"
                accept=".pdf,.jpg,.jpeg,.png"
                required
            >
            <small class="auth-note">Format: PDF, JPG, JPEG, PNG. Maksimal 2MB.</small>

            <div id="filePreview" class="file-preview-box"></div>
        </div>

        <div class="form-group">
            <label for="captcha_answer">Verifikasi</label>
            <div class="input-group">
                <div class="input-group-prepend">
                    <span class="input-group-text">{{ $captchaQuestion }}</span>
                </div>
                <input
                    type="number"
                    name="captcha_answer"
                    id="captcha_answer"
                    class="form-control"
                    placeholder="Jawaban"
                    inputmode="numeric"
                    required
                >
            </div>
        </div>

        <button type="submit" class="btn btn-primary btn-block auth-btn mt-3">
            <i class="fas fa-user-plus mr-1"></i> Daftar
        </button>
    </form>
</div>

<div class="auth-footer-link">
    Sudah punya akun?
    <a href="{{ route('login') }}">Login di sini</a>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function () {
        const fileInput = document.getElementById('file_surat');
        const filePreview = document.getElementById('filePreview');

        if (fileInput && filePreview) {
            fileInput.addEventListener('change', function () {
                const file = this.files[0];

                if (!file) {
                    filePreview.style.display = 'none';
                    filePreview.innerHTML = '';
                    return;
                }

                filePreview.style.display = 'block';
                filePreview.innerHTML = `
                    <strong>File dipilih:</strong><br>
                    Nama: ${file.name}<br>
                    Ukuran: ${(file.size / 1024 / 1024).toFixed(2)} MB
                `;
            });
        }
    });
</script>
@endsection