@extends('layouts.app')
@section('content')
<div class="alert alert-warning">La creación solo se ejecuta al pulsar el botón. Servidor fijo: Plex 155.</div>
<form method="post" action="{{ route('admin.plex.customers.store') }}" class="card card-body">@csrf
<div class="row g-3"><div class="col-12"><label class="form-label">¿Agregar sin clave?</label><select class="form-select" name="without_key"><option value="1">Sí</option><option value="0">No</option></select></div><div class="col-12"><label class="form-label">Servidor</label><select class="form-select" disabled><option>Plex 155</option></select></div><div class="col-12"><label class="form-label">Paquete</label><select name="package_id" class="form-select">@foreach($packages as $p)<option value="{{ $p->id }}" @selected($p->id==$defaults['package_id'])>{{ $p->id }} · {{ $p->name }}</option>@endforeach</select></div><div class="col-md-6"><label class="form-label">Nombre</label><input name="name" class="form-control" value="{{ old('name') }}" required></div><div class="col-md-6"><label class="form-label">Teléfono</label><input name="phone" class="form-control" value="{{ old('phone') }}"></div><div class="col-12"><label class="form-label">Correo</label><div class="input-group"><input id="email" name="email" type="email" class="form-control" value="{{ old('email', $defaults['email']) }}" required><button type="button" class="btn btn-outline-primary" id="generate-email">Generar Email</button></div></div><div class="col-12"><label class="form-label">Clave (solo referencia local)</label><div class="input-group"><input id="local-key" type="text" class="form-control" autocomplete="off"><button type="button" class="btn btn-outline-primary" id="generate-key">Generar Clave</button></div><div class="form-text">No se guarda ni se envía a Plex.</div></div><div class="col-md-6"><label class="form-label">Duración</label><select name="duration_id" id="duration" class="form-select">@foreach($durations as $d)<option value="{{ $d->id }}" data-months="{{ $d->months }}" @selected($d->id==$defaults['duration_id'])>{{ $d->id }} · {{ $d->name }}</option>@endforeach</select></div><div class="col-md-6"><label class="form-label">Pantallas</label><input name="screens" type="number" min="1" max="20" value="{{ old('screens', 4) }}" class="form-control"></div><div class="col-md-6"><label class="form-label">Fecha desde</label><input name="date_from" id="date-from" type="date" class="form-control" value="{{ old('date_from', now()->toDateString()) }}" required></div><div class="col-md-6"><label class="form-label">Fecha hasta</label><input id="date-to" type="date" class="form-control" readonly></div><div class="col-12"><label class="form-label">Observación</label><textarea name="observation" class="form-control">{{ old('observation') }}</textarea></div></div><button class="btn btn-primary mt-4">Crear cliente</button></form>
<script>
const email=document.querySelector('#email'), key=document.querySelector('#local-key'), duration=document.querySelector('#duration'), from=document.querySelector('#date-from'), to=document.querySelector('#date-to');
document.querySelector('#generate-email').onclick=()=>email.value='plex-test-'+Math.random().toString(36).slice(2,8)+'@3letras.shop';
document.querySelector('#generate-key').onclick=()=>key.value=Math.random().toString(36).slice(2,10).toUpperCase();
function updateEnd(){const d=new Date(from.value+'T12:00:00');const m=Number(duration.selectedOptions[0]?.dataset.months||1);d.setMonth(d.getMonth()+m);to.value=d.toISOString().slice(0,10)}
duration.onchange=updateEnd; from.onchange=updateEnd; updateEnd();
</script>
@endsection