@extends('adminlte::page')

@section('title', isset($editMode) && $editMode ? 'Edit Inter Links' : 'Add Inter Links')

@section('content_header')
    <h1>{{ isset($editMode) && $editMode ? 'Edit' : 'Add' }} Service Inter Links</h1>
@stop

@section('content')
    <form action="{{ isset($editMode) && $editMode
        ? route('admin.services.links.update', $servicePageLink->service_id)
        : route('admin.services.links.store') }}" method="POST">
        @csrf

        <div class="form-group">
            <label for="service_id">Service</label>
            <select name="service_id" class="select2 form-control" required>
                <option value="">-- Select Service --</option>
                @foreach($services as $service)
                    <option value="{{ $service->id }}"
                        {{ old('service_id', $servicePageLink->service_id ?? '') == $service->id ? 'selected' : '' }}>
                        {{ $service->title }} 
                        @if(isset($service->category->category_title))
                            ({{ $service->category->category_title }})
                        @endif
                    </option>
                @endforeach
            </select>
        </div>

        <div id="linkRepeaterWrapper">
            @php $count = isset($editMode) && $editMode ? count($servicePageLinks) : 1; @endphp

            @for($i = 0; $i < $count; $i++)
                <div class="row mb-3 repeater-item">
                    <div class="col-md-4">
                        <label>Icon</label>
                        <select name="icon_id[]" class="select2 form-control" required>
                            <option value="">-- Select Icon --</option>
                            @foreach($icons as $icon)
                                <option value="{{ $icon->id }}"
                                    {{ old('icon_id.' . $i, $servicePageLinks[$i]->icon_id ?? '') == $icon->id ? 'selected' : '' }}>
                                    {{ $icon->title }}
                                    @if(isset($icon->category->category_title))
                                        ({{ $icon->category->category_title }})
                                    @endif
                                </option>
                            @endforeach
                        </select>
                    </div>

                    <div class="col-md-5">
                        <label>Title</label>
                        <input type="text" name="title[]" class="form-control"
                            value="{{ old('title.' . $i, $servicePageLinks[$i]->title ?? '') }}" required>
                    </div>

                    <div class="col-md-2">
                        <label>Status</label>
                        <select name="status[]" class="form-control" required>
                            <option value="1" {{ old('status.' . $i, $servicePageLinks[$i]->status ?? '') == 1 ? 'selected' : '' }}>Show</option>
                            <option value="2" {{ old('status.' . $i, $servicePageLinks[$i]->status ?? '') == 2 ? 'selected' : '' }}>Hide</option>
                        </select>
                    </div>

                    <div class="col-md-1 d-flex align-items-end">
                        <button type="button" class="btn btn-danger removeRow">❌</button>
                    </div>
                </div>
            @endfor
        </div>

        <div class="mb-3">
            <button type="button" class="btn btn-success" id="addMoreRows">➕ Add More</button>
        </div>

        <button type="submit" class="btn btn-primary">
            {{ isset($editMode) && $editMode ? 'Update' : 'Create' }}
        </button>
        <a href="{{ route('admin.services.links.index') }}" class="btn btn-secondary">Back</a>
    </form>

    {{-- Store icons list as JS object --}}
    <script>
        const iconOptions = @json($icons->map(function($icon) {
            return [
                'id' => $icon->id,
                'title' => $icon->title,
                'category' => $icon->category->category_title ?? ''
            ];
        }));
    </script>
@endsection

@section('js')
<script>
    $(document).ready(function() {
        $('.select2').select2();

        $('#addMoreRows').on('click', function() {
            let iconSelectHTML = `<option value="">-- Select Icon --</option>`;
            iconOptions.forEach(function(icon) {
                let label = icon.title + (icon.category ? ` (${icon.category})` : '');
                iconSelectHTML += `<option value="${icon.id}">${label}</option>`;
            });

            let newRow = `
                <div class="row mb-3 repeater-item">
                    <div class="col-md-4">
                        <select name="icon_id[]" class="select2 form-control" required>
                            ${iconSelectHTML}
                        </select>
                    </div>
                    <div class="col-md-5">
                        <input type="text" name="title[]" class="form-control" required>
                    </div>
                    <div class="col-md-2">
                        <select name="status[]" class="form-control" required>
                            <option value="1">Show</option>
                            <option value="2">Hide</option>
                        </select>
                    </div>
                    <div class="col-md-1 d-flex align-items-end">
                        <button type="button" class="btn btn-danger removeRow">❌</button>
                    </div>
                </div>
            `;

            $('#linkRepeaterWrapper').append(newRow);
            $('#linkRepeaterWrapper .select2').last().select2();
        });

        $(document).on('click', '.removeRow', function() {
            $(this).closest('.repeater-item').remove();
        });
    });
</script>
@stop