@extends('layouts.report')

@section('styles')
<style>
    .report-container {
        background: #fff;
        padding: 15px;
        border-radius: 8px;
        font-size: 11px;
    }
    .report-table {
        width: 100%;
        border-collapse: collapse;
        margin-bottom: 15px;
    }
    .report-table th, .report-table td {
        border: 1px solid #dee2e6;
        padding: 5px;
        text-align: left;
        font-size: 1rem;
    }
    .report-table th {
        background-color: #f8f9fa;
        font-weight: bold;
    }
    .report-table tfoot td {
        font-weight: bold;
    }
    .logo-container {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;
    }
    .logo-container img {
        max-width: 100px;
        height: auto;
    }
    @media (max-width: 768px) {
        .logo-container {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
        }
        .logo-container img {
            max-width: 100px;
            height: auto;
        }
    }
    @media print {
        .logo-container {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
        }
        .logo-container img {
            max-width: 60px;
        }
        body {
            margin: 0;
            padding: 0;
            font-size: 8px;
        }
        .container-fluid, .card {
            margin: 0 !important;
            padding: 5px !important;
            box-shadow: none !important;
            border: none !important;
        }
        .report-container {
            padding: 5px;
            page-break-inside: avoid;
        }
        .report-table {
            width: 100%;
            font-size: 7px;
        }
        .report-table th, .report-table td {
            padding: 2px;
            font-size: 9px;
        }
        .logo-container {
            margin-bottom: 5px;
        }
        .btn {
            display: none;
        }
        h1, h4 {
            font-size: 12px !important;
            margin: 5px 0 !important;
        }
        .row {
            display: flex;
            flex-wrap: wrap;
            margin-bottom: 5px;
        }
        .col-md-4 {
            flex: 0 0 33.3333%;
            max-width: 33.3333%;
        }
        @page {
            size: landscape;
            margin: 2mm;
        }
    }
</style>
@endsection

@section('report-title')
    <h4 class="text-center mb-4">PERSONAS JURÍDICAS Y NATURALES</h4>
@endsection

@section('report-content')
    <div class="logo-container">
        <img src="{{ asset('images/icon.png') }}" alt="GOBIERNO BOLIVARIANO DE TRUJILLO" />
    </div>

    <table class="report-table" border="1">
        <p>Data para Crear archivo XML de retISRLSalariosOtras</p>
        <tr>
            <th class="text-center" colspan="6"></th>
            <th class="text-center" colspan="6">RIF Agente: G200001615</th>
        </tr>
        <tr>
            <th class="text-center" colspan="6"></th>
            <th class="text-center" colspan="6">Periodo: 202504</th>
        </tr>
        <tr>
            <th>ID. Sec.</th>
            <th>RIF Retenido</th>
            <th>Numero Factura</th>
            <th>Numero Control</th>
            <th>Fecha de la operación</th>
            <th>Codigo Concepto</th>
            <th>Monto Operación</th>
            <th>Porcentaje</th>
        </tr>
        <tr>
            <td>1</td>
            <td>J412615190</td>
            <td>COO1870</td>
            <td>00008370</td>
            <td>11/04/2025</td>
            <td>059</td>
            <td>518700.00</td>
            <td>5</td>
        </tr>
        <tr>
            <td>2</td>
            <td>J412615190</td>
            <td>COO1812</td>
            <td>00008312</td>
            <td>11/04/2025</td>
            <td>059</td>
            <td>17500.00</td>
            <td>5</td>
        </tr>
        <tr>
            <td>3</td>
            <td>J412615190</td>
            <td>COO1815</td>
            <td>00008315</td>
            <td>11/04/2025</td>
            <td>059</td>
            <td>17500.00</td>
            <td>2</td>
        </tr>
        <tr>
            <td>4</td>
            <td>J502769374</td>
            <td>000036</td>
            <td>00000036</td>
            <td>11/04/2025</td>
            <td>055</td>
            <td>17500.00</td>
            <td>2</td>
        </tr>
        <tr>
            <td>5</td>
            <td>J412638075</td>
            <td>001174</td>
            <td>00001174</td>
            <td>11/04/2025</td>
            <td>055</td>
            <td>17500.00</td>
            <td>2</td>
        </tr>
        <tr>
            <td>6</td>
            <td>J412615190</td>
            <td>COO188</td>
            <td>00008341</td>
            <td>21/04/2025</td>
            <td>055</td>
            <td>6500.00</td>
            <td>2</td>
        </tr>
        <tr>
            <td>7</td>
            <td>J412615190</td>
            <td>COO188</td>
            <td>00008341</td>
            <td>21/04/2025</td>
            <td>059</td>
            <td>60000.00</td>
            <td>5</td>
        </tr>
        <tr>
            <td>8</td>
            <td>J501024880</td>
            <td>003308</td>
            <td>00003308</td>
            <td>21/04/2025</td>
            <td>059</td>
            <td>8640.00</td>
            <td>2</td>
        </tr>
        <tr>
            <td>9</td>
            <td>J412615190</td>
            <td>COO1845</td>
            <td>00008345</td>
            <td>23/04/2025</td>
            <td>055</td>
            <td>18600.00</td>


            <td>2</td>
        </tr>
    </table>

    <button class="btn btn-primary" onclick="downloadXML()">Descargar XML</button>
@endsection

@section('scripts')
<script>
    function downloadXML() {
        const data = [
            { id: 1, rif: 'J412615190', factura: 'COO1870', control: '00008370', fecha: '11/04/2025', concepto: '059', monto: '518700.00', porcentaje: '5' },
            { id: 2, rif: 'J412615190', factura: 'COO1812', control: '00008312', fecha: '11/04/2025', concepto: '059', monto: '17500.00', porcentaje: '5' },
            { id: 3, rif: 'J412615190', factura: 'COO1815', control: '00008315', fecha: '11/04/2025', concepto: '059', monto: '17500.00', porcentaje: '2' },
            { id: 4, rif: 'J502769374', factura: '000036', control: '00000036', fecha: '11/04/2025', concepto: '055', monto: '17500.00', porcentaje: '2' },
            { id: 5, rif: 'J412638075', factura: '001174', control: '00001174', fecha: '11/04/2025', concepto: '055', monto: '17500.00', porcentaje: '2' },
            { id: 6, rif: 'J412615190', factura: 'COO188', control: '00008341', fecha: '21/04/2025', concepto: '055', monto: '6500.00', porcentaje: '2' },
            { id: 7, rif: 'J412615190', factura: 'COO188', control: '00008341', fecha: '21/04/2025', concepto: '059', monto: '60000.00', porcentaje: '5' },
            { id: 8, rif: 'J501024880', factura: '003308', control: '00003308', fecha: '21/04/2025', concepto: '059', monto: '8640.00', porcentaje: '2' },
            { id: 9, rif: 'J412615190', factura: 'COO1845', control: '00008345', fecha: '23/04/2025', concepto: '055', monto: '18600.00', porcentaje: '2' },
        ];

        let xml = '<?xml version="1.0" encoding="UTF-8"?>\n';
        xml += '<retISRLSalariosOtras>\n';
        xml += '    <agentRIF>G200001615</agentRIF>\n';
        xml += '    <period>202504</period>\n';
        data.forEach(row => {
            xml += '    <record>\n';
            xml += `        <id>${row.id}</id>\n`;
            xml += `        <rifRetenido>${row.rif}</rifRetenido>\n`;
            xml += `        <numeroFactura>${row.factura}</numeroFactura>\n`;
            xml += `        <numeroControl>${row.control}</numeroControl>\n`;
            xml += `        <fechaOperacion>${row.fecha}</fechaOperacion>\n`;
            xml += `        <codigoConcepto>${row.concepto}</codigoConcepto>\n`;
            xml += `        <montoOperacion>${row.monto}</montoOperacion>\n`;
            xml += `        <porcentaje>${row.porcentaje}</porcentaje>\n`;
            xml += '    </record>\n';
        });
        xml += '</retISRLSalariosOtras>';

        const blob = new Blob([xml], { type: 'application/xml' });
        const url = URL.createObjectURL(blob);
        const a = document.createElement('a');
        a.href = url;
        a.download = 'reporte.xml';
        document.body.appendChild(a);
        a.click();
        document.body.removeChild(a);
        URL.revokeObjectURL(url);
    }
</script>
@endsection