@extends('layouts.app')

@section('namePage', 'Tambah Trainer Eksternal')

@section('content')
    <div class="bg-white dark:bg-gray-800 p-6 rounded-2xl shadow-lg">
        <h1 class="text-2xl font-bold mb-6 text-gray-800 dark:text-white">Tambah Trainer Eksternal</h1>

        <form id="adminForm" action="{{ route('trainer.store') }}" method="POST">
            @csrf

            <div class="mb-4">
                <label for="name" class="block text-sm font-medium text-gray-700 dark:text-white">Nama Lengkap</label>
                <input type="text" name="name" id="name" required
                    class="mt-1 block w-full px-4 py-2 border rounded-lg dark:bg-gray-700 dark:border-gray-600 dark:text-white">
            </div>

            <div class="mb-4">
                <label for="email" class="block text-sm font-medium text-gray-700 dark:text-white">Email</label>
                <input type="email" name="email" id="email" required
                    class="mt-1 block w-full px-4 py-2 border rounded-lg dark:bg-gray-700 dark:border-gray-600 dark:text-white">
            </div>

            <div class="mb-4">
                <label for="jenis_kelamin" class="block text-sm font-medium text-gray-700 dark:text-white">Jenis
                    Kelamin</label>
                <select name="jenis_kelamin" id="jenis_kelamin"
                    class="mt-1 block w-full px-4 py-2 border rounded-lg dark:bg-gray-700 dark:border-gray-600 dark:text-white">
                    <option value="">Pilih Jenis Kelamin</option>
                    <option value="Pria">Laki-laki</option>
                    <option value="Wanita">Perempuan</option>
                </select>
            </div>

            <div class="mb-4">
                <label for="tempat_lahir" class="block text-sm font-medium text-gray-700 dark:text-white">Tempat
                    Lahir</label>
                <input type="text" name="tempat_lahir" id="tempat_lahir"
                    class="mt-1 block w-full px-4 py-2 border rounded-lg dark:bg-gray-700 dark:border-gray-600 dark:text-white">
            </div>

            <div class="mb-4">
                <label for="tanggal_lahir" class="block text-sm font-medium text-gray-700 dark:text-white">Tanggal
                    Lahir</label>
                <input type="date" name="tanggal_lahir" id="tanggal_lahir"
                    class="mt-1 block w-full px-4 py-2 border rounded-lg dark:bg-gray-700 dark:border-gray-600 dark:text-white">
            </div>

            <div class="mb-4">
                <label for="warga_negara" class="block text-sm font-medium text-gray-700 dark:text-white">Warga
                    Negara</label>
                <input type="text" name="warga_negara" id="warga_negara"
                    class="mt-1 block w-full px-4 py-2 border rounded-lg dark:bg-gray-700 dark:border-gray-600 dark:text-white">
            </div>

            <div class="mb-4">
                <label for="alamat" class="block text-sm font-medium text-gray-700 dark:text-white">Alamat</label>
                <textarea name="alamat" id="alamat" rows="3"
                    class="mt-1 block w-full px-4 py-2 border rounded-lg dark:bg-gray-700 dark:border-gray-600 dark:text-white"></textarea>
            </div>

            <div class="mb-4">
                <label for="no_id" class="block text-sm font-medium text-gray-700 dark:text-white">No. Identitas
                    (KTP/SIM)</label>
                <input type="text" name="no_id" id="no_id"
                    class="mt-1 block w-full px-4 py-2 border rounded-lg dark:bg-gray-700 dark:border-gray-600 dark:text-white">
            </div>

            <div class="mb-4">
                <label for="no_tlp" class="block text-sm font-medium text-gray-700 dark:text-white">No. Telepon</label>
                <input type="text" name="no_tlp" id="no_tlp"
                    class="mt-1 block w-full px-4 py-2 border rounded-lg dark:bg-gray-700 dark:border-gray-600 dark:text-white">
            </div>

            <div class="mb-6">
                <label for="pekerjaan" class="block text-sm font-medium text-gray-700 dark:text-white">Pekerjaan</label>
                <select name="pekerjaan" id="pekerjaan"
                    class="mt-1 block w-full px-4 py-2 border rounded-lg dark:bg-gray-700 dark:border-gray-600 dark:text-white">
                    <option value="">-- Pilih Pekerjaan --</option>
                    <option value="Trader Pemula" {{ old('pekerjaan') == 'Trader Pemula' ? 'selected' : '' }}>Trader Pemula</option>
                    <option value="Trader Aktif Harian" {{ old('pekerjaan') == 'Trader Aktif Harian' ? 'selected' : '' }}>Trader Aktif Harian</option>
                    <option value="Investor Jangka Panjang" {{ old('pekerjaan') == 'Investor Jangka Panjang' ? 'selected' : '' }}>Investor Jangka Panjang</option>
                    <option value="Akademisi" {{ old('pekerjaan') == 'Akademisi' ? 'selected' : '' }}>Akademisi</option>
                    <option value="Profesional Industri Keuangan" {{ old('pekerjaan') == 'Profesional Industri Keuangan' ? 'selected' : '' }}>Profesional Industri Keuangan</option>
                    <option value="Hedger" {{ old('pekerjaan') == 'Hedger' ? 'selected' : '' }}>Hedger</option>
                    {{-- <option value="Petani" {{ old('pekerjaan') == 'Petani' ? 'selected' : '' }}>Petani</option>
                    <option value="Peternak" {{ old('pekerjaan') == 'Peternak' ? 'selected' : '' }}>Peternak</option>
                    <option value="Nelayan" {{ old('pekerjaan') == 'Nelayan' ? 'selected' : '' }}>Nelayan</option>
                    <option value="Buruh" {{ old('pekerjaan') == 'Buruh' ? 'selected' : '' }}>Buruh</option>
                    <option value="Pensiunan" {{ old('pekerjaan') == 'Pensiunan' ? 'selected' : '' }}>Pensiunan</option>
                    <option value="Ibu Rumah Tangga" {{ old('pekerjaan') == 'Ibu Rumah Tangga' ? 'selected' : '' }}>Ibu
                        Rumah Tangga</option>
                    <option value="Dokter" {{ old('pekerjaan') == 'Dokter' ? 'selected' : '' }}>Dokter</option>
                    <option value="Perawat" {{ old('pekerjaan') == 'Perawat' ? 'selected' : '' }}>Perawat</option>
                    <option value="Guru/Dosen" {{ old('pekerjaan') == 'Guru/Dosen' ? 'selected' : '' }}>Guru/Dosen</option>
                    <option value="Sopir" {{ old('pekerjaan') == 'Sopir' ? 'selected' : '' }}>Sopir</option>
                    <option value="Pengacara" {{ old('pekerjaan') == 'Pengacara' ? 'selected' : '' }}>Pengacara</option>
                    <option value="Arsitek" {{ old('pekerjaan') == 'Arsitek' ? 'selected' : '' }}>Arsitek</option>
                    <option value="Seniman/Artis" {{ old('pekerjaan') == 'Seniman/Artis' ? 'selected' : '' }}>Seniman/Artis
                    </option>
                    <option value="Programmer" {{ old('pekerjaan') == 'Programmer' ? 'selected' : '' }}>Programmer</option>
                    <option value="Lainnya" {{ old('pekerjaan') == 'Lainnya' ? 'selected' : '' }}>Lainnya</option> --}}
                </select>
            </div>

            <div class="mb-4">
                <label for="password" class="block text-sm font-medium text-gray-700 dark:text-white">Password</label>
                <input type="password" name="password" id="password" required
                    class="mt-1 block w-full px-4 py-2 border rounded-lg dark:bg-gray-700 dark:border-gray-600 dark:text-white">
            </div>

            <div class="mb-4">
                <label for="password_confirmation"
                    class="block text-sm font-medium text-gray-700 dark:text-white">Konfirmasi Password</label>
                <input type="password" name="password_confirmation" id="password_confirmation" required
                    class="mt-1 block w-full px-4 py-2 border rounded-lg dark:bg-gray-700 dark:border-gray-600 dark:text-white">
            </div>

            <div class="flex justify-end gap-4">
                <button type="button" onclick="document.getElementById('modalBack').classList.remove('hidden')"
                    class="px-4 py-2 bg-gray-300 hover:bg-gray-400 text-sm rounded text-gray-800 dark:bg-gray-600 dark:text-white dark:hover:bg-gray-500">
                    Batal
                </button>

                <button type="button" onclick="document.getElementById('modalSubmit').classList.remove('hidden')"
                    class="px-4 py-2 bg-blue-500 text-white text-sm rounded hover:bg-blue-600">
                    Simpan
                </button>
            </div>
        </form>
    </div>

    @include('components.modal-batal', [
        'route' => route('trainer.index'),
    ])
    @include('components.modal-submit', [
        'form' => 'adminForm',
        'message' => 'Apakah Anda yakin ingin menyimpan data trainer ini?',
    ])
@endsection