@extends('layout.app')
@section('title') Profile
@endsection
@section('content')
{{--    @php--}}
{{--        if (!empty($get_single_classes_banner_title->content)) {--}}
{{--               $classdecodedData = json_decode($get_single_classes_banner_title->content, true);--}}
{{--           }--}}
{{--     @endphp--}}
    <section class="innerBan p-0">
        <img src="{{ $homedecodedData['image'] ? asset('upload/cms_images/' . $homedecodedData['image']) : '' }}
            " class="img-fluid" alt="">
        <div class="container">
            <h2> User Profile</h2>
{{--            <h2>{{$classdecodedData['top_title'] ?? ''}}</h2>--}}
        </div>
    </section>

    <!-- Event Section -->
    <section class="eventSection innerEvent">
        <div class="container">

            <div class="row">
                <form class="category-form" method="post" action="{{route('front.normaluser.user-profile-update')}}"
                      enctype="multipart/form-data">
                    @csrf
                <div class="col-md-12">
                    <div class="row mt-3">
                        <div class="col-md-6">
                            <label for="">First Name</label>
                            <input type="text" name="first_name" placeholder="First Name"
                                   class="form-control"
                                   value="{{Auth::user()->first_name ?? ''}} "required>
                        </div>
                        <div class="col-md-6">
                            <label for="">Last Name</label>
                            <input type="text" name="last_name" placeholder="Last Name"
                                   class="form-control"
                                   value="{{Auth::user()->last_name ?? ''}} "required>
                        </div>
                        <div class="col-md-6 mt-5">
                            <label for="">Email</label>
                            <input type="email" name="email" placeholder="Email"
                                   class="form-control"
                                  value="{{Auth::user()->email ?? ''}}" readonly>
                        </div>
                        <div class="col-md-6 mt-5">
                            <label for="">Phone number </label>
                            <input type="text" name="phone_num" placeholder="Phone Number "
                                   class="form-control"
                                   value="{{Auth::user()->phone_num ?? ''}} "required>
                        </div>

                        <div class="col-md-6 mt-5">
                            <label for="">Address</label>
                            <input type="text" name="address" placeholder="Address"
                                   class="form-control"
                                   value="{{Auth::user()->address ?? ''}} "required>
                        </div>

                        <div class="col-md-6 mt-5">
                            <label for="">Image</label>
                            <input type="file" name="profile_image"
                                   class="form-control"
                                   id="firstimageInput">

                            <img id="firstimagePreview"
                                 src="{{Auth::user()->profile_image ? asset('upload/cms_images/'.Auth::user()->profile_image) :asset('admin/dist/img/placeholder.png')}}"
                                 alt="Profile Preview"
                                 style="width: 200px;height: 150px;margin-top: 10px;">

                        </div>

                    </div>
                    <br>
                    <input type="submit" value="Submit" id="submit_btn" class="btn btn-primary">
                </div>
                </form>
            </div>

        </div>
    </section>
    <!-- Event Section -->
@endsection

@section('script')
    <script>
        function showImagePreview(input, previewId) {
            const preview = document.getElementById(previewId);

            if (input.files && input.files[0]) {
                const reader = new FileReader();

                reader.onload = function (e) {
                    preview.src = e.target.result;
                    preview.style.display = 'block';
                };

                reader.readAsDataURL(input.files[0]);
            }
        }

        const imageInput = document.getElementById('firstimageInput');
        imageInput.addEventListener('change', function() {
            showImagePreview(this, 'firstimagePreview');
        });
    </script>
@endsection