@extends('panel.layout.app')

@section('title', $title)

@section('content')
    <div class="page-header">
        <div class="container-xl">
            <div class="row g-2 items-center">
                <div class="col-md-6">
                    <a href="{{ LaravelLocalization::localizeUrl(route('dashboard.index')) }}"
                        class="page-pretitle flex items-center">
                        <svg class="!me-2 rtl:-scale-x-100" width="8" height="10" viewBox="0 0 6 10" fill="currentColor"
                            xmlns="http://www.w3.org/2000/svg">
                            <path
                                d="M4.45536 9.45539C4.52679 9.45539 4.60714 9.41968 4.66071 9.36611L5.10714 8.91968C5.16071 8.86611 5.19643 8.78575 5.19643 8.71432C5.19643 8.64289 5.16071 8.56254 5.10714 8.50896L1.59821 5.00004L5.10714 1.49111C5.16071 1.43753 5.19643 1.35718 5.19643 1.28575C5.19643 1.20539 5.16071 1.13396 5.10714 1.08039L4.66071 0.633963C4.60714 0.580392 4.52679 0.544678 4.45536 0.544678C4.38393 0.544678 4.30357 0.580392 4.25 0.633963L0.0892856 4.79468C0.0357141 4.84825 0 4.92861 0 5.00004C0 5.07146 0.0357141 5.15182 0.0892856 5.20539L4.25 9.36611C4.30357 9.41968 4.38393 9.45539 4.45536 9.45539Z" />
                        </svg>
                        {{ __('Back to dashboard') }}
                    </a>
                    <h2 class="page-title mb-3">
                        {{ $title }}
                    </h2>
                    <p class="mb-2">Train MagicAI on your own data (website or PDF) and make your AI content exclusive.
                    </p>
                </div>
                <div class="col-md-6 d-flex justify-end align-center items-center align-items-center">
                    <a class="btn mr-2 " href="{{ route('dashboard.admin.chatbot.setting') }}">@lang('Settings')</a>
                    <a class="btn btn-primary" href="{{ route('dashboard.admin.chatbot.create') }}">
                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-plus" width="24"
                            height="24" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none"
                            stroke-linecap="round" stroke-linejoin="round">
                            <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                            <path d="M12 5l0 14" />
                            <path d="M5 12l14 0" />
                        </svg>
                        @lang('Add New Chatbot')
                    </a>
                </div>
            </div>
        </div>
    </div>
    <!-- Page body -->
    <div class="page-body">
        <div class="container-xl">
            <div class="card">
                <div id="table-default" class="card-table table-responsive">
                    <table class="table">
                        <thead>
                            <tr>
                                <th>{{ __('Name') }}</th>
                                <th>{{ __('Status') }}</th>
                                <th>{{ __('Role / Created') }}</th>
                                <th>{{ __('Model') }}</th>
                                <th class="!text-center">{{ __('Actions') }}</th>
                            </tr>
                        </thead>
                        <tbody class="table-tbody align-middle text-heading">
                            @foreach ($items as $item)
                                <tr>
                                    <td class="sort-name">
                                        @if ($item->image)
                                            <img src="{{ $item->image_url }}"
                                                class="mr-2 img-fluid rounded w-[50px] h-[50px]" alt="{{ $item->title }}">
                                        @else
                                            <div class="inline-flex items-center justify-center  w-[60px] h-[60px] rounded mx-auto  transition-shadow text-[20px] font-medium overflow-hidden border-solid border-[6px] !border-white  whitespace-nowrap overflow-ellipsis  mr-2 "
                                                style="background: #EACCEB;">
                                                <span
                                                    class="block w-full text-center whitespace-nowrap overflow-hidden overflow-ellipsis">{{ \Illuminate\Support\Str::limit($item->title, 2, '') }}</span>
                                            </div>
                                        @endif
                                        {{ $item->title }}
                                    </td>
                                    <td class="sort-status">
                                        @include('panel.admin.chatbot.status', ['status' => $item->status])
                                    </td>
                                    <td class="sort-role">
                                        <p class="p-0 m-0">{{ $item->role }}</p>
                                        <small class="text-secondary">{{ $item?->created_at?->diffForHumans() }}</small>
                                    </td>
                                    <td class="sort-model">
                                        {{ $item->model }}
                                    </td>
                                    <td class="text-center">
                                        <a href="{{ route('dashboard.admin.chatbot.show', $item->id) }}"
                                            class="btn w-[36px] h-[36px] p-0 border hover:bg-[var(--tblr-primary)] hover:text-white open-modal-link mr-2"
                                            title="{{ __('Chatbot Training') }}">
                                            <svg width="17" height="16" viewBox="0 0 17 16" fill="none"
                                                xmlns="http://www.w3.org/2000/svg" focusable="false">
                                                <path fill-rule="evenodd" clip-rule="evenodd"
                                                    d="M16.1681 6.15216L14.7761 6.43416V6.43616C14.1057 6.57221 13.4902 6.90274 13.0064 7.38647C12.5227 7.87021 12.1922 8.48572 12.0561 9.15617L11.7741 10.5482C11.7443 10.6852 11.6686 10.8079 11.5594 10.8958C11.4503 10.9838 11.3143 11.0318 11.1741 11.0318C11.0339 11.0318 10.8979 10.9838 10.7888 10.8958C10.6796 10.8079 10.6039 10.6852 10.5741 10.5482L10.2921 9.15617C10.1563 8.48561 9.82586 7.86997 9.34209 7.38619C8.85831 6.90241 8.24266 6.57197 7.57211 6.43616L6.18011 6.15416C6.0413 6.12574 5.91656 6.05026 5.82698 5.94048C5.7374 5.8307 5.68848 5.69336 5.68848 5.55166C5.68848 5.40997 5.7374 5.27263 5.82698 5.16285C5.91656 5.05307 6.0413 4.97759 6.18011 4.94916L7.57211 4.66716C8.24261 4.53124 8.85819 4.20076 9.34195 3.717C9.8257 3.23324 10.1562 2.61766 10.2921 1.94716L10.5741 0.555164C10.6039 0.418164 10.6796 0.295476 10.7888 0.207494C10.8979 0.119512 11.0339 0.0715332 11.1741 0.0715332C11.3143 0.0715332 11.4503 0.119512 11.5594 0.207494C11.6686 0.295476 11.7443 0.418164 11.7741 0.555164L12.0561 1.94716C12.1922 2.61761 12.5227 3.23312 13.0064 3.71686C13.4902 4.20059 14.1057 4.53112 14.7761 4.66716L16.1681 4.94716C16.3069 4.97559 16.4317 5.05107 16.5212 5.16085C16.6108 5.27063 16.6597 5.40797 16.6597 5.54966C16.6597 5.69136 16.6108 5.8287 16.5212 5.93848C16.4317 6.04826 16.3069 6.12374 16.1681 6.15216ZM5.98931 13.2052L5.61131 13.2822C5.14508 13.3767 4.71703 13.6055 4.38056 13.9418C4.04409 14.2781 3.81411 14.706 3.71931 15.1722L3.64231 15.5502C3.62171 15.6567 3.56468 15.7527 3.48102 15.8217C3.39735 15.8907 3.29227 15.9285 3.18381 15.9285C3.07534 15.9285 2.97026 15.8907 2.88659 15.8217C2.80293 15.7527 2.74591 15.6567 2.72531 15.5502L2.6483 15.1722C2.55362 14.7059 2.32368 14.2779 1.98719 13.9416C1.6507 13.6053 1.22258 13.3756 0.756305 13.2812L0.378305 13.2042C0.271814 13.1836 0.175815 13.1265 0.106785 13.0429C0.037755 12.9592 0 12.8541 0 12.7457C0 12.6372 0.037755 12.5321 0.106785 12.4485C0.175815 12.3648 0.271814 12.3078 0.378305 12.2872L0.756305 12.2102C1.22271 12.1157 1.65093 11.8858 1.98743 11.5493C2.32393 11.2128 2.5538 10.7846 2.6483 10.3182L2.72531 9.94016C2.74591 9.83367 2.80293 9.73767 2.88659 9.66864C2.97026 9.59961 3.07534 9.56186 3.18381 9.56186C3.29227 9.56186 3.39735 9.59961 3.48102 9.66864C3.56468 9.73767 3.62171 9.83367 3.64231 9.94016L3.71931 10.3182C3.81376 10.7847 4.04359 11.2131 4.38008 11.5497C4.71658 11.8864 5.14482 12.1165 5.61131 12.2112L5.98931 12.2882C6.0958 12.3088 6.1918 12.3658 6.26083 12.4495C6.32985 12.5331 6.36761 12.6382 6.36761 12.7467C6.36761 12.8551 6.32985 12.9602 6.26083 13.0439C6.1918 13.1275 6.0958 13.1846 5.98931 13.2052Z"
                                                    fill="url(#paint0_linear_3314_1636)"></path>
                                                <defs>
                                                    <linearGradient id="paint0_linear_3314_1636" x1="1.03221e-07"
                                                        y1="3.30635" x2="13.3702" y2="15.6959"
                                                        gradientUnits="userSpaceOnUse">
                                                        <stop stop-color="#82E2F4"></stop>
                                                        <stop offset="0.502" stop-color="#8A8AED"></stop>
                                                        <stop offset="1" stop-color="#6977DE"></stop>
                                                    </linearGradient>
                                                </defs>
                                            </svg>
                                        </a>
                                        <a href="{{ route('dashboard.admin.chatbot.edit', $item->id) }}"
                                            class="btn w-[36px] h-[36px] p-0 border hover:bg-[var(--tblr-primary)] hover:text-white mr-2"
                                            title="{{ __('Edit') }}">
                                            <svg width="13" height="12" viewBox="0 0 15 14" fill="none"
                                                stroke="currentColor" xmlns="http://www.w3.org/2000/svg">
                                                <path
                                                    d="M8.71875 2.43988L11.9688 5.58995M10.75 11.4963H14M4.25 13.0714L12.7812 4.80248C12.9946 4.59564 13.1639 4.35009 13.2794 4.07984C13.3949 3.8096 13.4543 3.51995 13.4543 3.22744C13.4543 2.93493 13.3949 2.64528 13.2794 2.37504C13.1639 2.10479 12.9946 1.85924 12.7812 1.6524C12.5679 1.44557 12.3145 1.28149 12.0357 1.16955C11.7569 1.05761 11.458 1 11.1562 1C10.8545 1 10.5556 1.05761 10.2768 1.16955C9.99799 1.28149 9.74465 1.44557 9.53125 1.6524L1 9.92135V13.0714H4.25Z"
                                                    stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round" />
                                            </svg>
                                        </a>
                                        <a href="#"
                                            onclick="deleteChatbot('{{ route('dashboard.admin.chatbot.destroy', $item->id) }}')"
                                            class="btn w-[36px] h-[36px] p-0 border hover:bg-red-500 hover:text-white"
                                            title="{{ __('Delete') }}">
                                            <svg width="10" height="10" viewBox="0 0 10 10" fill="currentColor"
                                                xmlns="http://www.w3.org/2000/svg">
                                                <path
                                                    d="M9.08789 1.74609L5.80664 5L9.08789 8.25391L8.26758 9.07422L4.98633 5.82031L1.73242 9.07422L0.912109 8.25391L4.16602 5L0.912109 1.74609L1.73242 0.925781L4.98633 4.17969L8.26758 0.925781L9.08789 1.74609Z" />
                                            </svg>
                                        </a>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                    @if ($items->total() > 10)
                        <div
                            class="flex items-center border-solid border-t border-r-0 border-b-0 border-l-0 border-[--tblr-border-color] px-[--tblr-card-cap-padding-x] py-[--tblr-card-cap-padding-y] [&_.rounded-md]:rounded-full">
                            <div class="m-0 ms-auto p-0">{{ $items->links() }}</div>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
@endsection
@section('script')
    <script>
        function deleteChatbot(url) {
            if (confirm('{{ __('Are you sure? This is chatbot and will delete.') }}')) {
                $.ajax({
                    type: "DELETE",
                    url: url,
                    success: function(result) {
                        if (result.status == 'error') {
                            toastr.error(result.message);
                        } else {
                            toastr.success(result.message);
                            if (result.reload) {
                                setTimeout(function() {
                                    location.reload();
                                }, result.setTimeOut);
                            }
                        }
                    }
                });
            }
        }
    </script>
@endsection