@extends("layout.pages.app")
@section("content")
    <style>
        .titulo-votos-row { display: flex; align-items: center; gap: 10px; }
        .titulo-votos-row h4 { margin: 0; line-height: 1.3; }
        #btnCopiarVotos {
            flex-shrink: 0;
            width: 38px;
            height: 38px;
            padding: 0;
            border-radius: 50%;
            border: 1.5px solid rgb(128,0,72);
            background: #fff;
            color: rgb(128,0,72);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            box-shadow: 0 1px 4px rgba(0,0,0,.12);
            transition: all .15s ease;
        }
        #btnCopiarVotos svg { width: 18px; height: 18px; display: block; }
        #btnCopiarVotos:hover {
            background: rgb(128,0,72);
            color: #fff;
            transform: scale(1.08);
        }
        #btnCopiarVotos.copiado {
            border-color: #2e7d32;
            background: #2e7d32;
            color: #fff;
        }
    </style>
    <!-- invoice list -->
    <section class="invoice-list-wrapper section">
        <!-- create invoice button-->
        <!-- Options and filter dropdown button-->
        <div class="seaction">
            <div class="row">
                <div class="col s12 m12 l12">
                    <div id="button-trigger2" class="card card card-default scrollspy">
                        <div class="card-content">
                            <!-- create invoice button-->
                            <div class="row">
                                <div class="input-field col s8">
                                    <h1 id="tituloVotos">@if($comision->comision_unida) @inject('data', '\App\Http\Controllers\MCG\ComisionesController')@foreach($data->ComisionUnidaNombre($comision->id) as $valor){{ $valor }}<br>@endforeach @else {{ $comision->comision->nombre }} @endif</h1>
                                    <div class="titulo-votos-row">
                                        <h4 id="subtituloVotos">Votacion: <br> {{$nombreTema}}</h4>
                                        <button type="button" id="btnCopiarVotos" onclick="copiarVotos()" title="Copiar votación" aria-label="Copiar votación">
                                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
                                                <rect x="7" y="2.5" width="11" height="15" rx="1.5"/>
                                                <line x1="9.5" y1="6.5" x2="15.5" y2="6.5"/>
                                                <line x1="9.5" y1="9.5" x2="15.5" y2="9.5"/>
                                                <line x1="9.5" y1="12.5" x2="13.5" y2="12.5"/>
                                                <path d="M4.5 7v11a1.5 1.5 0 0 0 1.5 1.5h8"/>
                                            </svg>
                                        </button>
                                    </div>
                                </div>
                            </div>
                            <br>

                            <div class="responsive-table">
                                <table id="tablaVotos" class="table white border-radius-4 pt-1">
                                    <thead>
                                    <tr>
                                        <th style="width: 10%">
                                            <span>#</span>
                                        </th>
                                        <th style="width: 40%">Diputado</th>
                                        <th style="width: 10%">Partido</th>
                                        <th>Sentido</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                        @foreach($diputados as $com => $value)
                                            @foreach($value as $key => $item)
                                                @if($item != null)
                                                <tr>
                                                    <td>{{$key+1}}</td>
                                                    <td>{{$item->diputado->apaterno}} {{$item->diputado->amaterno}} {{$item->diputado->nombres}}<br>@inject('data', '\App\Http\Controllers\MCG\ComisionesController'){{ $data->ComisionNombre($com) }}<br>{{ $item->cargo }}</td>
                                                    <td data-partido="{{ $item->diputado->partido->nombre }}">
                                                        <img width="50%" src="{{asset("/storage/img/partidos/".$item->diputado->partido->emblema)}}">
                                                    </td>
                                                    <td>
                                                    {{$estatus[$item->diputado->votaciones()->whereIdSesionesComision($comision->id)->whereIdComision($com)->whereTema($tema)->first() ? $item->diputado->votaciones()->whereIdSesionesComision($comision->id)->whereIdComision($com)->whereTema($tema)->first()->voto: 5]}}
                                                    </td>
                                                </tr>
                                                @endif
                                            @endforeach
                                        @endforeach
                                    </tbody>
                                </table>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <script>
        function copiarAlPortapapeles(texto) {
            if (navigator.clipboard && window.isSecureContext) {
                return navigator.clipboard.writeText(texto);
            }
            var textarea = document.createElement('textarea');
            textarea.value = texto;
            textarea.style.position = 'fixed';
            textarea.style.opacity = '0';
            document.body.appendChild(textarea);
            textarea.focus();
            textarea.select();
            var ok = false;
            try { ok = document.execCommand('copy'); } catch (e) {}
            document.body.removeChild(textarea);
            return ok ? Promise.resolve() : Promise.reject();
        }

        function copiarVotos() {
            var titulo = document.getElementById('tituloVotos').innerText.trim().replace(/\s+/g, ' ');
            var subtitulo = document.getElementById('subtituloVotos').innerText.trim().replace(/\s+/g, ' ');
            var lineas = [titulo, subtitulo, ''];

            document.querySelectorAll('#tablaVotos tbody tr').forEach(function (tr) {
                var celdas = tr.querySelectorAll('td');
                var numero = celdas[0] ? celdas[0].innerText.trim() : '';
                var diputado = celdas[1] ? celdas[1].innerText.trim().replace(/\n+/g, ' - ') : '';
                var partido = celdas[2] ? celdas[2].getAttribute('data-partido') : '';
                var sentido = celdas[3] ? celdas[3].innerText.trim() : '';
                lineas.push(numero + '. ' + diputado + ' - ' + partido + ' - ' + sentido);
            });

            var texto = lineas.join('\n');
            var btn = document.getElementById('btnCopiarVotos');
            var original = btn.innerHTML;

            copiarAlPortapapeles(texto).then(function () {
                btn.innerHTML = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><polyline points="4 12.5 9.5 18 20 5"></polyline></svg>';
                btn.classList.add('copiado');
                btn.title = '¡Copiado!';
                setTimeout(function () {
                    btn.innerHTML = original;
                    btn.classList.remove('copiado');
                    btn.title = 'Copiar votación';
                }, 2000);
            }).catch(function () {
                alert('No se pudo copiar. Intenta de nuevo.');
            });
        }
    </script>
@endsection