<div class="ad_box">
    <h3>Hero Sliders</h3>

    <div class="table-responsive">
        <table class="table align-middle mb-0" id="heroSlidersTable">
            <thead>
                <tr>
                    <th style="min-width: 140px;">Icon</th>
                    <th style="min-width: 220px;">Heading EN</th>
                    <th style="min-width: 220px;">Heading AR</th>
                    <th style="min-width: 280px;">Text EN</th>
                    <th style="min-width: 280px;">Text AR</th>
                    <th style="min-width: 220px;">Anchor EN</th>
                    <th style="min-width: 220px;">Anchor AR</th>
                    <th style="min-width: 220px;">Image</th>
                    <th style="width: 110px;" class="text-center">Status</th>
                    <th style="width: 120px;" class="text-center">Action</th>
                </tr>
            </thead>

            <tbody>
                @php
                    $heroSliderRows = old('hero_sliders');

                    if (!$heroSliderRows) {
                        $heroSliderRows = isset($heroSliders) && count($heroSliders)
                            ? $heroSliders->map(function ($slider) {
                                return [
                                    'id' => $slider->id,
                                    'icon' => $slider->icon,
                                    'heading_en' => $slider->heading_en,
                                    'heading_ar' => $slider->heading_ar,
                                    'text_en' => $slider->text_en,
                                    'text_ar' => $slider->text_ar,
                                    'anchor_en' => $slider->anchor_en,
                                    'anchor_ar' => $slider->anchor_ar,
                                    'image' => $slider->image,
                                    'is_active' => $slider->is_active,
                                ];
                            })->toArray()
                            : [[
                                'id' => '',
                                'icon' => '',
                                'heading_en' => '',
                                'heading_ar' => '',
                                'text_en' => '',
                                'text_ar' => '',
                                'anchor_en' => '',
                                'anchor_ar' => '',
                                'image' => '',
                                'is_active' => 1,
                            ]];
                    }
                @endphp

                @foreach($heroSliderRows as $index => $slider)
                    <tr class="hero-slider-row">
                        <td>
                            <input type="hidden" name="hero_sliders[{{ $index }}][id]" value="{{ $slider['id'] ?? '' }}">
                            <input type="text" name="hero_sliders[{{ $index }}][icon]" value="{{ $slider['icon'] ?? '' }}" class="form-control @error('hero_sliders.' . $index . '.icon') is-invalid @enderror" placeholder="fa-solid fa-house">
                            @error('hero_sliders.' . $index . '.icon')
                                <div class="invalid-feedback d-block">{{ $message }}</div>
                            @enderror
                        </td>

                        <td>
                            <input type="text" name="hero_sliders[{{ $index }}][heading_en]" value="{{ $slider['heading_en'] ?? '' }}" class="form-control @error('hero_sliders.' . $index . '.heading_en') is-invalid @enderror">
                            @error('hero_sliders.' . $index . '.heading_en')
                                <div class="invalid-feedback d-block">{{ $message }}</div>
                            @enderror
                        </td>

                        <td>
                            <input type="text" name="hero_sliders[{{ $index }}][heading_ar]" value="{{ $slider['heading_ar'] ?? '' }}" dir="rtl" class="form-control @error('hero_sliders.' . $index . '.heading_ar') is-invalid @enderror">
                            @error('hero_sliders.' . $index . '.heading_ar')
                                <div class="invalid-feedback d-block">{{ $message }}</div>
                            @enderror
                        </td>

                        <td>
                            <textarea name="hero_sliders[{{ $index }}][text_en]" rows="3" class="form-control @error('hero_sliders.' . $index . '.text_en') is-invalid @enderror">{{ $slider['text_en'] ?? '' }}</textarea>
                            @error('hero_sliders.' . $index . '.text_en')
                                <div class="invalid-feedback d-block">{{ $message }}</div>
                            @enderror
                        </td>

                        <td>
                            <textarea name="hero_sliders[{{ $index }}][text_ar]" rows="3" dir="rtl" class="form-control @error('hero_sliders.' . $index . '.text_ar') is-invalid @enderror">{{ $slider['text_ar'] ?? '' }}</textarea>
                            @error('hero_sliders.' . $index . '.text_ar')
                                <div class="invalid-feedback d-block">{{ $message }}</div>
                            @enderror
                        </td>

                        <td>
                            <input type="text" name="hero_sliders[{{ $index }}][anchor_en]" value="{{ $slider['anchor_en'] ?? '' }}" class="form-control @error('hero_sliders.' . $index . '.anchor_en') is-invalid @enderror">
                            @error('hero_sliders.' . $index . '.anchor_en')
                                <div class="invalid-feedback d-block">{{ $message }}</div>
                            @enderror
                        </td>

                        <td>
                            <input type="text" name="hero_sliders[{{ $index }}][anchor_ar]" value="{{ $slider['anchor_ar'] ?? '' }}" dir="rtl" class="form-control @error('hero_sliders.' . $index . '.anchor_ar') is-invalid @enderror">
                            @error('hero_sliders.' . $index . '.anchor_ar')
                                <div class="invalid-feedback d-block">{{ $message }}</div>
                            @enderror
                        </td>

                        <td>
                            <input type="file" name="hero_sliders[{{ $index }}][image]" class="form-control @error('hero_sliders.' . $index . '.image') is-invalid @enderror">
                            @error('hero_sliders.' . $index . '.image')
                                <div class="invalid-feedback d-block">{{ $message }}</div>
                            @enderror

                            @if(!empty($slider['image']))
                                <div class="mt-2">
                                    <img src="{{ asset('storage/' . $slider['image']) }}" alt="Slider Image" width="90" height="70" class="rounded border" style="object-fit: cover;">
                                    <input type="hidden" name="hero_sliders[{{ $index }}][existing_image]" value="{{ $slider['image'] }}">
                                </div>
                            @endif
                        </td>

                        <td class="text-center">
                            <div class="form-check d-inline-flex justify-content-center">
                                <input type="hidden" name="hero_sliders[{{ $index }}][is_active]" value="0">
                                <input class="form-check-input" type="checkbox" name="hero_sliders[{{ $index }}][is_active]" value="1" {{ !empty($slider['is_active']) ? 'checked' : '' }}>
                            </div>
                        </td>

                        <td class="text-center">
                            <div class="d-flex justify-content-center gap-2">
                                <button type="button" class="btn btn-sm btn-primary add-slider-row">
                                    <i class="fa-solid fa-plus"></i>
                                </button>
                                <button type="button" class="btn btn-sm btn-danger remove-slider-row">
                                    <i class="fa-solid fa-minus"></i>
                                </button>
                            </div>
                        </td>
                    </tr>
                @endforeach
            </tbody>
        </table>
    </div>
</div>

@push('ad_styles')
<style>
    #heroSlidersTable th,
    #heroSlidersTable td {
        vertical-align: top;
    }

    #heroSlidersTable textarea {
        resize: vertical;
    }
</style>
@endpush

@push('ad_scripts')
<script>
    document.addEventListener('DOMContentLoaded', function () {
        const tableBody = document.querySelector('#heroSlidersTable tbody');

        if (!tableBody) {
            return;
        }

        const buildRow = index => {
            return `
                <tr class="hero-slider-row">
                    <td>
                        <input type="hidden" name="hero_sliders[${index}][id]" value="">
                        <input type="text" name="hero_sliders[${index}][icon]" class="form-control" placeholder="fa-solid fa-house">
                    </td>
                    <td>
                        <input type="text" name="hero_sliders[${index}][heading_en]" class="form-control">
                    </td>
                    <td>
                        <input type="text" name="hero_sliders[${index}][heading_ar]" dir="rtl" class="form-control">
                    </td>
                    <td>
                        <textarea name="hero_sliders[${index}][text_en]" rows="3" class="form-control"></textarea>
                    </td>
                    <td>
                        <textarea name="hero_sliders[${index}][text_ar]" rows="3" dir="rtl" class="form-control"></textarea>
                    </td>
                    <td>
                        <input type="text" name="hero_sliders[${index}][anchor_en]" class="form-control">
                    </td>
                    <td>
                        <input type="text" name="hero_sliders[${index}][anchor_ar]" dir="rtl" class="form-control">
                    </td>
                    <td>
                        <input type="file" name="hero_sliders[${index}][image]" class="form-control">
                    </td>
                    <td class="text-center">
                        <div class="form-check d-inline-flex justify-content-center">
                            <input type="hidden" name="hero_sliders[${index}][is_active]" value="0">
                            <input class="form-check-input" type="checkbox" name="hero_sliders[${index}][is_active]" value="1" checked>
                        </div>
                    </td>
                    <td class="text-center">
                        <div class="d-flex justify-content-center gap-2">
                            <button type="button" class="btn btn-sm btn-primary add-slider-row">
                                <i class="fa-solid fa-plus"></i>
                            </button>
                            <button type="button" class="btn btn-sm btn-danger remove-slider-row">
                                <i class="fa-solid fa-minus"></i>
                            </button>
                        </div>
                    </td>
                </tr>
            `;
        };

        const refreshIndexes = () => {
            const rows = tableBody.querySelectorAll('.hero-slider-row');

            rows.forEach((row, index) => {
                row.querySelectorAll('input, textarea, select').forEach(field => {
                    const name = field.getAttribute('name');

                    if (!name) {
                        return;
                    }

                    field.setAttribute('name', name.replace(/hero_sliders\[\d+\]/g, `hero_sliders[${index}]`));
                });
            });
        };

        tableBody.addEventListener('click', function (e) {
            const addButton = e.target.closest('.add-slider-row');
            const removeButton = e.target.closest('.remove-slider-row');

            if (addButton) {
                const newIndex = tableBody.querySelectorAll('.hero-slider-row').length;
                tableBody.insertAdjacentHTML('beforeend', buildRow(newIndex));
                refreshIndexes();
            }

            if (removeButton) {
                const rows = tableBody.querySelectorAll('.hero-slider-row');

                if (rows.length > 1) {
                    removeButton.closest('.hero-slider-row').remove();
                    refreshIndexes();
                }
            }
        });
    });
</script>
@endpush