<div class="accordion accordion-bordered mt-3" id="cabeceraPedido">

    <div class="card accordion-item active">
        <h2 class="accordion-header" id="headingPedido">
            <button type="button" class="accordion-button" data-bs-toggle="collapse" data-bs-target="#accordionPedidoTip" aria-expanded="false" aria-controls="accordionPedidoTip">
                <h3><?= lang("Pedidos.datosPedido") ?></h3>
            </button>
        </h2>

        <div id="accordionPedidoTip" class="accordion-collapse collapse show" data-bs-parent="#accordioPedido">
            <div class="accordion-body">

                <div class="row">

                    <div class="col-md-12 col-lg-2 px-4">
                        
                        <div class="mb-1">
                            <label for="id" class="form-label">
                                <?= lang('Pedidos.id') ?>
                            </label>
                            <input readonly id="id" name="id" tabindex="1" maxLength="11" class="form-control" value="<?= old('id', $pedidoEntity->id) ?>" >
                        </div>
                    </div><!--//.mb-3 -->

                    <?php if (!(auth()->user()->inGroup('cliente-admin') || auth()->user()->inGroup('cliente-editor'))) : ?>
                        <div class="col-md-12 col-lg-4 px-4">
                            <div class="mb-1">
                                <label for="cliente" class="form-label">
                                    <?= lang('Pedidos.cliente') ?>
                                    <div class="btn-group btn-group-sm">
                                        <a href="<?= route_to('editarCliente', $pedidoEntity->cliente_id); ?>" target="_blank" ><i class="ti ti-file-search ti-sm btn-edit mx-2" data-id="${data.id}"></i></a>
                                    </div>
                                </label>
                                <input readonly id="cliente" name="cliente" tabindex="2" maxLength="11" class="form-control" value="<?= old('cliente', $pedidoEntity->cliente) ?>" >
                            </div>
                        </div><!--//.mb-3 -->
                    <?php endif; ?>
                    
                    <div class="col-md-12 col-lg-3 px-4">
                        
                        <div class="mb-1">
                            <label for="comercial" class="form-label">
                                <?= lang('Pedidos.comercial') ?>
                            </label>
                            <input readonly id="comercial" name="comercial" tabindex="1" maxLength="11" class="form-control" value="<?= old('comercial', $pedidoEntity->comercial) ?>" >
                        </div>
                    </div><!--//.mb-3 -->

                    <div class="col-md-12 col-lg-3 px-4">
                        
                        <div class="mb-1">
                            <label for="estadoText" class="form-label">
                                <?= lang('Pedidos.estado') ?>
                            </label>
                            <input readonly id="estadoText" name="estadoText" tabindex="1" maxLength="11" class="form-control" value="<?= old('estadoText', $pedidoEntity->estadoText) ?>" >
                        </div>
                    </div><!--//.mb-3 -->

                    <?php if($pedidoEntity->estado == 'validacion' && (!(auth()->user()->inGroup('cliente-admin') || auth()->user()->inGroup('cliente-editor')))): ?>
                        <div class="col-md-12 col-lg-2 px-4"></div>
                        <div class="col-md-12 col-lg-4 px-4"></div>
                        <div class="col-md-12 col-lg-3 px-4"></div>
                        <div class="col-md-12 col-lg-3 px-4">
                        <label for="estadoText" class="form-label">
                                <?= lang('Pedidos.importePendiente') ?>
                            </label>
                            <input readonly id="importePendienteText" name="importePendienteText" tabindex="1" maxLength="11" class="form-control" value="<?= old('importePendienteText', $importePendiente) ?>" >
                        </div>
                        
                    <?php endif; ?>
                        
                    <?php if (!(auth()->user()->inGroup('cliente-admin') || auth()->user()->inGroup('cliente-editor'))) : ?>
                        <div class="accordion accordion mt-3 accordion-without-arrow" id="FechasPedido">
                            <div class="card accordion-item active mt-3 mx-2">
                                <h2 class="accordion-header" id="headingFechas">
                                    <button type="button" class="accordion-button collapsed" data-bs-toggle="collapse" data-bs-target="#accordionIcon-1" aria-controls="accordionIcon-1">
                                        <i class="ti ti-businessplan ti-sm mx-2"></i><?= lang('Pedidos.totales') ?> 
                                    </button>
                                </h2>

                                <div id="accordionFechasTip" class="accordion show" data-bs-parent="#accordioFechas">
                                    <div class="accordion-body">
                                        <div class="row">
                                            <div class="col-md-12 col-lg-3 px-4">                        
                                                <div class="mb-1">
                                                    <label for="total_precio" class="form-label">
                                                        <?= lang('Pedidos.total_precio') ?>
                                                    </label>
                                                    <input readonly id="total_precio" name="total_precio" tabindex="1" maxLength="11" class="form-control autonumeric" value="<?= old('total_precio', $pedidoEntity->total_precio) ?>" >
                                                </div>
                                            </div><!--//.mb-3 -->

                                            <div class="col-md-12 col-lg-3 px-4">                        
                                                <div class="mb-1">
                                                    <label for="total_tirada" class="form-label">
                                                        <?= lang('Pedidos.total_tirada') ?>
                                                    </label>
                                                    <input readonly id="total_tirada" name="total_tirada" tabindex="1" maxLength="11" class="form-control" value="<?= old('total_tirada', $pedidoEntity->total_tirada   ) ?>" >
                                                </div>
                                            </div><!--//.mb-3 -->

                                        </div>

                                    </div> <!--//accordion-body -->
                                </div> <!--//accordionFechasTip-->
                            </div> <!--//card-->
                    </div>
                
                    <div class="accordion accordion mt-3 accordion-without-arrow" id="FechasPedido">
                        <div class="card accordion-item active mt-3 mx-2">
                            <h2 class="accordion-header" id="headingFechas">
                                <button type="button" class="accordion-button collapsed" data-bs-toggle="collapse" data-bs-target="#accordionIcon-1" aria-controls="accordionIcon-1">
                                    <i class="ti ti-calendar ti-sm mx-2"></i><?= lang("Pedidos.fechas") ?>
                                </button>
                            </h2>

                            <div id="accordionFechasTip" class="accordion show" data-bs-parent="#accordioFechas">
                                <div class="accordion-body">
                                    <div class="row">
                                        <div class="col-md-12 col-lg-3 px-4">                        
                                            <div class="mb-1">
                                                <label for="fecha_entrega_real" class="fecha-pedido form-label">
                                                    <?= lang('Pedidos.fecha_entrega_real') ?>
                                                </label>
                                                <input type="text" value="" id="fecha_entrega_real" name="fecha_entrega_real" tabindex="1" maxLength="11" class="form-control inaplazable-date" value="<?= old('fecha_entrega_real', $pedidoEntity->fecha_entrega_real) ?>" >
                                                <div id="fecha_entrega_real_change_user" class="form-text"><?= $pedidoEntity->fecha_entrega_real_change_user?></div>
                                            </div>
                                        </div>
                                        <div class="col-md-12 col-lg-3 px-4">                        
                                            <div class="mb-1">
                                                <label for="fecha_impresion" class="form-label">
                                                    <?= lang('Pedidos.fecha_impresion') ?>
                                                </label>
                                                <input type="text" id="fecha_impresion" name="fecha_impresion" tabindex="1" maxLength="11" class="fecha-pedido form-control inaplazable-date" value="<?= old('fecha_impresion', $pedidoEntity->fecha_impresion) ?>" >
                                                <div id="fecha_impresion_change_user" class="form-text"><?= $pedidoEntity->fecha_impresion_change_user?></div>
                                            </div>
                                        </div>
                                        <div class="col-md-12 col-lg-3 px-4">                        
                                            <div class="mb-1">
                                                <label for="fecha_encuadernado" class="form-label">
                                                    <?= lang('Pedidos.fecha_encuadernado') ?>
                                                </label>
                                                <input type="text" id="fecha_encuadernado" name="fecha_encuadernado" tabindex="1" maxLength="11" class="fecha-pedido form-control inaplazable-date" value="<?= old('fecha_encuadernado', $pedidoEntity->fecha_encuadernado) ?>" >
                                                <div id="fecha_encuadernado_change_user" class="form-text"><?= $pedidoEntity->fecha_encuadernado_change_user?></div>
                                            </div>
                                        </div>
                                        <div class="col-md-12 col-lg-3 px-4">                        
                                            <div class="mb-1">
                                                <label for="fecha_entrega_externo" class="form-label">
                                                    <?= lang('Pedidos.fecha_entrega_externo') ?>
                                                </label>
                                                <input type="text" id="fecha_entrega_externo" name="fecha_entrega_externo" tabindex="1" maxLength="11" class="fecha-pedido form-control inaplazable-date" value="<?= old('fecha_entrega_externo', $pedidoEntity->fecha_entrega_externo) ?>" >
                                                <div id="fecha_entrega_externo_change_user" class="form-text"><?= $pedidoEntity->fecha_entrega_externo_change_user?></div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <label class="switch switch-danger switch-lg mt-1">
                                            <input type="checkbox" class="switch-input ot-preview" id="inaplazable" name="inaplazable" <?=$pedidoEntity->inaplazable?"checked":""?> />
                                            <span class="switch-toggle-slider">
                                                <span class="switch-on">
                                                    <i class="ti ti-alert-triangle"></i>
                                                </span>
                                                <span class="switch-off">
                                                    <i class="ti ti-x"></i>
                                                </span>
                                            </span>
                                            <span class="switch-label fw-large">Inaplazable</span>
                                        </label>
                                    </div>
                                </div>
                            </div> <!--//accordionFechasTip-->
                        </div> <!--//card-->
                    </div>

                    <?php if ($pedidoEntity->estado !== 'finalizado' &&  $pedidoEntity->estado !== 'cancelado'): ?>
                    <div class="col-12 d-flex flex-row-reverse mt-4 gap-2">
                        <div id="pedido_finalizado" class="buton-estado btn mt-3 btn-success waves-effect waves-light ml-2">
                            <span class="align-middle d-sm-inline-block d-none me-sm-1"><?= lang('Pedidos.finalizar') ?></span>
                            <i class="ti ti-hourglass-empty ti-xs"></i>
                        </div>
                        <div id="pedido_cancelado" class="buton-estado btn mt-3 btn-danger waves-effect waves-light ml-2">
                            <span class="align-middle d-sm-inline-block d-none me-sm-1"><?= lang('Pedidos.cancelar') ?></span>
                            <i class="ti ti-circle-x ti-xs"></i>
                        </div>
                        <?php if ($pedidoEntity->estado == 'validacion' && auth()->user()->can('pedidos-gestion.toprod')) : ?>
                            <div id="button-pedido-to-prod" data-id="<?= $pedidoEntity->id ?>" class="buton-estado btn mt-3 btn-primary waves-effect waves-light ml-2">
                                <span class="align-middle d-sm-inline-block d-none me-sm-1"><?= lang("Produccion.btn_pedido_produccion_accion") ?></span>
                                <i class="ti ti-building-factory-2 ti-xs"></i>
                            </div>
                        <?php endif; ?>
                    </div>
                    <?php endif; ?>
                    
                <?php endif; ?>

            </div>
        </div>
    </div>
</div>


<?=$this->section('additionalInlineJs') ?>

document.getElementById('inaplazable').addEventListener('change', () => {
    updateDate('inaplazable', $('#inaplazable').prop('checked') ? 1 : 0);    
});

if(<?= $pedidoEntity->inaplazable?1:0 ?>){
    $('.inaplazable-date').addClass('text-danger fw-bold');
}

const autonumericTotalPrecio = new AutoNumeric('#total_precio', {
    decimalPlaces: 2,
    digitGroupSeparator: '.',
    decimalCharacter: ',',
    allowDecimalPadding: true,
    unformatOnSubmit: true,
});



$("#fecha_entrega_real").flatpickr({
    defaultDate: <?= $pedidoEntity->fecha_entrega_real_text ? "'".$pedidoEntity->fecha_entrega_real_text."'" : 'null' ?>,
    dateFormat: "d/m/Y",
    locale: {
        firstDayOfWeek: 1,
        weekdays: {
          shorthand: ['Do', 'Lu', 'Ma', 'Mi', 'Ju', 'Vi', 'Sa'],
          longhand: ['Domingo', 'Lunes', 'Martes', 'Miércoles', 'Jueves', 'Viernes', 'Sábado'],         
        }, 
        months: {
          shorthand: ['Ene', 'Feb', 'Mar', 'Abr', 'May', 'Jun', 'Jul', 'Ago', 'Sep', 'Оct', 'Nov', 'Dic'],
          longhand: ['Enero', 'Febreo', 'Мarzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'],
        },
      },
    onChange: function(selectedDates, dateStr, instance) {
        <?php if ($pedidoEntity->estado !== 'finalizado' &&  $pedidoEntity->estado !== 'cancelado'): ?>
            updateDate('fecha_entrega_real', dateStr);
        <?php endif; ?>
    }
});

$("#fecha_impresion").flatpickr({
    defaultDate: <?= $pedidoEntity->fecha_impresion_text ? "'".$pedidoEntity->fecha_impresion_text."'" : 'null' ?>,
    dateFormat: "d/m/Y",
    locale: {
        firstDayOfWeek: 1,
        weekdays: {
          shorthand: ['Do', 'Lu', 'Ma', 'Mi', 'Ju', 'Vi', 'Sa'],
          longhand: ['Domingo', 'Lunes', 'Martes', 'Miércoles', 'Jueves', 'Viernes', 'Sábado'],         
        }, 
        months: {
          shorthand: ['Ene', 'Feb', 'Mar', 'Abr', 'May', 'Jun', 'Jul', 'Ago', 'Sep', 'Оct', 'Nov', 'Dic'],
          longhand: ['Enero', 'Febreo', 'Мarzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'],
        },
      },
    onChange: function(selectedDates, dateStr, instance) {
        <?php if ($pedidoEntity->estado !== 'finalizado' &&  $pedidoEntity->estado !== 'cancelado'): ?>
            updateDate('fecha_impresion', dateStr);
        <?php endif; ?>
    }
});

$("#fecha_encuadernado").flatpickr({
    defaultDate: <?= $pedidoEntity->fecha_encuadernado_text ? "'".$pedidoEntity->fecha_encuadernado_text."'" : 'null' ?>,
    dateFormat: "d/m/Y",
    locale: {
        firstDayOfWeek: 1,
        weekdays: {
          shorthand: ['Do', 'Lu', 'Ma', 'Mi', 'Ju', 'Vi', 'Sa'],
          longhand: ['Domingo', 'Lunes', 'Martes', 'Miércoles', 'Jueves', 'Viernes', 'Sábado'],         
        }, 
        months: {
          shorthand: ['Ene', 'Feb', 'Mar', 'Abr', 'May', 'Jun', 'Jul', 'Ago', 'Sep', 'Оct', 'Nov', 'Dic'],
          longhand: ['Enero', 'Febreo', 'Мarzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'],
        },
      },
    onChange: function(selectedDates, dateStr, instance) {
        <?php if ($pedidoEntity->estado !== 'finalizado' &&  $pedidoEntity->estado !== 'cancelado'): ?>
            updateDate('fecha_encuadernado', dateStr);
        <?php endif; ?>
    }
});

$("#fecha_entrega_externo").flatpickr({
    defaultDate: <?= $pedidoEntity->fecha_entrega_externo_text ? "'".$pedidoEntity->fecha_entrega_externo_text."'" : 'null' ?>,
    dateFormat: "d/m/Y",
    locale: {
        firstDayOfWeek: 1,
        weekdays: {
          shorthand: ['Do', 'Lu', 'Ma', 'Mi', 'Ju', 'Vi', 'Sa'],
          longhand: ['Domingo', 'Lunes', 'Martes', 'Miércoles', 'Jueves', 'Viernes', 'Sábado'],         
        }, 
        months: {
          shorthand: ['Ene', 'Feb', 'Mar', 'Abr', 'May', 'Jun', 'Jul', 'Ago', 'Sep', 'Оct', 'Nov', 'Dic'],
          longhand: ['Enero', 'Febreo', 'Мarzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'],
        },
      },
    onChange: function(selectedDates, dateStr, instance) {
        <?php if ($pedidoEntity->estado !== 'finalizado' &&  $pedidoEntity->estado !== 'cancelado'): ?>
            updateDate('fecha_entrega_externo', dateStr);
        <?php endif; ?>
    }
});

<?php if ($pedidoEntity->estado !== 'finalizado' &&  $pedidoEntity->estado !== 'cancelado'): ?>
$('.buton-estado').on('click', function() {
    Swal.fire({
      title: '¿Estás seguro?',
      text: "Esta acción no se puede deshacer",
      icon: 'warning',
      showCancelButton: true,
      confirmButtonColor: '#3085d6',
      cancelButtonColor: '#d33',
      confirmButtonText: 'Sí',
      cancelButtonText: 'Cancelar',
      customClass: {
        confirmButton: 'btn btn-primary me-1',
        cancelButton: 'btn btn-label-secondary'
      },
      buttonsStyling: false
    }).then((result) => {
      if (result.isConfirmed) {
        var id = <?=$pedidoEntity->id ?>;
    var estado = $(this).attr('id').split('_')[1];
    var url = '<?= route_to('cambiarEstadoPedido') ?>';
    var data = {
        id: id,
        estado: estado
    };
    $.ajax({
        url: url,
        type: 'POST',
        data: data,
        success: function(response) {
            try{
                if (response.status=="success") {
                    location.reload();
                }
            }
            catch(e){
                console.log(e);
            }
        }
    });
      }
    }).catch((err) => {
        console.log(err);
    });
});

<?php endif; ?>

function updateDate(elementId, dateStr) {
    var id = <?=$pedidoEntity->id ?>;
    
    data = {
        <?= csrf_token() ?? "token" ?>: <?= csrf_token() ?>v,
    };
    
    if(elementId == 'inaplazable'){
        data[elementId] = dateStr;
        if(dateStr == 1){
            $('.inaplazable-date').addClass('text-danger fw-bold');
        }
        else{
            $('.inaplazable-date').removeClass('text-danger fw-bold');
        }
    }else{
        var parts = dateStr.split('/');
        var newFormat = parts[2] + '-' + parts[1] + '-' + parts[0]; // Asume dateStr en formato d/m/Y.
    
        data[elementId] = newFormat;
    }

    var url = '<?= route_to('actualizarPedido', ':id') ?>'; 
    url = url.replace(':id', id );

    $.ajax({
        url: url,
        type: 'POST',
        data: data,
        success: function(response){
            
            if('error' in response){
                if(response.error == 0){
                    for (const [key, value] of Object.entries(response)) {
                        if (key.endsWith('_change_user')) {
                            $("#" + key).html(value);
                        }
                    }
                }    
            }
        }
    });
}

<?=$this->endSection() ?>