@extends('user.layout.main')

@section('content')

<div class="container-fluid">

    <h4 class="mb-4 text-gray-800">Profile</h4>

    <div class="card shadow mb-5 p-4">

        {{-- update profile --}}
        <form id="profileForm" method="POST" action="{{ route('user.profile.update') }}">
            @csrf

            <div class="row">
                <div class="row">

                <div class="col-md-6 mb-3">
                    <label>Nama Pengguna</label>
                    <input type="text" name="name" value="{{ auth()->user()->name }}" class="form-control" disabled>
                </div>

                <div class="col-md-6 mb-3">
                    <label>Nama Pangkalan</label>
                    <input type="text" name="nama_pangkalan" value="{{ auth()->user()->nama_pangkalan }}" class="form-control" disabled>
                </div>

                <div class="col-md-12 mb-3">
                    <label>Alamat</label>
                    <textarea name="alamat" class="form-control" disabled>{{ auth()->user()->alamat }}</textarea>
                </div>

                <div class="col-md-12 mb-3">
                    <label>Email</label>
                    <input type="email" name="email" value="{{ auth()->user()->email }}" class="form-control" disabled>
                </div>

            </div>

            <div class="mt-4 flex gap-2">
                <button type="button" id="editBtn" class="btn btn-primary">Edit Profile</button>
                <button type="submit" id="updateBtn" class="btn btn-success hidden">Update</button>
                <button type="button" id="cancelBtn" class="btn btn-danger hidden">Batal</button>
            </div>

        </form>

    </div>

    {{-- update password --}}
    <div class="card shadow mt-4 p-4">

    <h5 class="mb-3">Ubah Password</h5>

    <form id="passwordForm" method="POST" action="{{ route('user.profile.password') }}" class="mt-4">
        @csrf

        <div class="mb-3">
            <label>Password Baru</label>
            <div class="position-relative">
                <input type="password" id="new_password" name="password" class="form-control pr-5" required>

                <button type="button" onclick="toggleNewPassword()"
                    class="btn position-absolute" 
                    style="right:10px; top:50%; transform:translateY(-50%); border:none; background:none;">
                    <i id="eyeNewPassword" class="fas fa-eye"></i>
                </button>
            </div>

            <div class="mt-2 text-sm">
                <div id="pw-length" class="text-danger">✖ Minimal 8 karakter</div>
                <div id="pw-uppercase" class="text-danger">✖ 1 huruf kapital</div>
                <div id="pw-number" class="text-danger">✖ 1 angka</div>
                <div id="pw-symbol" class="text-danger">✖ 1 simbol</div>
            </div>
        </div>

        <!-- Confirm -->
        <div class="mb-3">
            <label>Konfirmasi Password</label>
            <input type="password" id="confirm_password" name="password_confirmation" class="form-control" required>

            <div id="pw-match" class="text-danger mt-2">
                ✖ Password tidak sama
            </div>
        </div>

        <button type="submit" class="btn btn-warning">
            Update Password
        </button>

    </form>

</div>

</div>

@endsection