@extends('layouts.simple.master')

@section('title', 'Project List')

@section('css')
<link rel="stylesheet" type="text/css" href="{{ asset('assets/css/vendors/swiper/swiper-bundle.min.css') }}">
<link rel="stylesheet" type="text/css" href="{{ asset('assets/css/vendors/animate.css') }}">
<link rel="stylesheet" type="text/css" href="{{ asset('assets/css/vendors/jquery.dataTables.css') }}">
<link rel="stylesheet" type="text/css" href="{{ asset('assets/css/vendors/select.bootstrap5.css') }}">
@endsection

@section('main_content')
<div class="container-fluid">
    <div class="page-title">
        <div class="row">
            <div class="col-sm-6">
                <h3> MDF</h3>
            </div>
            <div class="col-sm-6">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href=""> <svg class="stroke-icon">
                                <use href="{{ asset('assets/svg/icon-sprite.svg#stroke-home') }}"></use>
                            </svg></a></li>
                    <li class="breadcrumb-item">Nf-e</li>
                    <li class="breadcrumb-item active">Notas Fiscais</li>
                </ol>
            </div>
        </div>
    </div>
</div><!-- Container-fluid starts-->
<div class="container-fluid">
    <div class="row project-cards">
        <div class="col-md-12 project-list">
            <div class="card">
                <div class="card-header">
                    <div class="header-top">
                        <h5 class="m-0">MDF Overview</h5>
                    </div>
                </div>
                <div class="card-body">
                </div>
            </div>
        </div>
        <div class="col-12">
            <div class="card p-3">
                <div class="common-space project-tabs">
                    <ul class="nav nav-tabs border-tab" id="top-tab" role="tablist">
                        <li class="nav-item"><a class="nav-link active" id="top-home-tab" data-bs-toggle="tab"
                                href="#top-home" role="tab" aria-controls="top-home" aria-selected="true"><i
                                    class="fa-solid fa-bullseye"></i>Todas</a></li>
                        <li class="nav-item"><a class="nav-link" id="progress-top-tab" data-bs-toggle="tab"
                                href="#top-progress" role="tab" aria-controls="top-progress"
                                aria-selected="false"><i class="fa-solid fa-bars-progress"></i>Pendentes</a></li>
                        <li class="nav-item"><a class="nav-link" id="pending-top-tab" data-bs-toggle="tab"
                                href="#top-pending" role="tab" aria-controls="top-pending"
                                aria-selected="false"><i class="fa-regular fa-hourglass-half"></i>Emitidas</a></li>
                        <li class="nav-item"><a class="nav-link" id="completed-top-tab" data-bs-toggle="tab"
                                href="#top-completed" role="tab" aria-controls="top-completed"
                                aria-selected="false"><i class="fa-solid fa-circle-check"></i>Canceladas</a></li>
                        
                    </ul><a class="btn btn-primary" href="{{ route('mdf.new-mdf') }}" target="_blank"><i
                            class="fa-solid fa-plus"></i> Incluir Mdf-e </a>
                </div>
            </div>
        </div>
        <div class="col-sm-12">
            <div class="card">
                <div class="card-body projects-wrapper">
                    <div class="tab-content" id="top-tabContent">
                        <div class="tab-pane fade show active" id="top-home" role="tabpanel" aria-labelledby="top-home-tab">
                            <div class="table-responsive leave-request-table custom-scrollbar">
                          
                        </div>
                        <div class="tab-pane fade" id="top-progress" role="tabpanel" aria-labelledby="progress-top-tab">
                            <div class="table-responsive leave-request-table custom-scrollbar">
                            
                        </div>
                        <div class="tab-pane fade" id="top-pending" role="tabpanel" aria-labelledby="pending-top-tab">
                        <div class="table-responsive leave-request-table custom-scrollbar">
                  
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div><!-- Container-fluid Ends-->
@endsection

@section('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const updateButtons = document.querySelectorAll('.bg-success');

        updateButtons.forEach(button => {
            button.addEventListener('click', function() {
                const pedidoId = this.getAttribute('data-id');

                //console.log(pedidoId);
                //const fornecedorNome = this.getAttribute('data-nome');
                const updateUrl = this.getAttribute('data-url'); // URL para update
                //console.log(updateUrl);
                const novoStatus = 'aprovado'; // Novo status vindo do botão
                const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');

                Swal.fire({
                    title: 'Você tem certeza?',
                    text: `Deseja aprovar o pedido ""`,
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#3085d6',
                    cancelButtonColor: '#d33',
                    confirmButtonText: 'Sim, aprovar!',
                    cancelButtonText: 'Cancelar'
                }).then((result) => {
                    //alert(novoStatus);
                    if (result.isConfirmed) {
                        fetch(updateUrl, {
                                method: 'PATCH',
                                headers: {
                                    'X-CSRF-TOKEN': csrfToken,
                                    'Content-Type': 'application/json',
                                }, // PATCH para atualizações tem q ser o mesmo na rota web.php
                                body: JSON.stringify({
                                    status: novoStatus
                                }) // Envia o novo status
                            })
                            .then(response => {


                                if (response.ok) {
                                    console.log(response);
                                    Swal.fire(
                                        'Aprovado!',
                                        'success'
                                    ).then(() => {
                                        location.reload(); // Recarrega a página
                                    });
                                } else {
                                    Swal.fire(
                                        'Erro!',
                                        'Não foi possível Aprovar Pedido. Tente novamente.',
                                        'error'
                                    );
                                }
                            })
                            .catch(error => {
                                console.error('Erro:', error);
                                Swal.fire(
                                    'Erro!',
                                    'Ocorreu um problema ao processar a solicitação.',
                                    'error'
                                );
                            });
                    }
                });
            });
        });
    });
</script>
<script src="{{ asset('assets/js/chart/apex-chart/apex-chart.js') }}"></script>
<script src="{{ asset('assets/js/chart/apex-chart/stock-prices.js') }}"></script>
<script src="{{ asset('assets/js/chart/apex-chart/moment.min.js') }}"></script>
<script src="{{ asset('assets/js/projects/common-project-stat.js') }}"></script>
<script src="{{ asset('assets/js/typeahead/handlebars.js') }}"></script>
<script src="{{ asset('assets/js/typeahead/typeahead.bundle.js') }}"></script>
<script src="{{ asset('assets/js/typeahead/typeahead.custom.js') }}"></script>
<script src="{{ asset('assets/js/typeahead-search/handlebars.js') }}"></script>
<script src="{{ asset('assets/js/typeahead-search/typeahead-custom.js') }}"></script>
<script src="{{ asset('assets/js/tooltip-init.js') }}"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
@endsection