<div class="row">
    <div class="col-12">
        <div class="card card-invoice">
            <div class="card-body" style="width: 95%;">
                <div class="row mt-3">
                    <div class="col-6">
                        <div class="invoice-detail">
                            <div class="invoice-top text-center" style="background-color: rgba(222, 222, 222, 0.4);">
                                <h3 class="title"><strong>Datos de la Orden</strong></h3>
                            </div>
                            <div class="invoice-item">
                                <div class="table-responsive">
                                    <table class="table table-striped">
                                        <thead>
                                            <tr>
                                                <td><strong>ORNDE N°</strong></td>
                                                <td><strong>FECHA</strong></td>
                                                <td><strong>EMPLEADO</strong></td>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <td>
                                                    <span id="orden_planilla" style="color: orange; font-size: 16px; font-weight: bolder;"></span>
                                                </td>
                                                <td>
                                                    <span id="fecha_planilla" style="color: blue;"></span>
                                                </td>
                                                <td><?= $_SESSION['user_data']['einfo_nombres'] . '' . $_SESSION['user_data']['einfo_apellidos'] ?></td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-6">
                        <div class="invoice-detail">
                            <div class="invoice-top text-center" style="background-color: rgba(222, 222, 222, 0.4);">
                                <h3 class="title"><strong>Datos del Cliente</strong></h3>
                            </div>
                            <div class="invoice-item">
                                <div class="table-responsive">
                                    <table class="table table-striped">
                                        <thead>
                                            <tr>
                                                <td><strong>CI / RIF</strong></td>
                                                <td><strong>Nombres</strong></td>
                                                <td><strong>Telefono</strong></td>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <td><span id="dni_cliente_planilla"></span></td>
                                                <td><span id="cliente_planilla"> </span></td>
                                                <td><span id="telefono_planilla"></span></td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-2" style="align-self: end;">
                                    <h5 class="title"><strong>Taller</strong></h5>
                                </div>
                                <div class="col-10">
                                    <span id="taller_planilla">
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-2" style="align-self: end;">
                                    <h5 class="title"><strong>Motor</strong></h5>
                                </div>
                                <div class="col-10">
                                    <div class="row">
                                        <span id="motor_planilla"></span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-sm-12">
        <div class="row">
            <div class="col-sm-6">
                <table class="display nowrap table table-sm table-hover table-striped">
                    <thead style="background-color: #ccc">
                        <tr>
                            <th>Categoría</th>
                            <th>Parte</th>
                            <th class="text-center">Cantidad</th>
                            <th>Ubicación</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="row in partesOrden">
                            <td>{{ row.categoria }}</td>
                            <td :title="row.observacion">{{ row.parte }}</td>
                            <td class="text-center">{{ row.cantidad }}</td>
                            <td>{{ row.ubicacion }}</td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div class="col-sm-6">
                <div class="table-responsive" v-for="serv in serviciosOrden">
                    <table class="display table table-striped table-hover">
                        <caption style="caption-side: top;">
                            <div style="display: flex; justify-content:space-between">
                                <span>Categoria: {{ serv.categoria }}</span>
                            </div>
                        </caption>
                        <table class="display nowrap table table-striped table-hover">
                            <thead style="background-color: #ccc">
                                <tr class="text-center">
                                    <th>CANTIDAD</th>
                                    <th>PARTE/TRABAJO</th>
                                    <th>ESTATUS</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr v-for="row in serv.servicios">
                                    <td style="width: 15%;">
                                        {{ row.cantidad }}
                                    </td>
                                    <td>{{row.servicio }}</td>
                                    <td class="text-center">
                                        <small v-if="row.estatus == 0" class="text-warning btn">
                                            PENDIENTE
                                        </small>
                                        <small v-else class="text-success btn">
                                            TERMINADO
                                        </small>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                </div>
            </div>
        </div>
    </div>
</div>