@extends('welcome')

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

@section('content')
    
    <div class="container mb-5">
        <div class="my-3">
            <form class="form-inline" method="POST" action="{{ route('dataExport') }}">
                @csrf
                <div class="form-group mb-2">
                    <label for="operator">Operator :</label>
                    {{-- <input type="text" class="form-control ml-2" autocomplete="off" name="operator" id="operator" placeholder="Operator" value="{{ $operator ? $operator : "" }}"> --}}
                    <select class="form-control ml-2" name="operator" id="operator" placeholder="Operator">
                        <option value=""></option>
                        @foreach ($operator as $item)
                            <option value="{{ $item->operator }}" {{ ($item->operator == $getOperator) ? 'selected' : "" }}> {{ $item->operator }} </option>
                        @endforeach
                        
                    </select>
                </div>
                <div class="form-group mx-sm-3 mb-2">
                    <label for="amount">Amount :</label>
                    {{-- <input type="text" class="form-control ml-2" autocomplete="off" name="amount" id="amount" placeholder="Amount" value="{{ $amount ? $amount : "" }}"> --}}
                    <select class="form-control ml-2" name="amount" id="amount" placeholder="Amount">
                        <option value=""></option>
                        @foreach ($amount as $item)
                            <option value="{{ $item->amount }}" {{ ($item->amount == $getAmount) ? 'selected' : "" }}> {{ $item->amount }} </option>
                        @endforeach
                    </select>
                </div>
                <button type="submit" name="action" value="search" class="btn btn-success mb-2">Search</button>
                <button type="submit" name="action" value="all" class="btn btn-primary mb-2 ml-2">All</button>
                <button type="submit" name="action" value="export" class="btn btn-primary mb-2 ml-2">Export</button>
                <button type="submit" name="action" value="delete" class="btn btn-danger mb-2 ml-2">Delete</button>
            </form>
        </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>Operator</th>
                        <th>Amount</th>
                        <th>Created At</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach ($data as $item)
                        <tr>
                            <td>{{ $item->id }}</td>
                            <td>{{ $item->phone }}</td>
                            <td>{{ $item->operator }}</td>
                            <td>{{ $item->amount }}</td>
                            <td>{{ $item->date }}</td>
                        </tr>
                    @endforeach
                </tbody>
            </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: 'Export',
            //     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: false,
        // ajax: '{!! url('getDirtyData') !!}',
        // columns: [
        //     { data: 'id', name: 'id' },
        //     { data: 'phone', name: 'phone' },
        //     { data: 'operator', name: 'operator' },            
        //     { data: 'amount', name: 'amount' },
        //     { data: 'date', name: 'date' }
        // ],
        
    });

    
    
   
</script>

@endsection

