@extends('layouts.admin')

@section('header_title', 'Novo Equipamento')
@section('header_subtitle', 'Cadastre uma câmera ou outro equipamento técnico.')

@section('content')
    <div class="mb-6">
        <a href="{{ route('admin.equipment.index') }}" class="text-sm font-medium text-slate-400 hover:text-white transition-colors flex items-center gap-2">
            <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18" /></svg>
            Voltar à listagem
        </a>
    </div>

    <div class="bg-slate-900 border border-white/5 rounded-2xl p-6 md:p-8 shadow-xl max-w-4xl">
        @if ($errors->any())
            <div class="mb-6 p-4 rounded-xl bg-red-500/10 border border-red-500/20 text-red-400 text-sm">
                <ul class="list-disc list-inside">
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        <form action="{{ route('admin.equipment.store') }}" method="POST" class="space-y-6" x-data="{ kind: '{{ old('kind', 'camera') }}' }">
            @csrf
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                    <label class="block text-sm font-medium text-slate-300 mb-2">Tipo de registo *</label>
                    <select name="kind" x-model="kind" class="block w-full px-4 py-3 bg-slate-950 border border-white/10 rounded-xl text-white sm:text-sm">
                        <option value="camera" @selected(old('kind') === 'camera')>Câmera</option>
                        <option value="device" @selected(old('kind') === 'device')>Equipamento</option>
                    </select>
                </div>
                <div>
                    <label class="block text-sm font-medium text-slate-300 mb-2">Instalação *</label>
                    <select name="installation_id" class="block w-full px-4 py-3 bg-slate-950 border border-white/10 rounded-xl text-white sm:text-sm">
                        @foreach($installations as $id => $label)
                            <option value="{{ $id }}" @selected(old('installation_id') == $id)>{{ $label }}</option>
                        @endforeach
                    </select>
                </div>
                <div>
                    <label class="block text-sm font-medium text-slate-300 mb-2">Nome *</label>
                    <input name="name" value="{{ old('name') }}" class="block w-full px-4 py-3 bg-slate-950 border border-white/10 rounded-xl text-white sm:text-sm">
                </div>
                <div x-show="kind === 'camera'">
                    <label class="block text-sm font-medium text-slate-300 mb-2">Estado *</label>
                    <select name="status" class="block w-full px-4 py-3 bg-slate-950 border border-white/10 rounded-xl text-white sm:text-sm">
                        <option value="online" @selected(old('status') === 'online')>Online</option>
                        <option value="offline" @selected(old('status') === 'offline')>Offline</option>
                        <option value="maintenance" @selected(old('status') === 'maintenance')>Manutenção</option>
                    </select>
                </div>
                <div x-show="kind === 'device'">
                    <label class="block text-sm font-medium text-slate-300 mb-2">Estado *</label>
                    <select name="device_status" class="block w-full px-4 py-3 bg-slate-950 border border-white/10 rounded-xl text-white sm:text-sm">
                        <option value="active" @selected(old('device_status') === 'active')>Ativo</option>
                        <option value="inactive" @selected(old('device_status') === 'inactive')>Inativo</option>
                        <option value="maintenance" @selected(old('device_status') === 'maintenance')>Manutenção</option>
                    </select>
                </div>
                <div x-show="kind === 'camera'">
                    <label class="block text-sm font-medium text-slate-300 mb-2">Modelo da câmera</label>
                    <input name="model" value="{{ old('model') }}" class="block w-full px-4 py-3 bg-slate-950 border border-white/10 rounded-xl text-white sm:text-sm">
                </div>
                <div x-show="kind === 'camera'">
                    <label class="block text-sm font-medium text-slate-300 mb-2">IP da câmera</label>
                    <input name="ip_address" value="{{ old('ip_address') }}" class="block w-full px-4 py-3 bg-slate-950 border border-white/10 rounded-xl text-white sm:text-sm">
                </div>
                <div x-show="kind === 'device'">
                    <label class="block text-sm font-medium text-slate-300 mb-2">Tipo do equipamento</label>
                    <select name="type" class="block w-full px-4 py-3 bg-slate-950 border border-white/10 rounded-xl text-white sm:text-sm">
                        <option value="">Selecione se for equipamento</option>
                        <option value="alarm" @selected(old('type') === 'alarm')>Alarme</option>
                        <option value="access_control" @selected(old('type') === 'access_control')>Controle de acesso</option>
                        <option value="sensor" @selected(old('type') === 'sensor')>Sensor</option>
                        <option value="other" @selected(old('type') === 'other')>Outro</option>
                    </select>
                </div>
                <div x-show="kind === 'device'">
                    <label class="block text-sm font-medium text-slate-300 mb-2">Número de série</label>
                    <input name="serial_number" value="{{ old('serial_number') }}" class="block w-full px-4 py-3 bg-slate-950 border border-white/10 rounded-xl text-white sm:text-sm">
                </div>
            </div>

            <div class="mt-8 pt-6 border-t border-white/5 flex items-center justify-end gap-4">
                <a href="{{ route('admin.equipment.index') }}" class="px-5 py-2.5 text-sm font-medium text-slate-300 hover:text-white transition-colors">Cancelar</a>
                <button type="submit" class="px-6 py-2.5 bg-blue-600 hover:bg-blue-500 text-white text-sm font-semibold rounded-xl shadow-lg shadow-blue-500/20 transition-all">Cadastrar Equipamento</button>
            </div>
        </form>
    </div>
@endsection