@extends('adminlte::page')

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

@section('content')
<div class="container-fluid">
    @include('app.includes.alerts')
    <div class="row pt-4">
        <div class="col-md-12">
            <div class="callout callout-info">
                <h5 class='center'><i class="fas fa-info"></i> Serviço de distribuição de material por setor <i class="fa fa-car"></i> <span class="badge badge-secondary shadow">{!! $count !!}</span></h5>
            </div>
        </div>
    </div> 
    
    @if(count($autorizations) === 0)
        <div class="alert alert-info"><i class='fa fa-exclamation'></i> Sem serviço de distribuição no momento</div>
    @else
        
        <div class="row mt-4">
            <div class="col-md-12 mt-2">
                <div class="table-responsive">

                    <table class="table table-striped">
                        <thead  class="bg-secondary text-white">
                            <tr>
                                <th><i class='fa fa-calendar'></i> Data</th>
                                <th class="text-center">O.S</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>Status</th>
                                @can('retornar-os')
                                    <th>Retornar</th>
                                @endcan
                                @can('excluir-os')
                                    <th>Excluir</th>
                                @endcan
                                <th>Distribuir</th>
                            </tr>
                        </thead>

                        <tbody>
                            @foreach($autorizations AS $autorization)
                                <tr>
                                    <td><span class="badge badge-secondary" style='font-size:16px;'>{{ date('d/m/Y', strtotime($autorization->perspective->date)) }}</span></td>
                                    <td>
                                        @can('atualizar-os')
                                            <a href="" class="btn btn-outline-info me-1 btn-open-payment-modal"
                                                data-bs-toggle="modal" data-bs-target="#autorization" title="Clique para atualizar O.S"
                                                data-id="{{ $autorization->id }}" data-autorization="{{ $autorization->autorization }}">
                                                <span class="badge badge-secondary" style='font-size:16px;'>{{ $autorization->autorization }}</span>
                                            </a>
                                        @else
                                        <span class="badge badge-secondary" style='font-size:16px;'>{{ $autorization->autorization }}</span>
                                    </td>
                                    @endcan
                                    <td>{{ $autorization->customer->fantasy_name }}</td>
                                    <td>{{ $autorization->perspective->materialcustomer->material }}</td>
                                    <td>{{ $autorization->promotion->name }}</td>
                                    <td>
                                        @if( !isset($autorization->image) ) 
                                            <img src="{{ url("images/sem-imagem.png") }}" class="img-fluid" alt="Sem Imagem definida" style="max-width: 49px;">       
                                        @else
                                            <a href="#" class="edit-btn" data-id="{{ $autorization->id }}" data-image="{{ url("storage/{$autorization->image}") }}">
                                                <img src="{{ url("storage/{$autorization->image}") }}" class="img-thumbnail img-fluid shadow" alt="{{ $autorization->autorization }}" style="max-width: 69px;" data-toggle="modal" data-target="#imagemModal">
                                            </a>
                                        @endif 
                                    </td>
                                    <td>{{ $autorization->validate }}</td>
                                    <td>{{ $autorization->perspective->qtd }}</td>
                                    <td class='text-success'><strong>{{ $autorization->status }}</strong></td>
                                    @if ($autorization->distributions->isNotEmpty())
                                        <td class="text-danger"><strong>{{ $autorization->distributions->first()->status }}</strong></td>
                                        @else
                                        <td class="text-danger"><strong>À distribuir</strong></td>
                                    @endif
                                    
                                    @can('retornar-os')
                                        <td>
                                            <form action="{{ route('autorization.returnAuthorization',[$autorization->id, $autorization->prospect_id] ) }}" method="POST" onsubmit="return confirm('Tem certeza que deseja retornar?')">
                                                @csrf
                                                @method('DELETE')
                                                <button type="submit" class="btn btn-warning shadow"><i class="fas fa-undo"></i></button>
                                            </form>
                                        </td>
                                    @endcan
                                    
                                    @can('excluir-os')
                                    <td>
                                        <form action="{{ route('autorization.destroy', $autorization->autorization) }}" 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
                                    
                                    <td class='text-center'>
                                        <a href="{{ route('services.editService', ['id' => $autorization->id, 'customer_id' => $autorization->customer_id, 'material_customer_id' => $autorization->perspective->materialcustomer->id]) }}" class="btn btn-success">
                                            <i class="fa fa-car fa-2x"></i>
                                        </a>
                                    </td>

                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                  
                </div>
            </div>
        @endif
    </div>
    
    <!-- Modal -->
    <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>

    <!-- Seus scripts -->
    <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 O.S -->
    <div class="modal fade" id="autorization">
       <div class="modal-dialog">
           <div class="modal-content">
               <form id="editForm" action="{{ route('services.editOrder') }}" method="post">
                   @csrf
                   @method('PUT')
                   
                   <!-- Modal Header -->
                   <div class="modal-header bg-info">
                       <h5 class="modal-title">Você confirma a alteração dessa O.S?</h5>
                   </div>
                   
                    <input type="hidden" id="id" name="id" class="form-control" value="" readonly="">
                    <input type="text" name="autorizationCanceled" id="authorizationInput" class="form-control" value="" readonly="">

                   <!-- Modal body -->
                   <div class="modal-body">
                        <div class="row">
                            <div class="col-md-12">
                                <label>O.S Nº <code>* alterar nº da O.S</code></label>
                                <input type="text" name="autorization" class="form-control" value="" required="">
                            </div>
                            <div class="col-md-12 mt-4">
                                <label>Informe o motivo da alteração dessa O.S</label>
                                <textarea name="reason" class="form-control" rows="5" required=""> </textarea>
                            </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 alteração da O.S</button>
                   </div>
               </form>
           </div>
       </div>
   </div>

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

           openPaymentModalButtons.forEach(function (button) {
               button.addEventListener('click', function () {
                   let dataId = button.getAttribute('data-id');
                   let authorizationValue = button.getAttribute('data-autorization');
                  
                   let id = document.querySelector('#id');
                   id.value = dataId;
                   
                   let authorizationInput = document.querySelector('#authorizationInput');
                   authorizationInput.value = authorizationValue;
                   
                   autorizationModal.show();
               });
           });

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

   </script>
</div>
@stop