@extends('adminlte::page')

@section('title', " $title ")

@section('content')
<div class="container-fluid">
    
    <div class="row pt-4">
        <div class="col-md-12">
            <div class="callout callout-warning">
                <h5 class='center'><i class="fas fa-info"></i> Emitir N/F de serviço distribuido <i class="fa fa-car"></i> <span class="badge badge-secondary shadow">{!! $count !!}</span></h5>
            </div>
        </div>
    </div> 
    
    <div class='row pt-4'>
        
        <h5>FILTROS - serviço(s) faturado(s)</h5>
        
        <div class="col-md-12 p-4 text-black rounded" style="background: #e0e0e0;">
            <form action="{{ route('financial.search') }}" method="get">
                @csrf

                <div class="row mt-2">
                    
                    <div class="col-md-5">
                        <input type="text" name="search" class="form-control" id="autocomplete-input" value="{{ $perspective->customer_id ?? old('search') }}" placeholder="Digite o nome do cliente ...">

                        <ul id="autocomplete-list" class="autocomplete-list"></ul>

                        <input type="hidden" name="customer_id" class="form-control" id="customer-id-input" value="{{ $perspective->customer_id ?? old('customer_id') }}">
                        @error('customer_id')
                            <div class="text-danger">{{ $message }}</div>
                        @enderror
                    </div>
                    
                    <div class="col-md-2">
                        <input type='text' name='autorization' class='form-control' value='' placeholder="Digite o nº da O.S ...">
                    </div>
                    
                    <div class="col-md-2">
                        <input type='text' name='nf' class='form-control' value='' placeholder="Digite o nº da NF ...">
                    </div>
                    
                    <div class="col-md-3">
                        <button type="submit" class="btn btn-success submit" title="Pesquisar"> <i class="fa fa-search"></i>
                            Pesquisar
                        </button>

                        <a href="{{ route('financial.index') }}" class="btn btn-warning" title="Ver todos"> <i class="fa fa-check"></i>
                            Ver todos
                        </a>
                    </div>

                </div>
                    
            </form> 
        </div>
        
    </div>

    <div class="row pt-4">
        <div class="col-md-12">
            <a href="{{ route('financial.payment') }}" class='btn btn-warning' title="Ver clientes com pagamento efetuado"> <i class="fa fa-check"></i> Pagamento Efetuado</a>
        </div>
    </div> 
    
    @if(count($groupedAutorizations) === 0)
        <div class="alert alert-info"><i class='fa fa-exclamation'></i> Sem serviço para emitir N/F</div>
    @else
        
        <div class="row mt-4">
            <div class="col-md-12 mt-2">
                
                @include('app.includes.alerts')
                
                <div class="table-responsive">
                    <table class="table table-striped">
                        <thead class="bg-primary text-white">
                            <tr>
                                <th>O.S</th>
                                <th>Data</th>
                                <th>Cliente</th>
                                <th>Material</th>
                                <th>Promoção</th>
                                <th>Folheto</th>
                                <th>Validade</th>
                                <th>Qtd</th>
                                <th>Serviço</th>
                                <th>Vencimento</th>
                                <th>Status Atual</th>
                                <th>Relatório</th>
                                <th>Excluir</th>
                            </tr>
                        </thead>

                        <tbody>
                            @php
                                $previousAuthorization = null;
                            @endphp

                            @foreach ($groupedAutorizations as $authorization => $group)
                                @php
                                    $showReportButton = true;
                                @endphp

                                @foreach ($group as $key => $item)
                                    <tr>
                                        @if ($previousAuthorization !== $authorization)
                                            <td rowspan="{{ $group->count() }}"><span class="badge badge-secondary" style='font-size:16px;'>{{ $authorization }}</span></td>
                                            @php
                                                $previousAuthorization = $authorization;
                                            @endphp
                                        @endif

                                        <td><span class="badge badge-secondary" style='font-size:16px;'>{{ date('d/m/Y', strtotime($item->perspective->date)) }}</span></td>
                                        <td>{{ $item->customer->fantasy_name }}</td>
                                        @if( !isset($item->perspective->materialcustomer->material) )
                                            <td class="text-danger"><trong>Material deletado desse cliente</strong></td>
                                        @else
                                            <td>{{ $item->perspective->materialcustomer->material }}</td>
                                        @endif
                                        <td>{{ $item->promotion->name }}</td>
                                        @if( !isset($item->image) ) 
                                            <td><img src="{{ url("images/sem-imagem.png") }}" class="img-fluid" alt="Sem Imagem definida" style="max-width: 49px;"></td>       
                                        @else
                                            <td>
                                                <a href="#" class="edit-btn" data-id="{{ $item->id }}" data-image="{{ url("storage/{$item->image}") }}">
                                                    <img src="{{ url("storage/{$item->image}") }}" class="img-thumbnail img-fluid shadow" alt="{{ $item->autorization }}" style="max-width: 69px;" data-toggle="modal" data-target="#imagemModal">
                                                </a>
                                            </td>
                                        @endif 
                                        <td>{{ $item->validate }}</td>
                                        <td>{{ $item->perspective->qtd }}</td>
                                        <td class='text-success'><strong>{{ $item->status }}</strong></td>
                                        @if ($item->issued != "Sim")
                                            <td></td>
                                        @else
                                            <td> <span class="badge badge-secondary" style="font-size:16px;">{{ date("d/m/Y", strtotime($item->maturity)) }}</span></td>
                                        @endif
                                        @if ($item->issued != "Sim")
                                            <td class="text-primary"><strong>N/F não enviada</strong></td>
                                        @elseif (strtotime($item->maturity) < strtotime('today'))
                                            <td class="text-danger">
                                                <a href="#" class="btn btn-danger me-1 btn-open-payment-modal"
                                                    data-bs-toggle="modal" data-bs-target="#payment" title="Clique para atualizar pagamento efetuado"
                                                    data-customer="{{ $item->customer->id }}"
                                                    data-id="{{ $authorization }}"
                                                    data-nf="{{ $item->number_nf }}"
                                                    data-boleto="{{ $item->ticket }}"
                                                    data-vencimento="{{ date('d/m/Y', strtotime($item->maturity)) }}"><i class="fa fa-exclamation"></i> Aguardando pagamento - Vencida
                                                </a>
                                            </td>
                                        @else
                                            <td class="text-danger">
                                                <a href="#" class="btn btn-outline-danger me-1 btn-open-payment-modal"
                                                    data-bs-toggle="modal" data-bs-target="#payment" title="Clique para atualizar pagamento efetuado"
                                                    data-customer="{{ $item->customer->id }}"
                                                    data-id="{{ $authorization }}"
                                                    data-nf="{{ $item->number_nf }}"
                                                    data-boleto="{{ $item->ticket }}"
                                                    data-vencimento="{{ date('d/m/Y', strtotime($item->maturity)) }}">Aguardando pagamento
                                                </a>
                                            </td>
                                        @endif
                                        @if ($key === 0) 
                                            <td class='text-center'><a href="{{ route('financial.edit', $item->autorization) }}" class="btn btn-success"><i class="fa fa-lock fa-1x"></i></a></td>
                                        @else
                                            <td></td> 
                                        @endif

                                        @can('excluir-os')
                                        <td>
                                            <form action="{{ route('autorization.destroy', $authorization) }}" method="POST" onsubmit="return confirm('Tem certeza que deseja deletar?')">
                                                @csrf
                                                @method('DELETE')
                                                <button type="submit" class="btn btn-danger shadow"><i class="fas fa-trash"></i></button>
                                            </form>
                                        </td>
                                        @endcan
                                    </tr>
                                @endforeach
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        @endif
    </div>

     <!-- Modal imagem -->
     <div class="modal fade" id="imagemModal" tabindex="-1" role="dialog" aria-labelledby="imagemModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered  modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-body">
                    <img id="modalImage" class="img-fluid" alt="Imagem ampliada">
                </div>
            </div>
        </div>
    </div>

    <!-- Imagem Ampliada -->
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            var editButtons = document.querySelectorAll('.edit-btn');
            editButtons.forEach(function (button) {
                button.addEventListener('click', function () {
                    var id = this.getAttribute('data-id');
                    var image = this.getAttribute('data-image');

                    // Set the src attribute of modalImage to display the larger image
                    document.getElementById('modalImage').src = image;
                });
            });
        });
    </script>
    
    <!-- Alterar pagamento -->
    <div class="modal fade" id="payment">
       <div class="modal-dialog">
           <div class="modal-content">
               <form id="editForm" action="{{ route('autorization.payment') }}" method="post">
                   @csrf
                   @method('PUT')

                   <!-- Modal Header -->
                   <div class="modal-header bg-info">
                       <h5 class="modal-title">Você confirma o pagamento dessa O.S?</h5>
                   </div>

                   <!-- Modal body -->
                   <div class="modal-body">

                        <input type="hidden" name="customer_id" id="customer_id" class="form-control" value="" required="">

                        <div class="row">
                            <div class="col-md-4">
                                <label>O.S Nº</label>
                                <input type="text" id="authorizationInput" name="autorization" class="form-control" value="" readonly="">
                            </div>
                            <div class="col-md-4">
                                <label>N/F Nº</label>
                                <input type="text" id="nfInput" name="nf" class="form-control" value="" readonly="">
                            </div>
                            <div class="col-md-4">
                                <label>Boleto Nº</label>
                                <input type="text" id="boletoInput" name="ticket" class="form-control" value="" readonly="">
                            </div>
                        </div>
                        
                        <div class="row pt-3">
                            <div class="col-md-5">
                                <label>Vencimento</label>
                                <input type="text" id="vencimentoInput" class="form-control" value="" readonly="">
                            </div>
                            
                            <div class="col-md-7">
                                <label>Data do pagamento</label>
                                <input type="text" name="payment_date" class="form-control datepicker" value="" placeholder="Informe aqui a data..." required="">
                            </div>
                        </div>

                        <div class="row pt-3">
                            <div class="col-md-6">
                                <label>Empresa Creditada</label>
                                <select name="cnpj" class="form-control" required="">
                                    <option value="">-- Selecione --</option>
                                    <option value="CAM" {{ ($filters['cnpj'] ?? '') == 'CAM' ? 'selected' : '' }}>CAM</option>
                                    <option value="RIC" {{ ($filters['cnpj'] ?? '') == 'RIC' ? 'selected' : '' }}>RIC</option>
                                    <option value="VAL" {{ ($filters['cnpj'] ?? '') == 'VAL' ? 'selected' : '' }}>VAL</option>
                                    <option value="DIRSIL" {{ ($filters['cnpj'] ?? '') == 'DIRSIL' ? 'selected' : '' }}>DIRSIL</option>
                                    <option value="LVP" {{ ($filters['cnpj'] ?? '') == 'LVP' ? 'selected' : '' }}>LVP</option>
                                    <option value="LVD" {{ ($filters['cnpj'] ?? '') == 'LVD' ? 'selected' : '' }}>LVD</option>
                                </select>
                            </div>
                            
                            <div class="col-md-6">
                                <label>Valor da N/F paga</label>
                                <input type="text" name="price" class="form-control money" value="" placeholder="Informe o valor..." required="">
                            </div>
                        </div>
                   </div>

                   <!-- Modal footer -->
                   <div class="modal-footer">
                       <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Fechar</button>
                       <button type="submit" class="btn btn-success" id="saveChangesBtn">Confirmar pagamento da O.S</button>
                   </div>
               </form>
           </div>
       </div>
   </div>

   <script>
       document.addEventListener('DOMContentLoaded', function () {
           let openPaymentModalButtons = document.querySelectorAll('.btn-open-payment-modal');
           let paymentModal = new bootstrap.Modal(document.getElementById('payment'));

           openPaymentModalButtons.forEach(function (button) {
               button.addEventListener('click', function () {
                   let authorizationValue = button.getAttribute('data-id');
                   let nfValue = button.getAttribute('data-nf');
                   let boletoValue = button.getAttribute('data-boleto');
                   let vencimentoValue = button.getAttribute('data-vencimento');
                   let customerIdValue = button.getAttribute('data-customer');

                   let customer_id = document.querySelector('#customer_id');
                   customer_id.value = customerIdValue;
                   
                   let authorizationInput = document.querySelector('#authorizationInput');
                   authorizationInput.value = authorizationValue;
                   let nfInput = document.querySelector('#nfInput');
                   nfInput.value = nfValue;
                   
                   let boletoInput = document.querySelector('#boletoInput');
                   boletoInput.value = boletoValue;
                   
                   let vencimentoInput = document.querySelector('#vencimentoInput');
                   vencimentoInput.value = vencimentoValue;
                   
                   paymentModal.show();
               });
           });

           let savePaymentButton = document.getElementById('saveChangesBtn');
           savePaymentButton.addEventListener('click', function () {
               document.getElementById('editForm').submit();
               paymentModal.hide();
           });
       });

   </script>
    
</div>
@stop