@extends('layouts.master')
@section('title', 'Profile')
@section('content')
    <div class="container-fluid py-4">
        <div class="row">
            <div class="col-12">
                <div class="card mb-4">
                    <div class="card-header pb-0">
                        <div class="row">
                            <div class="row">
                                <div class="col-md-12">
                                    <h6 class="mb-0">Profile</h6>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="card-body px-3 pt-4 pb-2">
                        <form action="{{ route('profile.update', $user->id) }}" method="POST" enctype="multipart/form-data">
                            @csrf
                            @if(!empty($user->image))
                                <div class="image-wrapper">
                                    <i role="button" title="Remove" class="remove-image fa-solid fa-xmark"></i>
                                    <img class="rounded-circle object-fit-cover" id="image_preview" src="{{ asset("storage/$user->image") }}" width="100">
                                </div>
                            @else
                                <div class="image-wrapper">
                                    <i role="button" class="remove-icon fa-solid fa-xmark" style="display: none;"></i>
                                    <img class="rounded-circle object-fit-cover" id="image_preview" width="100">
                                </div>
                            @endif
                            <input type="hidden" id="image_remove" name="image_remove" value="0">
                            <div class="form-outline mb-4">
                                <label class="form-label" for="image">Image</label>
                                <input type="file" name="image" id="imgInp" class="form-control" accept=".jpg,.png,.jpeg,.svg,.gif" />
                                @error('image')
                                <span class="invalid_feedback">
                                        <strong class="text-danger text-sm">{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                            <div class="form-outline mb-4">
                                <label class="form-label" for="name">Name</label>
                                <input type="text" name="name" value="{{ old('name', $user->name) }}" class="form-control" />
                                @error('name')
                                <span class="invalid_feedback">
                                        <strong class="text-danger text-sm">{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                            <div class="form-outline mb-4">
                                <label class="form-label" for="email">Email</label>
                                <input type="text" name="email" value="{{ old('email', $user->email) }}" class="form-control" />
                                @error('email')
                                <span class="invalid_feedback">
                                        <strong class="text-danger text-sm">{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                            <div class="form-outline mb-4">
                                <label class="form-label" for="email">Role</label>
                                <input type="text" disabled value="{{ old('email', $user->getRoleNames()->first()) }}" class="form-control" />
                            </div>
                            <div class="d-flex justify-content-end">
                                <button type="submit" class="btn btn-primary btn-block mb-4 me-2">Save</button>
                                <a class="btn btn-secondary btn-block mb-4" href="{{ route('pages.index') }}">Cancel</a>
                            </div>
                        </form>
                        <span id="uploaded_image"></span>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@push('scripts')
    <script>
        $('.remove-image').click(function() {
            $('.image-wrapper').hide() && $("#image_remove").val(1) && $('#imgInp').val('');
        });

        $('.remove-icon').click(function() {
            $('.image-wrapper').hide() && $('#imgInp').val('');
        });

        $("#imgInp").change(function(){
            $('.image-wrapper').toggle($(this).val() != '');
            $("#image_remove").val() == 1 ? 1 : 0;
            $('.remove-icon').show();
            readURL(this);
        });

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

                reader.onload = function (e) {
                    $('#image_preview').attr('src', e.target.result);
                }

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

    </script>
@endpush