@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-info">
                <h5><i class="fas fa-info"></i> Autorização de material para distribuição - gerar O.S <span class="badge badge-secondary shadow">{!! $count !!}</span></h5>
            </div>
        </div>
    </div>

    @if(count($perspectives) === 0)
        <div class="alert alert-info mt-4"><i class="fa fa-exclamation"></i> Você não tem material para autorizar distribuição e gerar O.S</div> 
    @else
    
        <div class="row mt-3">
            <div class="col-md-12">

                @include('app.includes.alerts')
                <div class="table-responsive">
                    <table class="table table-striped">
                        <thead class="bg-secondary text-white">
                            <tr>
                                <th style="width:7%;"><i class="fa fa-calendar"></i> Data</th>
                                <th style="width:30%;">Cliente</th>
                                <th style="width:77%;">Material</th>
                                <th>Quantidade</th>
                                <th class="text-center">Status</th>
                                <th class="text-center">Editar</th>
                                <th class="text-center">Distribuição</th>
                                <th class="text-center">Excluir</th>
                            </tr>
                        </thead>

                        <tbody>
                            @foreach($perspectives as $perspective)
                                @if($perspective->status == "Recebido")
                                    <tr>
                                        <td style="width:7%;"><span class="badge badge-primary">{{ date('d/m/Y', strtotime($perspective->date)) }}</span></td>
                                        <td style="width:30%;">{{ $perspective->customer->fantasy_name }}</td>
                                        <td style="width:60%;">{{ $perspective->materialcustomer->material }}</td>
                                        <td style="">{{ $perspective->qtd }}</td>
                                        <td class="text-danger"><strong>{{ $perspective->status }}</strong></td>
                                        <td class="text-center">
                                            <a href="#" class="btn btn-outline-success me-1 edit-btn-qtd"
                                                data-bs-toggle="modal" data-bs-target="#qtd"
                                                data-id="{{ $perspective->id }}"
                                                data-date="{{ $perspective->date }}"><i class="fas fa-edit"></i>
                                            </a>
                                        </td>
                                        <td style="width:15%;" class="text-center">
                                            <a href="{{ route('customers.getSectorsDist',[$perspective->customer->id, $perspective->material_customer_id]) }}" class="btn btn-outline-warning me-1 edit-btn" title="Faça primeiro a distribuição para depois autorizar"><i class="fas fa-check"></i></a>
                                        </td>
                                        <td class="text-center">
                                            <form action="{{ route('material_perspective.destroyAutorization', $perspective->id) }}" 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>
                                    </tr>
                                @endif
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    @endif

    <div class="card-header">
        {!! $perspectives->links() !!}
    </div>
    
    <!-- Alterar -->
    <div class="modal fade" id="qtd">
        <div class="modal-dialog">
            <div class="modal-content">
                <form id="editFormQtd" action="{{ route('material_perspective.updateQtdAutorization') }}" method="post">
                    @csrf
                    @method('PUT')
                    <!-- Modal Header -->
                    <div class="modal-header bg-info">
                        <h5 class="modal-title">Você confirma essa atualização?</h5>
                    </div>
                    <!-- Usado para edição, pois estou usando modal -->
                    <input type="hidden" id="idQtd" name="id" class="form-control" value="">

                    <!-- Modal body -->
                    <div class="modal-body">
                        <div class='row'>
                            <div class="col-md-4">
                                <input type="text" name="date" id='date' class="form-control datepicker" placeholder="Informe a nova data" value='' required="">
                            </div>
                            <div class="col-md-8">
                                <input type="text" name="qtd" id="qtdInput" class="quantity-sector-input form-control" placeholder="Informe a qtd a ser altrerada, ex: 14.000" value='' 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="saveChangesBtnQtd">Confirmar atualização</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    
    <script>
        
        /*QTD*/
        document.addEventListener('DOMContentLoaded', function () {
            let editButtons = document.querySelectorAll('.edit-btn-qtd');
            let editFormQtd = document.getElementById('editFormQtd');
            let id = document.getElementById('idQtd'); // Renomeado para evitar conflitos
            let date = document.getElementById('date');
            let qtd = document.getElementById('qtdInput');
            let qtdModal = new bootstrap.Modal(document.getElementById('qtd')); // Atualizado para 'status'

            editButtons.forEach(function (button) {
                button.addEventListener('click', async function () {
                    var dataId = this.getAttribute('data-id');
                    let response = await fetch('/app/material_perspective/' + dataId + '/edit');

                    if (response.ok) {
                        let data = await response.json();
                        id.value = data.id; // Preenche o input ID
                        qtd.value = data.qtd; // Preenche o input ID
                        
                       // Supondo que data.date seja uma string no formato 'YYYY-MM-DD'
                        let dataFormatada = new Date(data.date);
                        let dia = dataFormatada.getUTCDate().toString().padStart(2, '0');
                        let mes = (dataFormatada.getUTCMonth() + 1).toString().padStart(2, '0'); // Adicionamos 1 ao mês, pois os meses começam do zero
                        let ano = dataFormatada.getUTCFullYear();

                        // Criando a string no formato 'dd/mm/yyyy'
                        let dataFormatadaString = dia + '/' + mes + '/' + ano;
                        date.value = dataFormatadaString; // Preenche o input ID
                        qtdModal.show(); // Mostra o modal
                    } else {
                        console.error('Erro ao buscar os detalhes.');
                    }
                });
            });

            let saveChangesButtonQtd = document.getElementById('saveChangesBtnQtd');
            saveChangesButtonQtd.addEventListener('click', function () {
                editFormQtd.submit();
                qtdModal.hide(); // Oculta o modal
            });
        });
    
        document.addEventListener('DOMContentLoaded', function () {
            let editButtons = document.querySelectorAll('.edit-btn');
            let editForm = document.getElementById('editForm');
            let prospect_id = document.getElementById('prospect_id'); // Renomeado para evitar conflitos
            let customer_id = document.getElementById('customer_id');

            let statusModal = new bootstrap.Modal(document.getElementById('autorization')); // Atualizado para 'status'

            editButtons.forEach(function (button) {
                button.addEventListener('click', async function () {
                    var dataId = this.getAttribute('data-id');
                    let response = await fetch('https://siglv.acessohost.com.br/app/material_perspective/' + dataId + '/edit');

                    if (response.ok) {
                        let data = await response.json();
                        prospect_id.value = data.id; // Preenche o input ID
                        customer_id.value = data.customer_id;
                        statusModal.show(); // Mostra o modal
                    } else {
                        console.error('Erro ao buscar os detalhes.');
                    }
                });
            });

            let saveChangesButton = document.getElementById('saveChangesBtn');
            saveChangesButton.addEventListener('click', function () {
                editForm.submit();
                statusModal.hide(); // Oculta o modal
            });
        });
    </script>

</div>
@stop