@extends('superAdmin.layouts.auth')

@section('title')
{{ env('APP_NAME') }} | Gift Cards
@endsection

@section('styles')
	<link href="{{ asset('assets/plugins/datatable/dataTables.bootstrap4.min.css') }}" rel="stylesheet" />
	<link href="{{ asset('assets/plugins/datatable/jquery.dataTables.min.css') }}" rel="stylesheet" />
@endsection

@section('content')
	<!-- MAIN BODY CONTENT -->
	<div class="top-header">
	    <h1>Manage Gift Cards</h1>
	    <a href="{{ route('superAdmin.addGiftCard') }}">
		    <div class="action-group">
		      <span class="add-company">
		        Add New Gift Card <img src="{{ asset('assets/images/circle-plus.svg') }}" alt="">
		      </span>
		    </div>
	    </a>
	</div>

	@if ($errors->any())
        <div class="alert alert-danger">
            <ul>
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif
    
	<div class="row">
	  	<div class="col-md-12">
	        <div class="card">
	            <div class="card-body">
	              	<!-- COmpanies table -->
	              	<div class="table-responsive">
	                	<table id="giftcard-table" class="table card-table dataTable table-hover table-vcenter fold-table" style="width:100%">
	                  		<thead>
	                    		<tr>
	                      			<th>Gift Cards</th>
	                      			<th>Created(Date|Time)</th>
	                      			<th width="15%">View</th>
                                    <th>id</th>
	                    		</tr>
	                  		</thead>
	                  		<tbody>
	                  		</tbody>
	                  	</table>
	            	</div>
	          	</div>
	        </div>
		</div>
	</div>
	<!--// MAIN BODY CONTENT -->
@endsection

@section('scripts')
<!-- Data tables -->
	<script src="{{ asset('assets/plugins/datatable/jquery.dataTables.min.js') }}"></script>
	<script src="{{ asset('assets/plugins/datatable/dataTables.bootstrap4.min.js') }}"></script>
	<!-- <script src="{{ asset('assets/js/datatable.js') }}"></script> -->

<script type="text/javascript">

var oTable = '';
$(document).ready(function () {
    oTable = $('#giftcard-table').DataTable({
        "language": {
            "lengthMenu": "Show: _MENU_ records per page",
            "zeroRecords": "Oops No record Found",
            "infoEmpty": "No records available",
            "infoFiltered": "(filtered from _MAX_ total records)"
        },
        paging: true,
        processing: true,
        serverSide: true,
        pagingType: 'full_numbers',
        ajax: {
            "url": "{{ route('superAdmin.giftCardList') }}",
            "type": "GET",
            "data": function(d) {
                d.checkstatus = $('#checkstatus').val();
            },
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')
            }
        },
        columns: [
            {
                data: 'retailer_name',
                //name: 'retailer_name',
                render: function (data, type, row) {
                  var title = row.retailer_name;
                  var count = title.length;
                  if(count < 50){
                    return title;
                  }else{
                    return title.substring(0, 50)+'...';
                  }
                  
                }
            },
            {
                data: "created_at",
                render: function (data, type, row) {
                  const created_date=new Date(row.created_at);
                  return created_date.getDate()+"/"+parseInt(created_date.getMonth()+1)+"/"+created_date.getFullYear()+" | "+created_date.getHours()+":"+created_date.getMinutes()+":"+created_date.getSeconds();
                }
            },
            {
                className: 'details-control',
                data: null,
                defaultContent: ''
            },
            { data: 'id', name: 'id' },
        ],
        'columnDefs': [
            {
                'targets': [2], /* column index */
                'orderable': false, /* true or false */
            },
            {
                'targets': [2], /* column index */
                "searchable": false
            },
            {
                "targets": [3],
                "visible": false
            }
        ],
        createdRow: function (row, data, index) {
            $(row).addClass("view");
        },
        'aaSorting': [3, 'DESC']
    });

    // Add event listener for opening and closing details
    $('#giftcard-table tbody').on('click', 'td.details-control', function () {
        var tr = $(this).closest('tr');
        var row = oTable.row( tr );
 
        if ( row.child.isShown() ) {
            row.child.hide();
            tr.removeClass('open');
        }else {
            row.child( format(row.data()) ).show();
            tr.addClass('open');
        }
    } );

});

function format ( d ) {
    return `<div class="find-table-content side-panel">
              <div class="find-sub-img">
                <img src="{{ asset('storage/images/giftcard/web') }}/`+d.gift_image+`" alt="">
              </div>
              <div class="sub-content">
                <p>`+d.gift_desc+`</p>
                <a href="{{ url('/superadmin/managegiftcard/edit-giftcard/`+d.id+`') }}" class="btn btn-primary" data-id="`+d.id+`">Edit</a>
              </div>
            </div>`;
}

</script>

@endsection