@extends('layouts.admin.master')

@section('title')Settings
 {{ $title }}
@endsection


@push('css')
<meta name="csrf-token" content="{{ csrf_token() }}" />
<link rel="stylesheet" type="text/css" href="{{ asset('assets/css/date-picker.css') }}">
<link rel="stylesheet" type="text/css" href="{{ asset('assets/css/select2.css') }}">
@endpush

@section('content')
	<div class="container-fluid">
    <div class="page-header">
      <div class="row">
        <div class="col-lg-6">
          <h3>Mapping</h3>
          <ol class="breadcrumb">
            <!-- <li class="breadcrumb-item"><a href="{{ route('index') }}">Home</a></li> -->
            <li class="breadcrumb-item"><a href="javascript:void(0)">Settings</a></li>
            <li class="breadcrumb-item"><a href="{{route('scheduleTemplateList')}}">Template Mapped list</a></li>

          </ol>
        </div>

      </div>
    </div>
</div>
	<div class="container-fluid">
	    <div class="row justify-content-center">
	        <div class="col-sm-8">
	            <div class="card">
	                <div class="card-body">
                    <form method="post" action="@if(base64_decode(request()->get('action'))!='add') {{route('updateScheduleTemplate')}} @else {{route('saveScheduleTemplate')}} @endif" name="ScheduleTemplateForm" id="ScheduleTemplateForm">
                        @csrf
	                    <div class="form theme-form">
                              @if(base64_decode(request()->get('action'))=='edit')
                                <div class="row d-none">
                                    <div class="col">
                                        <div class="mb-3">
                                            <label>Id</label>
                                            <input class="form-control" type="hidden"  name="Id" id ="Id" placeholder="Name *" value="{{encrypt_decrypt('encrypt',$data->schedule_Id)}}" />
                                            <span id="nameError" class="addError"></span>
                                        </div>
                                    </div>
                                </div>
                                @endif
                             <div class="row">
	                            <div class="col">
	                                <div class="mb-3">
	                                    <label>Mapping Name</label>
                                        <input class="form-control" type="text"  name="mapping_name" id ="mapping-name" placeholder="Name *" value="{{isset($data) ? $data->mapping_name : ''}}"/>
	                                </div>
	                            </div>
	                        </div>
                            <div class="row">
	                            <div class="col">
	                                <div class="mb-3">
	                                    <label>Mapped For</label>
                                        <select class="form-select" name="scheduleFor" id="scheduleFor">
                                            <option value="">Select</option>
                                            <option value="Enquire">Enquire</option>
                                            <option value="Admission">Admission</option>
                                            <option value="Fee">Fee</option>
                                            <option value="Api">Api</option>
                                        </select>
	                                </div>
	                            </div>
	                        </div>
                            <div class="row">
	                            <div class="col">
	                                <div class="mb-3">
	                                    <label>Trigger At</label>
	                                    <select class="form-select" name="scheduleAt" id="scheduleAt">
                                            <option value="">Select</option>
                                            <option value="Creation">Creation</option>
                                            <option value="Update">Update</option>
                                            <option value="Delete">Fee</option>
                                        </select>
	                                </div>
	                            </div>
	                        </div>
                            <div class="row">
	                            <div class="col">
	                                <div class="mb-3">
	                                    <label>Template</label>
                                        <hr>
                                        <div class="row">
                                            <div class="table-responsive">
                                                <table class="table m-2 p-2" id="templateTable">
                                                    <thead>
                                                        <tr>
                                                            <th>Type</th>
                                                            <th>Template</th>
                                                            <th>#</th>
                                                        </tr>
                                                    </thead>
                                                    <tbody>
                                                        <tr>
                                                            <td>
                                                                <select class="form-select" name="templateType" id="templateType">
                                                                    <option value="">select</option>
                                                                    <option value="SMS">SMS</option>
                                                                    <option value="Whatsapp">Whatsapp</option>
                                                                    <option value="Email">Email</option>
                                                                    <option value="Voice">Voice</option>
                                                                </select>
                                                            </td>
                                                            <td>
                                                                @php
                                                                    $templateList = getTemplate();
                                                                @endphp
                                                                <select class="form-select" name="template" id="template">
                                                                    <option value="">select</option>
                                                                    @foreach($templateList as $template_id=>$template)
                                                                    <option value="{{encrypt_decrypt('encrypt',$template_id)}}">{{$template}}</option>
                                                                    @endforeach
                                                                </select>
                                                            </td>
                                                            <td>
                                                                <a class="badge badge-primary" href="javascript:void(0)" style="font-size:1.05em;" id="templateAction"><i class="icofont icofont-plus-square"></i></a>
                                                            </td>
                                                        </tr>
                                                        @if(isset($data))
                                                        @foreach(json_decode($data->template) as $dt)
                                                        <tr>
                                                            <td>{{$dt->type}}</td>
                                                            <td class="d-none">{{$dt->id}}</td>
                                                            <td>{{$dt->name}}</td>
                                                            <td><i class="fa fa-trash-o text-danger deleteDiscount" style="cursor:pointer" id="deleteDiscount"></i></td>
                                                        </tr>
                                                        @endforeach
                                                        @endif
                                                    </tbody>
                                                </table>
                                            </div>
                                        </div>
	                                </div>
	                            </div>
	                        </div>
                            <div class="row">
                                <div class="table-responsive">
                                    <table class="table m-2 p-2" id="ruleTable">
                                        <thead>
                                            <tr>
                                                <th>Criteria</th>
                                                <th>condition</th>
                                                <th>value</th>
                                                <th>Query</th>
                                                <th>#</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <td>
                                                    <select class="form-select" name="module" id="module">
                                                        <option value="">select</option>
                                                        <option value="Source">Source</option>
                                                        <option value="Stage">Stage</option>
                                                        <option value="Campaign">Campaign</option>
                                                        <option value="State">State</option>
                                                        <option value="City">City</option>
                                                    </select>
                                                </td>
                                                <td>
                                                    <select class="form-select" name="condition" id="condition">
                                                        <option value="">select</option>
                                                        <option value="is">is</option>
                                                        <option value="contain">contain</option>
                                                        <option value="start_with">Start with</option>
                                                        <option value="end_with">end_with</option>
                                                    </select>
                                                </td>
                                                <td>
                                                    <input class="form-control" type="text"  name="value" id ="value" placeholder="Rule description"/>
                                                </td>

                                                <td>
                                                    <select class="form-select" name="query" id="query">
                                                        <option value="">select</option>
                                                        <option value="AND">AND</option>
                                                        <option value="OR">OR</option>
                                                    </select>
                                                </td>

                                                <td>
                                                    <a class="badge badge-primary" href="javascript:void(0)" style="font-size:1.05em;" id="ruleAction"><i class="icofont icofont-plus-square"></i></a>
                                                </td>
                                            </tr>
                                            @if(isset($data))
                                            @foreach(json_decode($data->conditions) as $dt)
                                            <tr>
                                                 <td>{{$dt->module}}</td>
                                                 <td>{{$dt->condition}}</td>
                                                 <td>{{$dt->value}}</td>
                                                 <td>{{$dt->query}}</td>
                                                 <td><i class="fa fa-trash-o text-danger deleteDiscount" style="cursor:pointer" id="deleteDiscount"></i></td>
                                            </tr>
                                            @endforeach
                                            @endif
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                            <div class="row">
	                            <div class="col">
	                                <div class="mb-3">
	                                    <label>Rule Priority</label>
	                                    <input class="form-control" type="text"  name="priority" id ="priority" placeholder="Rule Priority" oninput="this.value = this.value.replace(/[^0-9]/g, ''); "/>
	                                </div>
	                            </div>
	                        </div>
                            <div class="row">
                                <div class="mb-3">
                                    <label>Status</label>
                                    <select class="form-select" name="status" id="status">
                                        <option value="Active">Active</option>
                                        <option value="Inactive">Inactive</option>
                                    </select>
                                </div>
	                        </div>
	                        <div class="row">
	                            <div class="col justify-content-center">
	                                <div class="text-center"><button class="btn btn-primary" type="submit">@if($data ?? '') {{"Update"}} @else {{"Save"}}@endif</button></div>
	                            </div>
	                        </div>
	                    </div>
                        </form>
	                </div>
	            </div>
	        </div>
	    </div>
	</div>


	@push('scripts')
    <script src="{{asset('assets/js/notify/bootstrap-notify.min.js')}}"></script>
    <script src="{{asset('assets/js/setting/notify.js')}}"></script>
    <script src="{{asset('assets/functions/common.js')}}"></script>

    <script>
        $("#ScheduleForm").submit(function(e){
            e.preventDefault();
            var template = $('#template').val();
            var scheduleFor = $('#scheduleFor').val();
            var scheduleAt = $('#scheduleAt').val();
            var isError = 1
            // var batch = $('#batch').val();

            if(template=='')
            {
                isError = 0
                notifyF("Error",'Template is required','danger',2000)
                return false
            }
            if(scheduleFor=='')
            {
                isError = 0
                notifyF("Error",'Schedule for is required','danger',2000)
                return false
            }
            if(scheduleAt=='')
            {
                isError = 0
                notifyF("Error",'Schedule at required','danger',2000)
                return false
            }
            if(isError)
            {
                e.currentTarget.submit();
            }
        })
        $(function(){
            $("#ruleAction").click(function(){
                var criteria = $("#module").val()
                var condition = $("#condition").val()
                var value = $("#value").val()
                var query = $("#query").val()
                if(criteria =="")
                {
                    notifyF("error","Criteria is required",'danger',2000)
                    return false;
                }
                if(condition =="")
                {
                    notifyF("error","Condition is required",'danger',2000)
                    return false;
                }

                var html = `
                            <tr>
                                <td><span>${criteria}</span></td>
                                <td><span>${condition}</span></td>
                                <td><span>${value}</span></td>
                                <td style="font-weight:800"><span>${query}</span></td>
                                <td><i class="fa fa-trash-o text-danger deleteDiscount" style="cursor:pointer" id="deleteDiscount"></i></td>
                            </tr>
                            `
                  $('#ruleTable tbody').append(html)

                  $("#module").val('')
                  $("#condition").val('')
                  $("#value").val('')

            })
        })
        $(function(){
            $("#templateAction").click(function(){
                var templateType = $("#templateType").val()
                var template_id = $("#template").val()
                var template_text = $("#template :selected").text()
                if(templateType =="")
                {
                    notifyF("error","Type is required",'danger',2000)
                    return false;
                }
                if(template_id =="")
                {
                    notifyF("error","Template is required",'danger',2000)
                    return false;
                }
                var html = `
                            <tr>
                                <td><span>${templateType}</span></td>
                                <td style="display:none"><span>${template_id}</span></td>
                                <td><span>${template_text}</span></td>
                                <td><i class="fa fa-trash-o text-danger deleteDiscount" style="cursor:pointer" id="deleteDiscount"></i></td>
                            </tr>
                            `
                  $('#templateTable tbody').append(html)
                  $("#templateType").val('')
                  $("#template").val('')


            })
        })

        $(function(){
            $("body").on('click','.deleteDiscount',function(){
                $(this).closest('tr').remove()
            })
        })

        $(function(){
            $("#ScheduleTemplateForm").submit(function(e){
                e.preventDefault()

                var data = {}
                var schedule_at = $("#scheduleAt").val()
                var schedule_for = $("#scheduleFor").val()
                var mapping_name = $("#mapping-name").val()
                if(mapping_name=="")
                {
                    notifyF("Error",'Mapping name is required','danger',2000)
                    return false
                }
                if(schedule_for=='')
                {
                    notifyF("Error",'Schedule for is required','danger',2000)
                    return false
                }
                if(schedule_at=='')
                {
                    notifyF("Error",'Schedule at required','danger',2000)
                    return false
                }
                var template = []
                $("#templateTable tbody").find('tr:gt(0)').each(function(index,tr){
                    var tmp = {}
                    tmp.type = $(this).find('td:eq(0)').text()
                    tmp.id = $(this).find('td:eq(1)').text()
                    tmp.name = $(this).find('td:eq(2)').text()
                    template.push(tmp)
                })
                console.log(template,"consle template")
                if(template == "")
                {
                    notifyF("error","Template is required",'danger',2000)
                    return false;
                }

                var condition = []
                $("#ruleTable tbody").find('tr:gt(0)').each(function(index,tr){
                    var tmp = {}
                    tmp.module = $(this).find('td:eq(0)').text()
                    tmp.condition = $(this).find('td:eq(1)').text()
                    tmp.value = $(this).find('td:eq(2)').text()
                    tmp.query = $(this).find('td:eq(3)').text()
                    condition.push(tmp)
                })

                if(condition == "")
                {
                    notifyF("error","Condition is required",'danger',2000)
                    return false;
                }
                if($("#priority").val() == '')
                {
                    notifyF("error","Rule priority is required",'danger',2000)
                    return false;
                }
                if($("#status").val() == "")
                {
                    notifyF("error","status is required",'danger',2000)
                    return false;
                }
                var id = '{{isset($data) ? encrypt_decrypt('encrypt',$data->schedule_Id) : ""}}'
                data.scheduleFor = schedule_for
                data.scheduleAt = schedule_at
                data.template = template
                data.conditions = condition
                data.mapping_name = mapping_name
                data.priority = $("#priority").val()
                data.status = $("#status").val()
                data.Id = id;

                console.log(data,'formdata')
                var url = "{{isset($data)?route('updateScheduleTemplate'):route('saveScheduleTemplate')}}"

                ajaxWait(url,data).then(function(result,error){
                    console.log(result,'result')
                    if(result.Response=='Error')
                    {
                        notifyF("error",result.Msg,"danger",2000)
                    }

                    if(result.Response == 'Success')
                    {
                        notifyF("success",result.Msg,'success',2000)
                        $("#ScheduleCampaign")[0].reset()
                        location.reload()
                    }
                })



            })
        })
    </script>
     @if($data ?? '')
    <script>
            $(function(){
                $("#status").val('{{$data->status}}').attr("selected","selected");
                $("#scheduleFor").val('{{$data->schedule_for}}').attr("selected","selected");
                $("#scheduleAt").val('{{$data->schedule_at}}').attr("selected","selected");
                $("#priority").val('{{$data->priority}}').attr("selected","selected");
            })

    </script>
    @endif
	@endpush
@endsection