@extends('layouts.layout-admin')
@section('styles')
  <!-- DataTables -->
  <link rel="stylesheet" href="{{ asset('plugins/datatables-bs4/css/dataTables.bootstrap4.min.css') }}">
  <link rel="stylesheet" href="{{ asset('plugins/datatables-responsive/css/responsive.bootstrap4.min.css') }}">
  <link rel="stylesheet" href="{{ asset('plugins/datatables-buttons/css/buttons.bootstrap4.min.css') }}">
  <style>
    .card_css{
        box-shadow: 0 2px 5px 0 rgb(0 0 0 / 16%), 0 2px 10px 0 rgb(0 0 0 / 12%);
    }
    .card-header{
      background-color:#F2F3F4;
      / background-color:#6c757d; /
    }
    .badge_css{
        background-color:#343A40;
        color:#fff;
    }
    .card{
        transition: transform .2s;
        /* width: 350px;
        height: 150px; */

    }
    .card:hover {
      box-shadow: 0px 10px 20px 5px rgba(0, 0, 0, 0.2);
      transform: translateY(-5px);
    }
    .btn-xs:hover{
        cursor:pointer;
    }
    #modal_footer{
        display: none;
    }

  </style>
@endsection
@section('content')
<!-- page start-->
 <!-- Content Header (Page header) -->
 <section class="content-header">
  <div class="container-fluid">
    <div class="row mb-2">
      <div class="col-sm-6">
        <h1>{{ __('Setting') }}</h1>
      </div>
      <div class="col-sm-6">
        <ol class="breadcrumb float-sm-right">
          <li class="breadcrumb-item"><a href="#">{{ __('Home') }}</a></li>
          <li class="breadcrumb-item active">{{ __('Setting') }}</li>
        </ol>
      </div>
    </div>
  </div><!-- /.container-fluid -->
</section>
<!-- Main content -->
<section class="content">
 
    <div class="container-fluid ">
        <div class="row">
            {{-- stat box --}}
            @foreach ($settings as $row)
                <div class="col-lg-3 col-12 mt-2">
                    <div class="card card_css">
                    <div class="card-header">
                        {{ $row->display_name}}
                    </div>
                    <div class="card-body">
                      @php                     
                      $unit_name= (!(is_null($row->unit_id)))?$row->unit->unit_name:"";
                      @endphp
                        <label><h4><span class="badge badge_css">{{$row->setting_value}}{{" "}}{{$unit_name}} </span></h4></label>
                        <a class="bg-info btn-xs float-right" onclick="ajaxSetting({{ $row->setting_id}});" > <i class="fa  fa-edit"></i> Edit</a>
                        <ion-icon name="aperture-outline"></ion-icon>
                    </div>
                    </div>
                </div>
            @endforeach
        </div>
    </div>
  
</section>
<!-- page end-->
@endsection
@section('scripts')

<!-- DataTables  & Plugins -->
<script src="{{ asset('plugins/datatables/jquery.dataTables.min.js') }}"></script>
<script src="{{ asset('plugins/datatables-bs4/js/dataTables.bootstrap4.min.js') }}"></script>
<script src="{{ asset('plugins/datatables-responsive/js/dataTables.responsive.min.js') }}"></script>
<script src="{{ asset('plugins/datatables-responsive/js/responsive.bootstrap4.min.js') }}"></script>
<script src="{{ asset('plugins/datatables-buttons/js/dataTables.buttons.min.js') }}"></script>
<script src="{{ asset('plugins/datatables-buttons/js/buttons.bootstrap4.min.js') }}"></script>
<script src="{{ asset('plugins/jszip/jszip.min.js') }}"></script>
<script src="{{ asset('plugins/pdfmake/pdfmake.min.js') }}"></script>
<script src="{{ asset('plugins/pdfmake/vfs_fonts.js')}}"></script>
<script src="{{ asset('plugins/datatables-buttons/js/buttons.html5.min.js')}}"></script>
<script src="{{ asset('plugins/datatables-buttons/js/buttons.print.min.js')}}"></script>
<script src="{{ asset('plugins/datatables-buttons/js/buttons.colVis.min.js')}}"></script>
<script type="text/javascript">
$(document).ready(function(){
    $.ajaxSetup({
          headers: {
              'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
          }
    });

    var table = $('#setting_table').DataTable({
        processing: true,
        serverSide: true,        
        ajax: {
          url: "{{ route('setting.index') }}",
          type: 'GET',
          data: function (d) {
            d.name = '';
          }
        },
        columns: [
            {data: 'setting_name', name: 'setting_name'},            
            {data: 'setting_value', name: 'setting_value'},                  
            {data: 'action', name: 'action', orderable: false},
        ],
        order: [],
        responsive:true,
        lengthChange: false,
        autoWidth: false,
        dom: 'lfBrtip',        
        buttons: ["copy", "csv", "excel", "pdf", "print", "colvis"],
        drawCallback: function( settings ) {
          $('[data-toggle="tooltip"]').tooltip(); // for tooltips in controls
          $('.deletesetting').on('click',function(){
              var x = confirm("Do you want to delete the setting?");
              if(x == true) { 
              var settingid = $(this).data('setting'); 
                  $.ajax({
                      url: "{{ route('delete-setting') }}",
                      data: { "id": settingid },
                      type: "post",
                      dataType: "json",
                      success: function (data) {
                        window.location.reload();
                      }
                  });
              }
            });
           
          }        
    }).buttons().container().appendTo('#example1_wrapper .col-md-6:eq(0)');    
});
function getChangeApproveStatusForm(user_id, isApproved){
  $('#myModal' ).modal();
    $('#modal_footer' ).html('');
    $('#modal_title' ).html( 'Change Approve Status Form' );
    // if(user_id && isApproved==0) {
        
    // }
}
function ajaxSetting(setting_id){
        $.ajax({
            url: "{{ route('setting.ajax-edit') }}",
            data: { "setting_id": setting_id},
            type: "post",
            dataType: "html",
            cache: false,
            success: function (html) {
                // alert(html)
                $( '#myModal' ).modal({ backdrop: 'static', keyboard: false });
               $( '#modal_body' ).html(html);
               $('#modal_title' ).html( 'Update Setting' );
               $('#modal_footer' ).html('');
            }
        });

}

function changeApproveStatus()
{
  var approve_status_value = $('#change_approve_status_form #approve_status_value').val();
    var user_id = $('#change_approve_status_form #user_id').val();
    // if(approve_status_value && user_id) {
        
    // }
}
</script>
@endsection