@extends('layouts.monitor')
@section('title', $device->exists ? 'Edit Device' : 'Add Device')

@section('content')
<div class="max-w-4xl">
    <h1 class="text-3xl font-bold">{{ $device->exists ? 'Edit device' : 'Add device' }}</h1>
    <p class="text-slate-400 mt-2 mb-7">Use the public IP and forwarded TCP/HTTP port.</p>

    <form method="POST" action="{{ $device->exists ? route('monitor.devices.update', $device) : route('monitor.devices.store') }}" class="rounded-2xl border border-slate-800 bg-slate-900 p-6">
        @csrf
        @if($device->exists) @method('PUT') @endif

        @if($errors->any())
            <div class="mb-5 rounded-xl border border-rose-800 bg-rose-950 p-4 text-rose-300">
                <ul class="list-disc pl-5">@foreach($errors->all() as $error)<li>{{ $error }}</li>@endforeach</ul>
            </div>
        @endif

        <div class="grid md:grid-cols-2 gap-5">
            @php
                $fields = [
                    ['name','Device name','Bogura POP MikroTik','text'],
                    ['device_type','Device type','mikrotik','text'],
                    ['group_name','Group','Core Network','text'],
                    ['location','Location','Bogura POP','text'],
                    ['host','Real IP / hostname','203.0.113.10','text'],
                    ['port','Forwarded port','18291','number'],
                    ['url','HTTP URL','http://203.0.113.10:18080/','url'],
                    ['expected_status','Expected HTTP status','200','number'],
                    ['timeout_seconds','Timeout seconds','5','number'],
                    ['check_interval_seconds','Check interval seconds','60','number'],
                    ['failure_threshold','Failures before offline','3','number'],
                    ['recovery_threshold','Successes before recovery','2','number'],
                ];
            @endphp

            @foreach($fields as [$name,$label,$placeholder,$type])
                <label class="{{ $name === 'url' ? 'md:col-span-2' : '' }}">
                    <span class="block mb-2 text-sm text-slate-300">{{ $label }}</span>
                    <input type="{{ $type }}" name="{{ $name }}" value="{{ old($name, $device->{$name} ?? match($name){'expected_status'=>200,'timeout_seconds'=>5,'check_interval_seconds'=>60,'failure_threshold'=>3,'recovery_threshold'=>2,default=>''}) }}" placeholder="{{ $placeholder }}" class="w-full rounded-xl border border-slate-700 bg-slate-950 px-4 py-3 outline-none focus:border-cyan-500">
                </label>
            @endforeach

            <label>
                <span class="block mb-2 text-sm text-slate-300">Check type</span>
                <select name="check_type" class="w-full rounded-xl border border-slate-700 bg-slate-950 px-4 py-3">
                    <option value="tcp" @selected(old('check_type', $device->check_type ?: 'tcp') === 'tcp')>TCP port</option>
                    <option value="http" @selected(old('check_type', $device->check_type) === 'http')>HTTP / HTTPS</option>
                </select>
            </label>

            <label class="flex items-center gap-3 mt-8">
                <input type="hidden" name="is_enabled" value="0">
                <input type="checkbox" name="is_enabled" value="1" @checked(old('is_enabled', $device->exists ? $device->is_enabled : true)) class="size-5">
                <span>Monitoring enabled</span>
            </label>
        </div>

        <div class="mt-7 flex gap-3">
            <button class="rounded-xl bg-cyan-500 px-5 py-3 font-semibold text-slate-950">{{ $device->exists ? 'Save changes' : 'Add device' }}</button>
            <a href="{{ route('monitor.devices.index') }}" class="rounded-xl bg-slate-800 px-5 py-3">Cancel</a>
        </div>
    </form>
</div>
@endsection