@extends('layouts.admin.master')

@section('title')
    Default Number 
@endsection


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

@section('content')	
	<div class="container-fluid">
    <div class="page-header">
      <div class="row">
        <div class="col-lg-6">
          <h3>Default Number</h3>
          <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="javascript:void(0)">Default Number</a></li>    
            <li class="breadcrumb-item"><a href="javascript:void(0)">List</a></li>            

          </ol>
        </div>
        <div class="col-lg-6">
          <div class="bookmark">
            <ul>
            <li><a class="btn btn-primary-light" href="" data-bs-toggle="modal" data-bs-target="#add-number" >Add</a></li>    
            </ul>
          </div>
        </div>
      </div>
    </div>
</div>
<div class="container-fluid">
    <div class="row justify-content-center">
        <div class="col-sm-12">
            <div class="card">
                <div class="card-header" style="padding:15px;">
                    <h5>Default Number</h5>
                </div>
                <div class="card-block row">
                    <div class="col-sm-12 col-lg-12 col-xl-12">
                        <div class="table-responsive">
                            <table class="table">
                                <thead class="table-primary">
                                    <tr>
                                        <th scope="col">#</th>                                        
                                        <th scope="col">Name</th>
                                        <th scope="col">Number</th>
                                        <th scope="col">Status</th>
                                        <th scope="col">Action</th>
                                        <th scope="col">#</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @php
                                    $count = 1;                                              
                                    @endphp
                                    @foreach($data as $list)
                                    <tr>
                                        <th scope="row">{{$count++}}</th>
                                        <td>{{$list->groupName}}</td>
                                        <td>{{$list->number}}</td>                                    
                                        <td><span class="badge badge-{{$list->status=='Active'?'primary':'info'}}">{{$list->status}}</span></td>
                                        <td>                                            
                                             <div class="media">
                                                <div class="media-body icon-state">
                                                <label class="switch">
                                                    <input type="checkbox" {{$list->status=='Active'?'checked':''}} class="actionChange"><span class="switch-state"></span>
                                                    <input type="hidden" value="{{encrypt_decrypt('encrypt',$list->df_Id)}}">
                                                </label>
                                                </div>
                                            </div>
                                        </td>
                                        <td>
                                            <div class="item-action dropdown ml-2">
                                                <a href="javascript:void(0)" data-toggle="dropdown"><i class="fa fa-ellipsis-v"></i></a>
                                                <div class="dropdown-menu dropdown-menu-right">
                                                    <a href="javascript:void(0)" onclick="updateNumber()" class="dropdown-item"> Edit </a>                                                    
                                                    <a href="{{encrypt_decrypt('encrypt',$list->df_Id)}}"  class="dropdown-item deleteNumber"> Delete </a>                                                    
                                                </div>
                                            </div>                                                                         
                                        </td>
                                    </tr>               
                                    @endforeach                    
                                </tbody>                                
                            </table>
                        </div>                        
                    </div>
                </div>                
            </div>
            <div class="mb-5 table-responsive">
                <ul id="demo" class="pagination justify-content-center pagination-primary">
                </ul>						
            </div>
        </div>
    </div>

    <!-- ------------------------------------------------------------------------ -->
    <div class="modal fade modal-bookmark" id="add-number" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Add Default Number</h5>
                    <button class="btn-close" type="button" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form class="form-bookmark needs-validation" id="saveImage" novalidate="">
                    <div class="form-row">
                        <div class="row">
                            <div class="col">
                                <div class="mb-3 row">
                                    <label class="form-label">Group Name</label>
                                    <div class="">
                                        <input class="form-control" type="text" id="groupName" name="groupName"/>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col">
                                <div class="mb-3 row">
                                    <label class="form-label">Number</label>
                                    <div class="">
                                        <input class="form-control" type="text" id="groupNumber" name="groupNumber"/>
                                        <span>Multiple number separated with comma</span>
                                    </div>
                                </div>
                            </div>
                        </div>      
                        <div class="row">
                            <div class="col">
                                <div class="mb-3 row">
                                    <label class="form-label">Status</label>
                                    <div class="">
                                      <select class="form-select" name="status" id="status" required>
                                        <option value="">--Select Status--</option>
                                        <option value="Active">Active</option>
                                        <option value="Inactive">Inactive</option>                                        
                                     </select>
                                    </div>
                                </div>
                            </div>
                        </div>              
                    </div>
                    <button class="btn btn-secondary" type="submit">Add</button>
                    </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/js/app.min.js')}}"></script>
    <script src="{{asset('assets/js/pagination.js')}}"></script>
    <script src="{{asset('assets/functions/common.js')}}"></script>
    
       <script>           
        $(function() {
            $('#demo').twbsPagination({
                totalPages: 50,
                visiblePages: 5
                });
        });

        $(function(){
            $(".actionChange").change(function(){
                $(this).closest('td').find('input[type=hidden]')
                var loader = ` <div class="loader-box" style="height:0;float:left;position:relative;top:20px;left:10px;font-size:18px">
                                    <div class="loader-38"></div>
                            </div>`
                $(this).closest('tr').find('td').eq(2).html(loader) 
                var id = $(this).closest('td').find('input[type=hidden]').val()                
                var data = {'Id':id}
                ajaxWait("{{route('updateDefaultNumberStatus')}}",data).then(result => {   
                    console.log(result);
                    if(result.Response == 'Success')
                    {
                        var status = result.Msg                   
                        var badgeClass = status=="Active"?"primary":"info"                    
                        var tmpHtml = `<span class="badge badge-${badgeClass}">${status}</span>`                                
                        $(this).closest('tr').find('td').eq(2).html(tmpHtml)
                    }  
                    else
                    {
                        notifyF("error","Something Went Wrong",'Danger',2000)
                        location.reload()
                    }                  
                })
            })
        })
        $(function(){
            $("#saveImage").submit(function(evt){
                evt.preventDefault();
                var formData = $(this).serialize()
                console.log(formData)
                var file = $("#groupNumber").val()
                var num = $("#groupName").val()
                if(file == '')
                {
                    notifyF("Error",'Name is required','danger',2000) 
                    return false                   
                }
                if(num == '')
                {
                    notifyF("Error",'Number is required','danger',2000) 
                    return false                   
                }
                $.ajax({
                    url:"{{route('saveDefaultNumber')}}",
                    type:'post',
                     data: formData,                    
                    headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},                    
                    success:function(response)
                    {
                        console.log(response,'rekkekeke')
                        if(response.Response=='Success')
                        {
                            notifyF("success",response.Msg,'primary',2000)
                        }
                        else
                        {
                            var counter = 0
                            $.each(response.Msg,function(index,value){
                                console.log(index,'adk')
                                console.log(value,'adk')
                                counter = counter + 1;
                                var timer = counter * 1000
                                notifyF("Error",value,'danger',timer)
                            })
                        }
                        $("#saveImage")[0].reset()
                        location.reload()
                    }

                })

            })
        })    

        $(function(){
            $(".deleteImage").click(function(e){
                e.preventDefault()
                var link = $(this).attr('href')
                console.log(link,'kfdjjjjjj')
                var data ={Id:link}
                $.ajax({
                    url:"{{route('deleteImage')}}",
                    type:'post',
                     data: {Id:link},              
                    headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
                    success:function(response)
                    {
                        console.log(response,'rekkekeke')
                        if(response.Response=='Success')
                        {
                            notifyF("success",response.Msg,'danger',2000)
                        }
                        else
                        {
                            var counter = 0
                            $.each(response.Msg,function(index,value){
                                console.log(index,'adk')
                                console.log(value,'adk')
                                counter = counter + 1;
                                var timer = counter * 1000
                                notifyF("Error",value,'danger',timer)
                            })
                        }
                        location.reload()
                    }

                })

            })
        })

           </script>
	@endpush
@endsection