@extends('master')
@section('content')
    <div class="mb-4"></div>
    <div class="container-fluid px-4 mb-4">
        <div class="row justify-content-between">
            <div class="col">
                <div style="font-size: 14px" class="breadcrumb-item">Ubah Sandi</div>
            </div>
        </div>
    </div>

    <div class="body grow">
        <div class="container-lg px-4 py-4">
            <div class="card border-0 shadow-sm rounded-3 h-100">
                <div class="card-header bg-white border-0 pt-4 px-4 pb-3">
                    <h5 class="mb-0 fw-semibold text-dark">Administrator</h5>
                    <p class="text-muted small mb-0 mt-1">Ubah Sandi</p>
                </div>

                <div class="card-body p-4">
                    <form action="{{ route('auth.change.password.post') }}" method="POST">
                        @csrf

                        <div class="mb-4">
                            <label class="form-label fw-medium text-dark mb-2" for="old_password">
                                Kata Sandi Lama <span class="text-danger">*</span>
                            </label>
                            <input
                                type="password"
                                class="form-control form-control-lg shadow-none border @error('old_password') is-invalid @enderror"
                                id="old_password"
                                name="old_password"
                                placeholder="Masukkan kata sandi lama"
                                value="{{ old('old_password') }}"
                                required>
                            @error('old_password')
                            <div class="text-danger small mt-2">
                                <i class="bi bi-exclamation-circle me-1"></i> {{ $message }}
                            </div>
                            @enderror
                        </div>

                        <div class="mb-4">
                            <label class="form-label fw-medium text-dark mb-2" for="new_password">
                                Kata Sandi Baru <span class="text-danger">*</span>
                            </label>
                            <input
                                type="password"
                                class="form-control form-control-lg shadow-none border @error('new_password') is-invalid @enderror"
                                id="new_password"
                                name="new_password"
                                placeholder="Masukkan kata sandi baru"
                                value="{{ old('new_password') }}"
                                required>
                            @error('new_password')
                            <div class="text-danger small mt-2">
                                <i class="bi bi-exclamation-circle me-1"></i> {{ $message }}
                            </div>
                            @enderror
                        </div>

                        <div class="mb-4">
                            <label class="form-label fw-medium text-dark mb-2" for="confirm_password">
                                Konfirmasi Kata Sandi Baru <span class="text-danger">*</span>
                            </label>
                            <input
                                type="password"
                                class="form-control form-control-lg shadow-none border @error('confirm_password') is-invalid @enderror"
                                id="confirm_password"
                                name="confirm_password"
                                placeholder="Konfirmasi kata sandi baru"
                                value="{{ old('confirm_password') }}"
                                required>
                            @error('confirm_password')
                            <div class="text-danger small mt-2">
                                <i class="bi bi-exclamation-circle me-1"></i> {{ $message }}
                            </div>
                            @enderror
                        </div>


                        <div class="d-flex gap-2 justify-content-end pt-3 border-top">
                            <button type="submit" class="btn btn-lg btn-primary px-4">Submit</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection