@extends('layout.agency')

@section('meta_tags')
@stop

@section('pagename')
    Scripts
@stop

@section('top_import_file')
<style>
    .gptbtn {
        display: flex;
        align-items: center;
        gap: 5px;
        justify-content: center;
        background: #18DDEF !important;
        border-color: #18DDEF !important;
    }
</style>
@stop

@section('content')
    <div class="d-flex justify-content-between align-items-center mb-3">
        <h2>Scripts</h2>
    </div>
    <div class="card radius-10 w-100">
        <div class="card-body">
            <form id="regstr" class="row g-3">
                <div id="error" class="alert alert-danger d-none"></div>
                <div class="col-6">
                    <label class="form-label">Name <span class="text-danger">*</span></label>
                    <input type="text" name="name" class="form-control" placeholder="Enter Script Name">
                </div>
                <div class="col-6">
                    <label class="form-label">Project <span class="text-danger">*</span></label>
                    <select class="form-control" name="system_project" id="role">
                        <option value="" selected disabled>Select Project</option>
                        @foreach ($projects as $project)
                            <option value="{{ $project->id }}"> {{ $project->project }} </option>
                        @endforeach
                    </select>
                </div>

                <div class="col-12">
                    <label class="form-label">Script <span class="text-danger">*</span></label>
                    <textarea name="script" class="form-control" id="script" rows="5" placeholder="Write Your Script"></textarea>
                </div>

                <div class="d-flex justify-content-end">
                    {{-- <div class="">
                        <button type="button" class="btn btn-info gptbtn" data-bs-toggle="modal" style="height: 38px;" data-bs-target="#staticBackdrop">
                            <img width="20px" src="{{ asset('assets/images/gpticon.png') }}" class="img-fluid"> Chat gpt
                        </button>
                    </div> --}}
                    <div class="">
                        <button class="btn btn-primary d-none" type="button" id="spinner" disabled>
                            <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
                            Creating...
                        </button>
                        <button type="submit" class="btn btn-primary">Create</button>
                    </div>
                </div>

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


    <div class="card radius-10 w-100">
        <div class="card-body">
            {{-- <div class="d-flex align-items-center">
            <h6 class="mb-0">Scripts</h6>
        </div> --}}
            <div class="table-responsive mt-2">
                <table class="table align-middle mb-0 dataTable" id="example">
                    <thead class="table-light">
                        <tr>
                            <th>Date</th>
                            <th>Name</th>
                            <th>Script</th>
                            <th>Created By</th>
                            <th>Status</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody id="tablebd">
                        @foreach ($scripts as $script)
                            <tr>
                                <td>{{ $script->created_at->format('d-M-y g:i A') }}</td>
                                <td>{{ $script->name }}</td>
                                <td class="text-wrap">{{ $script->script }}</td>
                                <td>{{ $script->created_by_name }}</td>
                                <td>{{ $script->status ? 'Active' : 'Inactive' }}</td>
                                <td>
                                    <div class="table-actions d-flex align-items-center gap-3 fs-6">
                                        <button class="btn text-primary editbtn"
                                            data-everything='@json($script)' data-bs-toggle="modal"
                                            data-bs-target="#exampleExtraLargeModal" data-bs-placement="bottom"
                                            title="" data-bs-original-title="Edit" aria-label="Edit"><ion-icon
                                                name="create" size="large"></ion-icon></button>
                                                <a href="{{ route('agency.tts') }}?scriptid={{ $script->id }}"
                                                    class="btn btn-sm btn-primary ">Use in Speech Synthesis</a>
                                    </div>
                                </td>

                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>


    {{-- Edit Modal --}}
    <div class="modal fade" id="exampleExtraLargeModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-xl">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Edit <span id="PackageName"></span></h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form id="regstrEdit" class="row g-3">
                        <div id="erroredit" class="alert alert-danger d-none"></div>
                        <input type="text" class="d-none" readonly name="id" id="user_id">
                        <div class="col-4">
                            <label class="form-label">Name <span class="text-danger">*</span></label>
                            <input type="text" name="name" class="form-control" id="modal_name"
                                placeholder="Enter Script Name">
                        </div>
                        <div class="col-4">
                            <label class="form-label">Project <span class="text-danger">*</span></label>
                            <select class="form-control" name="system_project" id="modal_project">
                                <option value="" selected disabled>Select Project</option>
                                @foreach ($projects as $project)
                                    <option value="{{ $project->id }}"> {{ $project->project }} </option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-4">
                            <label class="form-label">Status <span class="text-danger">*</span></label>
                            <select name="status" id="modal_status" class="form-control" required>
                                <option value="1">Active</option>
                                <option value="0">Inactive</option>
                            </select>
                        </div>
                        <div class="col-12">
                            <label class="form-label">Script <span class="text-danger">*</span></label>
                            <textarea name="script" class="form-control" id="modal_script" rows="5" placeholder="Write Your Script"></textarea>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    <button class="btn btn-primary d-none" type="button" id="modal_spinner" disabled>
                        <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
                        Updating...
                    </button>
                    <button type="button" class="btn btn-primary" id="save_edit">Update</button>
                </div>
            </div>
        </div>
    </div>
    {{-- Edit Modal --}}

    {{-- Chat gpt modal --}}
    <div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false"
        tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5>Chat GPT</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"
                        aria-label="Close"></button>
                </div>
                <form>
                    <div class="modal-body">
                            <label for="" class="mt-2">Prompt<span
                                    class="text-danger">*</span></label>
                            <textarea name="prompt" id="prompt" cols="30" rows="3" class="form-control mt-2"></textarea>
                            <label for="" class="mt-2">Response<span
                                    class="text-danger ">*</span></label>
                            <textarea id="chat_gpt_response" cols="30" rows="10" class="form-control mt-2" disabled></textarea>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                        <button class="btn btn-primary d-none" type="button" id="gpt_modal_spinner" disabled>
                            <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
                            Generating...
                        </button>
                        <button type="buutton" id="chatgpt_generate" class="btn btn-primary">Generate</button>
                    </div>
                </form>

            </div>
        </div>
    </div>
    {{-- Chat gpt modal --}}

@stop

@section('bottom-scripts')
    {{-- Form Submit Script --}}
    <script>
        $(function() {
            $("#regstr").on("submit", function(e) {
                e.preventDefault();

                // Get all checkboxes
                let formdata = new FormData(this);
                formdata.append('_token', '{{ csrf_token() }}');

                $.ajax({
                    url: "{{ route('agency.scripts.create') }}",
                    type: "post",
                    data: formdata,
                    processData: false,
                    contentType: false,
                    cache: false,
                    beforeSend: function() {
                        $(":submit").prop("disabled", true);
                        $(":submit").addClass("d-none");
                        $("#spinner").removeClass("d-none");
                        $("#error").addClass("d-none");
                    },
                    success: function(res) {
                        let obj = res;
                        console.log(res);

                        if (obj.error) {
                            $("#error").html(obj.error);
                            $("#error").removeClass("d-none");
                            $("#spinner").addClass("d-none");
                            $(":submit").removeClass("d-none");
                            $(window).scrollTop(0);
                            toast("error", "Please check error list")
                        } else if (obj.success) {
                            $("#spinner").addClass("d-none");
                            // let newRow = '<tr>'
                            //     var createdAt = new Date(obj.data.created_at);
                            //     var options = { year: 'numeric', month: 'short', day: 'numeric', hour: 'numeric', minute: 'numeric', hour12: true };
                            //     var formattedDate = createdAt.toLocaleString('en-US', options);
                            //     newRow += '<td>'+ formattedDate +'</td>'
                            //     newRow += '<td>'+ obj.data.name +'</td>'
                            //     newRow += '<td>'+ obj.data.script +'</td>'
                            //     newRow += '<td>You</td>'
                            //     newRow += '<td>Active</td>'
                            //     newRow += '<td><div class="table-actions d-flex align-items-center gap-3 fs-6"><button class="btn text-warning editbtn" data-everything="'+JSON.stringify(obj.data)+'" data-bs-toggle="modal" data-bs-target="#exampleExtraLargeModal" data-bs-placement="bottom" title="" data-bs-original-title="Edit" aria-label="Edit"><ion-icon name="create" size="large"></ion-icon></button></div></td>'
                            // newRow += '</tr>'
                            // $("#tablebd").prepend(newRow)

                            toast("success", "Script has been added")

                            setTimeout(function() {
                                window.location.href = "{{ route('agency.scripts') }}";
                            }, 1000);
                        } else {
                            $("#spinner").addClass("d-none");
                            $(":submit").prop("disabled", false);
                            $(":submit").removeClass("d-none");
                            $(window).scrollTop(0);
                        }

                        $(":submit").prop("disabled", false);
                    },
                    error: function(error) {
                        console.log(error);
                        $("#error").html(error.responseJSON.message || error.responseJSON
                            .error);
                        $("#error").removeClass("d-none");
                        $("#spinner").addClass("d-none");
                        $(":submit").prop("disabled", false);
                        $(":submit").removeClass("d-none");
                        toast("error", "Please check error list")
                    }
                });
            });
        });
    </script>

    {{-- Tooltip Script --}}
    <script>
        var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-placement="bottom"]'));
        var tooltipList = tooltipTriggerList.map(function(tooltipTriggerEl) {
            return new bootstrap.Tooltip(tooltipTriggerEl);
        });
    </script>

    {{-- Edit Modal Script --}}
    <script>
        $(".editbtn").on('click', function() {
            var data = $(this).attr('data-everything');
            data = JSON.parse(data)
            // Set values in the modal fields
            $("#user_id").val(data.id)
            $("#modal_name").val(data.name);
            $("#modal_script").text(data.script);
            $("#modal_project").val(data.system_project).trigger('change');
            $("#modal_status").val(data.status ? 1 : 0);
        });
    </script>

    {{-- Edit Tier Script --}}
    <script>
        $(function() {
            $("#save_edit").click(function() {
                $("#regstrEdit").submit()
            })

            $("#regstrEdit").on("submit", function(e) {
                e.preventDefault();
                var formdata = new FormData(this);
                formdata.append('_token', '{{ csrf_token() }}')

                $.ajax({
                    url: "{{ route('agency.scripts.update') }}",
                    type: "post",
                    data: formdata,
                    processData: false,
                    contentType: false,
                    cache: false,
                    beforeSend: function() {
                        $("#save_edit").prop("disabled", true);
                        $("#save_edit").addClass("d-none");
                        $("#modal_spinner").removeClass("d-none");
                        $("#erroredit").addClass("d-none");
                    },
                    success: function(res) {

                        let obj = res

                        if (obj.error) {
                            $("#erroredit").html(obj.error);
                            $("#erroredit").removeClass("d-none");
                            $("#modal_spinner").addClass("d-none");
                            $("#save_edit").removeClass("d-none");
                            // toastr.error("Please check errors list!", "Error");
                            $(window).scrollTop(0);
                        } else if (obj.success) {
                            $("#modal_spinner").addClass("d-none");
                            // toastr.success("Welcome!", "On Board!");

                            setTimeout(function() {
                                window.location.href =
                                    "{{ route('agency.scripts') }}"
                            }, 1000);
                        } else {
                            $("#modal_spinner").addClass("d-none");
                            $("#save_edit").prop("disabled", false);
                            $("#save_edit").removeClass("d-none");
                            // toastr.error("Something bad happened!", "Error");
                            $(window).scrollTop(0);
                        }

                        $("#save_edit").prop("disabled", false);
                    },
                    error: function(error) {
                        console.log(error)
                        // toastr.error("Please check the error list", "Error");
                        $(window).scrollTop(0);

                        $("#erroredit").html(error.responseJSON.message || error.responseJSON
                            .error);
                        $("#erroredit").removeClass("d-none");
                        $("#modal_spinner").addClass("d-none");
                        $("#save_edit").prop("disabled", false);
                        $("#save_edit").removeClass("d-none");
                    }
                });
            });
        });
    </script>


    {{-- Chat Gpt Form --}}
    <script>
        $("#chatgpt_generate").click(function(event) {
            event.preventDefault();

            const apiKey = 'your-api-key-here';
            const promptText = $("#prompt").val();


            $.ajax({
                url: 'https://api.openai.com/v1/completions',
                method: 'POST',
                contentType: 'application/json',
                headers: {
                    "Authorization": `Bearer {{ env('CHAT_GPT_KEY') }}`
                },
                data: JSON.stringify({
                    model: "gpt-3.5-turbo",
                    prompt: promptText,
                    max_tokens: 100,
                    temperature: 0.7
                }),
                beforeSend: function () {
                    $("#chatgpt_generate").addClass("d-none");
                    $("#gpt_modal_spinner").removeClass("d-none")
                },
                success: function(response) {
                    $("#chat_gpt_response").text(response.choices[0].text);
                    $("#gpt_modal_spinner").addClass("d-none")
                    $("#chatgpt_generate").removeClass("d-none");
                },
                error: function(error) {
                    toast("error", "something went wrong")
                    $("#gpt_modal_spinner").addClass("d-none")
                    $("#chatgpt_generate").removeClass("d-none");
                }
            });
        });
    </script>

@stop