@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')
                @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.organization_settings')</h4>
                                </div>
                                <div class="card-body">
                                    <div class="basic-form">
                                        @if($business)
                                            <form id="userForm"
                                                action="{{ route('web.businesses.update', ['id' => $business->id]) }}"
                                                method="POST" enctype="multipart/form-data">
                                                @csrf
                                                @method('PUT')
                                                <fieldset>
                                                    <div class="row mb-3">
                                                        <div class="col-xl-8 col-lg-8 mb-3">
                                                            <label class="form-label">@lang('user.name')</label>
                                                            <input type="text" value="{{ $business->name }}" name="name"
                                                            class="form-control" placeholder="Name">
                                                            <span class="text-danger" id="error-name"></span>
                                                        </div>
                                                        <div class="col-xl-8 col-lg-8 mb-3">
                                                            <label class="form-label">@lang('admin.api_key')</label>
                                                            <input type="text" value="{{ $business->api_key }}" name="api_key"
                                                            class="form-control" placeholder="@lang('admin.api_key')">
                                                            <span class="text-danger" id="error-api_key"></span>
                                                        </div>
                                                        <div class="col-xl-8 col-lg-8 mb-3">
                                                            <label class="form-label">@lang('user.subscription_plan')</label>
                                                            @if($business->plan)
                                                                <input type="text"  class="form-control" value="{{ $business->plan->name }}" readonly>
                                                            @endif
                                                        </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">
                                                            <span class="text-danger" id="error-image"></span>
                                                        </div>
                                                        <div class="col-xl-4 col-lg-4" style="display: contents;">
                                                            @if ($business->logo)
                                                                <img id="preview-image-before-upload" class="img-fluid rounded-circle"
                                                                src="{{ asset('storage/' . $business->logo) }}"
                                                                    width="100px" height="100px" alt="user-image">
                                                            @else
                                                                <img id="preview-image-before-upload" class="img-fluid rounded-circle"
                                                                    src="{{ asset('dummy_user.png') }}" class=""
                                                                    width="100px" height="100px" alt="user-image">
                                                            @endif
                                                        </div>
                                                    </div>
                                                    <button type="submit" class="btn btn-primary mt-3">@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();

                // 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) {
                       $('.modal.show').modal('hide');

                        // Set the message in the toast
                        //$('#successToast .toast-body p').text(data.message);

                        // Show the toast
                        //var toast = new bootstrap.Toast($('#successToast'));
                        //toast.show();
                        // Handle success
                        setTimeout(function() {
                            $('.alert').alert('close');
                            location.reload();
                        }, 1000); // Alert will close after 5 seconds

                    },
                    error: function(response) {
                        console.log('Error:', response);
                        if (response.status === 422) {
                            let errors = response.responseJSON.errors;
                            for (const [key, value] of Object.entries(errors)) {
                                // Add red border
                                $('input[name="' + key + '"], select[name="' + key + '"]')
                                    .addClass('is-invalid');
                                // Show error message
                                $('#error-' + key).text(value[0]);
                            }
                        }
                    },
                    cache: false,
                    contentType: false,
                    processData: false
                });
            });

        });
    </script>
@endsection