@extends('layouts.admin')

@section('title', 'Add Battery - Pamtech')

@section('content')
<div class="min-h-screen bg-zinc-50">
    <div class="admin-header">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-5">
            <div class="flex justify-between items-center">
                <div>
                    <span class="label-tech text-zinc-500">Inventory</span>
                    <h1 class="text-xl font-bold text-white mt-1">Add New Battery</h1>
                    <p class="text-xs text-zinc-500 font-mono mt-0.5">Register a unit in the verification database</p>
                </div>
                <a href="{{ route('admin.dashboard') }}" class="inline-flex items-center px-4 py-2 text-sm font-medium rounded-md text-zinc-300 bg-zinc-800 border border-zinc-700 hover:bg-zinc-700 transition-colors">
                    <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M10 19l-7-7m0 0l7-7m-7 7h18"></path></svg>
                    Back to Console
                </a>
            </div>
        </div>
    </div>

    <div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
        <div class="hardware-card p-8">
            <form action="{{ route('admin.batteries.store') }}" method="POST" id="battery-form">
                @csrf

                <div class="mb-6">
                    <label for="serial_code" class="form-label">Serial Code <span class="text-pamtech-red">*</span></label>
                    <input type="text" id="serial_code" name="serial_code" value="{{ old('serial_code') }}" required
                        class="form-input font-mono @error('serial_code') border-red-500 @enderror"
                        placeholder="e.g., PAM-AGM75-0001">
                    @error('serial_code')<p class="mt-1 text-sm text-red-600">{{ $message }}</p>@enderror
                    <p class="mt-1 text-xs text-zinc-400">Must be unique. Printed on the battery label.</p>
                </div>

                <div class="mb-6">
                    <label for="type_select" class="form-label">Battery Type <span class="text-pamtech-red">*</span></label>
                    <select id="type_select" class="form-input mb-3">
                        <option value="">Select existing type or enter new below</option>
                        @foreach($batteryTypes as $batteryType)
                            <option value="{{ $batteryType->type }}"
                                data-volts="{{ $batteryType->volts }}"
                                data-amhs="{{ $batteryType->amhs }}"
                                data-cca="{{ $batteryType->cca }}"
                                data-class="{{ $batteryType->class }}"
                                {{ old('type') === $batteryType->type ? 'selected' : '' }}>
                                {{ $batteryType->type }}
                            </option>
                        @endforeach
                        <option value="__new__">+ New type</option>
                    </select>
                    <input type="text" id="type" name="type" value="{{ old('type') }}" required
                        class="form-input font-mono @error('type') border-red-500 @enderror"
                        placeholder="e.g., AGM-75">
                    @error('type')<p class="mt-1 text-sm text-red-600">{{ $message }}</p>@enderror
                </div>

                <div class="grid md:grid-cols-2 gap-6 mb-6">
                    <div>
                        <label for="volts" class="form-label">Voltage <span class="text-pamtech-red">*</span></label>
                        <input type="text" id="volts" name="volts" value="{{ old('volts') }}" required
                            class="form-input @error('volts') border-red-500 @enderror" placeholder="e.g., 12v">
                        @error('volts')<p class="mt-1 text-sm text-red-600">{{ $message }}</p>@enderror
                    </div>
                    <div>
                        <label for="amhs" class="form-label">Capacity (Ah) <span class="text-pamtech-red">*</span></label>
                        <input type="text" id="amhs" name="amhs" value="{{ old('amhs') }}" required
                            class="form-input @error('amhs') border-red-500 @enderror" placeholder="e.g., 75Ah">
                        @error('amhs')<p class="mt-1 text-sm text-red-600">{{ $message }}</p>@enderror
                    </div>
                </div>

                <div class="grid md:grid-cols-2 gap-6 mb-6">
                    <div>
                        <label for="cca" class="form-label">CCA <span class="text-pamtech-red">*</span></label>
                        <input type="text" id="cca" name="cca" value="{{ old('cca') }}" required
                            class="form-input @error('cca') border-red-500 @enderror" placeholder="e.g., CCA 25C">
                        @error('cca')<p class="mt-1 text-sm text-red-600">{{ $message }}</p>@enderror
                    </div>
                    <div>
                        <label for="class" class="form-label">Class <span class="text-pamtech-red">*</span></label>
                        <input type="text" id="class" name="class" value="{{ old('class') }}" required
                            class="form-input @error('class') border-red-500 @enderror" placeholder="e.g., Class A">
                        @error('class')<p class="mt-1 text-sm text-red-600">{{ $message }}</p>@enderror
                    </div>
                </div>

                <div class="mb-8">
                    <label for="status" class="form-label">Status <span class="text-pamtech-red">*</span></label>
                    <select id="status" name="status" required class="form-input @error('status') border-red-500 @enderror">
                        <option value="valid" {{ old('status', 'valid') === 'valid' ? 'selected' : '' }}>Valid</option>
                        <option value="used" {{ old('status') === 'used' ? 'selected' : '' }}>Used</option>
                        <option value="fake" {{ old('status') === 'fake' ? 'selected' : '' }}>Fake</option>
                    </select>
                    @error('status')<p class="mt-1 text-sm text-red-600">{{ $message }}</p>@enderror
                </div>

                <div class="flex items-center justify-end gap-3">
                    <a href="{{ route('admin.dashboard') }}" class="btn-secondary-light py-2.5 px-6 rounded-lg font-medium text-sm">Cancel</a>
                    <button type="submit" class="btn-primary py-2.5 px-6 text-sm">Add Battery</button>
                </div>
            </form>
        </div>
    </div>
</div>

@push('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function () {
        const typeSelect = document.getElementById('type_select');
        const typeInput = document.getElementById('type');
        const voltsInput = document.getElementById('volts');
        const amhsInput = document.getElementById('amhs');
        const ccaInput = document.getElementById('cca');
        const classInput = document.getElementById('class');

        function fillSpecsFromOption(option) {
            if (!option || !option.dataset.volts) return;
            voltsInput.value = option.dataset.volts;
            amhsInput.value = option.dataset.amhs;
            ccaInput.value = option.dataset.cca;
            classInput.value = option.dataset.class;
        }

        typeSelect.addEventListener('change', function () {
            const value = this.value;
            if (value === '__new__') {
                typeInput.value = '';
                typeInput.focus();
                return;
            }
            if (!value) return;
            typeInput.value = value;
            fillSpecsFromOption(this.selectedOptions[0]);
        });

        const matchingOption = Array.from(typeSelect.options).find(opt => opt.value === typeInput.value);
        if (matchingOption) {
            typeSelect.value = matchingOption.value;
        }
    });
</script>
@endpush
@endsection