@extends('layouts.treasury')

@section('breadcrumb')
    <div class="main-breadcrumb d-flex flex-wrap align-items-center my-4 position-relative gap-3">
        <h2 class="breadcrumb-title mb-0 flex-grow-1 fs-16">Profile</h2>
        <div class="flex-shrink-0">
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb justify-content-end mb-0">
                    <li><i class="ri-home-4-line fs-16 me-2 lh-sm text-primary"></i></li>
                    <li class="breadcrumb-item"><a href="{{ route('treasury.dashboard') }}">Home</a></li>
                    <li class="breadcrumb-item active" aria-current="page">Profile</li>
                </ol>
            </nav>
        </div>
    </div>
@endsection

@section('content')
    <div class="col-12">
        <div class="card">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h5 class="card-title mb-0">Profile Settings</h5>
                <ul class="nav nav-pills nav-preview nav-primary mb-0" role="tablist">
                    <li class="nav-item">
                        <button class="nav-link active" data-bs-toggle="pill" data-bs-target="#pane-profile"
                            type="button">Profile</button>
                    </li>
                    <li class="nav-item">
                        <button class="nav-link" data-bs-toggle="pill" data-bs-target="#pane-password" type="button">Change
                            Password</button>
                    </li>
                </ul>
            </div>

            <div class="card-body">
                <div class="tab-content">
                    <div class="tab-pane fade show active" id="pane-profile" role="tabpanel">
                        <form action="{{ route('treasury.update_profile') }}" method="POST">
                            @csrf
                            <div class="row g-4 mt-3">
                                <div class="col-12 col-xl-6">
                                    <label class="form-label">{{ tr('name') }}</label>
                                    <input type="text" class="form-control" name="name"
                                        value="{{ Auth::user()->name ?? tr('na') }}" placeholder="{{ tr('name') }}" required>
                                </div>
                                <div class="col-12 col-xl-6">
                                    <label class="form-label">{{ tr('email') }}</label>
                                    <input type="email" class="form-control" name="email"
                                        value="{{ Auth::user()->email ?? tr('na') }}" placeholder="Enter Email Address" required>
                                </div>
                                
                                <div class="col-12 text-end">
                                    <button class="btn btn-primary px-4" type="submit">Update Profile</button>
                                </div>
                            </div>
                        </form>
                    </div>

                    <div class="tab-pane fade {{ $errors->has('old_password') || $errors->has('password') || $errors->has('password_confirmation') ? 'show active' : '' }}"
                        id="pane-password" role="tabpanel">

                        <form action="{{ route('treasury.change_password') }}" method="POST">
                            @csrf

                            <div class="row g-4 mt-1">
                                <div class="col-12 col-xl-6">
                                    <label class="form-label">{{ tr('old_password') }}</label>
                                    <input type="password" name="old_password" class="form-control"
                                        placeholder="{{ tr('old_password') }}" required>
                                    @error('old_password')
                                        <span class="text-danger small">{{ $message }}</span>
                                    @enderror
                                </div>

                                <div class="col-12 col-xl-6">
                                    <label class="form-label">{{ tr('new_password') }}</label>
                                    <input type="password" name="password" class="form-control"
                                        placeholder="{{ tr('new_password') }}" required>
                                    @error('password')
                                        <span class="text-danger small">{{ $message }}</span>
                                    @enderror
                                </div>

                                <div class="col-12 col-xl-6">
                                    <label class="form-label">{{ tr('confirm_password') }}</label>
                                    <input type="password" name="password_confirmation" class="form-control"
                                        placeholder="{{ tr('confirm_password') }}" required>
                                    @error('password_confirmation')
                                        <span class="text-danger small">{{ $message }}</span>
                                    @enderror
                                </div>

                                <div class="col-12 text-end">
                                    <button class="btn btn-primary px-4" type="submit">
                                        {{ tr('update_password') ?? 'Update Password' }}
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection