@extends('layouts.app')

@section('content')

<style>
body{
background: radial-gradient(circle at center, #020617, #000);
overflow-x:hidden;
}

.network-bg{
position:fixed;
width:100%;
height:100%;
background-image:
linear-gradient(rgba(0,255,255,0.05) 1px, transparent 1px),
linear-gradient(90deg, rgba(0,255,255,0.05) 1px, transparent 1px);
background-size:40px 40px;
z-index:0;
animation:moveGrid 20s linear infinite;
pointer-events:none;
}

@keyframes moveGrid{
0%{transform:translate(0,0);}
100%{transform:translate(40px,40px);}
}

.card-box{
position:relative;
z-index:10;
background:rgba(0,0,0,0.7);
padding:25px;
border-radius:15px;
border:1px solid rgba(0,255,255,.2);
box-shadow:0 0 30px rgba(0,255,255,.2);
backdrop-filter:blur(10px);
}

.form-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:15px;
}

.input-group{
display:flex;
flex-direction:column;
}

.input-group label{
font-size:12px;
color:#00ffff;
margin-bottom:5px;
}

.input-group input,
.input-group select{
padding:12px;
background:#000;
border:1px solid rgba(0,255,255,.3);
color:#fff;
border-radius:8px;
}

.input-group input:focus,
.input-group select:focus{
border-color:#00ffff;
box-shadow:0 0 10px #00ffff;
}

.info-box{
grid-column:span 2;
padding:14px;
background:#022c22;
border-radius:10px;
color:#00ffcc;
display:flex;
align-items:center;
justify-content:center;
gap:10px;
font-weight:bold;
}

.btn-glow{
width:100%;
margin-top:15px;
padding:14px;
background:linear-gradient(45deg,#00ffff,#3b82f6);
border:none;
border-radius:10px;
color:#000;
font-weight:bold;
display:flex;
align-items:center;
justify-content:center;
gap:10px;
}

.error{
color:#f87171;
font-size:12px;
margin-top:3px;
}
</style>

<div class="network-bg"></div>

<div class="wrapper">
<div class="card-box">

<h2 style="color:#00ffff;margin-bottom:20px;">
⚡ Add ISP User
</h2>

{{-- GLOBAL ERROR --}}
@if ($errors->any())
<div style="background:#2c0202;padding:10px;border-radius:10px;margin-bottom:10px;">
    @foreach ($errors->all() as $error)
        <div class="error">{{ $error }}</div>
    @endforeach
</div>
@endif

<form method="POST" action="{{ route('users.store') }}">
@csrf

<div class="form-grid">

<div class="input-group">
<label>Full Name</label>
<input type="text" name="name" value="{{ old('name') }}" required>
</div>

<div class="input-group">
<label>Email</label>
<input type="email" name="email" value="{{ old('email') }}" required>
</div>

<div class="input-group">
<label>Password</label>
<input type="password" name="password" required>
</div>

<div class="input-group">
<label>PPPoE Username</label>
<input type="text" name="username" value="{{ old('username') }}" required>
</div>

<div class="input-group">
<label>Static IP</label>
<input type="text" name="ip" value="{{ old('ip') }}">
</div>

<div class="input-group">
<label>Select Router</label>
<select name="router_id" id="routerSelect" required>
<option value="">Choose Router</option>

@forelse($routers ?? [] as $router)
<option value="{{ $router->id }}" {{ old('router_id') == $router->id ? 'selected' : '' }}>
{{ $router->name }} ({{ $router->ip }})
</option>
@empty
<option disabled>No Router Found</option>
@endforelse

</select>
</div>

<div class="input-group">
<label>Select Package</label>
<select name="package_id" id="packageSelect" required>

<option value="">Choose Package</option>

@forelse($packages ?? [] as $package)
<option value="{{ $package->id }}"
data-speed="{{ $package->speed }}"
{{ old('package_id') == $package->id ? 'selected' : '' }}>
{{ $package->name }}
</option>
@empty
<option disabled>No Package Found</option>
@endforelse

</select>
</div>

<div class="info-box" id="speedInfo">
⚡ Speed: Not Selected
</div>

<div class="input-group">
<label>Status</label>
<select name="status">
<option value="active">Active</option>
<option value="suspended">Suspend</option>
</select>
</div>

<div class="input-group">
<label>Expire Date</label>
<input type="date" name="expire_date" value="{{ old('expire_date') }}">
</div>

</div>

<button type="submit" class="btn-glow">
🚀 Create User + Sync MikroTik
</button>

</form>

</div>
</div>

<script>

let packageSelect = document.getElementById('packageSelect');

if(packageSelect){
packageSelect.addEventListener('change', function(){

let selected = this.options[this.selectedIndex];
let speed = selected ? selected.getAttribute('data-speed') : 'N/A';

document.getElementById('speedInfo').innerHTML =
"⚡ Speed: " + (speed ? speed : 'N/A');

});
}

</script>

@endsection