@extends('layouts.app')

@section('appjs')
    <script type="application/javascript" src="{{ asset('js/app.js') }}"></script>
@endsection
@section('content')
@section('page_title') RCS Bot Flow @endsection
<style>
.error_message{
    color: red;
    margin-left: 27%;   
}
.hide{
  display:none;
}
#submit_rcs_template {
    width: 18%;
    margin-left: 40%;
    padding: 8px;
    background: black;
    color: white;
    border-radius: 14px;
    transition: 0.4s ease-in-out;
    cursor: pointer;
    margin-top: 6px;
}
#submit_rcs_template:hover{
    background: rgb(46, 46, 46);
}
</style>
<div class="container">
<div class="card-header">
            <h3> <b> RCS Bot Flow</b> 
                {{-- <a class="btn btn-secondary border-radius-0 pull-right text-white" href="{{ url('getRcsTemplatedata') }}">Template List</a></h3> --}}
        </div>
    <div class="card">
        <div class="card-body">
            <form method="post" action="{{ url('sms_templates/rcs_bot_flow_update') }}" enctype="multipart/form-data" autocomplete="off" id="editTempForm">
                {{ csrf_field() }}
               
                <div class="form-group row">
                    <label for="organization" class="col-sm-3 col-form-label">Organization</label>
                    <div class="col-sm-6">
                        <input type="text" name="organization" class="form-control" value="{{ config_for_organization_name(1) }}"  readonly/>
                    {{-- <select class="form-control" name="organization" id="organization" data-live-search="true">
                        <option id="select_org" value="">Select Organization</option>
                        @foreach($account_names as $account_name)
                            <option value={{$account_name->id}} > {{$account_name->account_name}} ({{$account_name->email}}) </option>
                        @endforeach
                    </select> --}}
                    </div>
                    <p id="error_organization_name" class="error_message hide">
                        This is a required field
                    </p>
                </div>

                <div class="form-group row">
                    <label for="file" class="col-sm-3 col-form-label">Bot Name</label>
                    <div class="col-sm-6">
                        <input type="text" name="bot_name" class="form-control" value="Ask Apollo"  readonly/>
                    </div>
                </div>

                <div class="form-group row">
                    <label for="file" class="col-sm-3 col-form-label">Template Name</label>
                    <div class="col-sm-6">
                        <select class="form-control" name="template_name" id="template_name" data-live-search="true">
                            <option value="">Select Template Name</option>
                            @foreach($data as $temp_name)
                                <option value="{{ $temp_name['template_name'] }}">{{ $temp_name['template_name'] }}</option>
                            @endforeach
                        </select>
                    </div>
                    <p id="error_template_name" class="error_message hide">
                        This is a required field
                    </p>
                </div>

                <div class="form-group row">
                    <label for="file" class="col-sm-3 col-form-label">Flow Name</label>
                    <div class="col-sm-6">
                        <select name="rcs_bot_flow" id="rcs_bot_flow" class="form-control" >
                            <option value="">Select Flow name</option>
                            @foreach ($flow as $item)
                                <option value="{{ $item['id'] }}">{{ $item['flow_name'] }}</option>
                            @endforeach
                        </select>
                    </div>
                    <p id="error_flow_name" class="error_message hide">
                        This is a required field
                    </p>
                </div>

                <div class="form-group row">
                    <label for="file" class="col-sm-3 col-form-label">Expiry</label>
                    <div class="col-sm-6">
                        <select name="expiry" id="expiry" class="form-control" >
                            <option value="Yes">Yes</option>
                            <option value="" selected>No</option>
                        </select>
                    </div>
                    <p id="error_expiry" class="error_message hide">
                        This is a required field
                    </p>
                </div>
                    <button id="submit_rcs_template" type="submit" class="btn btn-primary rcs_edit">Submit</button>
                </div>
            </form>
        </div>
    </div>
</div>
<script>
    $('#organization').multiselect({
        enableFiltering: true,
        enableCaseInsensitiveFiltering: true,
        includeFilterClearBtn:true,
        buttonWidth:'515px',
        enableHTML: true,
        templates: {
            filter: '<li class="multiselect-item multiselect-filter"><div class="input-group mb-3"><div class="input-group-prepend"><span class="input-group-text"><i class="fa fa-search"></i></span></div><input class="form-control multiselect-search" type="text" /></div></li>',
            filterClearBtn: '<span class="input-group-btn"><button class="btn btn-default multiselect-clear-filter" type="button"><i class="fa fa-close"></i></button></span>'
        }
    });

    $('#editTempForm').submit(function(e){

        var error = true;

        var fieldsToValidate = [
            { id: '#template_name', errorId: '#error_template_name' },
            { id: '#rcs_bot_flow', errorId: '#error_flow_name' }
        ];

        function validateField(field) {
            var value = $(field.id).val();
            if (!value || value.length == 0) {
                $(field.errorId).removeClass('hide');
                error= false;
            } else {
                $(field.errorId).addClass('hide'); 
            }
        }

        fieldsToValidate.forEach(function(field) {
            validateField(field)
        });

        if (!error) {
            e.preventDefault();
        }
    });

</script>
@endsection