@extends('backend.layouts.app')
@section('content')
<h1 class="page-header">
    @lang('messages.blog.create_blog') 
</h1>
<div class="panel panel-inverse">
    <div class="panel-heading">
        <h4 class="panel-title">@lang('messages.users.profile')</h4>
        <div class="panel-heading-btn">
            <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-default" data-click="panel-expand"><i class="fa fa-expand"></i></a>
            <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-success reload" data-id="panel-reload"><i class="fa fa-redo"></i></a>
            <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-warning" data-click="panel-collapse"><i class="fa fa-minus"></i></a>
            <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-danger" data-click="panel-remove"><i class="fa fa-times"></i></a>
        </div>
    </div>
    <div class="panel-body">
        <form id="editUserForm" action="{{ route('users.update', $encryptedid) }}" class="row g-5" autocomplete="off" >
            @csrf
            @method('PUT')
            <div class="col-12 col-md-6">
                @if ($user->avatar=='')
                <img src="{{ asset('assets/img/avatars/1.png')}}" alt="logo" class="d-block width-200 height-200 rounded" id="avatar_show">
                @else
                <img src="{{ asset('storage/avatar/')}}/{{$user->avatar}}" alt="logo" class="d-block width-200 height-200 rounded" id="avatar_show">
                @endif
                <div class="button-wrapper">
                    <label for="avatar" class="btn btn-sm btn-primary me-3 mb-4 waves-effect waves-light" tabindex="0">
                        <span class="d-none d-sm-block">@lang('messages.talent.upload_image')</span>
                        <i class="ri-upload-2-line d-block d-sm-none"></i>
                        <input type="file" id="avatar" name="avatar" class="account-file-input" hidden accept="image/png, image/jpeg">
                    </label>
                </div>
            </div>
            <div class="col-12 col-md-6">
                <div class="form-group">
                    <label for="first_name">@lang('messages.users.first_name')</label>
                    <input type="text" id="first_name" name="first_name" class="form-control" value="{{ old('first_name', $user->first_name) }}" placeholder="@lang('messages.users.first_name_placeholder')" />
                </div>
                <div class="form-group">
                    <label for="last_name">@lang('messages.users.last_name')</label>
                    <input type="text" id="last_name" name="last_name" class="form-control" value="{{ old('last_name', $user->last_name) }}" placeholder="@lang('messages.users.last_name_placeholder')" />
                </div>
                <div class="form-group">
                    <label for="username">@lang('messages.users.username')</label>
                    <input type="text" id="username" value="{{ old('username', $user->username) }}" name="username" class="form-control" placeholder="@lang('messages.users.username_placeholder')"/>
                </div>
            </div>
            <div class="col-12 col-md-4">
                <div class="form-group">
                    <label for="email">@lang('messages.users.email')</label>
                    <input type="text" id="email" value="{{ old('email', $user->email) }}" name="email" class="form-control" placeholder="@lang('messages.users.email_placeholder')"/>
                </div>
            </div>
            <div class="col-12 col-md-4">
                <div class="form-group">
                    <label for="email">@lang('messages.users.skype_id')</label>
                    <input type="text" id="skype_id" value="{{ old('skype_id', $user->skype_id) }}" name="skype_id" class="form-control" placeholder="@lang('messages.users.skype_id_placeholder')"/>
                </div>
            </div>
            <div class="col-12 col-md-4">
                <div class="form-group">
                    <label for="id_country">@lang('messages.users.select_country')</label>
                    <select id="id_country"  name="id_country" class="form-control select2" >
                        <option value="">@lang('messages.users.select_country')</option>
                        @foreach($countries as $country)
                            <option value="{{ $country->id }}" @if($country->id == $user->id_country) selected @endif>{{ $country->name }}</option>
                        @endforeach
                    </select>
                </div>
            </div>
            <div class="col-12 col-md-6">
                <div class="form-group">
                    <label for="id_city">@lang('messages.users.select_city')</label>
                    <select id="id_city" name="id_city" class="form-control select2" >
                        @foreach($cities as $city)
                            <option value="{{ $city->id }}" @if($city->id == $user->id_city) selected @endif>{{ $city->name }}</option>
                        @endforeach
                    </select>
                </div>
            </div>
            @if(!auth()->user()->hasRole('Publisher'))
            <div class="col-12 col-md-6">
                <label for="status">@lang('messages.users.status')</label>
                <div class="form-group">
                    <select id="status" value="{{ old('status', $user->status) }}" name="status" class="form-control" aria-label="Default select example">
                        <option value="ACTV" @if($user->status == 'ACTV') selected @endif>@lang('messages.users.active')</option>
                        <option value="NACT" @if($user->status == 'NACT') selected @endif>@lang('messages.users.inactive')</option>
                        <option value="3"  @if($user->status == '3') selected @endif>@lang('messages.users.suspended')</option>
                    </select>
                </div>
            </div>
            @endif
            <div class="col-12 col-md-6">
                <div class="form-group">
                    <label for="password">@lang('messages.register.password')</label>
                    <input type="password" id="password" class="form-control" name="password" placeholder="*********" aria-describedby="password" autocomplete="new-password" />
                </div>
            </div>
            <div class="col-12 text-center">
                <button type="submit" class="btn btn-primary me-3">@lang('messages.users.submit')</button>
                <button type="reset" class="btn btn-outline-secondary" data-bs-dismiss="modal" aria-label="Close">@lang('messages.users.cancel')</button>
            </div>
        </form>
    </div>
</div>
@endsection

@section('footer_scripts')
<script>
    // Logo Image Upload
    $(document).ready(function() {
        "use strict";
        document.getElementById('avatar').addEventListener('change', function(event) {
            handleImageUpload(event, 'avatar_show');
        });

        // Function to handle image upload for each image input
        function handleImageUpload(event, imageId) {
            var uploadedImage = document.getElementById(imageId);
            var file = event.target.files[0];
            var reader = new FileReader();

            // Ensure file is selected
            if (file) {
                // Read the file as a data URL
                reader.readAsDataURL(file);
            }

            // Set the image source when file reading is completed
            reader.onloadend = function() {
                uploadedImage.src = reader.result;
            };
        }

        $("#password").val('');

        $('#id_country').change(function() {
            var countryId = $(this).val();

            // Make an AJAX request to fetch cities based on the selected country
            $.ajax({
                url: '/cities/' + countryId,
                type: 'GET',
                success: function(data) {
                    // Populate the city dropdown with fetched cities
                    $('#id_city').empty();
                    $.each(data.cities, function(key, value) {
                        $('#id_city').append('<option value="' + value.id + '">' + value.name + '</option>');
                    });
                },
                error: function(xhr, status, error) {
                    console.error(error);
                }
            });
        });

        $("#editUserForm").submit(function(e) {
            e.preventDefault();
        }).validate({
            rules: {
                first_name: {
                    required: true,
                },
                last_name: {
                    required: true,
                },
                email: {
                    required: true,
                    email: true,
                },
                skype_id: {
                    required: true,
                },
                username: {
                    required: true,
                },
            },
            errorElement: 'span',
            submitHandler: function(form) {
                var formData = new FormData(form);

                $.ajax({
                    url: $(form).attr('action'),
                    data: formData,
                    type: 'POST',
                    dataType: 'json',
                    processData: false,
                    contentType: false,
                    success: function(data) {
                        if (data.status) {
                            Swal.fire({
                                title: data.title,
                                text: data.message,
                                icon: 'success',
                            });

                        }
                    },
                    error: function(xhr, status, error) {
                        var jsonResponse = JSON.parse(xhr.responseText);
                        var errorMessage = "Validation failed";

                        if (jsonResponse.errors) {
                            errorMessage += ": ";
                            errorMessage += Object.values(jsonResponse.errors).join(", ");
                            Swal.fire('', errorMessage, 'error')
                        }
                    }
                });
                return false;
            }
        });

    });
</script>
@endsection