@extends('layouts.main', ['title' => 'Profile'])

@section('content')


    <section class="section main-section">
        <div class="grid grid-cols-1 gap-6 lg:grid-cols-2 mb-6">
            <div class="card">
                <header class="card-header">
                    <p class="card-header-title">
                        <span class="icon"><i class="mdi mdi-account-circle"></i></span>
                        Edit Profile
                    </p>
                </header>
                <div class="card-content">
                    <form action="{{route('profile.update')}}" method="POST">
                       @csrf
                        <div class="field">
                            <label class="label">Username</label>
                            <div class="field-body">
                                <div class="field">
                                    <div class="control">
                                        <input type="text" autocomplete="on" name="username" value="{{auth()->user()->username}}"
                                            class="input" required>
                                    </div>
                                    <p class="help">Required. Your Username</p>
                                </div>
                            </div>
                        </div>
                        <div class="field">
                            <label class="label">Nama</label>
                            <div class="field-body">
                                <div class="field">
                                    <div class="control">
                                        <input type="text" autocomplete="on" name="nama" value="{{auth()->user()->nama}}"
                                            class="input" required>
                                    </div>
                                    <p class="help">Required. Your name</p>
                                </div>
                            </div>
                        </div>
                        <div class="field">
                            <label class="label">No WA</label>
                            <div class="field-body">
                                <div class="field">
                                    <div class="control">
                                        <input type="number" autocomplete="on" name="no_hp" value="{{auth()->user()->no_hp}}"
                                            class="input">
                                    </div>
                                    <p class="help">Your Whatsapp Number</p>
                                </div>
                            </div>
                        </div>
                        <div class="field">
                            <label class="label">E-mail</label>
                            <div class="field-body">
                                <div class="field">
                                    <div class="control">
                                        <input type="email" autocomplete="on" name="email" value="{{auth()->user()->email}}"
                                            class="input">
                                    </div>
                                    <p class="help">Your e-mail</p>
                                </div>
                            </div>
                        </div>
                        <hr>
                        <div class="field">
                            <div class="control">
                                <button type="submit" class="button green">
                                    Submit
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
            <div class="card">
                <header class="card-header">
                    <p class="card-header-title">
                        <span class="icon"><i class="mdi mdi-lock"></i></span>
                        Change Password
                    </p>
                </header>
                <div class="card-content">
                    <form action="{{route('profile.update-password')}}" method="POST">
                        @csrf
                        <div class="field">
                            <label class="label">Current password</label>
                            <div class="control">
                                <input type="password" name="password_current" autocomplete="current-password" class="input"
                                    required>
                            </div>
                            <p class="help">Required. Your current password</p>
                        </div>
                        <hr>
                        <div class="field">
                            <label class="label">New password</label>
                            <div class="control">
                                <input type="password" autocomplete="new-password" name="password" class="input" required>
                            </div>
                            <p class="help">Required. New password</p>
                        </div>
                        <div class="field">
                            <label class="label">Confirm password</label>
                            <div class="control">
                                <input type="password" autocomplete="new-password" name="password_confirmation" class="input"
                                    required>
                            </div>
                            <p class="help">Required. New password one more time</p>
                        </div>
                        <hr>
                        <div class="field">
                            <div class="control">
                                <button type="submit" class="button green">
                                    Submit
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        
    </section>
@endsection