@extends('admin.layouts.app')

@section('content')
<h4 class="fw-bold py-3 mb-4"><span class="text-muted fw-light">Account Settings /</span> Account</h4>

<div class="row">
    <div class="col-md-12">
        <ul class="nav nav-pills flex-column flex-md-row mb-4">
            <li class="nav-item">
                <a class="nav-link active" href="{{ route('admin.profile.setting') }}"><i class="ti-xs ti ti-users me-1"></i> Account</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="{{ route('admin.profile.security') }}"><i class="ti-xs ti ti-lock me-1"></i> Security</a>
            </li>
        </ul>
        <div class="card mb-4">
            <div class="card-body">
                <form id="formAccountSettings" method="POST" action="{{ route('admin.profile.update-setting') }}" enctype="multipart/form-data">
                    <h5 class="card-header">Profile Details</h5>
                    <!-- Account -->
                    <div class="card-body">
                        <div class="d-flex align-items-start align-items-sm-center gap-4">
                            <img src="{{ asset($admin->image->path ?? 'images/admin.png') }}" alt="user-avatar" class="d-block w-px-100 h-px-100 rounded" id="uploadedAvatar" />
                            <div class="button-wrapper">
                                <label for="upload" class="btn btn-primary me-2 mb-3" tabindex="0">
                                    <span class="d-none d-sm-block">Upload new photo</span>
                                    <i class="ti ti-upload d-block d-sm-none"></i>
                                    <input type="file" id="upload" name="image" class="account-file-input" hidden accept="image/png, image/jpeg" onchange="document.getElementById('uploadedAvatar').src = window.URL.createObjectURL(this.files[0])" />
                                </label>

                                <div class="text-muted">Allowed JPG, GIF or PNG. Max size of 2M</div>
                            </div>
                        </div>
                    </div>
                    <hr class="my-3" />
                    @csrf
                    <div class="form-group row mb-3">
                        <div class="col">
                            <label for="email" class="form-label">Email <small class="text-danger">*</small></label>
                            <input type="email" class="form-control @error('email') is-invalid @enderror" id="email" name="email" value="{{ $admin->email ?? old('email') }}" required>
                            @error('email')
                            <span class="text-danger" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                            @enderror
                        </div>

                    </div>
                    <div class="form-group row mb-3">
                        <div class="col">
                            <label for="first_name" class="form-label">First Name <small class="text-danger">*</small></label>
                            <input type="text" class="form-control @error('first_name') is-invalid @enderror" id="first_name" name="first_name" value="{{ $admin->first_name ?? old('first_name') }}" required>
                            @error('first_name')
                            <span class="text-danger" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                            @enderror
                        </div>
                        <div class="col">
                            <label for="last_name" class="form-label">Last Name <small class="text-danger">*</small></label>
                            <input type="text" class="form-control @error('last_name') is-invalid @enderror" id="last_name" name="last_name" value="{{ $admin->last_name ?? old('last_name') }}" required>
                            @error('last_name')
                            <span class="text-danger" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                            @enderror
                        </div>
                    </div>
                    <div class="mt-2">
                        <button type="submit" class="btn btn-primary me-2">Save changes</button>
                    </div>
                </form>
            </div>
            <!-- /Account -->
        </div>
    </div>
</div>
@endsection