@push('css')
    <link href="{{ asset('/assets/custom/select2/css/select2.min.css') }}" rel="stylesheet" />
    <style>
        .select2-container .select2-selection--single {
            height: 38px;
            border: 1px solid #ccc !important;
            border-radius: .375rem;
        }

        .select2-container--default .select2-selection--single .select2-selection__rendered {
            color: #12263f;
            line-height: 38px;
        }

        .select2-container--default .select2-selection--single .select2-selection__arrow {
            height: 38px;
        }

        .select2-container--default .select2-selection--single .select2-selection__placeholder {
            color: #12263f;
        }

        .select2-container--default .select2-selection--single .select2-selection__arrow b {
            display: none;
        }

        .select2-search__field {
            outline: none;
            box-shadow: none !important;
            border: 1px solid #ccc !important;
            border-radius: .375rem;
        }
    </style>
@endpush
<div style="height: 100vh;">
    <div class="header">
        <div class="header-body">
            <div class="row align-items-center">
                <div class="col">
                    <!-- Pretitle -->
                    <h6 class="header-pretitle">
                        Configurar
                    </h6>
                    <!-- Title -->
                    <h1 class="header-title">
                        Comisiones
                    </h1>
                </div>
                <div class="col-auto">
                    @if (auth()->user()->can('colaboradores.ver'))
                        <a class="btn btn-outline-secondary" href="{{ route('rh.administracion') }}">
                            <i class="bi bi-arrow"></i>
                            Regresar
                        </a>
                    @endif
                </div>
            </div>
        </div>
    </div>

    <div class="col-12">
        <div class="card shadow-sm p-3 mb-5 bg-white rounded">
            <div class="card-body">

                 <div class="d-flex align-items-end mb-3">
                    <div class="ms-auto d-flex gap-2">
                        @can('comisiones.restablecer')
                            <button class="btn btn-outline-danger" id="btnResetComisiones">
                                <i class="bi bi-x-circle"></i> Restablecer Todos
                            </button>
                        @endcan
                        </div>
                    </div>
                <!-- Fila con select y botón alineados -->
                <div class="d-flex align-items-end mb-3">
                    <!-- Select de colaborador a la izquierda -->
                    <div class="col-md-5 pe-2">
                        <label for="userSelect" class="form-label"><strong>Selecciona un colaborador:</strong></label>
                        <select id="userSelect" class="form-control select2" wire:model="selectedUserId">
                            <option value="" selected>TODOS</option>
                            @foreach ($users as $user)
                                <option value="{{ $user->id }}">
                                    {{ $user->colaborador ? $user->colaborador->nombre . ' ' . $user->colaborador->apellido_paterno . ' ' . $user->colaborador->apellido_materno : $user->email }}
                                </option>
                            @endforeach
                        </select>
                    </div>

                    <!-- Botones a la derecha -->
                    <div class="ms-auto d-flex gap-2">
                            @can('comisiones.editar')
                                <button type="submit" class="btn btn-primary" wire:click="save">
                                    <i class="bi bi-save"></i> Guardar
                                </button>
                            @endcan
                        @if ($selectedUserId)
                            @can('comisiones.restablecer')
                                <button class="btn btn-outline-danger" wire:click="resetComisionesIndivudual({{$selectedUserId}})">
                                    <i class="bi bi-x-circle"></i> Restablecer
                                </button>
                            @endcan
                        @endif
                    
                    </div>
                </div>



                   <table class="table table-hover table-striped mt-2">
                        <thead class="table-light">
                            <tr>
                                <th>Descripción</th>
                                <th>Porcentaje</th>
                                <th>Descripción</th>
                                <th>Porcentaje</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach (array_chunk($comisiones, 2) as $chunk)
                                <tr>
                                    @foreach ($chunk as $idx => $com)
                                        @php $realIndex = $loop->parent->index * 2 + $loop->index; @endphp
                                        <td>
                                            <input type="text" class="form-control form-control-flush"
                                                wire:model="comisiones.{{ $realIndex }}.descripcion" readonly>
                                        </td>
                                        <td>
                                            <input type="text" id="comisiones.{{ $realIndex }}.porcentaje"
                                                class="porcentaje-mask form-control @error('comisiones.' . $realIndex . '.porcentaje') is-invalid @enderror"
                                                wire:model.defer="comisiones.{{ $realIndex }}.porcentaje"
                                                style="max-width: 100px;"
                                                @cannot('comisiones.editar') readonly @endcannot />
                                            @error('comisiones.' . $realIndex . '.porcentaje')
                                                <span class="text-danger">{{ $message }}</span>
                                            @enderror
                                        </td>
                                    @endforeach
                                    @if (count($chunk) < 2)
                                        <td colspan="2"></td>
                                    @endif
                                </tr>
                            @endforeach
                        </tbody>
                    </table>

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


</div>

@push('js')
    <script src="{{ asset('/assets/custom/select2/js/select2.min.js') }}"></script>
    <script>
        document.addEventListener('livewire:load', function() {
            $('#userSelect').select2({
                width: '100%',
            }).on('change', function() {
                @this.set('selectedUserId', $(this).val());
            });

            Livewire.hook('message.processed', () => {
                $('#userSelect').select2({
                    width: '100%',
                });
            });



        });

        document.addEventListener('livewire:update', function() {
            const inputs = document.querySelectorAll('.porcentaje-mask');
      
            const mascaras = new Inputmask({
                alias: 'numeric',
                rightAlign: false,
                digits: 2,
                radixPoint: '.',
                groupSeparator: ',',
                autoUnmask: true,
                autoGroup: true,
                integerDigits: 8,
                max: 99999999.99
            });

            // Aplicar máscara a cada input
            inputs.forEach(input => {
                mascaras.mask(input);
            });
        })

        // Modal response
        Livewire.on('respModal', (icon, text, errCode) => {
            Swal.close();

            Swal.fire({
                title: icon === 'success' ? '¡Éxito!' : '¡Error!',
                icon,
                text,
                confirmButtonColor: '#0d3973',
            });

        });

        $('#btnResetComisiones').on('click', function() {
            Swal.fire({
                title: '¿Estás seguro?',
                text: "Esta acción restablecerá las comisiones a su estado original y no se puede deshacer.",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#0d3973',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Sí, restablecer',
                cancelButtonText: 'Cancelar'
            }).then((result) => {
                if (result.isConfirmed) {
                    Livewire.emit('resetComisiones');
                }
            });
        });
    </script>
@endpush