@extends('student.layouts.app')

@section('content')
    <form action="{{ route('student.profil.update') }}" method="POST"
        class="flex flex-col items-center w-full md:w-1/2 m-auto p-6" >
        @csrf
        <div class="w-full rounded-lg border bg-card text-card-foreground shadow-sm p-6 mb-2" data-id="21" data-v0-t="card">
            <div class="flex flex-col mb-6" data-id="22">
                <h3 class="whitespace-nowrap text-2xl font-semibold leading-none tracking-tight" data-id="23">
                    Profil
                </h3>
            </div>
            <div class="" data-id="24">
                <div class="grid gap-6 mb-6 md:grid-cols-2">
                    <div>
                        <label for="nis" class="block mb-2 text-sm font-medium text-gray-900 ">
                            NIS</label>
                        <input type="text" id="nis"
                            class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 "
                            placeholder="nis" readonly value="{{$siswa->nis}}" />
                    </div>
                    <div>
                        <label for="nama_siswa" class="block mb-2 text-sm font-medium text-gray-900 ">
                            Nama</label>
                        <input type="text" id="nama_siswa"
                            class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 "
                            placeholder="Nama Siswa"  readonly value="{{$siswa->nama_siswa}}" />
                    </div>
                    <div class="mb-6">
                        <label for="email" class="block mb-2 text-sm font-medium text-gray-900 ">Email</label>
                        <input type="email" name="email" id="email"
                            class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 "
                            placeholder="you@email.com" required value="{{$siswa->email}}"/>
                    </div>
                    <div>
                        <label for="no_hp" class="block mb-2 text-sm font-medium text-gray-900 ">No HP</label>
                        {{-- <input type="tel" id="no_hp" name="no_hp"
                            class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 "
                            placeholder="123-45-678" 
                            pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}" required value="{{$siswa->no_hp}}"/> --}}
                            <input type="tel" id="no_hp" name="no_hp"
                            class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 "
                            placeholder="123-45-678" required value="{{$siswa->no_hp}}"/>
                    </div>
                    <div>
                        <label for="orang_tua_wali" class="block mb-2 text-sm font-medium text-gray-900 ">Orang Tua/Wali</label>
                        <input type="text" id="orang_tua_wali"
                        name="orang_tua_wali"
                            class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 "
                            placeholder="Nama Orang Tua/Wali..." value="{{$siswa->orang_tua_wali}}"/>
                    </div>
                    <div>
                        <label for="alamat" class="block mb-2 text-sm font-medium text-gray-900 ">Alamat</label>
                        <input type="text" id="alamat"
                        name="alamat"
                            class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 "
                            placeholder="Alamat..." value="{{$siswa->alamat}}" />
                    </div>
                    
                   
                </div>
                <hr class="mb-6">
                <div class="mb-6">
                    <label for="password"
                        class="block mb-2 text-sm font-medium text-gray-900 ">Password Baru</label>
                    <input type="password" id="password" name="password_baru"
                        class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 "
                        placeholder="•••••••••" />
                </div>
                <div class="mb-6">
                    <label for="confirm_password_baru"
                        class="block mb-2 text-sm font-medium text-gray-900 ">Konfirmasi
                        Password</label>
                    <input type="password" id="confirm_password_baru" name="confirm_password_baru"
                        class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 "
                        placeholder="•••••••••" />
                </div>
                
                {{-- <button type="submit"
                    class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm w-full sm:w-auto px-5 py-2.5 text-center">Simpan</button> --}}

                    <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded w-full">
                        Simpan
                    </button>
            </div>
        </div>

    </form>
@endsection