@extends('Layouts.app')

@section('content')

<div class="w-full  px-4 sm:px-6 lg:px-8 bg-white p-6 rounded shadow mt-10">


    <h2 class="text-xl font-semibold mb-4">{{ isset($user) ? 'Update' : 'Tambah' }} User</h2>
    <p class="text-sm  mb-4" >
        Noted:<br>
        1. level akademik tidak perlu isi kolom no_pokok dan nohp <br>
        2. level dosen tidak perlu isi kolom  no_pokok <br>
        3. level mahasiswa wajib di isi semua kolom <br>
    </P>
    
<a href="/exel/contoh_import_users.xlsx" 
   class="inline-block bg-blue-600 text-white px-4 py-2 rounded hover:bg-green-700 text-sm mb-4">
   📥 Download Template Excel
</a>

<form action="{{ route('users.import') }}" method="POST" enctype="multipart/form-data" class="mb-4">
    @csrf
    <div class="flex items-center gap-2">
        <input type="file" name="file" required class="border px-3 py-2 rounded">
        <button type="submit" class="bg-green-600 text-white px-4 py-2 rounded hover:bg-green-700">
            Import Excel
        </button>
    </div>
</form>
        {{-- Alert Sukses --}}
    @if(session('success'))
        <div class="mb-4 p-3 rounded bg-green-100 text-green-800">
            {{ session('success') }}
        </div>
    @endif

    {{-- Alert Error --}}
    @if(session('error'))
        <div class="mb-4 p-3 rounded bg-red-100 text-red-800">
            {{ session('error') }}
        </div>
    @endif
    
    {{-- Validasi error --}}
@if ($errors->any())
    <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded mb-4">
        <ul class="list-disc list-inside">
            @foreach ($errors->all() as $error)
                <li>{{ $error }}</li>
            @endforeach
        </ul>
    </div>
@endif
    



        <form action="{{ isset($user) ? route('users.update', $user->id_user) : route('users.store') }}" method="POST">
        @csrf
        @if(isset($user))
            @method('PUT')
        @endif
        
        
        <div class="mb-4">
            <label class="block text-sm font-medium">Level</label>
            <select name="level" id="level" class="w-full border rounded px-3 py-2" required>
                <option value="">-- Pilih Level --</option>
                <option value="Akademik" {{ old('level', $user->level ?? '') == 'Akademik' ? 'selected' : '' }}>Akademik</option>
                <option value="dosen" {{ old('level', $user->level ?? '') == 'dosen' ? 'selected' : '' }}>Dosen</option>
                <option value="mahasiswa" {{ old('level', $user->level ?? '') == 'mahasiswa' ? 'selected' : '' }}>Mahasiswa</option>
            </select>
        </div>
    
{{-- Input untuk Akademik --}}
<div id="form-akademik" class="mb-4 hidden">
    <label class="block text-sm font-medium">Nama</label>
    <input type="text" name="nama" value="{{ old('nama', $user->nama ?? '') }}" class="w-full border rounded px-3 py-2">
</div>
    
{{-- Input untuk Dosen --}}
<div id="form-dosen" class="mb-4 hidden">
    <label class="block text-sm font-medium">Nama Dosen</label>
    <input type="text" name="nama" value="{{ old('nama', $user->nama ?? '') }}" class="w-full border rounded px-3 py-2">
</div>
    
{{-- Input untuk Mahasiswa --}}
<div id="form-mahasiswa" class="mb-4 hidden">
    <label class="block text-sm font-medium">Nama Mahasiswa</label>
    <input type="text" name="nama" value="{{ old('nama', $user->nama ?? '') }}" class="w-full border rounded px-3 py-2">

    <div class="mt-4">
        <label class="block text-sm font-medium">NIM</label>
        <input type="text" name="no_pokok" id="no_pokok" value="{{ old('no_pokok', $user->no_pokok ?? '') }}" class="w-full border rounded px-3 py-2">
    </div>
    
<div class="mt-4">
    <label class="block text-sm font-medium">Tahun Ajaran</label>
    <select name="th_ajaran" id="th_ajaran" class="w-full border rounded px-3 py-2" required>
        <option value="">-- Pilih Tahun Ajaran --</option>
        @php
            $startYear = 2018; // tahun awal
            $endYear = date('Y'); // otomatis sampai tahun sekarang
        @endphp

        @for($tahun = $startYear; $tahun <= $endYear; $tahun++)
            <optgroup label="Tahun {{ $tahun }}">
<option value="{{ "Ganjil $tahun/" . ($tahun+1) }}"
    {{ old('th_ajaran', $user->th_ajaran ?? '') == "Ganjil $tahun/" . ($tahun+1) ? 'selected' : '' }}>
    Ganjil {{ $tahun }}/{{ $tahun+1 }}
</option>

<option value="{{ "Genap $tahun/" . ($tahun+1) }}"
    {{ old('th_ajaran', $user->th_ajaran ?? '') == "Genap $tahun/" . ($tahun+1) ? 'selected' : '' }}>
    Genap {{ $tahun }}/{{ $tahun+1 }}
</option>

            </optgroup>
        @endfor
    </select>
</div>


    <div class="mt-4">
        <label class="block text-sm font-medium">No HP</label>
        <input type="text" name="nohp" id="nohp" value="{{ old('nohp', $user->nohp ?? '') }}" class="w-full border rounded px-3 py-2">
    </div>

    <div class="mt-4">
        <label class="block text-sm font-medium">Email</label>
        <input type="email" name="email" id="email" value="{{ old('email', $user->email ?? '') }}" class="w-full border rounded px-3 py-2">
    </div>
</div>
        <script>
        document.addEventListener("DOMContentLoaded", function () {
            let levelSelect = document.getElementById('level');
            let formAkademik = document.getElementById('form-akademik');
            let formDosen = document.getElementById('form-dosen');
            let formMahasiswa = document.getElementById('form-mahasiswa');
        
function toggleForms() {
    formAkademik.classList.add('hidden');
    formDosen.classList.add('hidden');
    formMahasiswa.classList.add('hidden');

    formAkademik.querySelectorAll('input, select').forEach(el => el.disabled = true);
    formDosen.querySelectorAll('input, select').forEach(el => el.disabled = true);
    formMahasiswa.querySelectorAll('input, select').forEach(el => el.disabled = true);

    if (levelSelect.value === "Akademik") {
        formAkademik.classList.remove('hidden');
        formAkademik.querySelectorAll('input, select').forEach(el => el.disabled = false);
    } else if (levelSelect.value === "dosen") {
        formDosen.classList.remove('hidden');
        formDosen.querySelectorAll('input, select').forEach(el => el.disabled = false);
    } else if (levelSelect.value === "mahasiswa") {
        formMahasiswa.classList.remove('hidden');
        formMahasiswa.querySelectorAll('input, select').forEach(el => el.disabled = false);
    }
}

        
            // Jalankan saat load pertama
            toggleForms();
        
            // Jalankan saat ganti level
            levelSelect.addEventListener("change", toggleForms);
        
            // Auto isi mahasiswa
            document.getElementById('mahasiswa').addEventListener('change', function() {
                let selected = this.options[this.selectedIndex];
                document.getElementById('no_pokok').value = selected.dataset.nim || '';
                document.getElementById('nohp').value = selected.dataset.hp || '';
                document.getElementById('email').value = selected.dataset.email || '';
            });
        });
        </script>
    
    
        <div class="mb-4">
            <label class="block text-sm font-medium">Username</label> 
            <input type="text" name="username" value="{{ old('username', $user->username ?? '') }}" class="w-full border rounded px-3 py-2" placeholder="username minimal 8 karakter" required>
        </div>
    
    
        <div class="mb-4">
            <label class="block text-sm font-medium">Password</label>
            <input type="password" name="password"  class="w-full border rounded px-3 py-2" placeholder="password minimal 8 karakter" {{ isset($user) ? '' : 'required' }}>
        </div>
    
        <div class="mb-4">
            <label class="block text-sm font-medium">Konfirmasi Password</label>
            <input type="password" name="password_confirmation" class="w-full border rounded px-3 py-2" placeholder="password minimal 8 karakter" {{ isset($user) ? '' : 'required' }}>
        </div>
        
        <div class="mb-4">
            <label class="block text-sm font-medium">Status</label>
            <select name="status" class="w-full border rounded px-3 py-2" required>
                <option value="active" {{ old('status', $user->status ?? 'active') == 'active' ? 'selected' : '' }}>Active</option>
                <option value="inactive" {{ old('status', $user->status ?? '') == 'inactive' ? 'selected' : '' }}>Inactive</option>
            </select>
        </div>
    
    
        <button type="submit" class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700">
            {{ isset($user) ? 'Update' : 'Simpan' }}
        </button>
    </form>

</div>
@endsection