@extends ('backend.layouts.app')

@section('title', trans('labels.backend.banners.management'))

@section('page-header')
    <h1>{{ trans('labels.backend.banners.management') }}</h1>
@endsection

@section('content')
    <div class="box box-info">
        <div class="box-header with-border">
            <h3 class="box-title">Banner Ads Header</h3>

            <div class="box-tools pull-right">

            </div>
        </div><!--box-header with-border-->

        <div class="box-body">
            <div class="table-responsive data-table-wrapper">
                <table id="banners-table" class="table table-condensed table-hover table-bordered">
                    <thead>
                        <tr>
                            <th>Device</th>
                            <th>Slug</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                    <thead class="transparent-bg">
                        <tr>
                            <th></th>

                            <th></th>
                            <th></th>
                        </tr>
                    </thead>
                    <tbody>

                    </tbody>
                </table>
            </div><!--table-responsive-->
        </div><!-- /.box-body -->
    </div><!--box-->
@endsection

@section('after-scripts')
    {{-- For DataTables --}}
    <script src="{{ mix('js/dataTable.js') }}"></script>

    <script>
        //Below written line is short form of writing $(document).ready(function() { })

        $(document).ready(function() {
            fetch_data();

            function fetch_data() {
                var _token = $('input[name="_token"]').val();
                $.ajax({
                    url: "{{ url('admin/banners/fetch_data') }}",
                    data: {
                        _token: _token
                    },
                    dataType: "json",
                    type: "post",
                    success: function(data) {
                        var html = '';
                        //console.log(data);
                        for (var count = 0; count < data.length; count++) {
                            //console.log(data[count].device);
                            html += '<tr id="view_' + data[count].id + '">';
                            html += '<td>' + data[count].device + '</td>';
                            html += '<td>' + data[count].slug + '</td>';
                            html += '<td><a href="headeredit/' + data[count].id +
                                '" class="btn btn-danger btn-xs edit"><i data-toggle="tooltip" data-placement="top" title="" class="fa fa-pencil" data-original-title="Edit"></i></td></tr>';

                        }

                        $('#banners-table tbody').html(html);
                    }
                });
            }
        });
    </script>
@endsection