<?= $this->extend('estructura/header_dashboard'); ?>
<?= $this->section('content'); ?>
<!-- ============================================================== -->
<!-- Start right Content here -->
<!-- ============================================================== -->
<div class="main-content">
	<div class="page-content">
		<div class="container-fluid">
			<div class="row">
                <div class="col-lg-12">
                    <div class="card mt-n4 mx-n4 mb-n5">
                        <div class="bg-sistema-50 color-white">
                            <div class="card-body pb-4 mb-5">
                                <div class="row">
                                    <div class="col-md">
                                        <div class="row align-items-center px-3">
                                            <div class="col-md">
                                                <h4 class="fw-semibold color-white" id="ticket-title">#<?= $ordenCompra['IDOrdenCompra'] ?> - <?= $ordenCompra['Concepto'] ?></h4>
                                                <div class="hstack gap-3 flex-wrap">
                                                    <div class="text-muted color-white">Fecha de Pedido : <span class="fw-medium"><?= date("d-m-Y", strtotime($ordenCompra['FechaPedido'])) ?></span></div>
                                                    <div class="vr"></div>
                                                </div>
                                            </div>
                                            <!--end col-->
                                        </div>
                                        <!--end row-->
                                    </div>
                                    <!--end col-->
                                    <div class="col-md-auto mt-md-0 mt-4 d-flex justify-content-end align-items-center">
                                        <div class="hstack gap-1 flex-wrap">
                                            <!--<button type="button" class="btn bg-crea px-2 py-1">-->
                                            <!--    <i class="" style="font-size: 24px; color: #FFF"></i>-->
                                            <!--</button>-->
                                            <a href="<?= $baseUrl.'/'.$previo ?>" class="px-2 py-1" style="background-color: transparent!important" data-tooltip="tooltip" title="Volver">
                                                <i class="mdi mdi-arrow-left-circle" style="font-size: 24px; color: #FFF"></i>
                                            </a>
                                        </div>
                                    </div>
                                    <!--end col-->
                                </div>
                                <!--end row-->
                            </div><!-- end card body -->
                        </div>
                    </div><!-- end card -->
                </div><!-- end col -->
            </div><!-- end row -->

            <div class="row">
                <div class="col-xxl-8">
                    <div class="card">
                        <div class="card-header">
                            <h5 class="card-title mb-0">Comprobantes</h5>
                        </div>
                        <div class="row card-body m-0 p-2">
                            <!-- Accordions Bordered -->
                            <div class="accordion custom-accordionwithicon custom-accordion-border accordion-border-box accordion-success" id="accordionBordered">
                            <?php 
							foreach($comprobantes as $key => $items)
							{
							    $collapsed = "";
							    $ariaexpanded = false;
							    $show = "";
							    
							    if ($key === array_key_first($comprobantes))
							    {
							        $ariaexpanded = true;
							        $show = "show";
							    }
							    else
							    {
							        $collapsed = "collapsed";
							    }
							?>
							<div class="accordion-item">
                                <h2 class="accordion-header" id="accordionbordered<?= $items['CodigoSUNAT'] ?>">
                                    <button class="accordion-button <?= $collapsed ?>" type="button" data-bs-toggle="collapse" data-bs-target="#acc_<?= $items['CodigoSUNAT'] ?>" aria-expanded="<?= $ariaexpanded ?>" aria-controls="acc_<?= $items['CodigoSUNAT'] ?>">
                                        <?= $items['ComprobantePago'] ?>
                                    </button>
                                </h2>
                                <div id="acc_<?= $items['CodigoSUNAT'] ?>" class="accordion-collapse collapse <?= $show ?>" aria-labelledby="accordionbordered<?= $items['CodigoSUNAT'] ?>" data-bs-parent="#accordionBordered">
                                    <div class="accordion-body">
                                        
                                    </div>
                                </div>
                            </div>
							<?php 
							}
							?>
                            </div>
                        </div>
                    </div>
                </div>
                <!--end col-->
                <div class="col-xxl-4">
                    <div class="card">
                        <div class="card-header">
                            <h5 class="card-title mb-0">Orden de Compra</h5>
                        </div>
                        <div class="card-body">
                            <div class="table-responsive table-card">
                                <table class="table table-borderless align-middle mb-0">
                                    <tbody>
                                        <tr>
                                            <td class="fw-medium">Orden de Compra</td>
                                            <td>#<?= $ordenCompra['IDOrdenCompra'] ?></td>
                                        </tr>
                                        <tr>
                                            <td class="fw-medium">Concepto</td>
                                            <td id="t-client" class="d-flex align-items-center">
                                                <?= $ordenCompra['Concepto'] ?>
                                            </td>
                                        </tr>
                                        <tr class="">
                                            <td class="fw-medium">Observaciones</td>
                                            <td><?= $ordenCompra['Observacion'] ?></td>
                                        </tr>
                                        <tr class="">
                                            <td class="fw-medium">Nro Factura</td>
                                            <td><?= $ordenCompra['NroFactura'] ?></td>
                                        </tr>
                                        <tr class="">
                                            <td class="fw-medium">Fecha Emisión Factura</td>
                                            <td><?= $ordenCompra['FechaEmisionFactura'] != '' && $ordenCompra['FechaEmisionFactura'] != null ? date("Y-m-d", strtotime($ordenCompra['FechaEmisionFactura'])) : "" ?></td>
                                        </tr>
                                        <tr class="">
                                            <td class="fw-medium">Moneda</td>
                                            <td><?= $ordenCompra['TipoMoneda'] != "" ? $moneda[$ordenCompra['TipoMoneda']]['NOMBRE'].' ('.$moneda[$ordenCompra['TipoMoneda']]['SIMBOLO'].')' : "SIN INFORMACIÓN" ?></td>
                                        </tr>
                                        <tr class="">
                                            <td class="fw-medium">Total</td>
                                            <td><?= $ordenCompra['Total'] ?></td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        <!--end card-body-->
                    </div>
                    <!--end card-->
                </div>
                <!--end col-->
            </div>
		</div>
		<span class="respuesta_global"></span>
		<!-- container-fluid -->
	</div>
	<!-- End Page-content -->
	<footer class="footer">
		<div class="container-fluid">
			<div class="row">
				<div class="col-sm-6">
					<script>document.write(new Date().getFullYear())</script> © Verisure Peru.
				</div>
				<div class="col-sm-6">
					<div class="text-sm-end d-none d-sm-block">
						Desarrollado por <a href="https://linktr.ee/rbarcenac">Verisure Peru</a>
					</div>
				</div>
			</div>
		</div>
	</footer>
</div>
<!-- end main content-->



<!-- Modal Adjuntar Comprobante XML -->
<div class="modal fade zoomIn" id="reemplazarComprobantexml" data-bs-backdrop="static" role="dialog" aria-labelledby="examplereemplazarComprobantexml" aria-hidden="true">
	<div class="modal-dialog modal-dialog-centered modal-lg" role="document">
		<div class="modal-content" style="border: none;">
			<div class="modal-header bg-sistema p-3">
				<h5 class="modal-title color-white" id="examplereemplazarComprobantexml">Adjuntar XML</h5>
				<button type="button" class="btn-close bg-white" data-bs-dismiss="modal" aria-label="Close"></button>
			</div>
			<form id="formReemplazarComprobanteXML" class="formularioReemplazarComprobanteXML" action="<?= $baseUrl ?>/reemplazar-comprobante-orden-compra" method="POST" enctype="multipart/form-data" autocomplete="off" accept-charset="utf-8">
				
				<div class="row modal-body">
				    <input type="hidden" class="txtIDComprobanteOC_rfoc" id="txtIDComprobanteOC_rfoc" name="txtIDComprobanteOC_rfoc">
					
    				<h3 class="mb-3">Comprobantes</h3>
    				<div class="col-xxl-12 col-lg-12 d-flex justify-content-center">
                        <div class="col-8 card card-height-100 border-sistema-2px px-3">
                            <div class="card-header align-items-center d-flex">
                                <h4 class="card-title mb-0 flex-grow-1 text-center">XML</h4>
                            </div><!-- end card header -->
                            <hr class="m-0 p-0">
                            <div class="card-body p-0 m-0 pt-3 d-flex justify-content-center">
                                <div class="col-12 m-0 p-0">
        					        <input type="file" id="txtXMLOC_poc" class="filepond" name="txtXMLOC_poc" data-max-file-size="100MB" data-max-files="1" />
        					    </div>
                            </div><!-- end cardbody -->
                        </div><!-- end card -->
                    </div>
    				<hr class="m-0">
    				<span class="row col-12 m-0 py-2 justify-content-center respuesta"></span>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn bg-danger d-flex justify-content-end align-items-center color-white" data-bs-dismiss="modal"><span class="mdi mdi-close-thick me-2" style="font-size: 14px;"></span>Cerrar</button>
					<button type="submit" class="btn bg-success d-flex justify-content-end align-items-center color-white"><i class="mdi mdi-file-upload me-2 color-white" style="font-size: 14px;"></i>Importar</button>
				</div>
			</form>
		</div>
	</div>
</div>

<!-- Modal Adjuntar Comprobante PDF -->
<div class="modal fade zoomIn" id="reemplazarComprobantepdf" data-bs-backdrop="static" role="dialog" aria-labelledby="examplereemplazarComprobantepdf" aria-hidden="true">
	<div class="modal-dialog modal-dialog-centered modal-lg" role="document">
		<div class="modal-content" style="border: none;">
			<div class="modal-header bg-sistema p-3">
				<h5 class="modal-title color-white" id="examplereemplazarComprobantepdf">Adjuntar PDF</h5>
				<button type="button" class="btn-close bg-white" data-bs-dismiss="modal" aria-label="Close"></button>
			</div>
			<form id="formReemplazarComprobantePDF" class="formularioReemplazarComprobantePDF" action="<?= $baseUrl ?>/reemplazar-comprobante-orden-compra" method="POST" enctype="multipart/form-data" autocomplete="off" accept-charset="utf-8">
				
				<div class="row modal-body">
				    <input type="hidden" class="txtIDComprobanteOC_rfoc" id="txtIDComprobanteOC_rfoc" name="txtIDComprobanteOC_rfoc">
					
    				<h3 class="mb-3">Comprobantes</h3>
    				<div class="col-xxl-12 col-lg-12 d-flex justify-content-center">
                        <div class="col-8 card card-height-100 border-sistema-2px px-3">
                            <div class="card-header align-items-center d-flex">
                                <h4 class="card-title mb-0 flex-grow-1 text-center">PDF</h4>
                            </div><!-- end card header -->
                            <hr class="m-0 p-0">
                            <div class="card-body p-0 m-0 pt-3 d-flex justify-content-center">
                                <div class="col-12 m-0 p-0">
        					        <input type="file" id="txtPDFOC_poc" class="filepond" name="txtPDFOC_poc" data-max-file-size="100MB" data-max-files="1" />
        					    </div>
                            </div><!-- end cardbody -->
                        </div><!-- end card -->
                    </div>
    				<hr class="m-0">
    				<span class="row col-12 m-0 py-2 justify-content-center respuesta"></span>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn bg-danger d-flex justify-content-end align-items-center color-white" data-bs-dismiss="modal"><span class="mdi mdi-close-thick me-2" style="font-size: 14px;"></span>Cerrar</button>
					<button type="submit" class="btn bg-success d-flex justify-content-end align-items-center color-white"><i class="mdi mdi-file-upload me-2 color-white" style="font-size: 14px;"></i>Importar</button>
				</div>
			</form>
		</div>
	</div>
</div>
<?= $this->section('js'); ?>
<script>
	$(function () {
		pondXMLProveedor = FilePond.create(
            document.querySelector("#txtXMLOC_poc"), {
                labelIdle: 'Arrastre y suelte el XML asociado a la OC o <span class="filepond--label-action">explore</span>',
                allowMultiple: false,
                instantUpload: false,
                allowProcess: false,
                acceptedFileTypes: ['text/xml', 'application/xml'],
                onaddfile: (file) => {
                    // Validación manual por extensión
                    const allowedExtensions = /(\.xml)$/i;
                    if (!allowedExtensions.exec(file.name)) {
                        Swal.fire({
                            text: "El formato del archivo debe ser XML.",
                            icon: 'warning',
                            showCancelButton: false,
                            cancelButtonText: 'No',
                            confirmButtonColor: '#282e38',
                            confirmButtonText: 'OK'
                        });
                        // Remover el archivo
                        pondXMLProveedor.removeFile(file.id);
                        return false; // Detener el envío del archivo
                    }
                    return true; // Permitir el archivo
                }
            }
        );
		pondPDFProveedor = FilePond.create(
            document.querySelector("#txtPDFOC_poc"), {
                labelIdle: 'Arrastre y suelte el PDF asociado a la OC o <span class="filepond--label-action">explore</span>',
                allowMultiple: false,
                instantUpload: false,
                allowProcess: false,
                acceptedFileTypes: ['application/pdf'],
                onaddfile: (file) => {
                    // Validación manual por extensión
                    const allowedExtensions = /(\.pdf)$/i;
                    if (!allowedExtensions.exec(file.name)) {
                        Swal.fire({
                            text: "El formato del archivo debe ser PDF.",
                            icon: 'warning',
                            showCancelButton: false,
                            cancelButtonText: 'No',
                            confirmButtonColor: '#282e38',
                            confirmButtonText: 'OK'
                        });
                        // Remover el archivo
                        pondPDFProveedor.removeFile(file.id);
                        return false; // Detener el envíodel archivo
                    }
                    return true; // Permitir el archivo
                }
            }
        );
	});
</script>
<?php $this->endSection(); ?>
<?php $this->endSection(); ?>