@extends('layouts.admin')


@section('style')
    <style>
        a.btn:not(last-child) {
            margin-right: 5px;
        }

        .card-header a {
            margin-left: 5px;
        }
    </style>
@endSection

@section('script')
<script>
    $(function () {
        var t = $('#campaigns_table').DataTable({
            processing: true,
            serverSide: true,
            pageLength: 10,
            lengthMenu: [
                [10, 25, 50, 100, 200, 500, -1],
                [10, 25, 50, 100, 200, 500, "All"]
            ],
            dom:
                "<'row p-2'<'#create_voucher.col-sm-6 mb-2 text-left'><'#import_export.col-sm-6 mb-2 text-left text-sm-right'B>>" +
                "<'row px-2'<'col-sm-6'l><'col-sm-6'f>>" +
                "<'row'<'col-sm-12 overflow-auto'tr>>" +
                "<'row p-2'<'col-sm-5'i><'col-sm-7'p>>",
            buttons: [{
                extend: 'csv',
                text: '<i class="fas fa-file-export"></i> Export CSV',
                className: 'btn btn-sm btn-default'
            }],
            autoWidth: false,
            ajax: {
                url: "{{ route('admin.list_campaigns') }}"
            },
            columns: [
                {data: 'DT_RowIndex', name: 'DT_RowIndex'},
                {data: 'name', name: 'name'},
                {data: 'campaign_type', name: 'campaign_type'},
                {data: 'campaign_start_date', name: 'campaign_start_date'},
                {data: 'campaign_end_date', name: 'campaign_end_date'},
                {data: 'status', name: 'status'},
                {data: 'action', name: 'action'}
            ],
            columnDefs: [{
                targets: [0,6],
                searchable: false,
                orderable: false,
            }, {
                targets: [3,4,5,6],
                className: 'text-center'
            }]
        });

        var create_btn = `<a role='button' href="{{ route('admin.add_campaign') }}" class="mr-2 btn btn-sm btn-secondary"><i class="fas fa-plus"></i> Add New Campaign</a>`;
        var import_csv = `<a role='button' href="{{ route('admin.bulk_upload_campaigns') }}" class="mr-2 btn btn-sm btn-default"><i class="fas fa-file-import"></i> Import CSV</a>`;
        $('#import_export .dt-buttons').prepend(import_csv);
        $('#create_voucher').prepend(create_btn);
    });
</script>

@endSection

@section('content')

@component('admin.components.tabs')
<div class="row mb-3 d-none">

    <div class="col-6">
        <a role='button' href="{{ route('admin.add_campaign') }}" class="mr-2 btn btn-sm btn-secondary"><i class="fas fa-plus"></i> Add New Campaign</a>
    </div>

    <div class="col-6 text-right">
        <a role='button' href="{{ route('admin.bulk_upload_campaigns') }}" class="mx-0 btn btn-default"><i class="fas fa-file-import"></i> Bulk Upload</a>
    </div>
</div>

<table id="campaigns_table" class="table table-bordered table-hover dataTable">
    <thead>
    <tr>
        <th>No.</th>
        <th>Name</th>
        <th>Type</th>
        <th>Start Date</th>
        <th>End Date</th>
        <th>Status</th>
        <th></th>
    </tr>
    </thead>

    <tbody></tbody>
</table>
@endcomponent
@endsection