@extends('adminlte::page')
@section('title', 'Detalle de Merma')
@section('plugins.Datatables', true)

@section('content_header')
    <h1>Detalle de Merma</h1>
    <p>
        Detalle de la merma, peso total, fecha de registro, tipo de ingreso, presentacion, tipo de producto, peso de la merma.
    </p>
@stop

@section('content')
    <div class="card detalle-merma">
        <div class="card-header">
            <h1 class="card-title">Detalle:</h1>
        </div>

        <div class="card-body">


            <div class="row">
                <div class="col-md-6">
                    <div class="small-box bg-info">
                        <div class="inner">
                            <h3>Fecha: {{ $merma->created_at->format('d/m/Y') }}</h3>
                            <p>Hora: {{ $merma->created_at->format('H:i:s') }}</p>
                        </div>
                        <div class="icon">
                            <i class="fas fa-calendar-alt"></i>
                        </div>
                        <span class="small-box-footer">Fecha de Registro</span>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="small-box bg-success">
                        <div class="inner">
                            <h3>{{ number_format($merma->total_peso, 2) }}</h3>
                            <p>Kilogramos</p>
                        </div>
                        <div class="icon">
                            <i class="fas fa-weight"></i>
                        </div>
                        <span class="small-box-footer">Peso Total</span>
                    </div>
                </div>
            </div>


            <div class="detalle-merma mt-5">

                <div class="table-responsive">
                    <table class="table table-bordered" id="table-mermas" style="width: 100%">
                        <thead>
                            <tr>
                                <th>#</th>
                                <th>Tipo Ingreso Producto</th>
                                <th>Presentacion</th>
                                <th>Tipo de Producto</th>
                                <th>Peso Merma</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($merma->detalles as $detalle)
                                <tr>
                                    <td> {{ $detalle->id }} </td>
                                    <td>
                                        {{ $tipoIngreso = [1 => 'CAMION', 2 => 'POR STOCK', 4 => 'BENEFICIADO'][$detalle->tipo_ingreso] ?? 'N/D' }}
                                    </td>
                                    <td> {{ $detalle->presentacion }} </td>
                                    <td> {{ $detalle->tipo }} </td>
                                    <td> {{ $detalle->peso }} </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>

            </div>

            <a href="{{ route('mermas.index') }}" class="btn btn-warning"> <i class="fas fa-list"></i> Lista de Mermas</a>

        </div>

    </div>


@stop

@section('css')
    <link href="https://cdn.datatables.net/buttons/1.6.0/css/buttons.dataTables.min.css" rel="stylesheet" />
@endsection

@section('js')
    @include('partials.data_export_js')
    <script>
        $(document).ready(function() {
            $('#table-mermas').DataTable({
                dom: 'Bfrtip',
                buttons: [
                    'copyHtml5',
                    'excelHtml5',
                    {
                        extend: 'pdfHtml5',
                        text: 'Exportar PDF',
                        title: 'Detalle de Merma - ' + '{{ $merma->created_at->format('d/m/Y H:i') }}',
                        orientation: 'landscape', // Opcional: horizontal
                        pageSize: 'A4',
                        customize: function(doc) {
                            // Cambia el color de fondo de los encabezados
                            doc.styles.tableHeader.fillColor = '#2c3e50';
                            doc.styles.tableHeader.color = '#fff';
                            doc.styles.tableHeader.alignment = 'center';
                            doc.styles.tableHeader.fontSize = 12;

                            // Cambia el tamaño de fuente del contenido
                            doc.styles.tableBodyEven.fontSize = 11;
                            doc.styles.tableBodyOdd.fontSize = 11;

                            // Centra el título
                            doc.styles.title = {
                                alignment: 'center',
                                fontSize: 18,
                                bold: true,
                                margin: [0, 0, 0, 10]
                            };

                            // Zebra striping (alternar color de filas)
                            var rowCount = doc.content[1].table.body.length;
                            for (var i = 1; i < rowCount; i++) {
                                if (i % 2 === 0) {
                                    doc.content[1].table.body[i].forEach(function(cell) {
                                        cell.fillColor = '#f2f2f2';
                                    });
                                }
                            }

                            // Ajusta el ancho de las columnas (opcional)
                            doc.content[1].table.widths = ['8%', '22%', '22%', '22%', '18%'];
                        }
                    }
                ],
                "language": {
                    "url": "/js/spanish.json"
                }
            });
        });
    </script>
@stop