@extends('layouts.app')

@section('content')

<link rel="stylesheet" type="text/css" href="{{ asset('css/custom/settings/keyword.css') }}">


<div class="page-inner">

    <div class="modal fade" id="frmModal" tabindex="-1" role="dialog" aria-hidden="true">

        <div class="modal-dialog" role="document">

            <div class="modal-content">

                <form class="form-horizontal" id="inputForm" novalidate="novalidate">

                    <div class="modal-header">

                        <h5 class="modal-title">

                            <span class="fw-mediumbold">

                                {{translate('Keyword Info')}}

                            </span>

                        </h5>

                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">

                            <span aria-hidden="true">&times;</span>

                        </button>

                    </div>

                    <div class="modal-body">

                        <div class="form-group control-group form-inline ">

                            <label class="col-md-3">

                                {{translate('Name')}}

                                <span class="required-label">*</span>

                            </label>

                            <div class="col-md-9 controls">

                                <input type="text" id="name" name="name" placeholder="{{translate('Keyword name')}}" required class="form-control input-full" data-validation-required-message="Keyword name is required" />

                                <span class="help-block"></span>

                            </div>

                        </div>


                        <div class="form-group control-group form-inline ">

                            <label class="col-md-3">

                                {{translate('Description')}}

                                <span class="required-label">*</span>

                            </label>

                            <div class="col-md-9 controls">

                                <input type="text" id="description" name="description" placeholder="{{translate('description')}}" required class="form-control input-full" data-validation-required-message="Description" />

                                <span class="help-block"></span>

                            </div>

                        </div>

                        <div class="form-group control-group form-inline ">

                            <label class="col-md-3">
                                {{translate('Type')}}
                                <span class="required-label">*</span>
                            </label>
                        
                            <div class="col-md-9 controls">
                                <select id="type" name="type" required class="form-control input-full" data-validation-required-message="Type is required">
                                    <option value="" disabled selected>{{translate('Select Type')}}</option>
                                    <option value="1">{{translate('Jump to workflow')}}</option>
                                    <option value="2">{{translate('Close conversation')}}</option>
                                    <option value="3">{{translate('Send predefined message')}}</option>
                                </select>
                                <span class="help-block"></span>
                            </div>
                        
                        </div>

                        <div class="form-group control-group form-inline ">

                            <label class="col-md-3">

                                {{translate('Keyword')}}

                                <span class="required-label">*</span>

                            </label>

                            <div class="col-md-9 controls">

                                <input type="text" id="keyword" name="keyword" placeholder="{{translate('Keyword')}}" required class="form-control input-full" data-validation-required-message="Keyword" />

                                <span class="help-block"></span>

                            </div>

                        </div>

                        <div class="form-group control-group form-inline ">

                            <label class="col-md-3">

                                {{translate('Webhook_URL')}}

                                <span class="required-label">*</span>

                            </label>

                            <div class="col-md-9 controls">

                                <input type="text" id="webhook_url" name="webhook_url" placeholder="{{translate('Webhook_URL')}}" required class="form-control input-full" data-validation-required-message="Keyword" />

                                <span class="help-block"></span>

                            </div>

                        </div>


            </div>

            <div class="modal-footer">

                <button type="button" class="btn btn-default btn-sm" data-dismiss="modal">{{translate('Close')}}</button>

                <button type="submit" class="btn btn-success btn-sm">{{translate('Save')}}</button>

            </div>

            </form>

        </div>

    </div>

</div>


<!--Role datatable-->

<div class="row">

    <div class="col-md-12">

        <div class="main-card card">

            <div class="card-header">

                <div class="d-flex align-items-center">

                    <h4 class="card-title">

                        {{translate('Keyword Details')}}

                    </h4>

                    <button id="btnAdd" class="btn btn-primary btn-sm btn-round ml-auto">

                        <i class="fa fa-plus"></i> {{translate('Add New Keyword')}}

                    </button>

                </div>

            </div>

            <div class="card-body">

                <table id="tableElement" class="table table-bordered w100"></table>

            </div>

        </div>

    </div>

</div>




<script src="{{ dsAsset('js/custom/settings/keyword.js') }}"></script>



@endsection