@extends('layouts.app', [
    'navClass' => 'navbar-light bg-secondary',
    'parentSection' => 'laravel',
    'elementName' => 'client-management'
])

@section('title', 'Pagamentos |')
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer" />

@section('content')
    @component('layouts.headers.auth')
        @component('layouts.headers.breadcrumbs')
            @slot('title')
			Pagamentos
            @endslot

            <li class="breadcrumb-item"><a class="text-default" href="{{ route('sales.index') }}">Meus Pagamentos</a></li>
        @endcomponent
    @endcomponent

    <div class="container-fluid mt--6">
        <div class="row">
            <div class="col">
                <div class="card">
                    <div class="card-header">
                        <div class="row align-items-center">
                            <div class="col-8">
                                <h3 class="mb-0">Lista de Pagamentos</h3>
                                <p class="text-sm mb-0">
                                        Abaixo você encontra os pagamentos cadastradas no TravelTogether
                                    </p>
                            </div>
                            <div class="col-4 text-right">
                                <a href="{{ route('payments.create') }}" class="btn btn-sm btn-primary">Novo Pagamento</a>
                            </div>
                        </div>
                    </div>

                    <div class="col-12 mt-2">
                        @include('alerts.success')
                        @include('alerts.errors')
                    </div>
                    <br>
                    {{-- Filters --}}
                    <div class="ml-4 mr-4" style="background-color: #F2F3F9;border-radius:10px">
                        <p class="form-control-label mb-0 ml-4 mt-4" for="input-name">Filtros</p>
                        <form action="{{ route('salesfilter') }}" method="POST" autocomplete="off"
                            enctype="multipart/form-data">
                            @csrf
                            {{-- 1 --}}
                            <div class="row text-sm mb-0 ml-2 mr-2" id="row1" style="vertical-align:middle;align-items:center">
                                <div class="col-4 mt-2 text-sm mb-0">
                                    <select name="filter1" id="filter1" value="{{ old('filter1') }}" class="form-control" @error('filter1') is-invalid @enderror>
                                        <option value=""> -- Selecione --</option>
                                        <option value="ID" {{ (Request::old("filter1") == "ID" ? "selected":"") }} >ID</option>
                                        <option value="Data do Pagamento" {{ (Request::old("filter1") == "Data do Pagamento" ? "selected":"") }}>Data do Pagamento</option>
                                        <option value="Fornecedor" {{ (Request::old("filter1") == "Fornecedor" ? "selected":"") }}>Fornecedor</option>
                                        <option value="Status"{{ (Request::old("filter1") == "Status" ? "selected":"") }}>Status</option>
                                    </select>
                                </div>
                                <div class="col-3 mt-2 text-sm mb-0">
                                    <select name="middle1" id="middle1" value="{{ old('middle1') }}" class="form-control" @error('middle1') is-invalid @enderror>
                                        @if (Request::old("middle1") == "=")
                                            <option value="=" selected>É igual</option>
                                        @elseif (Request::old("middle1") == "<>")
                                            <option value="<>" selected>Não é igual</option>
                                        @elseif (Request::old("middle1") == ">")
                                            <option value=">" selected>É maior que</option>
                                        @elseif (Request::old("middle1") == "<")
                                            <option value="<" selected>É menor que</option>
                                        @elseif (Request::old("middle1") == "LIKE")
                                            <option value="LIKE" selected>É igual</option>
                                        @elseif (Request::old("middle1") == "not LIKE")
                                            <option value="not LIKE" selected>Não é igual</option>
                                        @endif
                                    </select>
                                </div>
                                <div class="col-5 mt-2 text-sm mb-0">
                                    <input name="result1" type="text" required id="result1" value="{{ old('result1') }}" class="form-control" @error('result1') is-invalid @enderror>
                                </div>
                            </div>
                            {{-- 2 --}}
                            <div class="row text-sm mb-0 ml-2 mr-2" id="row2" style="vertical-align:middle;align-items:center;{{ (Request::old("filter2") != null ? "selected":"") }}display:none">
                                <div class="col-4 mt-2 text-sm mb-0">
                                    <select name="filter2" id="filter2" value="{{old('filter2')}}" class="form-control" @error('filter2') is-invalid @enderror>
                                        <option value=""> -- Selecione --</option>
                                        <option value="ID" {{ (Request::old("filter2") == "ID" ? "selected":"") }} >ID</option>
                                        <option value="Data do Pagamento" {{ (Request::old("filter2") == "Data do Pagamento" ? "selected":"") }}>Data do Pagamento</option>
                                        <option value="Fornecedor" {{ (Request::old("filter2") == "Fornecedor" ? "selected":"") }}>Fornecedor</option>
                                        <option value="Status"{{ (Request::old("filter2") == "Status" ? "selected":"") }}>Status</option>
                                    </select>
                                </div>
                                <div class="col-3 mt-2 text-sm mb-0">
                                    <select name="middle2" id="middle2" value="{{old('middle2')}}" class="form-control" @error('middle2') is-invalid @enderror>
                                        @if (Request::old("middle2") == "=")
                                            <option value="=" selected>É igual</option>
                                        @elseif (Request::old("middle2") == "<>")
                                            <option value="<>" selected>Não é igual</option>
                                        @elseif (Request::old("middle2") == ">")
                                            <option value=">" selected>É maior que</option>
                                        @elseif (Request::old("middle2") == "<")
                                            <option value="<" selected>É menor que</option>
                                        @elseif (Request::old("middle2") == "LIKE")
                                            <option value="LIKE" selected>É igual</option>
                                        @elseif (Request::old("middle2") == "not LIKE")
                                            <option value="not LIKE" selected>Não é igual</option>
                                        @endif
                                    </select>
                                </div>
                                <div class="col-5 mt-2 text-sm mb-0">
                                    <input name="result2" type="text" id="result2" value="{{old('result2')}}" class="form-control" @error('result2') is-invalid @enderror>
                                </div>
                            </div>
                            {{-- 3 --}}
                            <div class="row text-sm mb-0 ml-2 mr-2" id="row3" style="vertical-align:middle;align-items:center;{{ (Request::old("filter3") != null ? "selected":"") }}display:none">
                                <div class="col-4 mt-2 text-sm mb-0">
                                    <select name="filter3" id="filter3" value="{{old('filter3')}}" class="form-control" @error('filter3') is-invalid @enderror>
                                        <option value=""> -- Selecione --</option>
                                        <option value="ID" {{ (Request::old("filter3") == "ID" ? "selected":"") }} >ID</option>
                                        <option value="Data do Pagamento" {{ (Request::old("filter3") == "Data do Pagamento" ? "selected":"") }}>Data do Pagamento</option>
                                        <option value="Fornecedor" {{ (Request::old("filter3") == "Fornecedor" ? "selected":"") }}>Fornecedor</option>
                                        <option value="Status"{{ (Request::old("filter3") == "Status" ? "selected":"") }}>Status</option>
                                    </select>
                                </div>
                                <div class="col-3 mt-2 text-sm mb-0">
                                    <select name="middle3" id="middle3" value="{{old('middle3')}}" class="form-control" @error('middle3') is-invalid @enderror>
                                        @if (Request::old("middle3") == "=")
                                            <option value="=" selected>É igual</option>
                                        @elseif (Request::old("middle3") == "<>")
                                            <option value="<>" selected>Não é igual</option>
                                        @elseif (Request::old("middle3") == ">")
                                            <option value=">" selected>É maior que</option>
                                        @elseif (Request::old("middle3") == "<")
                                            <option value="<" selected>É menor que</option>
                                        @elseif (Request::old("middle3") == "LIKE")
                                            <option value="LIKE" selected>É igual</option>
                                        @elseif (Request::old("middle3") == "not LIKE")
                                            <option value="not LIKE" selected>Não é igual</option>
                                        @endif
                                    </select>
                                </div>
                                <div class="col-5 mt-2 text-sm mb-0">
                                    <input name="result3" type="text" id="result3" value="{{old('result3')}}" class="form-control" @error('result3') is-invalid @enderror>
                                </div>
                            </div>
                            {{-- 4 --}}
                            <div class="row text-sm mb-0 ml-2 mr-2" id="row4" style="vertical-align:middle;align-items:center;{{ (Request::old("filter4") != null ? "selected":"") }}display:none">
                                <div class="col-4 mt-2 text-sm mb-0">
                                    <select name="filter4" id="filter4" value="{{old('filter4')}}" class="form-control" @error('filter4') is-invalid @enderror>
                                        <option value=""> -- Selecione --</option>
                                        <option value="ID" {{ (Request::old("filter4") == "ID" ? "selected":"") }} >ID</option>
                                        <option value="Data do Pagamento" {{ (Request::old("filter4") == "Data do Pagamento" ? "selected":"") }}>Data do Pagamento</option>
                                        <option value="Fornecedor" {{ (Request::old("filter4") == "Fornecedor" ? "selected":"") }}>Fornecedor</option>
                                        <option value="Status"{{ (Request::old("filter4") == "Status" ? "selected":"") }}>Status</option>
                                    </select>
                                </div>
                                <div class="col-3 mt-2 text-sm mb-0">
                                    <select name="middle4" id="middle4" value="{{old('middle4')}}" class="form-control" @error('middle4') is-invalid @enderror>
                                        @if (Request::old("middle4") == "=")
                                            <option value="=" selected>É igual</option>
                                        @elseif (Request::old("middle4") == "<>")
                                            <option value="<>" selected>Não é igual</option>
                                        @elseif (Request::old("middle4") == ">")
                                            <option value=">" selected>É maior que</option>
                                        @elseif (Request::old("middle4") == "<")
                                            <option value="<" selected>É menor que</option>
                                        @elseif (Request::old("middle4") == "LIKE")
                                            <option value="LIKE" selected>É igual</option>
                                        @elseif (Request::old("middle4") == "not LIKE")
                                            <option value="not LIKE" selected>Não é igual</option>
                                        @endif
                                    </select>
                                </div>
                                <div class="col-5 mt-2 text-sm mb-0">
                                    <input name="result4" type="text" id="result4" value="{{old('result4')}}" class="form-control" @error('result4') is-invalid @enderror>
                                </div>
                            </div>
                            {{-- 5 --}}
                            <div class="row text-sm mb-0 ml-2 mr-2" id="row5" style="vertical-align:middle;align-items:center;{{ (Request::old("filter5") != null ? "selected":"") }}display:none">
                                <div class="col-4 mt-2 text-sm mb-0">
                                    <select name="filter5" id="filter5" value="{{old('filter5')}}" class="form-control" @error('filter5') is-invalid @enderror>
                                        <option value=""> -- Selecione --</option>
                                        <option value="ID" {{ (Request::old("filter5") == "ID" ? "selected":"") }} >ID</option>
                                        <option value="Data do Pagamento" {{ (Request::old("filter5") == "Data do Pagamento" ? "selected":"") }}>Data do Pagamento</option>
                                        <option value="Fornecedor" {{ (Request::old("filter5") == "Fornecedor" ? "selected":"") }}>Fornecedor</option>
                                        <option value="Status"{{ (Request::old("filter5") == "Status" ? "selected":"") }}>Status</option>
                                    </select>
                                </div>
                                <div class="col-3 mt-2 text-sm mb-0">
                                    <select name="middle5" id="middle5" value="{{old('middle5')}}" class="form-control" @error('middle5') is-invalid @enderror>
                                        @if (Request::old("middle5") == "=")
                                            <option value="=" selected>É igual</option>
                                        @elseif (Request::old("middle5") == "<>")
                                            <option value="<>" selected>Não é igual</option>
                                        @elseif (Request::old("middle5") == ">")
                                            <option value=">" selected>É maior que</option>
                                        @elseif (Request::old("middle5") == "<")
                                            <option value="<" selected>É menor que</option>
                                        @elseif (Request::old("middle5") == "LIKE")
                                            <option value="LIKE" selected>É igual</option>
                                        @elseif (Request::old("middle5") == "not LIKE")
                                            <option value="not LIKE" selected>Não é igual</option>
                                        @endif
                                    </select>
                                </div>
                                <div class="col-5 mt-2 text-sm mb-0">
                                    <input name="result5" type="text" id="result5" value="{{old('result5')}}" class="form-control" @error('result5') is-invalid @enderror>
                                </div>
                            </div>
                            {{-- 6 --}}
                            <div class="row text-sm mb-0 ml-2 mr-2" id="row6" style="vertical-align:middle;align-items:center;{{ (Request::old("filter6") != null ? "selected":"") }}display:none">
                                <div class="col-4 mt-2 text-sm mb-0">
                                    <select name="filter6" id="filter6" value="{{old('filter6')}}" class="form-control" @error('filter6') is-invalid @enderror>
                                        <option value=""> -- Selecione --</option>
                                        <option value="ID" {{ (Request::old("filter6") == "ID" ? "selected":"") }} >ID</option>
                                        <option value="Data do Pagamento" {{ (Request::old("filter6") == "Data do Pagamento" ? "selected":"") }}>Data do Pagamento</option>
                                        <option value="Fornecedor" {{ (Request::old("filter6") == "Prestador" ? "selected":"") }}>Prestador</option>
                                        <option value="Status"{{ (Request::old("filter6") == "Status" ? "selected":"") }}>Status</option>
                                    </select>
                                </div>
                                <div class="col-3 mt-2 text-sm mb-0">
                                    <select name="middle6" id="middle6" value="{{old('middle6')}}" class="form-control" @error('middle6') is-invalid @enderror>
                                        @if (Request::old("middle6") == "=")
                                            <option value="=" selected>É igual</option>
                                        @elseif (Request::old("middle6") == "<>")
                                            <option value="<>" selected>Não é igual</option>
                                        @elseif (Request::old("middle6") == ">")
                                            <option value=">" selected>É maior que</option>
                                        @elseif (Request::old("middle6") == "<")
                                            <option value="<" selected>É menor que</option>
                                        @elseif (Request::old("middle6") == "LIKE")
                                            <option value="LIKE" selected>É igual</option>
                                        @elseif (Request::old("middle6") == "not LIKE")
                                            <option value="not LIKE" selected>Não é igual</option>
                                        @endif
                                    </select>
                                </div>
                                <div class="col-5 mt-2 text-sm mb-0">
                                    <input name="result6" type="text" id="result6" value="{{old('result6')}}" class="form-control" @error('result6') is-invalid @enderror>
                                </div>
                            </div>
                            {{-- 7 --}}
                            <div class="row text-sm mb-0 ml-2 mr-2" id="row7" style="vertical-align:middle;align-items:center;{{ (Request::old("filter7") != null ? "selected":"") }}display:none">
                                <div class="col-4 mt-2 text-sm mb-0">
                                    <select name="filter7" id="filter7" value="{{old('filter7')}}" class="form-control" @error('filter7') is-invalid @enderror>
                                        <option value=""> -- Selecione --</option>
                                        <option value="ID" {{ (Request::old("filter7") == "ID" ? "selected":"") }} >ID</option>
                                        <option value="Data do Pagamento" {{ (Request::old("filter7") == "Data do Pagamento" ? "selected":"") }}>Data do Pagamento</option>
                                        <option value="Fornecedor" {{ (Request::old("filter7") == "Fornecedor" ? "selected":"") }}>Fornecedor</option>
                                        <option value="Status"{{ (Request::old("filter7") == "Status" ? "selected":"") }}>Status</option>
                                    </select>
                                </div>
                                <div class="col-3 mt-2 text-sm mb-0">
                                    <select name="middle7" id="middle7" value="{{old('middle7')}}" class="form-control" @error('middle7') is-invalid @enderror>
                                        @if (Request::old("middle7") == "=")
                                            <option value="=" selected>É igual</option>
                                        @elseif (Request::old("middle7") == "<>")
                                            <option value="<>" selected>Não é igual</option>
                                        @elseif (Request::old("middle7") == ">")
                                            <option value=">" selected>É maior que</option>
                                        @elseif (Request::old("middle7") == "<")
                                            <option value="<" selected>É menor que</option>
                                        @elseif (Request::old("middle7") == "LIKE")
                                            <option value="LIKE" selected>É igual</option>
                                        @elseif (Request::old("middle7") == "not LIKE")
                                            <option value="not LIKE" selected>Não é igual</option>
                                        @endif
                                    </select>
                                </div>
                                <div class="col-5 mt-2 text-sm mb-0">
                                    <input name="result7" type="text" id="result7" value="{{old('result7')}}" class="form-control" @error('result7') is-invalid @enderror>
                                </div>
                            </div>
                            {{-- 8 --}}
                            <div class="row text-sm mb-0 ml-2 mr-2" id="row8" style="vertical-align:middle;align-items:center;{{ (Request::old("filter8") != null ? "selected":"") }}display:none">
                                <div class="col-4 mt-2 text-sm mb-0">
                                    <select name="filter8" id="filter8" value="{{old('filter8')}}" class="form-control" @error('filter8') is-invalid @enderror>
                                        <option value=""> -- Selecione --</option>
                                        <option value="ID" {{ (Request::old("filter8") == "ID" ? "selected":"") }} >ID</option>
                                        <option value="Data do Pagamento" {{ (Request::old("filter8") == "Data do Pagamento" ? "selected":"") }}>Data do Pagamento</option>
                                        <option value="Fornecedor" {{ (Request::old("filter8") == "Fornecedor" ? "selected":"") }}>Fornecedor</option>
                                        <option value="Status"{{ (Request::old("filter8") == "Status" ? "selected":"") }}>Status</option>
                                    </select>
                                </div>
                                <div class="col-3 mt-2 text-sm mb-0">
                                    <select name="middle8" id="middle8" value="{{old('middle8')}}" class="form-control" @error('middle8') is-invalid @enderror>
                                        @if (Request::old("middle8") == "=")
                                            <option value="=" selected>É igual</option>
                                        @elseif (Request::old("middle8") == "<>")
                                            <option value="<>" selected>Não é igual</option>
                                        @elseif (Request::old("middle8") == ">")
                                            <option value=">" selected>É maior que</option>
                                        @elseif (Request::old("middle8") == "<")
                                            <option value="<" selected>É menor que</option>
                                        @elseif (Request::old("middle8") == "LIKE")
                                            <option value="LIKE" selected>É igual</option>
                                        @elseif (Request::old("middle8") == "not LIKE")
                                            <option value="not LIKE" selected>Não é igual</option>
                                        @endif
                                    </select>
                                </div>
                                <div class="col-5 mt-2 text-sm mb-0">
                                    <input name="result8" type="text" id="result8" value="{{old('result8')}}" class="form-control" @error('result8') is-invalid @enderror>
                                </div>
                            </div>
                            <br>
                            <div class="row mr-2">
                                <div class="col-md-2 ml-md-auto">
                                    <div class="row">
                                        <div class="col-3 mt-3">
                                            <label class="form-control-label" for="pagina">Mostrar:</label>
                                        </div>
                                        <div class="col-9">
                                            <select class="span form-control" id="pagina" name="pagina">
                                                <option value="0" {{ (Request::old("pagina") == "0" ? "selected":"") }}>Todos</option>
                                                <option value="10" {{ (Request::old("pagina") == "10" ? "selected":"") }}>10</option>
                                                <option value="25" {{ (Request::old("pagina") == "25" ? "selected":"") }}>25</option>
                                                <option value="50" {{ (Request::old("pagina") == "50" ? "selected":"") }}>50</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <br>
                            <div class="controls controls-row">
                                <div class="col-md-1 ml-md-auto mr-0">
                                    <button type="submit" class="btn btn-sm btn-primary" value="Pesquisar" class="btn pull-right"><i class="fas fa-light fa-filter text-bg opacity-10 shadow"></i> Pesquisar</button>
                                </div>
                            </div>
                        </form>
                    </div>
                    <br>
                    <div class="table-responsive py-4" id="users-table">
                        <table class="table align-items-center table-flush"  id="datatable-basic1">
                            <thead class="thead-light">
                                <tr>
                                    <th scope="col">Id</th>
                                    <th scope="col">Data do Pagamento</th>
                                    <th scope="col">Fornecedor</th>
                                    {{-- <th scope="col">Produtos Vinculados</th> --}}
                                    <th scope="col">Valor</th>
                                    {{-- <th scope="col">Valor</th> --}}
                                    <th scope="col" class="text-center">Ações</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($payments as $payment)
                                    <tr>
                                        <td><a  class="btn btn-sm btn-primary text-white" href="{{ route('payments.show', $payment->id) }}" target="_blank" rel="noopener noreferrer">{{ $payment->id }}</a></td>
                                        <td data-type="date">{{ date('d/m/Y', strtotime($payment->date_payment)) }}</td>
                                        <td>{{ $payment->provider }}</td>
                                        <td>R$ {{ number_format($payment->total_price , 2, ",", ".") }}</td>
                                        <td class="text-center">
                                            <div class="dropdown">
                                                <a class="btn btn-sm btn-icon-only text-light" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                    <i class="fas fa-ellipsis-v"></i>
                                                </a>
                                                <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
                                                    <a class="dropdown-item" href="{{ route('payments.edit', $payment->id) }}" ><i class="fas fa-pencil text-dark text-sm opacity-10"></i> Editar</a>
                                                    <form action="{{ route('payments.destroy',$payment->id) }}" method="post">
                                                        @csrf
                                                        @method('delete')

                                                        <button type="button" class="dropdown-item" onclick="confirm('Tem certeza que deseja excluir esse pagamento?') ? this.parentElement.submit() : ''">
                                                        <i class="fas fa-light fa-trash-can text-dark text-sm opacity-10"></i> Excluir
                                                        </button>
                                                    </form>
                                                </div>
                                            </div>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        @include('layouts.footers.auth')
    </div>
@endsection

@push('css')
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="{{ asset('argon') }}/vendor/datatables.net-bs4/css/dataTables.bootstrap4.min.css">
<link rel="stylesheet" href="{{ asset('argon') }}/vendor/datatables.net-select-bs4/css/select.bootstrap4.min.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
@endpush

@push('js')
<script src="{{ asset('argon') }}/vendor/datatables.net/js/jquery.dataTables.min.js"></script>
<script src="{{ asset('argon') }}/vendor/datatables.net-bs4/js/dataTables.bootstrap4.min.js"></script>
<script src="{{ asset('argon') }}/vendor/datatables.net-buttons/js/buttons.html5.min.js"></script>
<script src="{{ asset('argon') }}/vendor/datatables.net-buttons/js/buttons.flash.min.js"></script>
<script src="{{ asset('argon') }}/vendor/datatables.net-select/js/dataTables.select.min.js"></script>
    <script>
        const decodeUTF8  = (s) => decodeURIComponent(escape(s));
            $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
            });
            $('#filter1').on('change',function(){
                let val = $('#filter1').val();
                console.log(val);
                if (val == "ID") {
                    $('#middle1').empty();
                    $('#result1').prop("type", "text");
                    $('#row2').show();
                    $('#middle1').append([
                        `<option value="=">É igual</option>`,
                        `<option value="<>">Não é igual</option>`,
                    ]);
                } else if(val == "Data do Pagamento") {
                    $('#middle1').empty();
                    $('#result1').prop("type", "date");
                    $('#row2').show();
                    $('#middle1').append([
                        `<option value=">">É maior que</option>`,
                        `<option value="<">É menor que</option>`,
                        `<option value="=">É igual</option>`,
                        `<option value="<>">Não é igual</option>`,
                    ]);
                } else if(val == "Fornecedor") {
                    $('#middle1').empty();
                    $('#result1').prop("type", "text");
                    $('#row2').show();
                    $('#middle1').append([
                        `<option value="LIKE">É igual</option>`,
                        `<option value="not LIKE">Não é igual</option>`,,
                    ]);
                } else if(val == "Status") {
                    $('#middle1').empty();
                    $('#result1').prop("type", "text");
                    $('#row2').show();
                    $('#middle1').append([
                        `<option value="LIKE">É igual</option>`,
                        `<option value="not LIKE">Não é igual</option>`,
                    ]);
                } else {
                    $('#middle1').empty();
                    $('#result1').prop("type", "text");
                }
            });
            $('#filter2').on('change',function(){
                let val2 = $('#filter2').val();
                console.log(val2);
                if (val2 == "ID") {
                    $('#middle2').empty();
                    $('#result2').prop("type", "text");
                    $('#row3').show();
                    $('#middle2').append([
                        `<option value="=">É igual</option>`,
                        `<option value="<>">Não é igual</option>`,

                    ]);
                } else if(val2 == "Data do Pagamento") {
                    $('#middle2').empty();
                    $('#result2').prop("type", "date");
                    $('#row3').show();
                    $('#middle2').append([
                        `<option value=">">É maior que</option>`,
                        `<option value="<">É menor que</option>`,
                        `<option value="=">É igual</option>`,
                        `<option value="<>">Não é igual</option>`,
                    ]);
                } else if(val2 == "Fornecedor") {
                    $('#middle2').empty();
                    $('#result2').prop("type", "text");
                    $('#row3').show();
                    $('#middle2').append([
                        `<option value="LIKE">É igual</option>`,
                        `<option value="not LIKE">Não é igual</option>`,
                    ]);
                } else if(val2 == "Status") {
                    $('#middle2').empty();
                    $('#result2').prop("type", "text");
                    $('#row3').show();
                    $('#middle2').append([
                        `<option value="LIKE">É igual</option>`,
                        `<option value="not LIKE">Não é igual</option>`,
                    ]);
                } else {
                    $('#middle2').empty();
                }
            });
            $('#filter3').on('change',function(){
                let val3 = $('#filter3').val();
                console.log(val3);
                if (val3 == "ID") {
                    $('#middle3').empty();
                    $('#result3').prop("type", "text");
                    $('#row4').show();
                    $('#middle3').append([
                        `<option value="=">É igual</option>`,
                        `<option value="<>">Não é igual</option>`,

                    ]);
                } else if(val3 == "Data do Pagamento") {
                    $('#middle3').empty();
                    $('#result3').prop("type", "date");
                    $('#row4').show();
                    $('#middle3').append([
                        `<option value=">">É maior que</option>`,
                        `<option value="<">É menor que</option>`,
                        `<option value="=">É igual</option>`,
                        `<option value="<>">Não é igual</option>`,
                    ]);
                } else if(val3 == "Fornecedor") {
                    $('#middle3').empty();
                    $('#result3').prop("type", "text");
                    $('#row4').show();
                    $('#middle3').append([
                        `<option value="LIKE">É igual</option>`,
                        `<option value="not LIKE">Não é igual</option>`,
                    ]);
                } else if(val3 == "Status") {
                    $('#middle3').empty();
                    $('#result3').prop("type", "text");
                    $('#row4').show();
                    $('#middle3').append([
                        `<option value="LIKE">É igual</option>`,
                        `<option value="not LIKE">Não é igual</option>`,
                    ]);
                } else {
                    $('#middle3').empty();
                }
            });
            $('#filter4').on('change',function(){
                let val4 = $('#filter4').val();
                console.log(val4);
                if (val4 == "ID") {
                    $('#middle4').empty();
                    $('#result4').prop("type", "text");
                    $('#row5').show();
                    $('#middle4').append([
                        `<option value="=">É igual</option>`,
                        `<option value="<>">Não é igual</option>`,

                    ]);
                } else if(val4 == "Data do Pagamento") {
                    $('#middle4').empty();
                    $('#result4').prop("type", "date");
                    $('#row5').show();
                    $('#middle4').append([
                        `<option value=">">É maior que</option>`,
                        `<option value="<">É menor que</option>`,
                        `<option value="=">É igual</option>`,
                        `<option value="<>">Não é igual</option>`,
                    ]);
                } else if(val4 == "Fornecedor") {
                    $('#middle4').empty();
                    $('#result4').prop("type", "text");
                    $('#row5').show();
                    $('#middle4').append([
                        `<option value="LIKE">É igual</option>`,
                        `<option value="not LIKE">Não é igual</option>`,
                    ]);
                } else if(val4 == "Status") {
                    $('#middle4').empty();
                    $('#result4').prop("type", "text");
                    $('#row5').show();
                    $('#middle4').append([
                        `<option value="LIKE">É igual</option>`,
                        `<option value="not LIKE">Não é igual</option>`,
                    ]);
                } else {
                    $('#middle4').empty();
                }
            });
            $('#filter5').on('change',function(){
                let val5 = $('#filter5').val();
                console.log(val5);
                if (val5 == "ID") {
                    $('#middle5').empty();
                    $('#result5').prop("type", "text");
                    $('#row6').show();
                    $('#middle5').append([
                        `<option value="=">É igual</option>`,
                        `<option value="<>">Não é igual</option>`,

                    ]);
                } else if(val5 == "Data do Pagamento") {
                    $('#middle5').empty();
                    $('#result5').prop("type", "date");
                    $('#row6').show();
                    $('#middle5').append([
                        `<option value=">">É maior que</option>`,
                        `<option value="<">É menor que</option>`,
                        `<option value="=">É igual</option>`,
                        `<option value="<>">Não é igual</option>`,
                    ]);
                } else if(val5 == "Fornecedor") {
                    $('#middle5').empty();
                    $('#result5').prop("type", "text");
                    $('#row6').show();
                    $('#middle5').append([
                        `<option value="LIKE">É igual</option>`,
                        `<option value="not LIKE">Não é igual</option>`,
                    ]);
                } else if(val5 == "Status") {
                    $('#middle5').empty();
                    $('#result5').prop("type", "text");
                    $('#row6').show();
                    $('#middle5').append([
                        `<option value="LIKE">É igual</option>`,
                        `<option value="not LIKE">Não é igual</option>`,
                    ]);
                } else {
                    $('#middle5').empty();
                }
            });
            $('#filter6').on('change',function(){
                let val6 = $('#filter6').val();
                console.log(val6);
                if (val6 == "ID") {
                    $('#middle6').empty();
                    $('#result6').prop("type", "text");
                    $('#row7').show();
                    $('#middle6').append([
                        `<option value="=">É igual</option>`,
                        `<option value="<>">Não é igual</option>`,

                    ]);
                } else if(val6 == "Data do Pagamento") {
                    $('#middle6').empty();
                    $('#result6').prop("type", "text");
                    $('#row7').show();
                    $('#middle6').append([
                        `<option value=">">É maior que</option>`,
                        `<option value="<">É menor que</option>`,
                        `<option value="=">É igual</option>`,
                        `<option value="<>">Não é igual</option>`,
                    ]);
                } else if(val6 == "Fornecedor") {
                    $('#middle6').empty();
                    $('#result6').prop("type", "text");
                    $('#row7').show();
                    $('#middle6').append([
                        `<option value="LIKE">É igual</option>`,
                        `<option value="not LIKE">Não é igual</option>`,
                    ]);
                } else if(val6 == "Status") {
                    $('#middle6').empty();
                    $('#result6').prop("type", "text");
                    $('#row7').show();
                    $('#middle6').append([
                        `<option value="LIKE">É igual</option>`,
                        `<option value="not LIKE">Não é igual</option>`,
                    ]);
                } else {
                    $('#middle6').empty();
                }
            });
            $('#filter7').on('change',function(){
                let val7 = $('#filter7').val();
                console.log(val7);
                if (val7 == "ID") {
                    $('#middle7').empty();
                    $('#result7').prop("type", "text");
                    $('#row8').show();
                    $('#middle7').append([
                        `<option value="=">É igual</option>`,
                        `<option value="<>">Não é igual</option>`,

                    ]);
                } else if(val7 == "Data do Pagamento") {
                    $('#middle7').empty();
                    $('#result7').prop("type", "date");
                    $('#row8').show();
                    $('#middle7').append([
                        `<option value=">">É maior que</option>`,
                        `<option value="<">É menor que</option>`,
                        `<option value="=">É igual</option>`,
                        `<option value="<>">Não é igual</option>`,
                    ]);
                } else if(val7 == "Fornecedor") {
                    $('#middle7').empty();
                    $('#result7').prop("type", "text");
                    $('#row8').show();
                    $('#middle7').append([
                        `<option value="LIKE">É igual</option>`,
                        `<option value="not LIKE">Não é igual</option>`,
                    ]);
                } else if(val7 == "Status") {
                    $('#middle7').empty();
                    $('#result7').prop("type", "text");
                    $('#row8').show();
                    $('#middle7').append([
                        `<option value="LIKE">É igual</option>`,
                        `<option value="not LIKE">Não é igual</option>`,
                    ]);
                } else {
                    $('#middle7').empty();
                }
            });
            $('#filter8').on('change',function(){
                let val8 = $('#filter8').val();
                console.log(val8);
                if (val8 == "ID") {
                    $('#middle8').empty();
                    $('#result8').prop("type", "text");
                    $('#middle8').append([
                        `<option value="=">É igual</option>`,
                        `<option value="<>">Não é igual</option>`,

                    ]);
                } else if(val8 == "Data do Pagamento") {
                    $('#middle8').empty();
                    $('#result8').prop("type", "date");
                    $('#middle8').append([
                        `<option value=">">É maior que</option>`,
                        `<option value="<">É menor que</option>`,
                        `<option value="=">É igual</option>`,
                        `<option value="<>">Não é igual</option>`,
                    ]);
                } else if(val8 == "Fornecedor") {
                    $('#middle8').empty();
                    $('#result8').prop("type", "text");
                    $('#middle8').append([
                        `<option value="LIKE">É igual</option>`,
                        `<option value="not LIKE">Não é igual</option>`,
                    ]);
                } else if(val8 == "Status") {
                    $('#middle8').empty();
                    $('#result8').prop("type", "text");
                    $('#middle8').append([
                        `<option value="LIKE">É igual</option>`,
                        `<option value="not LIKE">Não é igual</option>`,
                    ]);
                } else {
                    $('#middle8').empty();
                }
            });
    </script>
    <script>
        var DatatableButtons = (function() {
        // Variables

        var $dtButtons = $('#datatable-basic1');


        // Methods

        function init($this) {

            // For more options check out the Datatables Docs:
            // https://datatables.net/extensions/buttons/

            // Basic options. For more options check out the Datatables Docs:
            // https://datatables.net/manual/options

            var options = {

                length: true,
                lengthChange: 1,
                dom: 'lfrtip',
                columnDefs: [
                        { orderable: true, targets: 6 }
                ],
                order: [[0, 'desc']],
                // select: {
                // 	style: "multi"
                // },
                language: {
                    paginate: {
                        previous: "<i class='fas fa-angle-left'>",
                        next: "<i class='fas fa-angle-right'>"
                    },
                    search: "Busca rápida:",
                    emptyTable: "Nenhum registro encontrado",
                    info: "Mostrando de _START_ até _END_ de _TOTAL_ registros",
                    infoEmpty: "Mostrando 0 até 0 de 0 registros",
                    infoFiltered: "(Filtrados de _MAX_ registros)",
                    infoThousands: ".",
                    loadingRecords: "Carregando...",
                    processing: "Processando...",
                    zeroRecords: "Nenhum registro encontrado",
                    lengthMenu: "Exibir _MENU_ registros",
                    decimal: ",",
                },
                info: "Mostrando de _START_ até _END_ de _TOTAL_ registros",
            };

            // Init the datatable

            var table = $this.on('init.dt', function() {
                $('.dt-buttons .btn').removeClass('btn-secondary').addClass('btn-sm btn-default');
            }).DataTable(options);
        }


        // Events

        if ($dtButtons.length) {
            init($dtButtons);
        }

        })();
    </script>
@endpush