@extends('layouts.admin')
@section('title', 'Manage Home Slider')
@section('header', 'Home Slider Management')

@section('content')
<div class="recent-activity">
    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px;">
        <h2 style="margin-bottom: 0;">Hero Sliders</h2>
        <button id="add-slider-btn" class="btn">Add New Image</button>
    </div>

    @if(session('success'))
        <div style="background: #dcfce7; color: #166534; padding: 12px; border-radius: 6px; margin-bottom: 24px;">
            {{ session('success') }}
        </div>
    @endif
    @if(session('error'))
        <div style="background: #fef2f2; color: #991b1b; padding: 12px; border-radius: 6px; margin-bottom: 24px;">
            {{ session('error') }}
        </div>
    @endif
    @if($errors->any())
        <div style="background: #fef2f2; color: #991b1b; padding: 12px; border-radius: 6px; margin-bottom: 24px;">
            <ul style="margin-left: 20px;">
                @foreach($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    <div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px;">
        @forelse($sliders as $slider)
            @php
                $imgSrc = Str::startsWith($slider->image_path, ['http://', 'https://', 'data:image/']) ? $slider->image_path : asset('storage/' . $slider->image_path);
            @endphp
            <div style="border: 1px solid var(--border); border-radius: 8px; overflow: hidden; position: relative; group;">
                <div style="height: 200px; background: #f3f4f6;">
                    <img src="{{ $imgSrc }}" style="width: 100%; height: 100%; object-fit: cover;" alt="Slider Image">
                </div>
                
                <!-- Action Buttons overlay -->
                <div style="position: absolute; top: 12px; right: 12px; display: flex; gap: 8px; background: rgba(255,255,255,0.9); padding: 4px; border-radius: 6px; box-shadow: 0 2px 4px rgba(0,0,0,0.1);">
                    <button onclick="openUpdateModal({{ $slider->id }}, '{{ $imgSrc }}', '{{ $slider->position ?? 'center' }}')" style="background: none; border: none; cursor: pointer; color: var(--navy); padding: 4px;" title="Edit Image">
                        <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" style="width: 20px; height: 20px;"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"></path></svg>
                    </button>
                    
                    <form action="{{ route('admin.sliders.destroy', $slider->id) }}" method="POST" onsubmit="return confirm('Are you sure you want to remove this image?');" style="margin: 0;">
                        @csrf
                        @method('DELETE')
                        <button type="submit" style="background: none; border: none; cursor: pointer; color: var(--crimson); padding: 4px;" title="Remove Image">
                            <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" style="width: 20px; height: 20px;"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path></svg>
                        </button>
                    </form>
                </div>

                <div style="padding: 12px 16px; background: white; font-size: 13px; color: var(--text-light); text-align: center;">
                    Order: {{ $slider->order }}
                </div>
            </div>
        @empty
            <div style="grid-column: 1 / -1; text-align: center; padding: 40px; color: var(--text-light); border: 1px dashed var(--border); border-radius: 8px;">
                No slider images added yet. Click "Add New Image" to get started!
            </div>
        @endforelse
    </div>
</div>

<!-- Add Slider Modal -->
<div id="add-slider-modal" style="display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 1000; align-items: center; justify-content: center;">
    <div style="background: white; padding: 32px; border-radius: 12px; width: 100%; max-width: 500px;">
        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px;">
            <h3 style="margin: 0; color: var(--navy);">Add New Slider Image</h3>
            <button class="close-add-modal" style="background: none; border: none; font-size: 24px; cursor: pointer; color: var(--text-light);">&times;</button>
        </div>
        <form action="{{ route('admin.sliders.store') }}" method="POST" enctype="multipart/form-data">
            @csrf
            
            <div style="margin-bottom: 16px;">
                <label style="display: block; margin-bottom: 8px; font-weight: 500; font-size: 14px;">Upload Image</label>
                <input type="file" name="image" accept="image/*" style="width: 100%; padding: 10px; border: 1px solid var(--border); border-radius: 6px; font-family: inherit;">
            </div>

            <div style="text-align: center; margin: 16px 0; color: var(--text-light); font-size: 14px; font-weight: 600;">OR</div>
            
            <div style="margin-bottom: 16px;">
                <label style="display: block; margin-bottom: 8px; font-weight: 500; font-size: 14px;">Provide Image URL or Base64</label>
                <textarea name="image_url" placeholder="https://example.com/image.jpg or data:image/..." style="width: 100%; padding: 10px; border: 1px solid var(--border); border-radius: 6px; font-family: inherit; resize: vertical;" rows="2"></textarea>
            </div>

            <div style="margin-bottom: 24px;">
                <label style="display: block; margin-bottom: 8px; font-weight: 500; font-size: 14px;">Image Alignment</label>
                <select name="position" style="width: 100%; padding: 10px; border: 1px solid var(--border); border-radius: 6px; font-family: inherit;">
                    <option value="center">Center (Default)</option>
                    <option value="top">Top</option>
                    <option value="bottom">Bottom</option>
                </select>
            </div>
            
            <div style="display: flex; justify-content: flex-end; gap: 12px;">
                <button type="button" class="close-add-modal" style="padding: 10px 16px; border-radius: 6px; border: 1px solid var(--border); background: white; cursor: pointer;">Cancel</button>
                <button type="submit" class="btn">Add Image</button>
            </div>
        </form>
    </div>
</div>

<!-- Update Slider Modal -->
<div id="update-slider-modal" style="display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 1000; align-items: center; justify-content: center;">
    <div style="background: white; padding: 32px; border-radius: 12px; width: 100%; max-width: 500px;">
        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px;">
            <h3 style="margin: 0; color: var(--navy);">Update Slider Image</h3>
            <button class="close-update-modal" style="background: none; border: none; font-size: 24px; cursor: pointer; color: var(--text-light);">&times;</button>
        </div>
        
        <div style="margin-bottom: 20px;">
            <label style="display: block; margin-bottom: 8px; font-weight: 500; font-size: 14px;">Current Image:</label>
            <img id="update-current-img" src="" style="width: 100%; height: 150px; object-fit: cover; border-radius: 6px; border: 1px solid var(--border);">
        </div>

        <form id="update-slider-form" method="POST" enctype="multipart/form-data">
            @csrf
            @method('PUT')
            
            <div style="margin-bottom: 16px;">
                <label style="display: block; margin-bottom: 8px; font-weight: 500; font-size: 14px;">Upload New Image</label>
                <input type="file" name="image" accept="image/*" style="width: 100%; padding: 10px; border: 1px solid var(--border); border-radius: 6px; font-family: inherit;">
            </div>

            <div style="text-align: center; margin: 16px 0; color: var(--text-light); font-size: 14px; font-weight: 600;">OR</div>
            
            <div style="margin-bottom: 16px;">
                <label style="display: block; margin-bottom: 8px; font-weight: 500; font-size: 14px;">Update Image URL or Base64</label>
                <textarea name="image_url" id="update-image-url" placeholder="https://example.com/image.jpg or data:image/..." style="width: 100%; padding: 10px; border: 1px solid var(--border); border-radius: 6px; font-family: inherit; resize: vertical;" rows="2"></textarea>
            </div>

            <div style="margin-bottom: 24px;">
                <label style="display: block; margin-bottom: 8px; font-weight: 500; font-size: 14px;">Image Alignment</label>
                <select name="position" id="update-image-position" style="width: 100%; padding: 10px; border: 1px solid var(--border); border-radius: 6px; font-family: inherit;">
                    <option value="center">Center (Default)</option>
                    <option value="top">Top</option>
                    <option value="bottom">Bottom</option>
                </select>
            </div>
            
            <div style="display: flex; justify-content: flex-end; gap: 12px;">
                <button type="button" class="close-update-modal" style="padding: 10px 16px; border-radius: 6px; border: 1px solid var(--border); background: white; cursor: pointer;">Cancel</button>
                <button type="submit" class="btn">Update Image</button>
            </div>
        </form>
    </div>
</div>
@endsection

@push('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function () {
        // Add Modal
        const addModal = document.getElementById('add-slider-modal');
        const addBtn = document.getElementById('add-slider-btn');
        document.querySelectorAll('.close-add-modal').forEach(btn => {
            btn.addEventListener('click', () => addModal.style.display = 'none');
        });
        addBtn.addEventListener('click', () => addModal.style.display = 'flex');

        // Update Modal close
        const updateModal = document.getElementById('update-slider-modal');
        document.querySelectorAll('.close-update-modal').forEach(btn => {
            btn.addEventListener('click', () => updateModal.style.display = 'none');
        });
    });

    function openUpdateModal(id, imgSrc, position) {
        const modal = document.getElementById('update-slider-modal');
        const form = document.getElementById('update-slider-form');
        const imgPreview = document.getElementById('update-current-img');
        const urlInput = document.getElementById('update-image-url');
        const posInput = document.getElementById('update-image-position');
        
        // Setup form action correctly
        form.action = `/admin/sliders/${id}`;
        imgPreview.src = imgSrc;
        posInput.value = position || 'center';
        
        // If current is URL or Base64, set it in input
        if (imgSrc.startsWith('http://') || imgSrc.startsWith('https://') || imgSrc.startsWith('data:image/')) {
            urlInput.value = imgSrc;
        } else {
            urlInput.value = '';
        }
        
        modal.style.display = 'flex';
    }
</script>
@endpush