@if (Auth::user()->root)
    <h2 class="destacado mb-5">Cambios a solicitudes de audiencia</h2>
    <div>
        <p>Con esta herramienta podrá volver al estado ingresada solicitudes de audiencias ya aceptadas o rechazadas. En
            el caso de solicitudes de audiencias canceladas podrá retornarlas al estado aceptada.</p>
    </div>
    <br />

    @if (!is_null(\Session::get('status')))
        <div class="row">
            <div class="col-12">
                <div class="alert alert-success" role="alert">
                    <p>{{ \Session::get('status') }}</p>
                </div>
            </div>
        </div>
    @endif
    <br>

    <div class="alert alert-info" role="alert">
        <p>(*) Solo se muestran solicitudes de audiencia con los siguientes estados: aceptada, rechazada y cancelada.
        </p>
    </div>

    <div class="row">
        <div class="col-12">
            <div class=" form-error alert alert-danger" role="alert" style="display:none">
                <p>(*) Debe seleccionar una institución o ingresar un folio para la búsqueda</p>
            </div>

            @if (\Auth::user()->root && isset($instituciones))
                <div class="form-group ">
                    <label class="form-label" for="institucion">Institución: </label>
                    {!! html()->select('filtro_institucion')->options([null => 'Ingrese el nombre de la institución'] + $instituciones->all())->value(isset($filtro_institucion) ? $filtro_institucion : '')->class('form-control')->id('institucion') !!}
                </div>
            @endif
            <div class="row">
                <div class="col-6">
                    <label for="folio" class="form-label">Búsqueda por folio: </label>
                    <input type="text" class="form-control mb-4" name="folio" id="folio"
                        value="{{ isset($folio) ? $folio : '' }}" placeholder="Ingrese folio">
                </div>
            </div>
            <div class="row">
                <div class="col-12 d-flex justify-content-between">
                    <div>
                        <button class="btn btn-primary" id="cambiarEstadosAudiencias" hidden>Cambiar Estados</button>
                    </div>
                    <div>
                        <button class="btn btn-primary" onclick="buscarSolicitudesAudiencias()">Buscar</button>
                        <a class="btn btn-primary" href="/admin/tools/solicitudes-audiencia">Limpiar</a>
                    </div>
                </div>
            </div>

            @if (isset($folio))
                <div class="row">
                    <div class="col-12">
                        <h3 class="line">Filtrando por número de folio: <b>{{ $folio }}</b></h3>
                    </div>
                </div>
            @endif
        </div>
    </div>
    <hr>

    <div class="row">
        <div class="row mb-3">
            <div class="col-md-3">
                <label for="per_page" class="form-label">Mostrar:</label>
                <select id="per_page" name="per_page" class="form-select" onchange="cambiarCantidadPorPagina()">
                    @foreach ([15, 30, 50, 75, 100] as $cantidad)
                        <option value="{{ $cantidad }}"
                            {{ request('per_page', 15) == $cantidad ? 'selected' : '' }}>
                            {{ $cantidad }} registros
                        </option>
                    @endforeach
                </select>
            </div>
        </div>
        <div class="col-12 table_movil">
            <table id="table-requests" class="table table-striped mt-1">
                <thead class="table-dark">
                    <tr>
                        <th scope="col"><input type="checkbox" id="select-all"></th>
                        <th scope="col">Folio</th>
                        <th scope="col">Fecha de ingreso</th>
                        <th scope="col">Fecha de Respuesta*</th>
                        <th scope="col">Sujeto Pasivo</th>
                        <th scope="col">Sujeto Activo Titular</th>
                        <th scope="col">Estado</th>
                        <th scope="col" class="admin-sol-audiencias-acciones">Acciones</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach ($solicitudes_audiencia as $item)
                        <tr>
                            <td>
                                <input type="checkbox" class="row-checkbox" value="{{ $item->id }}"
                                    data-estado="{{ $item->estado }}">
                            </td>
                            <td>{{ $item->folio->codigo }}</td>
                            <td>
                                <h6>{{ date('d-m-Y H:s', strtotime($item->folio->created_at)) }}</h6>
                            </td>
                            <td>
                                <h6>{{ $item->fecha_respuesta != null ? date('d-m-Y', strtotime($item->fecha_respuesta)) : '' }}
                                </h6>
                            </td>
                            <td>{{ $item->pertenencia->usuario->nombres }}
                                {{ $item->pertenencia->usuario->apellidos }}
                            </td>

                            <td>{{ !is_null($item['sujeto_activo']) ? $item['sujeto_activo']->nombres . ' ' . $item['sujeto_activo']->apellidos : ' ' }}
                            </td>

                            <td>
                                @if ($item->estado == 'ingresada')
                                    <label class="label label-default p-2 text-center" style="width: 113px;">
                                    @elseif($item->estado == 'aceptada')
                                        <label class="label label-success p-2 text-center" style="width: 113px;">
                                        @elseif($item->estado == 'encomendada')
                                            <label class="label label-info p-2 text-center" style="width: 113px;">
                                            @elseif($item->estado == 'rechazada')
                                                <label class="label label-danger p-2 text-center" style="width: 113px;">
                                                @elseif($item->estado == 'suspendida')
                                                    <label class="label label-primary p-2 text-center"
                                                        style="width: 113px;">
                                                    @elseif($item->estado == 'cancelada')
                                                        <label class="label label-warning p-2 text-center"
                                                            style="width: 113px;">
                                @endif
                                {{ ucwords($item->estado) }}
                                </label>
                            </td>
                            <td>
                                <div class="btn-group">
                                    <button type="button" class="btn btn-outline-primary btn-sm">Editar</button>
                                    <button type="button" class="btn btn-outline-primary btn-sm dropdown-toggle"
                                        data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                        <span class="caret"></span>
                                        <span class="sr-only">Toggle Dropdown</span>
                                    </button>
                                    <ul class="dropdown-menu">
                                        {!! html()->form('GET', url('/admin/tools/solicitudes-audiencia/' . $item['id'] . '/edit'))->class('form-horizontal')->name('form-edit')->open() !!}

                                        @if ($item['estado'] == 'aceptada' || $item['estado'] == 'rechazada' || $item['estado'] == 'cancelada')
                                            <li>{!! html()->submit('Estado')->class('dropdown-item')->name('action')->value('Estado') !!}
                                            </li>
                                        @endif
                                        {!! html()->form()->close() !!}

                                    </ul>
                                </div>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>

            @if (isset($folio))
                {{ $solicitudes_audiencia->appends(['folio' => $folio])->links() }}
            @else
                {{ $solicitudes_audiencia->links() }}
            @endif

            <p>* La fecha de respuesta registra cuando la solicitud fue aceptada o rechazada en primera instancia.
                Es posible que las solicitudes generadas tras una encomendación no registren fecha de respuesta, debido
                a que
                esta fue aceptada en la solicitud de origen.</p>

        </div>

        <div class="modal fade" id="estadoModal" tabindex="-1" aria-labelledby="estadoModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <form id="form-cambiar-estado" method="POST" action="{{ route('audiencias.cambiar-estado') }}">
                    @csrf
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="estadoModalLabel">Cambiar Estado</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal"
                                aria-label="Cerrar"></button>
                        </div>
                        <div class="modal-body">
                            <div class="mb-3" id="estado_seleccionado">

                            </div>
                            <input type="hidden" name="ids" id="audiencia_ids">
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary"
                                data-bs-dismiss="modal">Cancelar</button>
                            <button type="submit" class="btn btn-primary">Actualizar</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>

    </div>
@endif

<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>

<script>
    $(document).ready(function() {
        $('.row-checkbox, #select-all').on('change', function() {
            const checkedCount = $('.row-checkbox:checked').length;
            $('#cambiarEstadosAudiencias').prop('hidden', checkedCount === 0);
        });


        $('#select-all').on('click', function() {
            $('.row-checkbox').prop('checked', this.checked);
        });

        $('#cambiarEstadosAudiencias').on('click', function(e) {
            e.preventDefault();

            const selectedCheckboxes = $('.row-checkbox:checked');
            if (selectedCheckboxes.length === 0) return;

            const estados = selectedCheckboxes.map(function() {
                return $(this).data('estado');
            }).get();

            const allSameEstado = estados.every((estado, _, arr) => estado === arr[0]);

            if (!allSameEstado) {
                swal.fire({
                    title: 'Error',
                    text: 'Todos los registros seleccionados deben tener el mismo estado.',
                    icon: 'error',
                    confirmButtonText: 'Aceptar'
                });
                return;
            }

            const estadoActual = estados[0];
            if (estadoActual == 'aceptada') {
                $('#estado_seleccionado').html(
                    '<label for="nuevo_estado" class="form-label">Seleccione el nuevo estado:</label>' +
                    '<select class="form-select" name="estado" id="nuevo_estado" required>' +
                    '<option value="" disabled selected>Seleccione un estado</option>' +
                    '<option value="ingresada">Ingresada</option><option value="rechazada">Rechazada</option></select>'
                );
            } else if (estadoActual == 'rechazada') {
                $('#estado_seleccionado').html(
                    '<h6>Se cambiara del estado <strong style="color:#d9544f">Rechazada</strong> a <strong style="color: #5bb85d">Aceptada</strong></h6><input type="hidden" name="estado" value="aceptada">'
                );
            } else if (estadoActual == 'cancelada') {
                $('#estado_seleccionado').html(
                    '<h6>Se cambiara del estado <strong style="color:#efad4d">Cancelada</strong> a <strong style="color: #5bb85d">Aceptada</strong></h6><input type="hidden" name="estado" value="aceptada">'
                );
            } else {
                swal.fire({
                    title: 'Error',
                    text: 'El estado seleccionado no es válido para cambiar.',
                    icon: 'error',
                    confirmButtonText: 'Aceptar'
                });
                return;
            }

            const selectedIds = selectedCheckboxes.map(function() {
                return this.value;
            }).get();

            $('#audiencia_ids').val(selectedIds.join(','));
            $('#estadoModal').modal('show');
        });
    });

    function buscarSolicitudesAudiencias() {
        var folio = $('#folio').val();
        var institucion = $('#institucion').val();

        if (folio.trim() === '' && institucion === '') {
            $('.form-error').show();
            return false;
        } else {
            $('.form-error').hide();
        }

        var url = '/admin/tools/solicitudes-audiencia?';
        if (folio.trim() !== '') {
            url += 'folio=' + encodeURIComponent(folio);
        }
        if (institucion !== '') {
            url += '&filtro_institucion=' + encodeURIComponent(institucion);
        }

        var perPage = document.getElementById('per_page').value;
        
        if (perPage) {
            url += '&per_page=' + encodeURIComponent(perPage);
        }

        window.location.href = url;
    }

    function cambiarCantidadPorPagina() {
        const perPage = document.getElementById('per_page').value;
        const params = new URLSearchParams(window.location.search);

        params.set('per_page', perPage);
        window.location.search = params.toString();
    }
</script>