@extends('admin.setting.index')

@section('sub_content')
    <div class="company-detail-body">
        <div class="company-detail-body-inner p-0">
            <div class="table-scroller">
                <table class="table">
                    <thead>
                        <tr>
                            <th>@lang('Extension')</th>
                            <th>@lang('Status')</th>
                            <th>@lang('Action')</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($extensions as $extension)
                            <tr>
                                <td>
                                    <div class="flex-align gap-2">
                                        <div class="thumb">
                                            <img src="{{ getImage(getFilePath('extensions') . '/' . $extension->image, getFileSize('extensions')) }}"
                                                alt="{{ __($extension->name) }}" class="plugin_bg">
                                        </div>
                                        <span class="name">{{ __($extension->name) }}</span>
                                    </div>
                                </td>
                                <td>
                                    @php
                                        echo $extension->statusBadge;
                                    @endphp
                                </td>

                                <td>
                                    <div class="flex-end gap-4">
                                        <button class="editBtn btn btn--sm btn--secondary"
                                            data-name="{{ __($extension->name) }}"
                                            data-shortcode="{{ json_encode($extension->shortcode) }}"
                                            data-action="{{ route('admin.extensions.update', $extension->id) }}" data-bs-toggle="tooltip" title="@lang('Configure')">
                                            <i class="la la-cogs"></i>
                                        </button>
                                        <button class="helpBtn btn btn--sm btn-outline--secondary"
                                            data-description="{{ __($extension->description) }}"
                                            data-support="{{ __($extension->support) }}" data-bs-toggle="tooltip" title="@lang('Help')">
                                            <i class="la la-question"></i>
                                        </button>

                                        <div class="form--switch sm-style">
                                            <input type="checkbox" class="form-check-input extensionStatus"
                                                data-id="{{ $extension->id }}" @checked($extension->status) />
                                        </div>

                                    </div>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table><!-- table end -->

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

    {{-- EDIT METHOD MODAL --}}
    <div id="editModal" class="modal custom--modal fade" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">@lang('Update Extension'): <span class="extension-name"></span></h5>
                    <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
                        <i class="las la-times"></i>
                    </button>
                </div>
                <form method="POST">
                    @csrf
                    <div class="modal-body">
                        <div class="form-group">
                            <label class="form--label style-two">@lang('Script')</label>
                            <div class="col-md-12">
                                <textarea name="script" class="form--control md-style" required rows="8" placeholder="@lang('Paste your script with proper key')">{{ old('script') }}</textarea>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button class="btn btn--base btn--md w-100" id="editBtn">@lang('Submit')</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    {{-- HELP METHOD MODAL --}}
    <div id="helpModal" class="modal fade" tabindex="-1" role="dialog">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">@lang('Need Help')?</h5>
                    <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
                        <i class="las la-times"></i>
                    </button>
                </div>
                <div class="modal-body">

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

    <x-confirmation-modal />
@endsection


@push('script')
    @include('admin.setting.status_change_script')

    <script>
        (function($) {
            "use strict";

            $(document).on('click', '.editBtn', function() {
                var modal = $('#editModal');
                var shortcode = $(this).data('shortcode');

                modal.find('.extension-name').text($(this).data('name'));
                modal.find('form').attr('action', $(this).data('action'));

                var html = '';
                $.each(shortcode, function(key, item) {
                    html += `<div class="form-group">
                        <label class="form--label style-two">${item.title}</label>
                        <div class="col-md-12">
                            <input name="${key}" class="form--control md-style" placeholder="--" value="${item.value}" required>
                        </div>
                    </div>`;
                })
                modal.find('.modal-body').html(html);

                modal.modal('show');
            });

            $(document).on('click', '.helpBtn', function() {
                var modal = $('#helpModal');
                var path = "{{ asset(getFilePath('extensions')) }}";
                modal.find('.modal-body').html(`<div class="mb-2">${$(this).data('description')}</div>`);
                if ($(this).data('support') != 'na') {
                    modal.find('.modal-body').append(
                        `<img src="${path}/${$(this).data('support')}" alt="Image">`);
                }
                modal.modal('show');
            });

            handleStatusToggle('.extensionStatus', `{{ route('admin.extensions.status', '') }}`, 'extension',
                'enableDisable');

        })(jQuery);
    </script>
@endpush

@push('style')
    <style>
        .plugin_bg {
            width: auto;
            height: 40px;
            border-radius: 75%;
        }

        .table-scroller .table {
            min-width: 600px;
        }
    </style>
@endpush
