@page
@model MimPortal.Pages.Facturas.FremisionModel
@{
ViewData["Title"] = "Remisiones";
var hxTarget = ViewData["HX-Target"]?.ToString() ?? "";
var isSearchRequest = hxTarget == "results-container";
}
@if (isSearchRequest)
{
<partial name="_RemisionesCards" model="Model" />
}
else
{
<style>
.remision-card {
transition: transform 0.2s ease, box-shadow 0.2s ease;
border: 1px solid #dee2e6;
}
.remision-card:hover {
transform: translateY(-4px);
box-shadow: 0 8px 25px rgba(0,0,0,0.15);
border-color: #0d6efd;
}
.search-container {
position: relative;
}
.search-container .form-control {
padding-left: 2.5rem;
font-size: 1.1rem;
height: 50px;
border-radius: 25px;
}
.search-container .search-icon {
position: absolute;
left: 1rem;
top: 50%;
transform: translateY(-50%);
color: #6c757d;
font-size: 1.2rem;
z-index: 10;
}
.autocomplete-dropdown {
position: absolute;
top: 100%;
left: 0;
right: 0;
background: white;
border: 1px solid #dee2e6;
border-top: none;
border-radius: 0 0 15px 15px;
box-shadow: 0 8px 25px rgba(0,0,0,0.15);
z-index: 1000;
max-height: 400px;
overflow-y: auto;
display: none;
}
.autocomplete-dropdown .dropdown-item {
padding: 12px 20px;
border-bottom: 1px solid #f0f0f0;
text-decoration: none;
color: inherit;
display: block;
}
.autocomplete-dropdown .dropdown-item:hover {
background-color: #e7f1ff;
}
.suggestion-item small {
display: block;
margin-top: 4px;
}
</style>
<div id="page-content">
<div class="card">
<div class="card-header d-flex justify-content-between align-items-center">
<h5 class="mb-0"><i class="bi bi-file-earmark-arrow-up"></i> Remisiones</h5>
<a href="/Facturas/Fremadd" class="btn btn-success btn-sm">
<i class="bi bi-plus-circle"></i> Nueva Remisión
</a>
</div>
<div class="card-body">
<!-- Search wrapper -->
<div class="search-container mb-3">
<i class="bi bi-search search-icon"></i>
<input type="text"
id="search-input"
class="form-control"
name="Buscar"
value="@Model.Buscar"
placeholder="Buscar por número de remisión o cliente..."
hx-get="/Facturas/Fremision"
hx-trigger="keyup changed delay:300ms, search"
hx-target="#results-container"
hx-swap="innerHTML"
hx-include="[name='Status'],[name='FechaDesde'],[name='FechaHasta']"
autocomplete="off" />
<div id="suggestions-dropdown" class="autocomplete-dropdown"></div>
</div>
<!-- Filters -->
<div class="row g-2 mb-4">
<div class="col-auto">
<select class="form-select form-select-sm" name="Status"
hx-get="/Facturas/Fremision"
hx-trigger="change"
hx-target="#results-container"
hx-include="[name='Buscar'],[name='FechaDesde'],[name='FechaHasta']">
<option value="">Todos los Status</option>
<option value="P" selected="@(Model.Status == "P")">Pendiente</option>
<option value="F" selected="@(Model.Status == "F")">Facturada</option>
<option value="C" selected="@(Model.Status == "C")">Cancelada</option>
</select>
</div>
<div class="col-auto">
<div class="input-group input-group-sm">
<span class="input-group-text"><i class="bi bi-calendar"></i>Desde</span>
<input type="date" class="form-control" name="FechaDesde"
value="@Model.FechaDesde?.ToString("yyyy-MM-dd")"
hx-get="/Facturas/Fremision"
hx-trigger="change"
hx-target="#results-container"
hx-include="[name='Buscar'],[name='Status'],[name='FechaHasta']" />
</div>
</div>
<div class="col-auto">
<div class="input-group input-group-sm">
<span class="input-group-text"><i class="bi bi-calendar"></i>Hasta</span>
<input type="date" class="form-control" name="FechaHasta"
value="@Model.FechaHasta?.ToString("yyyy-MM-dd")"
hx-get="/Facturas/Fremision"
hx-trigger="change"
hx-target="#results-container"
hx-include="[name='Buscar'],[name='Status'],[name='FechaDesde']" />
</div>
</div>
</div>
<!-- Results container -->
<div id="results-container">
<partial name="_RemisionesCards" model="Model" />
</div>
</div>
</div>
<script>
(function() {
if (typeof MimAutocomplete !== 'undefined') {
MimAutocomplete.init({
inputId: 'search-input',
dropdownId: 'suggestions-dropdown',
suggestionsUrl: '/Facturas/Fremision?handler=Suggestions',
paramName: 'Buscar',
minChars: 2,
debounceMs: 150
});
}
if (typeof htmx !== 'undefined') {
htmx.process(document.getElementById('page-content'));
}
})();
</script>
</div>
}