Add citas module: scheduling, calendar, blocked schedules
This commit is contained in:
209
resources/views/admin/horarios/create.blade.php
Normal file
209
resources/views/admin/horarios/create.blade.php
Normal file
@@ -0,0 +1,209 @@
|
||||
@extends('admin.layouts.master')
|
||||
|
||||
@section('title', 'Bloquear Horario - Lash Vanshy')
|
||||
|
||||
@section('page-title', 'Bloquear Horario')
|
||||
|
||||
@section('content')
|
||||
<!-- Breadcrumb -->
|
||||
<nav aria-label="breadcrumb" class="mb-4">
|
||||
<ol class="breadcrumb">
|
||||
<li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">Dashboard</a></li>
|
||||
<li class="breadcrumb-item"><a href="{{ route('admin.horarios.index') }}">Horarios Bloqueados</a></li>
|
||||
<li class="breadcrumb-item active" aria-current="page">Bloquear Horario</li>
|
||||
</ol>
|
||||
</nav>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-lg-8">
|
||||
<div class="card-admin">
|
||||
<div class="card-header">
|
||||
<i class="fas fa-ban me-2"></i>Bloquear Horario
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<form method="POST" action="{{ route('admin.horarios.store') }}">
|
||||
@csrf
|
||||
|
||||
<div class="row">
|
||||
<!-- Fecha -->
|
||||
<div class="col-md-6 mb-3">
|
||||
<label for="fecha" class="form-label">
|
||||
Fecha <span class="text-danger">*</span>
|
||||
</label>
|
||||
<input type="date"
|
||||
class="form-control @error('fecha') is-invalid @enderror"
|
||||
id="fecha"
|
||||
name="fecha"
|
||||
value="{{ old('fecha') }}"
|
||||
min="{{ date('Y-m-d') }}"
|
||||
required>
|
||||
@error('fecha')
|
||||
<div class="invalid-feedback">{{ $message }}</div>
|
||||
@else
|
||||
<small class="text-muted">
|
||||
<i class="fas fa-info-circle me-1"></i>
|
||||
No se podrán agendar citas en esta fecha
|
||||
</small>
|
||||
@enderror
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<!-- Hora Inicio -->
|
||||
<div class="col-md-6 mb-3">
|
||||
<label for="hora_inicio" class="form-label">
|
||||
Hora de Inicio <span class="text-danger">*</span>
|
||||
</label>
|
||||
<select class="form-select @error('hora_inicio') is-invalid @enderror"
|
||||
id="hora_inicio"
|
||||
name="hora_inicio"
|
||||
required>
|
||||
<option value="">Seleccionar hora</option>
|
||||
@for($hora = 9; $hora < 19; $hora++)
|
||||
<option value="{{ sprintf('%02d:00:00', $hora) }}"
|
||||
{{ old('hora_inicio') == sprintf('%02d:00:00', $hora) ? 'selected' : '' }}>
|
||||
{{ sprintf('%02d:00', $hora) }} AM
|
||||
</option>
|
||||
@endfor
|
||||
@for($hora = 12; $hora < 19; $hora++)
|
||||
<option value="{{ sprintf('%02d:00:00', $hora) }}"
|
||||
{{ old('hora_inicio') == sprintf('%02d:00:00', $hora) ? 'selected' : '' }}>
|
||||
{{ $hora > 12 ? sprintf('%02d:00', $hora - 12) : sprintf('%02d:00', $hora) }}:00 {{ $hora >= 12 ? 'PM' : 'AM' }}
|
||||
</option>
|
||||
@endfor
|
||||
</select>
|
||||
@error('hora_inicio')
|
||||
<div class="invalid-feedback">{{ $message }}</div>
|
||||
@enderror
|
||||
</div>
|
||||
|
||||
<!-- Hora Fin -->
|
||||
<div class="col-md-6 mb-3">
|
||||
<label for="hora_fin" class="form-label">
|
||||
Hora de Fin <span class="text-danger">*</span>
|
||||
</label>
|
||||
<select class="form-select @error('hora_fin') is-invalid @enderror"
|
||||
id="hora_fin"
|
||||
name="hora_fin"
|
||||
required>
|
||||
<option value="">Seleccionar hora</option>
|
||||
@for($hora = 9; $hora < 19; $hora++)
|
||||
<option value="{{ sprintf('%02d:00:00', $hora) }}"
|
||||
{{ old('hora_fin') == sprintf('%02d:00:00', $hora) ? 'selected' : '' }}>
|
||||
{{ sprintf('%02d:00', $hora) }}:00 {{ $hora >= 12 ? 'PM' : 'AM' }}
|
||||
</option>
|
||||
@endfor
|
||||
</select>
|
||||
@error('hora_fin')
|
||||
<div class="invalid-feedback">{{ $message }}</div>
|
||||
@else
|
||||
<small class="text-muted">
|
||||
El bloqueo dura hasta esta hora
|
||||
</small>
|
||||
@enderror
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Motivo -->
|
||||
<div class="mb-3">
|
||||
<label for="motivo" class="form-label">Motivo</label>
|
||||
<input type="text"
|
||||
class="form-control @error('motivo') is-invalid @enderror"
|
||||
id="motivo"
|
||||
name="motivo"
|
||||
value="{{ old('motivo') }}"
|
||||
placeholder="Ej: Vacaciones, Mantenimiento, Evento especial...">
|
||||
@error('motivo')
|
||||
<div class="invalid-feedback">{{ $message }}</div>
|
||||
@else
|
||||
<small class="text-muted">
|
||||
Opcional. Ej: "Vacaciones de Semana Santa"
|
||||
</small>
|
||||
@enderror
|
||||
</div>
|
||||
|
||||
<!-- Quick Options -->
|
||||
<div class="mb-4">
|
||||
<label class="form-label">Opciones Rápidas</label>
|
||||
<div class="d-flex flex-wrap gap-2">
|
||||
<button type="button" class="btn btn-secondary-admin btn-sm" onclick="bloquearDiaCompleto()">
|
||||
<i class="fas fa-calendar me-2"></i>Bloquear Día Completo
|
||||
</button>
|
||||
<button type="button" class="btn btn-secondary-admin btn-sm" onclick="bloquearManana()">
|
||||
<i class="fas fa-sun me-2"></i>Bloquear Mañana (9am-12pm)
|
||||
</button>
|
||||
<button type="button" class="btn btn-secondary-admin btn-sm" onclick="bloquearTarde()">
|
||||
<i class="fas fa-moon me-2"></i>Bloquear Tarde (12pm-7pm)
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="d-flex justify-content-between mt-4">
|
||||
<a href="{{ route('admin.horarios.index') }}" class="btn btn-secondary-admin">
|
||||
<i class="fas fa-arrow-left me-2"></i>Volver
|
||||
</a>
|
||||
<button type="submit" class="btn btn-primary-admin">
|
||||
<i class="fas fa-lock me-2"></i>Bloquear Horario
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Sidebar -->
|
||||
<div class="col-lg-4">
|
||||
<div class="card-admin mb-3">
|
||||
<div class="card-header">
|
||||
<i class="fas fa-info-circle me-2"></i>Información
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<ul class="text-muted">
|
||||
<li class="mb-2">Los horarios bloqueados prevents the agendamiento de citas.</li>
|
||||
<li class="mb-2">Puedes bloquear días completos o solo tramos específicos.</li>
|
||||
<li class="mb-2">El bloqueo no afecta las citas ya existentes.</li>
|
||||
<li class="mb-2">Los clientes no podrán ver estos horarios.</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card-admin">
|
||||
<div class="card-header">
|
||||
<i class="fas fa-calendar-alt me-2"></i>Horario de Atención
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<ul class="text-muted mb-0">
|
||||
<li>Lunes a Sábado: <strong>9:00 AM - 7:00 PM</strong></li>
|
||||
<li>Último turno: <strong>6:00 PM</strong></li>
|
||||
<li>Duración cita: <strong>60 minutos</strong></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
|
||||
@push('scripts')
|
||||
<script>
|
||||
const hoy = new Date().toISOString().split('T')[0];
|
||||
document.getElementById('fecha').setAttribute('min', hoy);
|
||||
|
||||
function bloquearDiaCompleto() {
|
||||
document.getElementById('hora_inicio').value = '09:00:00';
|
||||
document.getElementById('hora_fin').value = '19:00:00';
|
||||
document.getElementById('motivo').value = 'Día completo bloqueado';
|
||||
}
|
||||
|
||||
function bloquearManana() {
|
||||
document.getElementById('hora_inicio').value = '09:00:00';
|
||||
document.getElementById('hora_fin').value = '12:00:00';
|
||||
document.getElementById('motivo').value = 'Mañana bloqueada';
|
||||
}
|
||||
|
||||
function bloquearTarde() {
|
||||
document.getElementById('hora_inicio').value = '12:00:00';
|
||||
document.getElementById('hora_fin').value = '19:00:00';
|
||||
document.getElementById('motivo').value = 'Tarde bloqueada';
|
||||
}
|
||||
</script>
|
||||
@endpush
|
||||
Reference in New Issue
Block a user