@extends('web.layouts.app')

@section('content')
    <div class="main-chat-container w-100 ml-md-5 overflow-hidden">
        <div class="p-3 p-lg-4 border-top mb-0 main-chat-container-in">
            @if (env('APP_PROJECT') != 'Rouaa' && env('APP_PROJECT') != 'Mora')
                @include('web.settings_menu')
            @endif
            <div class="tab-content">
                <div class="tab-pane active" id="general">
                    <div class="row">
                        <div class="col-xl-12 col-lg-12">
                            <div class="card">
                                <div class="card-header">
                                    <h4 class="card-title">@lang('user.whatsapp_profile')</h4>
                                </div>
                                <div class="card-body">
                                    <div class="basic-form">
                                        @if($business)
                                            <form id="userForm"
                                                action="{{ route('web.businesses.whatsapp_profile_update') }}"
                                                method="POST" enctype="multipart/form-data">
                                                @csrf
                                                @method('PUT')
                                                <fieldset>
                                                    <div class="row mb-3">
                                                        <div class="col-xl-8 col-lg-8">
                                                            <label class="form-label">@lang('user.about')</label>
                                                            <input class="form-control" name="about" maxlength="139" value="{{ $profile['about'] ?? '' }}" />
                                                            <span class="text-danger" id="error-about"></span>
                                                        </div>
                                                    </div>
                                                    <div class="row mb-3">
                                                        <div class="col-xl-8 col-lg-8">
                                                            <label class="form-label">@lang('user.address')</label>
                                                            <input class="form-control" name="address" maxlength="256" value="{{ $profile['address'] ?? '' }}" />
                                                            <span class="text-danger" id="error-address"></span>
                                                        </div>
                                                    </div>
                                                    <div class="row mb-3">
                                                        <div class="col-xl-8 col-lg-8">
                                                            <label class="form-label">@lang('user.description')</label>
                                                            <textarea class="form-control" rows="3" name="description" maxlength="512">{{ $profile['description'] ?? '' }}</textarea>
                                                            <span class="text-danger" id="error-description"></span>
                                                        </div>
                                                    </div>
                                                    <div class="row mb-3">
                                                        <div class="col-xl-8 col-lg-8">
                                                            <label class="form-label">@lang('user.website')</label>
                                                            <input type="url" value="{{ $profile['websites'][0] ?? '' }}" name="website" class="form-control" maxlength="256">
                                                            <span class="text-danger" id="error-website"></span>
                                                        </div>
                                                    </div>
                                                    <div class="row mb-3">
                                                        <div class="col-xl-8 col-lg-8">
                                                            <label class="form-label">@lang('user.email')</label>
                                                            <input type="email" value="{{ $profile['email'] ?? '' }}" name="email" class="form-control" maxlength="128">
                                                            <span class="text-danger" id="error-email"></span>
                                                        </div>
                                                    </div>
                                                    <div class="row mb-3">
                                                        <div class="col-xl-8 col-lg-8">
                                                            <label for="image" class="form-label">@lang('user.image')</label>
                                                            <input class="form-control" type="file" name="logo" id="image" accept="image/png, image/jpeg">
                                                            <span class="text-danger" id="error-image"></span>
                                                        </div>
                                                        <div class="col-xl-4 col-lg-4" style="display: contents;">
                                                            @if (!empty($profile['profile_picture_url']))
                                                                <img id="preview-image-before-upload" class="img-fluid rounded-circle"
                                                                src="{{ $profile['profile_picture_url'] }}"
                                                                    width="100px" height="100px" alt="user-image">
                                                            @endif
                                                        </div>
                                                    </div>
                                                    <button type="submit" class="btn btn-primary mt-3" id="submit-btn">@lang('user.edit')</button>
                                                </fieldset>
                                            </form>
                                        @else
                                            <h4>@lang('user.no_business')</h4>
                                        @endif
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="tab-form-pane main-chat-note fade show active" id="pills-note" role="tabpanel"
        aria-labelledby="pills-note-tab">
        <div class="px-4 ">
            <div class="note-sidebar">
                <div class="note-title">
                    <h4>@lang('user.note')</h4>
                </div>
                <div class="note-content">
                    <p>
                        @lang('notes.settings_note')
                    </p>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('script')
    <script>
        $(document).ready(function() {
            $('#image').change(function() {
                let reader = new FileReader();
                reader.onload = (e) => {
                    $('#preview-image-before-upload').attr('src', e.target.result);
                }
                reader.readAsDataURL(this.files[0]);
            });

            $('#userForm').on('submit', function(e) {
                e.preventDefault();

                $('#submit-btn').prop('disabled', true);
                $('#submit-btn').text("Loading...");

                // Clear previous errors
                $('.form-control').removeClass('is-invalid');
                $('.text-danger').text('');

                var formData = new FormData(this);
                formData.append('_method', 'PUT'); // Laravel uses this to simulate PUT

                $.ajax({
                    url: $(this).attr('action'),
                    type: 'POST',
                    data: formData,
                    success: function(data) {
                        toastr.success(data.message);
                        setTimeout(function() {
                            location.reload();
                        }, 1000);
                    },
                    error: function(response) {
                        $('#submit-btn').prop('disabled', false);
                        $('#submit-btn').text("@lang('user.edit')");

                        if (response.status === 422) {
                            let error = response.responseJSON.error;
                            toastr.error(error);
                        }
                    },
                    cache: false,
                    contentType: false,
                    processData: false
                });
            });

        });
    </script>
@endsection