@extends('layout.backoffice')
@section('content')
    <a href="#" id="btnVolver" class="btn btn-secondary btn-sm mb-3">
        <i class="bx bx-arrow-back me-1"></i> Volver atrás
    </a>
    <div class="row">
        <div class="col-12">
            <div class="card border shadow-sm">
                <div class="card-header d-flex flex-wrap justify-content-between align-items-center gap-3 py-3">
                    <h5 class="mb-0">Pedido #{{ $pedido->getConsecutivo() }}</h5>

                    <ul class="nav nav-tabs card-header-tabs mb-0" role="tablist">
                        <li class="nav-item">
                            <a class="nav-link active" data-bs-toggle="tab" href="#tab_cliente" role="tab" aria-controls="tab_cliente" aria-selected="true">
                                Información Cliente
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" data-bs-toggle="tab" href="#tab_estados" role="tab" aria-controls="tab_estados" aria-selected="false">
                                Historial De Estados
                            </a>
                        </li>
                    </ul>
                </div>
                <div class="card-body">
                    @if($pedido->getConsecutivo()!="")
                        <div class="tab-content">
                            <div class="tab-pane fade show active" id="tab_cliente">
                                @include('page.pedido.consultar.tab_cliente')
                            </div>

                            <div class="tab-pane fade" id="tab_estados">
                                @include('page.pedido.consultar.tab_estados')
                            </div>
                        </div>
                    @else
                        <div class="alert alert-warning">El pedido que intentas buscar no existe</div>
                    @endif
                </div>
            </div>
        </div>
    </div>
    @include('page.pedido.consultar.modal')
    <script>
        const pedido = "{{ $pedido->getConsecutivo() }}";
        jQuery('#btn-enviar-comentario').on('click', function () {
            if (system_validarcampos("form-estados")) {
                axios.post('pedido/registrar-comentario', getDataJson("form-estados")).then(function (resp) {
                    if (resp.data.error === 0) {
                        Swal.fire("Comentario registrado", '', 'success').then(function () {
                            window.location.reload();
                        });
                    } else {
                        notificarUsuario(resp.data.mensaje);
                    }
                });
            }
        });

        jQuery('#btn_registrar_guia').on('click', function () {
            if (system_validarcampos("form_registrar_guia")) {
                Mostrarloader()
                axios.post('pedido/registrar-guia', getDataJson("form_registrar_guia")).then(function (resp) {
                    Ocultarloader()
                    if (resp.data.error === 0) {
                        Swal.fire("Se ha registrado la guia de envio correctamente", '', 'success').then(function () {
                            window.location.reload();
                        });
                    } else {
                        notificarUsuario(resp.data.mensaje);
                    }
                });
            }
        });

        jQuery('#btnVolver').click(function (e) {
            e.preventDefault();
            window.history.back();
        });

        jQuery('#btn-modal-respuesta').on('click', function () {
            jQuery('#modal_consultar_respuesta').modal('show');
        });

        jQuery('#btn-modal-generar-guia').on('click', function () {
            jQuery('#modal_generar_guia').modal('show');
        });

        jQuery('#btn-pedido-enviar-correo').on('click', function () {
            Swal.fire({
                title: '¿Está seguro de enviar el correo del pedido al cliente?',
                icon: 'warning',
                showCancelButton: true,
                confirmButtonText: 'Si',
                cancelButtonText: 'No'
            }).then((result) => {
                if (result.value) {
                    Mostrarloader()
                    axios.get(`pedido/correo-nuevo-pedido?pedido=${pedido}`, getDataJson("producto")).then(function (resp) {
                        Ocultarloader()
                        if (resp.data.error === 0) {
                            Swal.fire("Mensaje enviado", '', 'success').then(function () {
                                window.location.reload()
                            });
                        } else {
                            notificarUsuario(resp.data.mensaje);
                        }
                    });
                }
            });
        });

        jQuery('#btn-pedido-cancelar').on('click', function () {
            Swal.fire({
                title: '¿Está seguro de cancelar este pedido?',
                icon: 'warning',
                input: 'textarea',
                inputPlaceholder: 'Ingresa un comentario para cancelar la orden',
                showCancelButton: true,
                confirmButtonText: 'Si',
                cancelButtonText: 'No',
                inputValidator: (value) => {
                    return new Promise((resolve) => {
                        if (value) {
                            resolve();
                        } else {
                            resolve('Ingresa un comentario para poder cancelar la orden');
                        }
                    });
                }
            }).then((result) => {
                if (result.value) {
                    Mostrarloader()
                    axios.post(`pedido/actualizar/estado`, {id_pedido: pedido, comentario: result.value, estado: 'cancelado'}).then(function (resp) {
                        Ocultarloader()
                        if (resp.data.error === 0) {
                            Swal.fire("Orden Cancelada", '', 'success').then(function () {
                                window.location.reload()
                            });
                        } else {
                            notificarUsuario(resp.data.mensaje);
                        }
                    });
                }
            });
        });
    </script>
    <style>
        @media (max-width: 576px) {
            .card-header {
                display: flex;
                flex-direction: column;
                align-items: center;
            }

            .nav-tabs {
                display: flex;
                justify-content: center;
                width: 100%;
                padding: 0;
            }

            .nav-item {
                text-align: center;
            }

            .nav-link {
                text-align: center;
            }
        }
    </style>
@endsection