@extends('layouts.app')
@push('title')
    {{ __($pageTitle) }}
@endpush
@section('content')
    <form class="ajax" action="{{route('user.chatbot.store')}}" method="POST"
          enctype="multipart/form-data" data-callback="formResponse">
        @csrf

        <input type="hidden" value="{{encrypt($chatBotId)}}" id="chatbotId">
        <input type="hidden" id="copyEmbedCode" class="fs-90" value="{{$embed_code}}" name="embed">

        <div class="row">
            <div class="col-md-12 ">
                <div class="container">
                    <div class="row">
                        <div class="col-md-12">
                            <!-- tab button start -->
                            @include('user.chatbot.partial.tab-menu')
                            <!-- tab button end -->
                            <!-- breadcrumb start -->
                            <div class="row align-items-center bda-mt-30 bda-mb-30">
                                <div class="col-md-6">
                                    <div class="">
                                        <nav aria-label="breadcrumb">
                                            <ol class="breadcrumb bda-breadcrumb m-0">
                                                <li class="breadcrumb-item "><a href="{{url()->previous()}}"
                                                                                class="title-light">{{__($previousPageTitle)}}</a>
                                                </li>
                                                <li class="breadcrumb-item active"
                                                    aria-current="page">{{__($pageTitle)}}</li>
                                            </ol>
                                        </nav>
                                    </div>
                                </div>
                                <div class="col-md-6 ">
                                    <div
                                            class="d-flex justify-content-md-end bda-gab-30 mt-3 mt-md-0  align-items-center">
                                        @if($chatbotData != null)
                                            <a href="{{route('user.chatbot.delete', encrypt($chatBotId))}}"
                                               type="button" class="bda-delete-btn">{{__("Delete")}}</a>
                                        @endif
                                        <button type="submit" class="bda-btu-theme">{{__("Save Change")}}</button>
                                    </div>
                                </div>
                            </div>
                            <!-- breadcrumb end -->
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- tab body  area start -->
        <div class="tab-content" id="chatbotCreationForm">

            <!-- Settings body start -->
            @include('user.chatbot.settings-content')
            <!-- Settings body end -->

            <!-- Chatbot body start -->
            @include('user.chatbot.chatbot')
            <!-- Chatbot body end -->

            <!-- Sources body start -->
            @include('user.chatbot.source')
            <!-- Sources body end -->

            <!-- Analytics body start -->
            @include('user.chatbot.analytics')
            <!-- Analytics body end -->

            <!-- logs body start -->
            @include('user.chatbot.logs')
            <!-- logs body end -->

            <!-- Leads body start -->
            @include('user.chatbot.leads')

            <!-- Leads body start -->
            @include('user.chatbot.appointment')

            <!-- Leads body end -->
            @include('user.chatbot.embed')

        </div>
    </form>
    <!-- tab body area end -->
@endsection

@push('script')
    <script src="https://mozilla.github.io/pdf.js/build/pdf.js"></script>

    <script src="{{ asset('assets/js/custom/user/chatbot.js') }}"></script>
    <script src="{{ asset('assets/js/custom/user/chatbot/analytics.js') }}"></script>

    <script>
        // lead data fetch
        $("#appointmentDataTable").DataTable({
            ordering: true,
            serverSide: true,
            processing: true,
            searching: false,
            responsive: true,
            paging: true,
            ajax: {
                url: $("#appointmentListRoute").val(),
                data: {
                    'chatbot_id': $("#chatbotId").val(),
                    'option': 'appointment'
                }
            },
            columns: [
                {"data": "name", "name": "name"},
                {"data": "email", "name": "email"},
                {"data": "phone", "name": "phone"},
                {"data": "date_time", "name": "date_time"},
                {"data": "created_at", "name": "created_at"},
            ],
        });
    </script>
@endpush
