@extends('layouts.app')
@section('title', 'Custom Templates')

@section('content')
<style>
.badge
{font-size: 1rem;
    font-style: normal;
    font-weight: 400;
    font-family: "IBM Plex Sans", sans-serif;
    line-height: 1.5;
  margin-top:5px;}
  </style>
      <style>
	.btn-toggle.active {
    background-color: #2196f3; /* Set to the desired green color */
    color: white; /* Set to the desired text color */
    border-color: green; /* Set to the desired border color */
}

/* Style for the inactive state */
.btn-toggle:not(.active) {
    background-color: red; /* Set to the desired red color */
    color: white; /* Set to the desired text color */
    border-color: red; /* Set to the desired border color */
}
	</style>
    <link href="{{asset('assets/css/bootstrap4-toggle.min.css')}}" rel="stylesheet">
<!-- Main content -->
        <section class="content">

      <div class="row">

       
        
        <div class="col-12">
          <div class="box">
            <div class="box-body">           
              <h4 class="box-title text-info mb-0"><i class="fa fa-user fa-sx"></i>  Custom Template</h4>
              <a href="{{url('/crm-custom-template/add')}}" type="submit"  style="float:right" class="waves-effect waves-light btn btn-rounded btn-primary btn-bitbucket btn-sm mb-5"><i class="fa fa-plus"></i>  Add Custom Template</a>
             <hr class="my-15">
              <div class="table-responsive">
                <table id="tickets" class="table mt-0 table-hover no-wrap" data-page-size="10">
                  <thead>
                    <tr>
                    <th>#</th>
                                    <th>Template Name</th>
                                    <th>Status</th>                                    
                                    <th>Action</th>

                            </tr>
                  </thead>
                  <tbody>
                  @if(!empty($email_templates))
                    @foreach($email_templates as $key => $list)
                    <tr>
                      <td>{{$key+1}}</td>
                      <td>{{$list->template_name}}</td>


                      <td><button type="button"data-id="{{$list->id}}"  class="btn btn-sm btn-toggle  @if($list->status == '1') active @endif" data-bs-toggle="button" aria-pressed="true" autocomplete="off">
                                                                                                <div class="handle"></div>
                                                                                                </button>
                      </td>

                      <td>
                            <a  style="cursor:pointer;margin-right:5px;"href="{{ url('/crm-custom-template/' . $list->id . '/edit') }}"  type="button" data-toggle="tooltip" data-placement="top" title="Edit"><i class="fa fa-edit fa-lg"></i></a>
                         
                              <a style="cursor:pointer;" type="submit" class="show_confirm" data-toggle="tooltip"data-id="{{$list->id}}" title='Delete'><i class="fa fa-trash-o fa-lg"></i></a>
                         
                          
                            <!-- <label class="switch"><input data-id="{{$list->id}}" class="toggle-class" type="checkbox" data-onstyle="success" data-offstyle="danger" data-toggle="toggle" data-on="Active" data-off="InActive" {{ $list->status ? 'checked' : '' }}><span class="slider_button round"></span>
                          </label> -->
                     
                      </td>
                    </tr>
                    @endforeach
                    @endif
         
                  </tbody>
                </table>
              </div>
            </div>
          </div>
        </div>
     
      
            <div class="modal fade" id="delete" tabindex="-1" aria-labelledby="deleteLabel" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="myModalLabel">Confirm Delete</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        
                        <div class="modal-body">
                            <p>You are about to delete <b><i class="title"></i></b>Email template.</p>
                                <p>Do you want to proceed?</p>
                                <input type="hidden" class="form-control" name="email_id" value="" id="email_id">
                            
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">Close</button>
                                <button type="submit"name="submit" class="btn btn-danger btn-sm deleteLabel">Delete</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
</div>
      <!-- /.row -->
    </section>
        <!-- /.content -->

        <script src="https://code.jquery.com/jquery-3.7.0.js" integrity="sha256-JlqSTELeR4TLqP0OG9dxM7yDPqX1ox/HfgiSLBj8+kM=" crossorigin="anonymous"></script>
        <script src="{{asset('assets/js/bootstrap4-toggle.min.js')}}"></script>

        <script type="text/javascript">

$(".show_confirm").click(function() {
    var delete_id = $(this).data('id');
        $("#delete").modal('show');
        $("#email_id").val(delete_id);

    });
$(document).on("click", ".deleteLabel", function() {
var delete_id = $("#email_id").val();
var el = this;
$.ajax({
    url: 'crm-custom-template-delete/' + delete_id,
    type: 'get',
    success: function(response) {
        window.location.reload(1);
    }
});

});
 

  $(function()
  {
    $("#tickets").on("click", ".btn-toggle", function ()
    {
      var button = $(this);
      var status = button.hasClass('active') ? 1 : 0;
      var email_template_id = $(this).data('id'); 
      $.ajax({
        type: "GET",
        dataType: "json",
        url: '/crm-changeCustomTemplateStatus/'+email_template_id+'/'+status,
        success: function(data)
        {
          if(data.status == 'true')
          {
            $('#loading').show();
          console.log(data.success);
          window.location.reload(1);
          }
          else
          {
            
          }
          
        }
      });
    })
  
  })

</script>

@endsection