@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><i class="fas fa-info"></i> Entrada de material para distribuição <span class="badge badge-secondary shadow">{!! $count !!}</span></h5>
            </div>
        </div>
    </div>
    
    @if(count($perspectives) === 0)
        <div class="alert alert-warning"><i class="fa fa-exclamation"></i> Você não tem nenhuma entrada de material</div> 
    @else

        <div class="row mt-4">
            <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>Material</th>
                                <th>Qtd</th>
                                <th style="width:10%;">Lançado</th>
                                <th>Status</th>
                                <th class="text-center">Editar</th>
                                <th class="text-center">Confirmar</th>
                                @can('excluir-entrada-material')
                                    <th class="text-center">Excluir</th>
                                @endcan
                            </tr>
                        </thead>
                        
                        <tbody>
                            @foreach($perspectives as $perspective)
                            <tr>
                                <td style="width:7%;"><span class="badge badge-primary" style='font-size:16px;'>{{ date('d/m/Y', strtotime($perspective->date)) }}</span></td>
                                <td style="width:30%;">{{ $perspective->customer->fantasy_name }}</td>
                                <td>{{ $perspective->materialcustomer->material }}</td>
                                <td>{{ $perspective->qtd }}</td>
                                <td style="width: 10%;">{{ $perspective->user->name }}</td>
                                <td class="text-danger"><strong>{{ $perspective->status }}</strong></td>
                                <td class="text-center">
                                    <a href="#" class="btn btn-outline-warning me-1 edit-btn-qtd"
                                        data-bs-toggle="modal" data-bs-target="#qtd"
                                        data-id="{{ $perspective->id }}"><i class="fas fa-edit"></i>
                                    </a>
                                </td>
                                <td class="text-center">
                                    <a href="#" class="btn btn-outline-success me-1 edit-btn-status"
                                        data-bs-toggle="modal" data-bs-target="#status"
                                        data-id="{{ $perspective->id }}"><i class="fas fa-edit"></i>
                                    </a>
                                </td>
                                @can('excluir-entrada-material')
                                    <td class="text-center">
                                        <form action="{{ route('material_perspective.destroy', $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>
                                @endcan
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>

            </div>
        </div>
    @endif
    
    <div class="card-header">
        {!! $perspectives->links() !!}
    </div>
    
    
<!-- Alterar autailizar -->
<div class="modal fade" id="qtd">
    <div class="modal-dialog">
        <div class="modal-content">
            <form id="editFormQtd" action="{{ route('material_perspective.updateQtd') }}" method="post">
                @csrf
                @method('PUT')
                <!-- Modal Header -->
                <div class="modal-header bg-info">
                    <h5 class="modal-title">Você confirma a alteração?</h5>
                </div>
                <!-- Usado para edição, pois estou usando modal -->
                <input type="hidden" id="idUpdate" 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 Alteração</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Confirmar recebimento -->
<div class="modal fade" id="status">
    <div class="modal-dialog">
        <div class="modal-content">
            <form id="editForm" action="{{ route('material_perspective.updateStatus') }}" method="post">
                @csrf
                @method('PUT')
                <!-- Modal Header -->
                <div class="modal-header bg-primary">
                    <h5 class="modal-title">Você confirma que esse material foi recebido?</h5>
                </div>
                <!-- Usado para edição, pois estou usando modal -->
                <input type="hidden" id="id" name="id" class="form-control" value="">
                
                <!-- Modal body -->
                <div class="modal-body">
                    <div class="col-md-12">
                        <input type="hidden" name="status" class="form-control" value='Recebido'>
                    </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 recebimento</button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
    /*Update*/
    document.addEventListener('DOMContentLoaded', function () {
        let editButtons = document.querySelectorAll('.edit-btn-qtd');
        let editFormQtd = document.getElementById('editFormQtd');
        let idUpdate = document.getElementById('idUpdate'); // Renomeado para evitar conflitos
        let qtd = document.getElementById('qtdInput'); // Renomeado para evitar conflitos
        let date = document.getElementById('date');

        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();
                    idUpdate.value = data.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
        });
    });
    
    /*Status*/
    document.addEventListener('DOMContentLoaded', function () {
        let editButtons = document.querySelectorAll('.edit-btn-status');
        let editForm = document.getElementById('editForm');
        let id = document.getElementById('id'); // Renomeado para evitar conflitos
       

        let statusModal = new bootstrap.Modal(document.getElementById('status')); // 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
                    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