@extends('layout.layout_admin')
@section('contenido')
<style nonce="{{ app('csp_nonce') }}">
.filter-card .card-header {
background: linear-gradient(90deg, rgba(13, 110, 253, 0.06), transparent);
}
.family-pills-wrapper {
position: relative;
overflow: hidden;
transition: max-height 0.3s ease;
}
.family-pills-wrapper.collapsed {
max-height: 92px;
}
.family-pills-wrapper.expanded {
max-height: 1000px;
}
.family-pills {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.family-pill {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 14px;
font-size: 12px;
font-weight: 500;
color: #495057;
background-color: #f5f7fb;
border: 1.5px solid #e6e9ef;
border-radius: 50px;
cursor: pointer;
transition: all 0.18s ease;
white-space: nowrap;
}
.family-pill:hover {
background-color: #e7f1ff;
border-color: #b6d4fe;
color: #0d6efd;
transform: translateY(-1px);
box-shadow: 0 2px 6px rgba(13, 110, 253, 0.12);
}
.family-pill.active {
background-color: #0d6efd;
border-color: #0d6efd;
color: #fff;
box-shadow: 0 3px 10px rgba(13, 110, 253, 0.28);
}
.family-pill.active .pill-count {
background-color: rgba(255, 255, 255, 0.25);
color: #fff;
}
.pill-count {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 22px;
height: 20px;
padding: 0 6px;
font-size: 11px;
font-weight: 600;
color: #6c757d;
background-color: #e9ecef;
border-radius: 50px;
}
.family-pills-wrapper.collapsed .family-pills-fade {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 40px;
background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #fff 100%);
pointer-events: none;
}
.family-pills-wrapper.expanded .family-pills-fade {
display: none;
}
.family-pill.hidden-by-search {
display: none !important;
}
.family-pill-clear {
background-color: #fff;
border-color: #dc3545;
color: #dc3545;
text-decoration: none;
}
.family-pill-clear:hover {
background-color: #dc3545;
border-color: #dc3545;
color: #fff;
box-shadow: 0 3px 10px rgba(220, 53, 69, 0.28);
}
</style>
<!-- PAGE-HEADER -->
<div class="page-header d-flex align-items-center justify-content-between border-bottom mb-4">
<h1 class="page-title">{{ isset($title) ? $title : 'SIN TITULO' }}</h1>
<div>
<ol class="breadcrumb">
<li class="breadcrumb-item active" aria-current="page">{{ isset($title) ? $title : 'SIN TITULO' }}</li>
</ol>
</div>
</div>
<!-- PAGE-HEADER END -->
<!-- CONTAINER -->
<div class="main-container container-fluid">
{{-- FILTROS --}}
<div class="col-xl-12">
<div class="card custom-card p-2 filter-card">
<div class="card-header d-flex align-items-center justify-content-between">
<div class="card-title text-uppercase font-14">
<i class="fa fa-filter me-1 text-primary"></i>
<b>Filtros</b>
</div>
@if ($has_records && (!empty($filter_family) || !empty($filter_status) || !empty($filter_level) || !empty($filter_rut)))
<a href="{{ route('admissions') }}" class="btn btn-sm btn-outline-secondary">
<i class="fa fa-eraser"></i> Limpiar filtros
</a>
@endif
</div>
<div class="card-body">
<form action="{{ route('admissions') }}" method="GET" id="form_filter">
<input type="hidden" name="filter_family" id="filter_family" value="{{ $filter_family }}">
{{-- SECCIÓN FAMILIAS EN BADGES --}}
<div class="mb-3">
<div class="d-flex align-items-center justify-content-between mb-2">
<label class="form-label fs-13 m-0">
<i class="fa fa-users text-primary me-1"></i>
<b>FAMILIA</b>
</label>
@if ($has_records && count($families) > 0 && empty($filter_family))
<div class="input-group input-group-sm" style="max-width: 260px;">
<span class="input-group-text bg-light border-end-0">
<i class="fa fa-search text-muted"></i>
</span>
<input type="text" class="form-control border-start-0" id="family_search"
placeholder="Buscar familia...">
</div>
@endif
</div>
@if (!$has_records || count($families) == 0)
<div class="text-muted fs-12 text-center py-3 border rounded">
No hay familias registradas para filtrar.
</div>
@elseif (!empty($filter_family))
{{-- HAY UNA FAMILIA SELECCIONADA: SOLO SE MUESTRA ESA --}}
@php
$selected_family = $families->firstWhere('id', $filter_family);
@endphp
@if (!empty($selected_family))
@php
$display = implode(' ', array_map('ucfirst', explode('-', $selected_family->name)));
@endphp
<div class="family-pills">
<button type="button" class="family-pill active"
data-family-id="{{ $selected_family->id }}">
{{ $display }}
<span class="pill-count">{{ $selected_family->admissions_count }}</span>
</button>
<a href="{{ route('admissions') }}" class="family-pill family-pill-clear">
<i class="fa fa-times me-1"></i> Quitar filtro
</a>
</div>
@endif
@else
<div id="family_pills_wrapper" class="family-pills-wrapper collapsed">
<div id="family_pills" class="family-pills">
<button type="button" class="family-pill active" data-family-id="">
<i class="fa fa-th-large me-1"></i> Todas
<span class="pill-count">{{ count($list_data) }}</span>
</button>
@foreach ($families as $f)
@php
$display = implode(' ', array_map('ucfirst', explode('-', $f->name)));
@endphp
<button type="button" class="family-pill"
data-family-id="{{ $f->id }}"
data-family-name="{{ strtolower($display) }}">
{{ $display }}
<span class="pill-count">{{ $f->admissions_count }}</span>
</button>
@endforeach
</div>
<div class="family-pills-fade"></div>
</div>
@if (count($families) > 8)
<div class="text-center mt-2">
<button type="button" class="btn btn-sm btn-link text-decoration-none"
id="toggle_family_pills">
<i class="fa fa-chevron-down me-1"></i>
<span class="toggle-label">Ver todas ({{ count($families) }})</span>
</button>
</div>
@endif
<div id="family_no_results" class="text-muted fs-12 text-center py-2"
style="display:none;">
No se encontraron familias con ese nombre.
</div>
@endif
</div>
{{-- FILA DE FILTROS SECUNDARIOS --}}
<div class="row g-3 align-items-end border-top pt-3">
<div class="col-md-3">
<label class="form-label fs-13">
<i class="fa fa-flag text-primary me-1"></i>
<b>ESTADO</b>
</label>
<select class="form-control" name="filter_status" id="filter_status"
{{ $has_records ? '' : 'disabled' }}>
<option value="">Todos</option>
<option value="pending" {{ $filter_status == 'pending' ? 'selected' : '' }}>
Lista de Espera
</option>
<option value="approved" {{ $filter_status == 'approved' ? 'selected' : '' }}>
Aprobada
</option>
<option value="rejected" {{ $filter_status == 'rejected' ? 'selected' : '' }}>
Rechazada
</option>
</select>
</div>
<div class="col-md-3">
<label class="form-label fs-13">
<i class="fa fa-graduation-cap text-primary me-1"></i>
<b>NIVEL</b>
</label>
<select class="form-control" name="filter_level" id="filter_level"
{{ $has_records ? '' : 'disabled' }}>
<option value="">Todos</option>
@foreach ($levels as $lv)
<option value="{{ $lv->id }}"
{{ $filter_level == $lv->id ? 'selected' : '' }}>
{{ $lv->level }}
</option>
@endforeach
</select>
</div>
<div class="col-md-4">
<label class="form-label fs-13">
<i class="fa fa-id-card text-primary me-1"></i>
<b>RUT ALUMNO</b>
</label>
<input type="text" class="form-control" name="filter_rut" id="filter_rut"
value="{{ $filter_rut }}" placeholder="Buscar RUT..."
{{ $has_records ? '' : 'disabled' }}>
</div>
<div class="col-md-2">
<button type="submit" class="btn btn-primary w-100"
{{ $has_records ? '' : 'disabled' }}>
<i class="fa fa-search"></i> Filtrar
</button>
</div>
</div>
</form>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="main-container container-fluid">
<div class="row">
<div class="col-xl-12">
<div class="card custom-card p-2">
<div class="card-header">
<div class="card-title text-uppercase font-14">
<b>{{ isset($title_table) ? $title_table : '' }}</b>
</div>
</div>
<div class="card-body">
<div class="table-responsive">
<div class="text-center" id="div_spinner">Cargando...<br>
<div class="d-flex justify-content-center mt-2">
<div class="spinner-border spinner-border-md" role="status">
<span class="sr-only">Cargando...</span>
</div>
</div>
</div>
<table class="table table-hover" id="table_list" hidden>
<thead class="bg-primary">
<tr class="font-13">
<th class="text-center text-white">ID</th>
<th class="text-center text-white">AÑO</th>
<th class="text-left text-white">FAMILIA</th>
<th class="text-left text-white">POSTULANTE</th>
<th class="text-center text-white">RUT</th>
<th class="text-center text-white">NIVEL</th>
<th class="text-center text-white">ESTADO</th>
<th class="text-center text-white">ACCIONES</th>
</tr>
</thead>
<tbody>
@foreach ($list_data as $l)
@php
$d = $l->dataUploadsDetails;
$family_display = !empty($l->family) ? implode(' ', array_map('ucfirst', explode('-', $l->family->name))) : '-';
@endphp
<tr id="fila_{{ $l->id }}" class="font-13">
<td class="text-center">{{ $l->id }}</td>
<td class="text-center">
<b>{{ !empty($l->year) ? $l->year : '-' }}</b>
</td>
<td class="text-left text-nowrap">
{{ $family_display }}
</td>
<td class="text-left text-nowrap">
@if (!empty($d))
{{ !empty($d->applicant_father_lastname) ? $d->applicant_father_lastname : '' }}
{{ !empty($d->applicant_mother_lastname) ? $d->applicant_mother_lastname : '' }},
{{ !empty($d->applicant_names) ? $d->applicant_names : '' }}
@else
-
@endif
</td>
<td class="text-center">
{{ !empty($d) && !empty($d->applicant_rut) ? $d->applicant_rut : '-' }}
</td>
<td class="text-center">
{{ !empty($l->level) ? $l->level->level : '-' }}
</td>
<td class="text-center">
@if ($l->status == 'pending')
<span class="badge bg-warning">Lista de Espera</span>
@elseif ($l->status == 'approved')
<span class="badge bg-success">Aprobada</span>
@elseif ($l->status == 'rejected')
<span class="badge bg-danger">Rechazada</span>
@else
<span class="badge bg-secondary">{{ $l->status }}</span>
@endif
</td>
<td class="text-center">
<div class="dropdown">
<button class="btn btn-sm btn-light dropdown-toggle"
type="button" data-bs-toggle="dropdown">
<i class="fa fa-bars"></i>
</button>
<ul class="dropdown-menu">
@if ($l->status == 'pending')
@if (isSuperUser() || auth()->user()->hasPermission('EDIT_ADMISSIONS'))
<li>
<a href="{{ route('admission-edit', ['id' => $l->id]) }}"
class="dropdown-item">
<span class="dropdown-icon">
<i class="fa fa-edit"></i>
</span>
Editar
</a>
</li>
@endif
@else
@if (isSuperUser() || auth()->user()->hasPermission('VIEW_ADMISSIONS'))
<li>
<a href="{{ route('admission-detail', ['id' => $l->id]) }}"
class="dropdown-item">
<span class="dropdown-icon">
<i class="fa fa-eye"></i>
</span>
Ver Detalle
</a>
</li>
@endif
@endif
</ul>
</div>
</td>
</tr>
@endforeach
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- CONTAINER CLOSED -->
@endsection
@section('js_content')
<script nonce="{{ app('csp_nonce') }}">
//CLICK EN PILL DE FAMILIA: SETEA EL HIDDEN Y ENVÍA EL FORM
$(document).on('click', '.family-pill', function() {
let familyId = $(this).data('family-id');
$('#filter_family').val(familyId ? familyId : '');
$('#form_filter').submit();
});
//BÚSQUEDA CLIENT-SIDE DENTRO DE LOS PILLS
$('#family_search').on('keyup', function() {
let term = $(this).val().toLowerCase().trim();
let visible = 0;
$('#family_pills .family-pill').each(function() {
let name = $(this).data('family-name');
if (!name) {
//ES EL PILL "TODAS"
$(this).removeClass('hidden-by-search');
return;
}
if (term === '' || name.indexOf(term) !== -1) {
$(this).removeClass('hidden-by-search');
visible++;
} else {
$(this).addClass('hidden-by-search');
}
});
//SI HAY BÚSQUEDA ACTIVA, EXPANDE LOS PILLS PARA MOSTRAR TODOS LOS MATCHES
if (term !== '') {
$('#family_pills_wrapper').removeClass('collapsed').addClass('expanded');
$('#toggle_family_pills .toggle-label').text('Ocultar');
$('#toggle_family_pills i').removeClass('fa-chevron-down').addClass('fa-chevron-up');
}
$('#family_no_results').toggle(visible === 0 && term !== '');
});
//TOGGLE DE EXPANDIR/CONTRAER PILLS
$('#toggle_family_pills').on('click', function() {
let wrapper = $('#family_pills_wrapper');
if (wrapper.hasClass('collapsed')) {
wrapper.removeClass('collapsed').addClass('expanded');
$(this).find('.toggle-label').text('Ocultar');
$(this).find('i').removeClass('fa-chevron-down').addClass('fa-chevron-up');
} else {
wrapper.removeClass('expanded').addClass('collapsed');
$(this).find('.toggle-label').text(`Ver todas ({{ count($families) }})`);
$(this).find('i').removeClass('fa-chevron-up').addClass('fa-chevron-down');
}
});
setTimeout(function() {
$("#div_spinner").html('')
$('#table_list').DataTable({
responsive: true,
"bLengthChange": false,
"language": {
"url": `{{ asset(ASSETS_JS_ADMIN) }}/Spanish.json`
},
order: [
[0, 'desc']
],
});
$("#table_list").attr('hidden', false);
}, 400);
</script>
@endsection