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

@section('title', 'Vendas |')
<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')
                Vendas
            @endslot
            <li class="breadcrumb-item"><a class="text-default" href="{{ route('sales.index') }}">Minhas Vendas</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 Vendas</h3>
                                <p class="text-sm mb-0">
                                        Abaixo você encontra os Vendas importadas da Skyteam
                                    </p>
                            </div>
                            <div class="col-4 text-right">
                                <button type="button" class="btn btn-sm btn-secondary" data-toggle="modal" data-target="#import"><i class="fa-solid fa-circle-plus"></i> Importar Venda</button>
                                <div class="modal fade" id="import" tabindex="-1" role="dialog" aria-labelledby="import" aria-hidden="true">
                                    <div class="modal-dialog modal-lg modal-dialog-centered modal" role="document">
                                        <form action="{{ route('importsales') }}" method="POST" class="mb-4">
                                            @csrf
                                            @method('POST')
                                            <div class="modal-content">
                                                <div class="modal-header">
                                                    <h6 class="modal-title" id="modal-title-default">Importar Vendas</h6>
                                                </div>
                                                <div class="modal-body">
                                                    <div class="form-group">
                                                        <label for="date">Selecione a Data:</label>
                                                        <input type="date" name="date" id="date" class="form-control" value="{{ request('date', date('Y-m-d')) }}">
                                                    </div>
                                                    <button type="submit" class="btn btn-primary">Importar Vendas</button>
                                                </div>
                                            </div>
                                            @csrf
                                        </form>
                                    </div>
                                </div>
                                <a href="{{ route('sales.create') }}" class="btn btn-sm btn-primary">Nova Venda</a>
                            </div>
                        </div>
                    </div>

                    <div class="col-12 mt-2">
                        @include('alerts.success')
                        @include('alerts.errors')
                    </div>
                    <br>
                    {{-- Filters --}}
                    <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 da Venda</th>
                                    <th scope="col">Data da Venda</th>
                                    <th scope="col">Cliente</th>
                                    {{-- <th scope="col">Produtos Vinculados</th> --}}
                                    <th scope="col">Status</th>
                                    {{-- <th scope="col">Valor</th> --}}
                                    <th scope="col" class="text-center">Ações</th>
                                </tr>
                            </thead>
                            <tbody>
                                @json($sales)
                                @foreach ($sales as $sale)
                                    <tr>
                                        <td>
                                            {{-- {{$sale}} --}}
                                            {{-- <a href="{{ route('sales.show', $sale->sale_id) }}" class="btn btn-sm btn-primary" target="_blank" rel="noopener noreferrer">{{ $sale->sale_id }}</a> --}}
                                            {{-- <div class="modal fade" id="modal{{ $sale->sale_id }}" tabindex="-1" role="dialog" aria-labelledby="modal{{ $sale->sale_id }}" aria-hidden="true">
                                                <div class="modal-dialog modal-lg modal-dialog-centered modal-" role="document">
                                                    <div class="modal-content">
                                                        <div class="modal-header">
                                                            <h3 >Venda {{ $sale->sale_id }}</h3>
                                                            <button style="float: right;" type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                                <span aria-hidden="true">×</span>
                                                            </button>
                                                        </div>
                                                        <hr width="100%" size="20" style="margin-top: -10px">
                                                        <div class="modal-body" style="margin-top: -30px">
                                                            <h4 class="mb-0">Dados Gerais da Venda</h4><br>
                                                            <hr width="100%" size="20" style="margin-top: -10px">
                                                            <div class="row">
                                                                <div class="col-3">
                                                                    <label class="form-control-label text-left" for="basic-url">Vendedor</label><br>
                                                                    <p class="text-sm text-left">{{$sale->user}}</p>
                                                                </div>
                                                                <div class="col-6">
                                                                    <label class="form-control-label text-left" for="basic-url">Cliente</label><br>
                                                                    <p class="text-sm">{{ substr($sale->first_name ." ".$sale->last_name,0,50) }}</p>
                                                                </div>
                                                                <div class="col-3">
                                                                    <label class="form-control-label text-left" for="basic-url">Data da Venda</label><br>
                                                                    <p class="text-sm">{{ date('d/m/y', strtotime($sale->sale_date)) }}</p>
                                                                </div>
                                                            </div>
                                                            <br>
                                                            <h4 class="mb-0">Produtos</h4><br>
                                                            <hr width="100%" size="20" style="margin-top: -10px">
                                                            <div class="row">
                                                                <div class="table-responsive py-4" id="users-table" style="margin-top: -35px">
                                                                    <table class="table align-items-center table-flush"  id="datatable-basic1">
                                                                        <thead class="thead-light">
                                                                            <tr>
                                                                                <th scope="col">Produto</th>
                                                                                <th scope="col">Fornecedor</th>
                                                                                <th scope="col">Prestador</th>
                                                                                <th scope="col">Início</th>
                                                                                <th scope="col">Fim</th>
                                                                                <th scope="col">Passageiros</th>
                                                                            </tr>
                                                                        </thead>
                                                                        <tbody>
                                                                            @foreach ($products as $key => $product)
																				@foreach ($product as $prod)
																					@if ($prod['sale_id'] == $sale->sale_id)
																						<tr
																						@if($prod['product'] == "Aéreo") title="Partida: {{$prod['partida_iata'] . " - " . $prod['partida']}} | Chegada: {{$prod['chegada_iata'] . " - " . $prod['chegada']}} | Localizador: {{$prod['reservation_number']}}" @endif >
																							<td >{{$prod['product']}}</td>
																							<td>{{$prod['provider']}}</td>
																							<td>{{$prod['supplier']}}</td>
																							<td>{{ date('d/m/y H:i', strtotime($prod['start_datetime'])) }}</td>
																							<td>{{ date('d/m/y H:i', strtotime($prod['end_datetime'])) }}</td>
																							<td>
																								<a type="button" class="btn btn-sm btn-primary" target="_blank" href="{{ route('salesproductpassenger.show', $prod['spid']) }}"><i class="fa-solid fa-user text-white"> Ver</i></a>
																							</td>
																						</tr>
																					@endif
																				@endforeach
                                                                            @endforeach
                                                                        </tbody>
                                                                    </table>
                                                                </div>
                                                            </div>
                                                            <br>
                                                            <h4 class="mb-0">Formas de Pagamento</h4><br>
                                                            <hr width="100%" size="20" style="margin-top: -10px">
                                                            <div class="row">
                                                                <div class="table-responsive py-4" id="users-table" style="margin-top: -35px">
                                                                    <table class="table align-items-center table-flush"  id="datatable-basic1">
                                                                        <thead class="thead-light">
                                                                            <tr>
                                                                                <th scope="col">Forma</th>
                                                                                <th scope="col">Data</th>
                                                                                <th scope="col">Valor</th>
                                                                            </tr>
                                                                        </thead>
                                                                        <tbody>
                                                                            @foreach ($sales_method_payment as $method_payment)
																				@foreach ($method_payment as $method)
																					@if ($method['sale_id'] == $sale->sale_id)
																						<tr>
																							<td>{{$method['method']}}</td>
																							<td>{{ date('d/m/y', strtotime($method['date_payment'])) }}
																								@if($method['product'] == "Aéreo")
																									<a type="button" class="btn btn-sm btn-primary" target="_blank" href="{{ route('newflightleg', $method['spid']) }}"><i class="fa-solid fa-plane text-white"></i></a>
																								@endif
																							</td>
																							<td>R$ {{ number_format( $method['final_price'] , 2, ",", ".") }}</td>
																						</tr>
																					@endif
																				@endforeach
                                                                            @endforeach
                                                                        </tbody>
                                                                        <tfoot>
                                                                            <tr>
                                                                                <td><strong> Total</strong></td>
                                                                                <td></td>
                                                                                <td><strong>R$ {{ number_format( $sales_method_payment->sum('final_price') , 2, ",", ".")}}</strong></td>
                                                                            </tr>
                                                                        </tfoot>
                                                                    </table>
                                                                </div>
                                                            </div>
                                                            <h4 class="mb-0">Anexos</h4><br>
                                                            <hr width="100%" size="20" style="margin-top: -10px">
                                                            <div class="row">
                                                                <div class="table-responsive py-4" id="users-table" style="margin-top: -35px">
                                                                    @foreach ($file_sales as $files)
																		@foreach ($files as $file)
																			@if ($file['sale_id'] == $sale->sale_id)
																			<div class="row align-items-center" style="margin-top: 10px;">
																				<div class="col-auto">
																				<!-- Avatar -->
																					<a href="{{ asset('files/vouchers/').'/'.$file['title'] }}" target="_blank" class="avatar rounded-circle" style="margin-left: 20px;">
																						<i class="fa-solid fa-cloud-arrow-down"></i>
																					</a>
																				</div>
																				<div class="col ml--2">
																					<h4 class="mb-0">
																						<a href="{{ asset('files/vouchers/').'/'.$file['title'] }}" target="_blank">{{ substr($file['title'],0,65) }}</a>
																					</h4>

																					<span class="text-success">●</span>
																					<small>Anexado em: {{ date('d/m/Y H:m', strtotime($file['created_at'])) }}</small>
																				</div>
																			</div>
																			@endif
																		@endforeach
                                                                    @endforeach
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div> --}}
                                        </td>
                                        {{-- <td data-type="date">{{ date('d/m/Y', strtotime($sale->sale_date)) }}</td> --}}
                                        {{-- <td>{{ $sale->first_name ." ".$sale->last_name }}</td> --}}
                                        {{-- <td>{{ $sales_product->where('sale_id', '=', $sale->sale_id)->where('kind', '=', 'Main')->count() }}</td> --}}
                                        {{-- <td>{{ $sale->status }}</td> --}}
                                        {{-- <td>
											@foreach ($value as $val)
												@foreach ($val as $va)
													@if ($va['id'] == $sale->sale_id)
														{{$va->sum('final_price')}}

														R$ {{ number_format($va->sum('final_price'), 2, ",", ".") }}
													@endif
												@endforeach
											@endforeach
										</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('sales.show', $sale) }}"><i class="fas fa-pencil text-dark text-sm opacity-10"></i> Editar</a> --}}
                                                    {{-- <form action="{{ route('sales.destroy', $sale) }}" method="post">
                                                        @csrf
                                                        @method('delete')

                                                        <button type="button" class="dropdown-item" onclick="confirm('Tem certeza que deseja excluir essa venda?') ? 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 == "Cliente") {
                    $('#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 == "Data da Venda") {
                    $('#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 == "Prestador") {
                    $('#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 == "Produto") {
                    $('#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 == "Cliente") {
                    $('#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 == "Data da Venda") {
                    $('#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 == "Prestador") {
                    $('#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 == "Produto") {
                    $('#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 == "Cliente") {
                    $('#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 == "Data da Venda") {
                    $('#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 == "Prestador") {
                    $('#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 == "Produto") {
                    $('#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 == "Cliente") {
                    $('#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 == "Data da Venda") {
                    $('#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 == "Prestador") {
                    $('#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 == "Produto") {
                    $('#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 == "Cliente") {
                    $('#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 == "Data da Venda") {
                    $('#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 == "Prestador") {
                    $('#middle5').empty();
                    $('#row6').show();
                    $('#middle5').append([
                        `<option value="LIKE">É igual</option>`,
                        `<option value="not LIKE">Não é igual</option>`,
                    ]);
                } else if(val5 == "Produto") {
                    $('#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 == "Cliente") {
                    $('#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 == "Data da Venda") {
                    $('#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 == "Prestador") {
                    $('#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 == "Produto") {
                    $('#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 == "Cliente") {
                    $('#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 == "Data da Venda") {
                    $('#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 == "Prestador") {
                    $('#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 == "Produto") {
                    $('#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 == "Cliente") {
                    $('#middle8').empty();
                    $('#result8').prop("type", "text");
                    $('#middle8').append([
                        `<option value="LIKE">É igual</option>`,
                        `<option value="not LIKE">Não é igual</option>`,
                    ]);
                } else if(val8 == "Data da Venda") {
                    $('#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 == "Prestador") {
                    $('#middle8').empty();
                    $('#result8').prop("type", "text");
                    $('#middle8').append([
                        `<option value="LIKE">É igual</option>`,
                        `<option value="not LIKE">Não é igual</option>`,
                    ]);
                } else if(val8 == "Produto") {
                    $('#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