@extends('layouts.app', ['pageSlug' => 'customerSetup'])

@section('content')
<div class="splynx_top_nav">
    <div style="float: left">
        <ul class="splynx_breadcrumbs">
            <li><span>RelationShip</span></li>
        </ul>
    </div>
    <div class="clearfix"></div>
</div>
<div class="spl-page-panel">
    <div class="row">
        <div class="col-lg-12">
            RelationShip
        </div>
    </div>
    <br>
    <div class="col-lg-4 panel panel-default">
        <div class="panel-body p-3">        
            <h5>Add/Update Relation</h5>
            <form id="send_sms_form" class="form-horizontal" role="form" action="{{route('customer.sendsms')}}" method="POST">
                @csrf
                <fieldset>
                <input type="hidden" name="id" value="{{isset($gpdata) && $gpdata != null ? $gpdata->id : ''}}">
                <div class="form-group">
                    <label class="control-label col-lg-4 col-md-3">
                        Group
                    </label>

                    <div class="col-lg-8 col-md-9">
                        <select style="width: 100%;" class="select2 select2-hidden-accessible" name="group" id="group">
                            <option value="">select group</option>
                            @foreach ($groups as $g)
                            @if(empty($g->group)) @continue @endif
                            <option value="{{$g->group}}" {{isset($gpdata->group) && $gpdata->group == $g->group ? 'selected' : ''}}>{{$g->group}}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
                @php
                    $tid = isset($gpdata) && $gpdata != null ? explode(",",$gpdata->traffic_ids) : null;
                @endphp
              
                <div class="form-group">
                    <label class="control-label col-lg-4 col-md-3">
                        Traffic
                    </label>

                    <div class="col-lg-8 col-md-9">
                        <select style="width: 100%;" class="select2 select2-hidden-accessible" name="traffic[]" id="traffic" multiple>
                            @foreach ($traffics as $t)
                            <option value="{{$t->id}}" @if ($tid != null && in_array($t->id, $tid)) selected @endif>{{$t->ip}}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
                
                <div class="form-group">
                    <div class="col-lg-12 col-md-12">
                        <input type="button" value="Save" class="btn btn-primary btn-sm pull-right" id="save_btn">
                    </div>
                </div>

            </fieldset>

            </form>
        </div>
    </div>
    <div class="col-lg-8 panel-default">
        <div class="panel-body p-3">
            <h5>Relation Table</h5>
            <div id="relation_db">
            </div>
        </div>
    </div>
</div>
@endsection

@push('js')

<style>
</style>
    <script>
            
            $(".select2").select2();

            $(function() {

                getRelation();  
            
            });

            function getRelation(){

                let uri = '{{route('customer.relation.get')}}';

                axios.post(uri, null).then(res => {
                    var html = [];
                    $('#relation_db').html(res.data);
                });
            }

            function storeRelation(){
                if($('#group').val() == '') {
                    toastr.error('please insert group name');
                    return false;
                }

                let uri = '{{route('customer.relation.store')}}';
                let data = $('#send_sms_form').serialize();
                axios.post(uri, data).then(res => {

                    toastr.success('successfully updated');
                    window.location.href = '{{url("admin/customer/relation")}}';
                    getRelation();
                });
            }

            $('#save_btn').click(function(){
                storeRelation();
            });

            function confirmDelete(id) {
                var result = confirm( "Do you want to delete this?" );
                if (result) {
                    let uri = '{{route('customer.relation.delete')}}';
                    let data = {
                        group_traffic_id: id
                    };
                    axios.post(uri, data).then(res => {

                        toastr.success('successfully deleted');
                        getRelation();

                    });
                }
            }
    </script>
@endpush