@extends('layouts.app')

@section('appjs')
    <script type="application/javascript" src="{{ asset('js/app.js') }}"></script>
@endsection
@section('content')
@section('page_title') Add SMS Templates @endsection
<style type="text/css">

    .field_wrapper div{
	    margin-bottom:10px;
    }
    input::-webkit-outer-spin-button,
    input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
    }
    .col-form-label:after{
    content:'*';
    color:red;
    padding-left:5px;
}
</style>
@include('sms_templates.template_header')
<div class="container">
        <div class="card-header">
            <h3><b> Add SMS Templates </b></h3>
        </div>
    <div class="card">

        <div class="card-body">
            <form method="post" action="{{ url('sms_templates/save_template') }}" enctype="multipart/form-data" autocomplete="off">
                {{ csrf_field() }}
                <div class="form-group row">
                    <label for="organization" class="col-sm-3 col-form-label">Organization</label>
                    <div class="col-sm-6">
                    <select class="form-control" name="organization" id="organization" data-live-search="true">
                        <option 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>
                </div>
                <div class="form-group row">
                    <label for="sender_id" class="col-sm-3 col-form-label">Sender ID</label>
                    <div class="col-sm-6">
                        <select name="sender_id" id="sender_id" class="form-control">
                            <option value="">Select Sender ID</option>
                        </select>
                    </div>
                </div>
                <div class="form-group row">
                    <label for="sms_type" class="col-sm-3 col-form-label"> Account Type</label>
                    <div class="col-sm-6">
                        <select class="form-control" name="sms_type" id="sms_type">
                            <option value="1">Promotional</option>
                            <option value="2">Transactional</option>
                        </select>
                    </div>
                </div>
                <div class="form-group row promotional">
                    <label for="orgname" class="col-sm-3 col-form-label">Language</label>
                    <div class="col-sm-6">
                        <select class="form-control" name="language" id="language">
                            <option value="">Select Template Language</option>
                            <option value="1">English</option>
                            <option value="2">Unicode</option>
                        </select>
                    </div>
                </div>
                <!-- <div class="form-group row" id="pincode_data_cps_div">
                    <label for="pincode_data_cps" class="col-sm-3 col-form-label">Template ID</label>
                    <div class="col-sm-6">
                        <input name="pincode_data_cps" type="text" class="form-control" id="pincode_data_cps" placeholder="Template ID">
                    </div>
                </div>
                <div class="form-group row">
                    <label for="my_data_cps" class="col-sm-3 col-form-label">Template</label>
                    <div class="col-sm-9">
                        <textarea name="template" id="template" rows="4" cols="62" required></textarea>
                    </div>
                </div> -->
                <div class="form-group row">
                    <label for="file" class="col-sm-3 col-form-label">Upload Templates</label>
                    <div class="col-sm-6">
                        <input type="file" name="file" class="form-control"  accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"/>
                    </div>
       <small><a href="{{ url('template_sample_excel') }}" class="font-weight-bolder"><i class="fa fa-download" aria-hidden="true"></i> Sample File</a></small>
                </div>
                @can('hasAddPermission')
                <div class="form-group text-center">
                    <input name="server_id" type="hidden" id="server_id" />
                    <input name="sender_name" type="hidden" id="sender_name" />
                    <button type="submit" class="btn btn-primary">Submit</button>
                </div>
                @endcan
            </form>
        </div>
    </div>
</div>

<script>
$(document).ready(function(){
    let sms_type = $('#sms_type').val();
        $('#organization,#sender_id').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>'

            }
        });
        $('#organization').change(function(){
            var org_id= $(this).val();
            $.ajax({
                type: 'post',
                url: 'sms_templates/get_sender_ids',
                data: {
                    "_token": "{{ csrf_token() }}",
                    "org_id":org_id,
                    "sms_type":sms_type
                },
                success: function(data){
                    $('#sender_id').empty();
                    $("#sender_id").append('<option value="">Select Sender ID</option>');
                    $.each(data, function(i, item) {
                        $('#sender_id').append($("<option></option>").attr({"value": item.sender_id, "data-id": item.new_server_id, "sender-name": item.sender_name}).text(item.sender_name + ' ('+item.alias_server_name+')'));
                        //$("#sender_id").append(new Option(item.sender_name + ' ('+item.alias_server_name+')', item.sender_id));
                    });
                    $('#sender_id').multiselect('rebuild');
                }
            });
        });
        $("#sender_id").on("change", function() {
            var serverVal = $(this).find('option:selected').attr('data-id');
            var senderVal = $(this).find('option:selected').attr('sender-name');
            $('#server_id').val(serverVal);
            $('#sender_name').val(senderVal);
        });
});   
</script>
@endsection