@extends('admin.layouts.admin')
@section('title')
Admin | Site settings
@endsection

@section('styles')
<link rel="stylesheet" href="{{ asset('plugins/datatables/dataTables.bootstrap4.css') }}">
<link href="https://cdn.jsdelivr.net/gh/gitbrent/bootstrap4-toggle@3.4.0/css/bootstrap4-toggle.min.css" rel="stylesheet">
<link rel="stylesheet" href="{{ asset('css/custom.button-switch.css') }}">
@endsection

@section('content')
<!-- Content Header (Page header) -->
    <div class="content-header">
      <div class="container-fluid">
        <div class="row mb-2">
          <div class="col-sm-6">
            <h1 class="m-0 text-dark">Site settings</h1>
          </div><!-- /.col -->
          <div class="col-sm-6">
            <ol class="breadcrumb float-sm-right">
              <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">Dashboard</a></li>
              <li class="breadcrumb-item"><a href="#">Settings</a></li>
              <li class="breadcrumb-item active">Site settings</li>
            </ol>
          </div><!-- /.col -->
        </div><!-- /.row -->
      </div><!-- /.container-fluid -->
    </div>
    <!-- /.content-header -->

    <!-- Main content -->
    <section class="content">
      <div class="container-fluid">
        <!-- Small boxes (Stat box) -->        
        <!-- /.row -->
        <!-- Main row -->
        <div class="row">
        <div class="col-12">
          <div class="card">            
            <!-- /.card-header -->
            <div class="card-body table-responsive">
              <table id="artists-table" class="table table-bordered table-hover" style="width: 100%;">
                <thead>
                <tr>
                  <th>Name</th>                  
                  <th>Value</th>
                  <th></th>                  
                </tr>
                </thead>
                <tbody>                
                </tbody>                
              </table>
            </div>
            <!-- /.card-body -->
          </div>
          <!-- /.card -->
        </div>
        <!-- /.col -->
      </div>        
        <!-- /.row (main row) -->
      </div><!-- /.container-fluid -->
    </section>
    <!-- /.content -->
@endsection

@section('scripts')
<script type='text/javascript' src="{{asset('plugins/datatables/jquery.dataTables.js') }}"></script> 
<script type='text/javascript' src="{{asset('plugins/datatables/dataTables.bootstrap4.js') }}"></script>
<script src="https://cdn.jsdelivr.net/gh/gitbrent/bootstrap4-toggle@3.4.0/js/bootstrap4-toggle.min.js"></script>
<script type="text/javascript">
    var oTable = '';
    $(document).ready(function () {
        oTable = $('#artists-table').DataTable({
            "language": {
                "lengthMenu": "Show: _MENU_ records per page",
                "zeroRecords": "Oops No record Found",
                //"info": "Showing page _PAGE_ of _PAGES_",
                "infoEmpty": "No records available",
                "infoFiltered": "(filtered from _MAX_ total records)"
            },
            processing: true,
            serverSide: true,
            ajax: baseUrl + 'admin/setting/content',
            columns: [
                { data: 'setting_name', name: 'setting_name' }, 
                {
                    data: null,
                    className: 'text-left',
                    render: function (data, type, row) { 
                        if(data.is_image && data.setting_value)
                        {
                            return '<img src="' + baseUrl + 'storage/images/setting_images/images/web/'+data.setting_value+'" style="max-height:5%" >';
                        }
                        else{
                            return '<span>'+(data.setting_value).substring(0,70)+((data.setting_value).length>'70'?'...':'');+'</span>';
                        }
                    }
                },              
                {
                    data: null,
                    className: 'text-center',
                    render: function (data, type, row) {
                        return '<a  title="Edit" href="' + baseUrl + 'admin/setting/content/edit/' + data.id + '" class="edit-btn btn btn-info btn-xs"><i class="fa fa-pencil" aria-hidden="true"></i></a>'+'\xa0\xa0\xa0';                       
                    }
                }
            ],
            'columnDefs': [ {
                'targets': [1, 2], /* column index */
                'orderable': false, /* true or false */
            }],
            'aaSorting': []
        });
    });
    
    $(document).on('click', '.btn-deleteRecord11', function () {
        var r = confirm("Are you sure you want to delete this record ?");
        
        if (r === true) {            
            var serviceRow = $(this).attr('data-id');
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')
                }
            });
            $.ajax({
                url: baseUrl + 'admin/user/delete',
                method: 'post',
                dataType: 'json',
                data: {                    
                    id: serviceRow
                },
                success: function (result) {
                    if (parseInt(result) == parseInt(1)) {                        
                        oTable.draw();
                    } else {
                        //Do nothing
                    }
                }
            });
        } else {
            return false;
        }
    });

    $(document).on('change', '.active-status', function (event) {
        
        var status = "inactive";
        if ($(this).is(':checked')) {
            status = "active";
        }        
        //console.log(status);        
            
        var serviceRow = $(this).attr('data-id');
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')
            }
        });
        $.ajax({
            url: baseUrl + 'admin/setting/home-banner/change-status',
            method: 'post',
            dataType: 'json',
            data: {
                is_active: status,
                id: serviceRow,
                _token: $('meta[name="csrf_token"]').attr('content')                   
            },
            success: function (result) {
                if (parseInt(result.res) == parseInt(1)) {
                    showSuccessMsg(result.msg);
                    oTable.draw();
                } else {
                    //Do nothing
                }
            }
        });
        
    });
    
    
</script>
@endsection