@extends('layouts.contentNavbarLayoutBackend')

@section('title', 'Edit Profile')

@section('vendor-style')
    <link rel="stylesheet" href="{{ asset('backend-assets/vendor/libs/flatpickr/flatpickr.css') }}">
@endsection

@section('vendor-script')
    <script src="{{ asset('backend-assets/vendor/libs/flatpickr/flatpickr.js') }}"></script>
@endsection

@section('page-script')
    <script type="text/javascript">
        $(document).ready(function () {
            $('#dob').flatpickr({
                dateFormat: "d-M-Y"
            });
        });
    </script>
@endsection

@section('content')
    <h4 class="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-3">
                <li class="nav-item"><a class="nav-link active" href="javascript:void(0);"><i class="bx bx-user me-1"></i> Account</a></li>
                <li class="nav-item"><a class="nav-link" href="{{ route('admin.password.edit') }}"><i class="bx bx-lock-alt me-1"></i> Security</a></li>
            </ul>
            <form class="card mb-4" id="formAccountSettings" action="{{ route('admin.profile.update') }}" method="POST" enctype="multipart/form-data" autocomplete="off">
                @csrf
                <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="{{ !empty($profileData->photo) ? url('uploads/avatars/'.$profileData->photo) : url('backend-assets/img/avatars/19.jpg') }}" alt="user-avatar" class="d-block rounded" height="100" width="100" id="uploadedAvatar" />
                        <div class="button-wrapper">
                            <label for="upload" class="btn btn-primary me-2 mb-4" tabindex="0">
                                <span class="d-none d-sm-block">Upload new photo</span>
                                <i class="bx bx-upload d-block d-sm-none"></i>
                                <input type="file" id="upload" name="photo" class="account-file-input" hidden accept="image/png, image/jpeg" />
                            </label>
                            <button type="button" class="btn btn-label-secondary account-image-reset mb-4">
                                <i class="bx bx-reset d-block d-sm-none"></i>
                                <span class="d-none d-sm-block">Reset</span>
                            </button>

                            <p class="text-muted mb-0">Allowed JPG, GIF or PNG. Max size of 800K</p>
                        </div>
                    </div>
                </div>
                <hr class="my-0">
                <div class="card-body">
                    <div class="row">
                        <div class="mb-3 col-md-4">
                            <label for="first_name_en" class="form-label">First Name(En)</label>
                            <input class="form-control" type="text" id="first_name_en" name="first_name_en" value="{{ $profileData->first_name_en }}" placeholder="Enter First Name(En)" autofocus />
                        </div>
                        <div class="mb-3 col-md-4">
                            <label for="middle_name_en" class="form-label">Middle Name(En)</label>
                            <input class="form-control" type="text" id="middle_name_en" name="middle_name_en" value="{{ $profileData->middle_name_en }}" placeholder="Enter Middle Name(En)" />
                        </div>
                        <div class="mb-3 col-md-4">
                            <label for="last_name_en" class="form-label">Last Name(En)</label>
                            <input class="form-control" type="text" name="last_name_en" id="last_name_en" value="{{ $profileData->last_name_en }}"  placeholder="Enter Last Name(En)" />
                        </div>
                        <div class="mb-3 col-md-4">
                            <label for="first_name_kh" class="form-label">First Name(Kh)</label>
                            <input class="form-control" type="text" id="first_name_kh" name="first_name_kh" value="{{ $profileData->first_name_kh }}" placeholder="Enter First Name(Kh)" />
                        </div>
                        <div class="mb-3 col-md-4">
                            <label for="middle_name_kh" class="form-label">Middle Name(Kh)</label>
                            <input class="form-control" type="text" id="middle_name_kh" name="middle_name_kh" value="{{ $profileData->middle_name_kh }}" placeholder="Enter Middle Name(Kh)" />
                        </div>
                        <div class="mb-3 col-md-4">
                            <label for="last_name_kh" class="form-label">Last Name(Kh)</label>
                            <input class="form-control" type="text" name="last_name_kh" id="last_name_kh" value="{{ $profileData->last_name_kh }}"  placeholder="Enter Last Name(Kh)" />
                        </div>
                        <div class="mb-3 col-md-4">
                            <label for="email" class="form-label">E-mail</label>
                            <input class="form-control" type="text" id="email" name="email" value="{{ $profileData->email }}" placeholder="Enter Email" />
                        </div>
                        <div class="mb-3 col-md-4">
                            <label for="email" class="form-label">Sex</label>
                            <select name="sex" id="sex" class="form-select">
                                <option value="">Select Sex</option>
                                <option value="Male" {{ $profileData->sex === 'Male' ? 'selected' : '' }}>Male</option>
                                <option value="Female" {{ $profileData->sex === 'Female' ? 'selected' : '' }}>Female</option>
                            </select>
                        </div>
                        <div class="mb-3 col-md-4">
                            <label for="dob" class="form-label">Date of Birth</label>
                            <input class="form-control" type="text" id="dob" name="dob" value="{{ date('d-M-Y', strtotime($profileData->dob)) }}" placeholder="Enter Date of Birth" />
                        </div>
                        <div class="mb-3 col-md-4">
                            <label for="tel" class="form-label">Tel</label>
                            <input class="form-control" type="text" id="tel" name="tel" value="{{ $profileData->tel }}" placeholder="Enter Tel" />
                        </div>
                        <div class="mb-3 col-md-4">
                            <label for="birth_place" class="form-label">Birth Place</label>
                            <input class="form-control" type="text" id="birth_place" name="birth_place" value="{{ $profileData->birth_place }}" placeholder="Enter Birth Place" />
                        </div>
                        <div class="mb-3 col-md-4">
                            <label for="present_address" class="form-label">Present Address</label>
                            <input class="form-control" type="text" id="present_address" name="present_address" value="{{ $profileData->present_address }}" placeholder="Enter Present Address" />
                        </div>
                    </div>
                    <div class="mt-2">
                        <button type="submit" class="btn btn-primary me-2">Save changes</button>
                        <button type="reset" class="btn btn-label-secondary">Cancel</button>
                    </div>
                </div>
                <!-- /Account -->
            </form>
        </div>
    </div>
@endsection