@extends('welcome')

@section('style')
    <style>
        .mydtbtn{
            background-color: #3490dc !important;
            border-radius: 3px !important;
        }
    </style>
@endsection

@section('content')
    
    <div>
        <div class="my-3">
            @if(session('row'))
                <div class="alert alert-success alert-dismissible fade show" role="alert">
                    <strong>{{ session('row') }} </strong>rows successfully insert!
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
            @endif
        </div>

        <div>
            <table id="example" class="table table-striped table-bordered" style="width:100%">
                <thead>
                    <tr>
                        <th>Id</th>
                        <th>Phone</th>
                        <th>Service</th>
                        <th>Operator</th>
                        <th>Date</th>
                        <th>Created At</th>
                        <th>Updated At</th>
                    </tr>
                </thead>
            </table>
        </div>
    </div>
@endsection

@section('script')

<script>
    
    let table = $('#example').DataTable({
        dom: "<'row'<'col-sm-12 col-md-2'l><'col-sm-12 col-md-4'B><'col-sm-12 col-md-6'f>>" + "<'row'<'col-sm-12'tr>>" + "<'row'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7'p>>",
        lengthMenu: [[10, 25, 50, -1], [10, 25, 50, "All"]],
        buttons: [
            // { extend: 'excel', className: 'mr-3 mydtbtn' },
            // { extend: 'csv',text: 'Export CSV', className: 'mr-3 mydtbtn' },
            {
                text: 'Clean',
                className: 'mr-2 mydtbtn',
                action: function ( e, dt, node, config ) {
                    axios.get('{!! url('dataCleaning') !!}')
                    .then(({data}) => {
                        this.ajax.reload();
                    })
                },
            },
            {
                text: 'Get Operator',
                className: 'mr-2 mydtbtn',
                action: function ( e, dt, node, config ) {
                   axios.get('{!! url('getOperator') !!}')
                    .then(({data}) => {
                        this.ajax.reload();
                    })
                },
            },
            {
                text: 'CSV(phone)',
                className: 'mr-2 mydtbtn',
                action: function ( e, dt, node, config ) {
                   window.open('{!! url('dataExport') !!}')
                },
            },
            
            {
                text: 'Del',
                className: 'mydtbtn',
                action: function ( e, dt, node, config ) {
                   axios.get('{!! url('removeData') !!}')
                    .then(({data}) => {
                        this.ajax.reload();
                    })
                },
            },
        ],
        responsive: true,
        processing: true,
        serverSide: true,
        ajax: '{!! url('getDirtyData') !!}',
        columns: [
            { data: 'id', name: 'id' },
            { data: 'phone', name: 'phone' },
            { data: 'service', name: 'service' },
            { data: 'operator', name: 'operator' },
            { data: 'date', name: 'date' },
            { data: 'created_at', name: 'created_at' },
            { data: 'updated_at', name: 'updated_at' }
        ]
    });
    
   
</script>

@endsection

