@extends('frontend.layouts.user.master')
@section('title', 'Dashboard')
@section('content')



    <div class="py-6 p-md-6 p-lg-10" bis_skin_checked="1">
        <div class="mb-6" bis_skin_checked="1">
            <!-- heading -->
            <h2 class="mb-0">Account Details</h2>
        </div>
        <div bis_skin_checked="1">
            <div class="row" bis_skin_checked="1">
                <div class="col-lg-12" bis_skin_checked="1">
                    <!-- form -->
                    <form method="POST" action="{{ route('user.profile.update') }}" enctype="multipart/form-data">

                        @csrf

                        <div class="row">

                            <div class="col-6 mb-3" bis_skin_checked="1">
                                <label class="form-label" for="first_name">First Name</label>
                                <input name="first_name" type="text" id="first_name" class="form-control"
                                    placeholder="First Name" value="{{ $user->first_name }}">
                                @if ($errors->has('first_name'))
                                    <p class="text-danger"> {{ $errors->first('first_name') }} </p>
                                @endif
                            </div>

                            <div class="col-6 mb-3" bis_skin_checked="1">
                                <label class="form-label" for="last_name">Last Name</label>
                                <input name="last_name" type="text" id="last_name" value="{{ $user->last_name }}"
                                    class="form-control" placeholder="Last Name">
                                @if ($errors->has('last_name'))
                                    <p class="text-danger"> {{ $errors->first('last_name') }} </p>
                                @endif
                            </div>

                            <div class="col-6 mb-3" bis_skin_checked="1">
                                <label class="form-label" for="phone">Phone</label>
                                <input name="phone" type="text" id="phone" value="{{ $user->phone }}"
                                    class="form-control" placeholder="Phone">
                            </div>

                            <div class="col-6 mb-3" bis_skin_checked="1">
                                <label class="form-label" for="whatsapp_no">Whatsapp No</label>
                                <input name="whatsapp_no" type="text" id="whatsapp_no" value="{{ $user->whatsapp_no }}"
                                    class="form-control" placeholder="Whatsapp No">
                            </div>

                            <div class="col-12 mb-3" bis_skin_checked="1">
                                <label class="form-label" for="email">Email</label>
                                <input name="email" type="text" id="email" value="{{ $user->email }}"
                                    class="form-control" placeholder="Email" readonly>
                            </div>

                            <div class="form-group col-12 my-3">
                                <label for="ckeditor-classic" class="col-sm-12 control-label"
                                    for="address">{{ __('Address') }}</label>
                                <div class="col-sm-12">
                                    <textarea name="address" id="ckeditor-classic address" class="form-control summernote" rows="3">{{ $user->address }}</textarea>
                                </div>
                            </div>

                            <div class="col-12 mb-4">
                                <div class="row">
                                    <label class="form-label col-12" for="image">Image</label>
                                    <img class="col-4 offset-5 mt-2 mb-5" id="image-preview" src="{{ $user->image }}"
                                        alt="Image Preview" class="mt-2" style="max-width: 250px;">
                                    <input name="image" type="file" id="image" name="image" class="form-control"
                                        placeholder="Image" onchange="previewImage(this)">
                                </div>
                            </div>

                            <div class="mt-2" bis_skin_checked="1">
                                <button type="submit" class="btn btn-primary">Update Profile</button>
                            </div>

                        </div>

                    </form>
                </div>
            </div>
        </div>
    </div>

    <script>
        function previewImage(input) {
            var preview = document.getElementById('image-preview');
            var file = input.files[0];
            var reader = new FileReader();

            reader.onloadend = function() {
                preview.src = reader.result;
            }

            if (file) {
                reader.readAsDataURL(file);
            } else {
                preview.src = "https://placehold.it/150";
            }
        }
    </script>

@endsection