@extends('users-area.layouts.app')

@section('title', 'Account Setting')

@section('content')
    <div class="card bg-light-info shadow-none position-relative overflow-hidden">
        <div class="card-body px-4 py-3">
            <div class="row align-items-center">
                <div class="col-9">
                    <h4 class="fw-semibold mb-8">Setting</h4>
                    <nav aria-label="breadcrumb">
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item">
                                <a class="text-muted " href="{{ route('users-area.index') }}">Home</a>
                            </li>
                            <li class="breadcrumb-item" aria-current="page">
                                Setting
                            </li>
                            <li class="breadcrumb-item" aria-current="page">
                                Account
                            </li>
                        </ol>
                    </nav>
                </div>
                <div class="col-3">
                    <div class="text-center mb-n5">
                        <img src="{{ asset('users-area-template/images/breadcrumb/emailSv.png') }}" alt="" class="img-fluid mb-n4">
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="card">
        <ul class="nav nav-pills user-profile-tab" id="pills-tab" role="tablist">
            <li class="nav-item" role="presentation">
                <button class="nav-link position-relative rounded-0 active d-flex align-items-center justify-content-center bg-transparent fs-3 py-4" id="pills-account-tab" data-bs-toggle="pill" data-bs-target="#pills-account" type="button" role="tab" aria-controls="pills-account" aria-selected="true">
                    <i class="ti ti-user-circle me-2 fs-6"></i>
                    <span class="d-none d-md-block">Account</span> 
                </button>
            </li>
        </ul>
        <div class="card-body">
            <div class="tab-content" id="pills-tabContent">
                <div class="tab-pane fade show active" id="pills-account" role="tabpanel" aria-labelledby="pills-account-tab" tabindex="0">
                    <form action="{{ route('users-area.setting.account.update') }}" method="POST" enctype="multipart/form-data">
                        @csrf
                        <div class="row">
                            <div class="col-lg-6 d-flex align-items-stretch">
                                <div class="card w-100 position-relative overflow-hidden">
                                    <div class="card-body p-4">
                                    <h5 class="card-title fw-semibold">Change Profile</h5>
                                    <p class="card-subtitle mb-4">Change your profile picture from here</p>
                                    <div class="text-center item-center">
                                        <div class="m-auto linear-gradient d-flex align-items-center justify-content-center rounded-circle" style="width: 110px; height: 110px;">
                                            <div class="border border-4 border-white d-flex align-items-center justify-content-center rounded-circle overflow-hidden" style="width: 100px; height: 100px;">
                                                <label for="change-image">
                                                    <img src="{{ auth()->user()->profile_image ? asset('uploads/images/users/' . auth()->user()->profile_image) : asset('users-area-template/images/profile/user-1.jpg') }}" alt="user profile" class="img-fluid rounded-circle img-profile" style="object-fit: cover;object-position: center;o-object-fit: cover;o-object-position: center;height: 100px;width: 100px;">
                                                </label>
                                            </div>
                                        </div>
                                        <input type="file" name="image" id="change-image" class="d-none">
                                        @error('image')
                                            <small class="text-danger">{{ $message }}</small>
                                        @enderror
                                        <p class="mt-4 mb-0">Allowed JPG, GIF or PNG. Max size of 10Mb</p>
                                    </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-6 d-flex align-items-stretch">
                                <div class="card w-100 position-relative overflow-hidden">
                                    <div class="card-body p-4">
                                        <h5 class="card-title fw-semibold">Personal Details</h5>
                                        <p class="card-subtitle mb-4">To change your personal detail , edit and save from here</p>
                                        <div class="mb-4">
                                            <label for="name" class="form-label fw-semibold">Your Name</label>
                                            <input type="text" name="name" class="form-control" id="name" placeholder="Your Name" value="{{ auth()->user()->name }}" required>
                                            @error('name')
                                                <small class="text-danger">{{ $message }}</small>
                                            @enderror
                                        </div>
                                        <div class="mb-4">
                                            <label for="email" class="form-label fw-semibold">Email</label>
                                            <input type="email" name="email" class="form-control" id="email" placeholder="Your Email" value="{{ auth()->user()->email }}" required>
                                            @error('email')
                                                <small class="text-danger">{{ $message }}</small>
                                            @enderror
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-12">
                                <div class="card w-100 position-relative overflow-hidden mb-0">
                                    <div class="card-body p-4">
                                        <h5 class="card-title fw-semibold">Change Password</h5>
                                        <p class="card-subtitle mb-4">To change your password please confirm here</p>
                                        <div class="row">
                                            {{-- <div class="col-lg-7">
                                                <div class="mb-4">
                                                    <label for="exampleInputPassword1" class="form-label fw-semibold">Current Password</label>
                                                    <input type="password" name="current_password" class="form-control" id="exampleInputPassword1">
                                                    @error('current_password')
                                                        <small class="text-danger">{{ $message }}</small>
                                                    @enderror
                                                </div>
                                            </div> --}}
                                            <div class="col-lg-7">
                                                <div class="mb-4">
                                                    <label for="exampleInputPassword1" class="form-label fw-semibold">New Password</label>
                                                    <input type="password" name="password" class="form-control" id="exampleInputPassword1">
                                                    @error('password')
                                                        <small class="text-danger">{{ $message }}</small>
                                                    @enderror
                                                </div>
                                            </div>
                                            <div class="col-lg-7">
                                                <div class="">
                                                    <label for="exampleInputPassword1" class="form-label fw-semibold">Confirm Password</label>
                                                    <input type="password" name="password_confirmation" class="form-control" id="exampleInputPassword1">
                                                    @error('password_confirmation')
                                                        <small class="text-danger">{{ $message }}</small>
                                                    @enderror
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-12">
                                <div class="d-flex align-items-center justify-content-end mt-4 gap-3">
                                    <button class="btn btn-primary btn-save"><i class="ti ti-device-floppy"></i> Save</button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('script')
    <script>
        $(function(){
            $('#change-image').on('change', function() {
                readURL(this);
            });
            
            $('form').on('submit', function(){
                const t = $(this)
                t.find('.btn').prop('disabled', true)
                t.find('.btn-save i').remove()
                t.find('.btn-save').prepend(`<div class="spinner-border spinner-border-sm" role="status"></div>`)
            })

            function readURL(input) {
                var url = input.value;
                var ext = url.substring(url.lastIndexOf('.') + 1).toLowerCase();
                if (input.files && input.files[0] && (ext == "png" || ext == "jpeg" || ext == "jpg" || ext == "webp" || ext == "gif")) {
                    var reader = new FileReader();
            
                    reader.onload = function(e) {
                        $('.img-profile').attr('src', e.target.result)
                    }
            
                    reader.readAsDataURL(input.files[0]);
                } else if (!url) {
                    $('.img-profile').attr('src', '{{ asset('users-area-template/images/profile/user-1.jpg') }}')
                } else {
                    $('.img-profile-error-container').html('<small class="text-danger">Invalid image format</small>')
                    $('.img-profile').attr('src', '{{ asset('users-area-template/images/profile/user-1.jpg') }}')
                }
            }
        })
    </script>
@endpush