@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-success">
                <h5 class='center'><i class="fas fa-info"></i> Autorização de Faturamento 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">
        <div class="col-md-12">
            <a href="{{ route('orderCanceled.index') }}" class="btn btn-danger">O.S Cancelada(s)</a>
        </div>
    </div> 
    
    @if(count($autorizations) === 0)
        <div class="alert alert-info"><i class='fa fa-exclamation'></i> Sem serviço para faturar</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-info 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>Status</th>
                                <th>Faturar</th>
                                <th>Excluir</th>
                            </tr>
                        </thead>

                        <tbody>
                            @foreach($autorizations AS $autorization)
                                <tr>
                                    <td><span class="badge badge-secondary" style='font-size:16px;'>{{ $autorization->autorization }}</span></td>
                                    <td><span class="badge badge-secondary" style='font-size:16px;'>{{ date('d/m/Y', strtotime($autorization->perspective->date)) }}</span></td>
                                    <td>{{ $autorization->customer->fantasy_name }}</td>
                                    <td>{{ $autorization->perspective->materialcustomer->material }}</td>
                                    <td>{{ $autorization->promotion->name }}</td>
                                    @if( !isset($autorization->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="{{ $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>
                                        </td>
                                    @endif 
                                    <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-success"><strong>{{ $autorization->distributions->first()->status }}</strong></td>
                                        @else
                                        <td class="text-danger"><strong>À distribuir</strong></td>
                                    @endif
                                    <td><a href="{{ route('invoice.edit', $autorization->id) }}" class="btn btn-success"><i class="fa fa-lock fa-1x"></i></a></td>
                                    @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
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                    
                    <!-- 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>
                  
                </div>
            </div>
        @endif
    </div>
</div>
@stop