@php
    $oldMk = old('mikrotik_id', optional($olt)->mikrotik_id);
    $oldSw = old('switch_id', optional($olt)->switch_id);
    $parentType = old('parent_type', $oldSw ? 'switch' : ($oldMk ? 'mikrotik' : ''));
@endphp

<div class="row">
    <div class="form-group col-md-6">
        <label>Name*</label>
        <input type="text" name="name" class="form-control"
            value="{{ old('name', optional($olt)->name) }}" required>
        @error('name')
            <div class="alert alert-danger mt-1">{{ $message }}</div>
        @enderror
    </div>

    <div class="form-group col-md-6">
        <label>Brand*</label>
        <input type="text" name="brand" class="form-control"
            value="{{ old('brand', optional($olt)->brand) }}" required>
        @error('brand')
            <div class="alert alert-danger mt-1">{{ $message }}</div>
        @enderror
    </div>

    <div class="form-group col-md-6">
        <label>IP*</label>
        <input type="text" name="ip" class="form-control"
            value="{{ old('ip', optional($olt)->ip) }}" required>
        @error('ip')
            <div class="alert alert-danger mt-1">{{ $message }}</div>
        @enderror
    </div>

    <div class="form-group col-md-6">
        <label>Model</label>
        <input type="text" name="model" class="form-control"
            value="{{ old('model', optional($olt)->model) }}">
        @error('model')
            <div class="alert alert-danger mt-1">{{ $message }}</div>
        @enderror
    </div>

    <div class="form-group col-md-6">
        <label>PON Port</label>
        <input type="text" name="pon_port" class="form-control"
            value="{{ old('pon_port', optional($olt)->pon_port) }}">
        @error('pon_port')
            <div class="alert alert-danger mt-1">{{ $message }}</div>
        @enderror
    </div>

    <div class="form-group col-md-6">
        <label>Connect Under*</label>
        <select name="parent_type" id="parent_type" class="form-control" required>
            <option value="">-- Select Parent Type --</option>
            <option value="mikrotik" {{ $parentType === 'mikrotik' ? 'selected' : '' }}>Mikrotik</option>
            <option value="switch" {{ $parentType === 'switch' ? 'selected' : '' }}>Switch</option>
        </select>
    </div>

    <div class="form-group col-md-6 parent-select parent-mikrotik" style="{{ $parentType === 'mikrotik' ? '' : 'display:none;' }}">
        <label>Mikrotik*</label>
        <select name="mikrotik_id" id="mikrotik_id" class="form-control select2" data-placeholder="-- Select Mikrotik --">
            <option value="">-- Select Mikrotik --</option>
            @foreach ($mikrotiks as $mk)
                <option value="{{ $mk->id }}" {{ (string) $oldMk === (string) $mk->id ? 'selected' : '' }}>
                    {{ $mk->mikrotik_name }}
                </option>
            @endforeach
        </select>
        @error('mikrotik_id')
            <div class="alert alert-danger mt-1">{{ $message }}</div>
        @enderror
    </div>

    <div class="form-group col-md-6 parent-select parent-switch" style="{{ $parentType === 'switch' ? '' : 'display:none;' }}">
        <label>Switch*</label>
        <select name="switch_id" id="switch_id" class="form-control select2" data-placeholder="-- Select Switch --">
            <option value="">-- Select Switch --</option>
            @foreach ($switches as $sw)
                <option value="{{ $sw->id }}" {{ (string) $oldSw === (string) $sw->id ? 'selected' : '' }}>
                    {{ $sw->name }}
                </option>
            @endforeach
        </select>
        @error('switch_id')
            <div class="alert alert-danger mt-1">{{ $message }}</div>
        @enderror
    </div>
</div>

@push('js')
    <script>
        $(function() {
            $('.select2').select2({ theme: 'bootstrap4' });

            function toggleParent(type) {
                $('.parent-mikrotik').toggle(type === 'mikrotik');
                $('.parent-switch').toggle(type === 'switch');

                if (type !== 'mikrotik') $('#mikrotik_id').val('').trigger('change');
                if (type !== 'switch') $('#switch_id').val('').trigger('change');
            }

            $('#parent_type').on('change', function() {
                toggleParent($(this).val());
            });
        });
    </script>
@endpush