@extends('layouts.app', ['path' => 'settings'])
@section('content')
    <div class="content" data-color="primary">
        <!-- Breadcrumb -->
        <div class="d-md-flex d-block align-items-center justify-content-between page-breadcrumb mb-3">
            <div class="my-auto mb-2">
                <h2 class="mb-1">Settings</h2>
                <nav>
                    <ol class="breadcrumb mb-0">
                        <li class="breadcrumb-item">
                            <a href="{{ route('dashboard') }}"><i class="ti ti-smart-home"></i></a>
                        </li>
                        <li class="breadcrumb-item">
                            Administration
                        </li>
                        <li class="breadcrumb-item active" aria-current="page">Profile Settings</li>
                    </ol>
                </nav>
            </div>
            @include('partials.new_alerts')
        </div>
        <!-- /Breadcrumb -->

        <ul class="nav nav-tabs nav-tabs-solid bg-transparent border-bottom mb-3">
            <li class="nav-item">
                <a class="nav-link active cursor-pointer"><i class="ti ti-settings me-2"></i>General Settings</a>
            </li>
        </ul>
        <div class="row">
            @include('user.settings-sidebar', ['path' => 'account-settings'])

            <!-- Content -->
            <div class="col-xl-9">

                <!-- Account Card -->
                <div class="tab-content card" id="account-card">
                    <div class="card-body">
                        <div class="border-bottom mb-3 pb-3">
                            <h4>Profile Settings</h4>
                        </div>
                        <form id="accountForm" action="{{ route('account.setting.post') }}" enctype="multipart/form-data" method="POST" autocomplete="off">
                            @csrf
                            <div class="border-bottom mb-3">
                                <div class="row">
                                    <div class="col-md-12">
                                        <div>
                                            <input type="hidden" name="old_image" id="old_image" value="{{ $userAccountData['image'] }}">
                                            <h6 class="mb-3">Basic Information</h6>
                                            <div class="d-flex align-items-center flex-wrap row-gap-3 bg-light w-100 rounded p-3 mb-4">
                                                <div class="d-flex align-items-center justify-content-center avatar avatar-xxxl rounded-circle border border-2 me-2 flex-shrink-0 text-dark frames position-relative" id="employeeProfileImageCircle">

                                                    <span id="previewDiv" class="rounded-circle overflow-hidden text-center" style="width: 6rem; height: 6rem;">
                                                        @if (!empty($userAccountData['image']))
                                                            <img src="data:image/png;base64,{{ $userAccountData['image'] }}" alt="img" class="avatar  img-fluid rounded-circle object-fit-cover">
                                                        @else
                                                            <img src="https://ui-avatars.com/api/?name={{ $userAccountData['name'] }}&color=7F9CF5&background=D9D9D9&color=fff&bold=true" class="avatar  img-fluid rounded-circle object-fit-cover" alt="img">

                                                        @endif
                                                    </span>

                                                    <div class="profile-uploader d-flex align-items-center position-absolute bottom-0">
                                                        <label class="btn btn-sm on-active-no-efect m-1 bg-white rounded-circle d-flex justify-content-center align-items-center position-relative">
                                                            <i class="ti ti-edit fs-19"></i>
                                                            <input type="file" class="form-control image-sign" id="imageInput" name="image" accept="image/*">
                                                        </label>
                                                        <a href="javascript:void(0);" class="btn btn-sm on-active-no-efect m-1 bg-white rounded-circle d-flex justify-content-center align-items-center" style="visibility: {{ !empty($userAccountData['image'])? 'visible'  : 'hidden'}};" id="removeImage">
                                                            <i class="ti ti-trash fs-19"></i>
                                                        </a>
                                                    </div>
                                                </div>

                                                <div class="profile-upload">
                                                    <div class="mb-2">
                                                        <h6 class="mb-1">Profile Photo</h6>
                                                        <p class="fs-12 mb-0">The image size must be less than 2 MB.</p>
                                                        <span class="error-validation" id="image-error"></span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!-- Basic Info Fields -->
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="mb-3">
                                            <label class="form-label">Name <span class="text-danger"> *</span></label>
                                            <input type="text" name="name" id="name" class="form-control" value="{{ $userAccountData['name'] ?? '' }}">
                                            <span class="error-validation" id="name-error"></span>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="mb-3">
                                            <label class="form-label">Email</label>
                                            <input type="text" id="email" class="form-control" value="{{ $userAccountData['email'] ?? '' }}" autocomplete="off" disabled>
                                            {{-- <input type="hidden" name="email" id="email" class="form-control" value="{{ $userAccountData['email'] ?? '' }}"> --}}
                                            {{-- <span class="error-validation" id="email-error"></span> --}}
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="mb-3">
                                            <label class="form-label">Phone</label>
                                            <input type="text" name="phone" id="phone" class="form-control" value="{{ $userAccountData['phone'] ?? '' }}">
                                            <span class="error-validation" id="phone-error"></span>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- Password -->
                            <div class="border-bottom mb-3">
                                <div class="row">
                                    <div class="col-md-4">
                                        <div class="mb-3">
                                            <label class="form-label">Current Password</label>
                                            <div class="pass-group">
                                                <input type="password" name="current_password" id="current_password" class="form-control pass-input" autocomplete="new-password" autocorrect="off" spellcheck="false">
                                                <span class="ti toggle-password ti-eye-off"></span>
                                            </div>
                                            <span class="error-validation" id="current_password-error"></span>
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="mb-3">
                                            <label class="form-label">New Password</label>
                                            <div class="pass-group">
                                                <input type="password" name="new_password" id="new_password" class="form-control pass-inputs">
                                                <span class="ti toggle-passwords ti-eye-off"></span>
                                            </div>
                                            <!-- Keep this empty, jQuery will inject the label here -->
                                            <span class="error-validation" id="new_password-error"></span>
                                        </div>
                                    </div>

                                    <div class="col-md-4">
                                        <div class="mb-3">
                                            <label class="form-label">Confirm Password</label>
                                            <div class="pass-group">
                                                <input type="password" name="confirm_password" id="confirm_password" class="form-control pass-inputa">
                                                <span class="ti toggle-passworda ti-eye-off"></span>
                                            </div>
                                            <span class="error-validation" id="confirm_password-error"></span>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- Submit -->
                            <div class="d-flex align-items-center justify-content-end">
                                <button type="button" class="btn btn-light border me-3">
                                    <i class="ti ti-x me-2"></i>Cancel
                                </button>
                                <button type="submit" class="btn btn-primary">
                                    <i class="ti ti-check me-2"></i>Save
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>

    </div>
@endsection

@push('scripts')
    <script src="{{ asset('assets/validation/account-setting.js') }}"></script>
@endpush