@extends('layout.app')

@section('title', 'Edit User Hotspot')

@section('content')
<x-material-page-header 
    title="Edit User Hotspot" 
    :breadcrumbs="[
        ['name' => 'Hotspot', 'url' => route('hotspot.index')],
        ['name' => 'Edit']
    ]"
/>

<div class="container-fluid py-4">
    <div class="row">
        <div class="col">
            <div class="card mb-4" style="border: none; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);">
                <div class="card-header pb-3">
                    <h6 class="mb-0 font-weight-bold d-flex align-items-center" style="font-size: 0.875rem; color: #344767;">
                        <i class="material-symbols-rounded me-2" style="font-size: 20px; line-height: 1; color: #5e72e4;">edit</i> Form Edit User Hotspot
                    </h6>
                </div>
                <div class="card-body pt-3">
                    @if ($errors->any())
                        <div class="alert alert-danger alert-dismissible fade show" role="alert">
                            <span class="alert-icon"><i class="material-symbols-rounded me-2" style="font-size: 20px; vertical-align: middle;">error</i></span>
                            <span class="alert-text">
                                <strong>Error!</strong> Terdapat kesalahan dalam input data:
                                <ul class="mb-0 mt-2">
                                    @foreach ($errors->all() as $error)
                                        <li>{{ $error }}</li>
                                    @endforeach
                                </ul>
                            </span>
                            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                        </div>
                    @endif

                    <form action="{{ route('hotspot.update', $user) }}" method="POST">
                        @csrf
                        @method('PUT')
                        
                        <!-- Informasi Dasar -->
                        <div class="card my-4">
                            <div class="card-header pb-0 pt-3 bg-light">
                                <h6 class="mb-0 font-weight-bold">
                                    <i class="material-symbols-rounded me-2" style="font-size: 20px; vertical-align: middle;">person</i>Informasi Dasar
                                </h6>
                            </div>
                            <div class="card-body pt-0">
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="input-group input-group-outline mb-3">
                                            <label class="form-label font-weight-bold">Username <span class="text-danger">*</span></label>
                                            <input type="text" name="username" class="form-control @error('username') is-invalid @enderror" 
                                                   value="{{ old('username', $user->username) }}" required>
                                            @error('username')
                                                <div class="invalid-feedback d-block">{{ $message }}</div>
                                            @enderror
                                            <small class="form-text text-muted">Username untuk login hotspot</small>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="input-group input-group-outline mb-3">
                                            <label class="form-label font-weight-bold">Password</label>
                                            <div class="input-group">
                                                <input type="password" name="password" id="password" class="form-control @error('password') is-invalid @enderror" 
                                                       placeholder="Biarkan kosong jika tidak berubah">
                                                <button class="btn btn-outline-secondary" type="button" onclick="togglePassword()">
                                                    <i class="material-symbols-rounded" id="toggleIcon" style="font-size: 18px; vertical-align: middle;">visibility</i>
                                                </button>
                                            </div>
                                            @error('password')
                                                <div class="invalid-feedback d-block">{{ $message }}</div>
                                            @enderror
                                            <small class="form-text text-muted">Kosongkan jika tidak ingin mengubah password</small>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Konfigurasi Hotspot -->
                        <div class="card my-4">
                            <div class="card-header pb-0 pt-3 bg-light">
                                <h6 class="mb-0 font-weight-bold">
                                    <i class="material-symbols-rounded me-2" style="font-size: 20px; vertical-align: middle;">settings</i>Konfigurasi Hotspot
                                </h6>
                            </div>
                            <div class="card-body pt-0">
                                <div class="row">
                                    <div class="col-md-4">
                                        <div class="input-group input-group-outline mb-3">
                                            <label class="form-label font-weight-bold">Profile</label>
                                            <select name="profile" class="form-control @error('profile') is-invalid @enderror">
                                                <option value="">Pilih Profile</option>
                                                <option value="default" {{ old('profile', $user->profile) == 'default' ? 'selected' : '' }}>Default</option>
                                                <option value="premium" {{ old('profile', $user->profile) == 'premium' ? 'selected' : '' }}>Premium</option>
                                                <option value="basic" {{ old('profile', $user->profile) == 'basic' ? 'selected' : '' }}>Basic</option>
                                            </select>
                                            @error('profile')
                                                <div class="invalid-feedback d-block">{{ $message }}</div>
                                            @enderror
                                            <small class="form-text text-muted">Profile bandwidth untuk user</small>
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="input-group input-group-outline mb-3">
                                            <label class="form-label font-weight-bold">Status <span class="text-danger">*</span></label>
                                            <select name="status" class="form-control @error('status') is-invalid @enderror" required>
                                                <option value="">Pilih Status</option>
                                                <option value="Aktif" {{ old('status', $user->status) == 'Aktif' ? 'selected' : '' }}>Aktif</option>
                                                <option value="Nonaktif" {{ old('status', $user->status) == 'Nonaktif' ? 'selected' : '' }}>Nonaktif</option>
                                            </select>
                                            @error('status')
                                                <div class="invalid-feedback d-block">{{ $message }}</div>
                                            @enderror
                                            <small class="form-text text-muted">Status user hotspot</small>
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="input-group input-group-outline mb-3">
                                            <label class="form-label font-weight-bold">MAC Address</label>
                                            <input type="text" name="mac_address" class="form-control @error('mac_address') is-invalid @enderror" 
                                                   value="{{ old('mac_address', $user->mac_address) }}" placeholder="00:00:00:00:00:00">
                                            @error('mac_address')
                                                <div class="invalid-feedback d-block">{{ $message }}</div>
                                            @enderror
                                            <small class="form-text text-muted">MAC address perangkat (opsional)</small>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Pengaturan Waktu -->
                        <div class="card my-4">
                            <div class="card-header pb-0 pt-3 bg-light">
                                <h6 class="mb-0 font-weight-bold">
                                    <i class="material-symbols-rounded me-2" style="font-size: 20px; vertical-align: middle;">event</i>Pengaturan Waktu
                                </h6>
                            </div>
                            <div class="card-body pt-0">
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="input-group input-group-outline mb-3">
                                            <label class="form-label font-weight-bold">Tanggal Expired</label>
                                            <input type="datetime-local" name="expires_at" class="form-control @error('expires_at') is-invalid @enderror" 
                                                   value="{{ old('expires_at', optional($user->expires_at)->format('Y-m-d\TH:i')) }}">
                                            @error('expires_at')
                                                <div class="invalid-feedback d-block">{{ $message }}</div>
                                            @enderror
                                            <small class="form-text text-muted">Tanggal dan waktu expired user</small>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="input-group input-group-outline mb-3">
                                            <label class="form-label font-weight-bold">Catatan</label>
                                            <input type="text" name="note" class="form-control @error('note') is-invalid @enderror" 
                                                   value="{{ old('note', $user->note) }}" placeholder="Catatan tambahan">
                                            @error('note')
                                                <div class="invalid-feedback d-block">{{ $message }}</div>
                                            @enderror
                                            <small class="form-text text-muted">Catatan untuk user hotspot</small>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Tombol Aksi -->
                        <div class="d-flex justify-content-between">
                            <a href="{{ route('hotspot.index') }}" class="btn bg-gradient-secondary mb-0">
                                <i class="material-symbols-rounded me-2" style="font-size: 18px; vertical-align: middle;">arrow_back</i>Kembali
                            </a>
                            <div>
                                <button type="button" class="btn bg-gradient-secondary mb-0 me-2" onclick="resetForm()">
                                    <i class="material-symbols-rounded me-2" style="font-size: 18px; vertical-align: middle;">refresh</i>Reset
                                </button>
                                <button type="submit" class="btn bg-gradient-primary mb-0">
                                    <i class="material-symbols-rounded me-2" style="font-size: 18px; vertical-align: middle;">save</i>Update User Hotspot
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
function togglePassword() {
    const passwordField = document.getElementById('password');
    const toggleIcon = document.getElementById('toggleIcon');
    
    if (passwordField.type === 'password') {
        passwordField.type = 'text';
        toggleIcon.textContent = 'visibility_off';
    } else {
        passwordField.type = 'password';
        toggleIcon.textContent = 'visibility';
    }
}

function resetForm() {
    if (confirm('Apakah Anda yakin ingin mereset form?')) {
        document.querySelector('form').reset();
    }
}
</script>
@endsection