@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> Pedidos List</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">Pedidos</li>
                    <li class="breadcrumb-item active">Pedidos List</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">Pedidos Overview</h5>
                    </div>
                </div>
                <div class="card-body">
                    <!--<div class="row g-3">
                        <div class="col-xxl-3 col-sm-6 box-col-6">
                            <div class="main-card-box bg-10-primary h-100">
                                <div class="p-20 main-cost-performance">
                                    <h5>Project Cost Performance</h5>
                                    <div class="common-space p-t-10">
                                        <div>
                                            <div class="cost-performance-wrapper">
                                                <div id="cost-performance"></div>
                                            </div>
                                        </div>
                                        <div class="cost-right-data">
                                            <ul>
                                                <li>
                                                    <h6>$45.764</h6><span>Total Budget</span>
                                                </li>
                                                <li>
                                                    <h6>$85.490</h6><span>Actual Cost</span>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-xxl-3 col-sm-6 box-col-6">
                            <div class="main-card-box bg-10-secondary h-100">
                                <div class="p-20 common-space">
                                    <div>
                                        <h5>8.63</h5><span class="c-o-light">Highlights Rating</span>
                                    </div>
                                    <div class="project-right-icon bg-10-secondary"><i
                                            class="fa-solid fa-thumbs-up fa-fade txt-secondary"></i>
                                    </div>
                                </div>
                                <div class="highlight-content">
                                    <div class="common-space"><span class="f-w-500">Avg. Client
                                            Rate</span>
                                        <div> <i class="txt-success" data-feather="trending-up"></i><span
                                                class="f-w-500">7.8
                                                / 10</span></div>
                                    </div>
                                    <div class="common-space"><span class="f-w-500">Avg. Marketplace
                                            Rate</span>
                                        <div> <i class="txt-danger" data-feather="trending-down"></i><span
                                                class="f-w-500">6.8 / 10</span></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-xxl-3 col-sm-6 box-col-6">
                            <div class="main-card-box bg-10-success h-100">
                                <div class="p-20 common-space">
                                    <div>
                                        <h5>56</h5><span class="c-o-light">Professionals Team</span>
                                    </div>
                                    <div class="project-right-icon bg-10-success"><i
                                            class="fa-solid fa-user fa-fade txt-success"></i></div>
                                </div>
                                <div class="p-20">
                                    <h6 class="mb-sm-3 mb-2">View Team Members</h6>
                                    <ul class="common-f-start">
                                        <li data-bs-toggle="tooltip" data-bs-placement="top"
                                            data-bs-title="Marley Ford"><img class="common-circle"
                                                src="{{ asset('assets/images/dashboard-11/user/3.jpg') }}"
                                                alt="user"></li>
                                        <li data-bs-toggle="tooltip" data-bs-placement="top"
                                            data-bs-title="Sarah Wilson"><img class="common-circle"
                                                src="{{ asset('assets/images/dashboard-11/user/7.jpg') }}"
                                                alt="user"></li>
                                        <li data-bs-toggle="tooltip" data-bs-placement="top"
                                            data-bs-title="Jessica Anderson"><img class="common-circle"
                                                src="{{ asset('assets/images/dashboard-11/user/8.jpg') }}"
                                                alt="user"></li>
                                        <li data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Ford Stoll">
                                            <img class="common-circle"
                                                src="{{ asset('assets/images/dashboard-11/user/9.jpg') }}"
                                                alt="user">
                                        </li>
                                        <li data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Davis Jone">
                                            <img class="common-circle"
                                                src="{{ asset('assets/images/dashboard-11/user/1.jpg') }}"
                                                alt="user">
                                        </li>
                                        <li data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="40+ More">
                                            <div class="common-circle bg-lighter-secondary">40+</div>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="col-xxl-3 col-sm-6 box-col-6">
                            <div class="main-card-box bg-10-warning h-100">
                                <div class="p-20 common-space">
                                    <div>
                                        <h5>153</h5><span class="c-o-light">Total Projects</span>
                                    </div>
                                    <div class="project-right-icon bg-10-warning"><i
                                            class="fa-solid fa-file-pen fa-fade txt-warning"></i></div>
                                </div>
                                <div class="project-list-card">
                                    <div class="common-space"><span class="f-w-500">Pending</span><span>27</span></div>
                                    <div class="common-space"> <span class="f-w-500">Progress</span><span>48</span>
                                    </div>
                                    <div class="common-space"><span class="f-w-500">Completed</span><span>78</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>-->
                </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>Todos</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>Em aberto</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>Aprovado</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>preparando envio</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>Faturado</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>Enviado</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>Entregue</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>Não Entregue</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>Dados Imcompletos</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>Cancelado</a></li>
                    </ul><a class="btn btn-primary" href="{{ route('pedidos.new-pedidos') }}" target="_blank"><i
                            class="fa-solid fa-plus"></i> Incluir Pedido </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">
                                <table class="table" id="leave-employee">
                                    <thead>
                                        <tr>
                                            <th>Pedido</th>
                                            <th>Emitida em</th>
                                            <th>Destinatário</th>
                                            <th>Tipo Pedido</th>
                                            <th>NF-e</th>
                                            <th>Total</th>
                                            <th>Status</th>
                                            <th>Ações</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach ($pedidos as $p )
                                        <tr>
                                            <td>{{ $p->id}}</td>
                                            <td>{{ $p->ped_dt_entrada }}</td>
                                            <td>{{ $p->nome_cliente }}</td>
                                            <td>{{ $p->ped_tipo_pedido }}</td>
                                            <td></td>
                                            <td></td>
                                            @if($p->ped_status == 'aberto')
                                            <td><span class="badge f-14 f-w-400 txt-warning">{{$p->ped_status}}</span></td>
                                            @else
                                            <td><span class="badge f-14 f-w-400 txt-success">{{$p->ped_status}}</span></td>
                                            @endif
                                            <td>
                                                <div class="common-align gap-2 justify-content-start">
                                                    @if($p->ped_status == 'aberto')
                                                    <div class="approval-box bg-success" data-id="{{$p->id}}" data-url="{{ route('pedidos.update-status', $p->id) }}"><i class="fa-solid fa-check text-white"></i></a></div>
                                                    <div class="approval-box border border-danger"><i class="fa-solid fa-ban txt-danger"></i></div>
                                                    @endif
                                                </div>
                                            </td>
                                        </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </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">
                                <table class="table" id="leave-employee">
                                    <thead>
                                        <tr>
                                            <th>Pedido</th>
                                            <th>Emitida em</th>
                                            <th>Destinatário</th>
                                            <th>Tipo Pedido</th>
                                            <th>NF-e</th>
                                            <th>Total</th>
                                            <th>Status</th>
                                            <th>Ações</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach ($pedidos_aberto as $p_a )

                                        <tr>
                                            <td>{{ $p_a->id}}</td>
                                            <td>{{ $p_a->ped_dt_entrada }}</td>
                                            <td>{{ $p_a->nome_cliente }}</td>
                                            <td>{{ $p_a->ped_tipo_pedido }}</td>
                                            <td></td>
                                            <td></td>
                                            <td><span class="badge f-14 f-w-400 txt-warning">{{$p_a->ped_status}}</span></td>
                                            <td>
                                                <div class="common-align gap-2 justify-content-start">

                                                    <div class="approval-box bg-success" data-id="{{$p_a->id}}" data-url="{{ route('pedidos.update-status', $p_a->id) }}"><i class="fa-solid fa-check text-white"></i></a></div>
                                                    <div class="approval-box border border-danger"><i class="fa-solid fa-ban txt-danger"></i></div>

                                                </div>
                                            </td>
                                        </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </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">
                                <table class="table" id="leave-employee">
                                    <thead>
                                        <tr>
                                            <th>Pedido</th>
                                            <th>Emitida em</th>
                                            <th>Destinatário</th>
                                            <th>Tipo Pedido</th>
                                            <th>NF-e</th>
                                            <th>Total</th>
                                            <th>Status</th>
                                            <th>Ações</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach ($pedidos_aprovado as $p_apvr )

                                        <tr>
                                            <td>{{ $p_apvr->id}}</td>
                                            <td>{{ $p_apvr->ped_dt_entrada }}</td>
                                            <td>{{ $p_apvr->nome_cliente }}</td>
                                            <td>{{ $p_apvr->ped_tipo_pedido }}</td>
                                            <td></td>
                                            <td></td>
                                            <td><span class="badge f-14 f-w-400 txt-success">{{$p_apvr->ped_status}}</span></td>
                                            <td>
                                                <div class="common-align gap-2 justify-content-start">

                                                </div>
                                            </td>
                                        </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </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 "${pedidoId}"`,
                    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