@extends('admin.layouts.app')

@section('title', __('dashboard.profile_settings'))

@section('content')
<x-admin.page-header title="{{ __('dashboard.profile_settings') }}" :breadcrumbs="[__('dashboard.settings') => '#', __('dashboard.profile') => '']" />

<div class="row">
    <div class="col-lg-8">
        <div class="card">
            <div class="card-header">
                <h5 class="card-title mb-0">{{ __('dashboard.profile_information') }}</h5>
            </div>
            <div class="card-body">
                @if(session('success'))
                    <x-admin.alert type="success">{{ session('success') }}</x-admin.alert>
                @endif

                <form action="{{ route('admin.settings.profile.update') }}" method="POST">
                    @csrf

                    <x-admin.form-input
                        label="{{ __('dashboard.name') }}"
                        name="name"
                        :value="$admin->name"
                        placeholder="{{ __('dashboard.enter_your_name') }}"
                        :required="true"
                    />

                    <x-admin.form-input
                        label="{{ __('dashboard.email') }}"
                        name="email"
                        type="email"
                        :value="$admin->email"
                        placeholder="{{ __('dashboard.enter_your_email') }}"
                        :required="true"
                    />

                    <hr class="my-4">

                    <h6 class="mb-3">{{ __('dashboard.change_password') }}</h6>

                    <x-admin.form-input
                        label="{{ __('dashboard.current_password') }}"
                        name="current_password"
                        type="password"
                        placeholder="{{ __('dashboard.enter_current_password') }}"
                        helper="{{ __('dashboard.required_if_changing_password') }}"
                    />

                    <x-admin.form-input
                        label="{{ __('dashboard.new_password') }}"
                        name="password"
                        type="password"
                        placeholder="{{ __('dashboard.enter_new_password') }}"
                    />

                    <x-admin.form-input
                        label="{{ __('dashboard.confirm_new_password') }}"
                        name="password_confirmation"
                        type="password"
                        placeholder="{{ __('dashboard.confirm_new_password_placeholder') }}"
                    />

                    <div class="d-flex gap-2">
                        <button type="submit" class="btn btn-primary">
                            <i class="ri-save-line align-middle me-1"></i> {{ __('dashboard.save_profile') }}
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="col-lg-4">
        <div class="card">
            <div class="card-body text-center">
                <div class="avatar-lg mx-auto mb-3">
                    <span class="avatar-title bg-primary-subtle text-primary rounded-circle fs-1">
                        {{ substr($admin->name, 0, 1) }}
                    </span>
                </div>
                <h5 class="mb-1">{{ $admin->name }}</h5>
                <p class="text-muted mb-0">{{ __('dashboard.administrator') }}</p>
            </div>
            <div class="card-body border-top">
                <div class="d-flex flex-column gap-2">
                    <div class="d-flex justify-content-between">
                        <span class="text-muted">{{ __('dashboard.email') }}:</span>
                        <span>{{ $admin->email }}</span>
                    </div>
                    <div class="d-flex justify-content-between">
                        <span class="text-muted">{{ __('dashboard.member_since') }}:</span>
                        <span>{{ $admin->created_at->format('M d, Y') }}</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection