@extends('layouts.admin')

@section('title', 'Homepage Sections Management')

@section('content')
<div class="container-fluid">
    <!-- Page Header -->
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h1 class="h3 mb-0 text-gray-800">Homepage Sections</h1>
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="{{ route('admin.dashboard', ['locale' => app()->getLocale()]) }}">Dashboard</a></li>
                    <li class="breadcrumb-item"><a href="#">Content</a></li>
                    <li class="breadcrumb-item active" aria-current="page">Homepage Sections</li>
                </ol>
            </nav>
        </div>
        <div>
            <a href="#" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addSectionModal">
                <i class="fas fa-plus"></i> Add New Section
            </a>
            <a href="{{ route('admin.manage.homepage-sections.preview', ['locale' => app()->getLocale()]) }}" class="btn btn-outline-info ms-2" target="_blank">
                <i class="fas fa-eye"></i> Preview Homepage
            </a>
            <button class="btn btn-outline-secondary ms-2" onclick="resetToDefaults()">
                <i class="fas fa-undo"></i> Reset to Defaults
            </button>
        </div>
    </div>

    <!-- Statistics Cards -->
    <div class="row mb-4">
        <div class="col-xl-4 col-md-6 mb-4">
            <div class="card border-left-primary shadow h-100 py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-primary text-uppercase mb-1">
                                Total Sections
                            </div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">{{ $totalSections }}</div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-layer-group fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xl-4 col-md-6 mb-4">
            <div class="card border-left-success shadow h-100 py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-success text-uppercase mb-1">
                                Active Sections
                            </div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">{{ $activeSections }}</div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-check-circle fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xl-4 col-md-6 mb-4">
            <div class="card border-left-info shadow h-100 py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-info text-uppercase mb-1">
                                Section Types
                            </div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">{{ $sectionTypes->count() }}</div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-shapes fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Sections Management -->
    <div class="card shadow mb-4">
        <div class="card-header py-3 d-flex justify-content-between align-items-center">
            <h6 class="m-0 font-weight-bold text-primary">Homepage Sections</h6>
            <div class="d-flex align-items-center">
                <span class="me-2">Drag to reorder</span>
                <i class="fas fa-arrows-alt text-muted"></i>
            </div>
        </div>
        <div class="card-body">
            <div id="sections-list" class="sortable-list">
                @foreach($sections as $section)
                <div class="section-item card mb-3" data-id="{{ $section->id }}">
                    <div class="card-body d-flex align-items-center">
                        <div class="drag-handle me-3">
                            <i class="fas fa-grip-vertical text-muted"></i>
                        </div>
                        <div class="section-icon me-3">
                            <i class="{{ $section->icon }} fa-2x text-primary"></i>
                        </div>
                        <div class="flex-grow-1">
                            <h6 class="mb-1">
                                {{ $section->title_en ?? 'Untitled Section' }}
                                @if($section->title_ar)
                                <small class="text-muted">({{ $section->title_ar }})</small>
                                @endif
                            </h6>
                            <small class="text-muted">{{ $section->type_display }}</small>
                        </div>
                        <div class="me-3">
                            <span class="badge bg-secondary">{{ $section->section_key }}</span>
                        </div>
                        <div class="me-3">
                            <div class="form-check form-switch">
                                <input class="form-check-input section-toggle" type="checkbox"
                                       data-id="{{ $section->id }}"
                                       {{ $section->is_active ? 'checked' : '' }}>
                                <label class="form-check-label"></label>
                            </div>
                        </div>
                        <div class="btn-group">
                            <button class="btn btn-sm btn-outline-primary" onclick="editSection({{ $section->id }})">
                                <i class="fas fa-edit"></i> Edit
                            </button>
                            <button class="btn btn-sm btn-outline-danger" onclick="deleteSection({{ $section->id }})">
                                <i class="fas fa-trash"></i> Delete
                            </button>
                        </div>
                    </div>
                </div>
                @endforeach
            </div>

            @if($sections->isEmpty())
            <div class="text-center py-5">
                <i class="fas fa-layer-group fa-3x text-muted mb-3"></i>
                <h5 class="text-muted">No sections found</h5>
                <p class="text-muted">Create your first homepage section to get started.</p>
                <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addSectionModal">
                    <i class="fas fa-plus"></i> Add Section
                </button>
            </div>
            @endif
        </div>
    </div>
</div>

<!-- Add/Edit Section Modal -->
<div class="modal fade" id="addSectionModal" tabindex="-1">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="sectionModalTitle">Add New Section</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form id="sectionForm" action="{{ route('admin.manage.homepage-sections.store', ['locale' => app()->getLocale()]) }}" method="POST">
                @csrf
                <input type="hidden" name="_method" value="POST" id="sectionMethod">
                <div class="modal-body">
                    <ul class="nav nav-tabs" id="sectionTabs" role="tablist">
                        <li class="nav-item" role="presentation">
                            <button class="nav-link active" id="general-tab" data-bs-toggle="tab" data-bs-target="#general" type="button" role="tab">General</button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link" id="content-tab" data-bs-toggle="tab" data-bs-target="#section-content" type="button" role="tab">Content</button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link" id="styling-tab" data-bs-toggle="tab" data-bs-target="#styling" type="button" role="tab">Styling</button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link" id="settings-tab" data-bs-toggle="tab" data-bs-target="#section-settings" type="button" role="tab">Settings</button>
                        </li>
                    </ul>
                    <div class="tab-content mt-3" id="sectionTabsContent">
                        <!-- General Tab -->
                        <div class="tab-pane fade show active" id="general" role="tabpanel">
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label class="form-label">Section Key *</label>
                                        <input type="text" name="section_key" class="form-control" required>
                                        <small class="form-text text-muted">Unique identifier for the section</small>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label class="form-label">Section Type *</label>
                                        <select name="section_type" class="form-select" required onchange="updateSectionFields(this.value)">
                                            <option value="">Select Type</option>
                                            <option value="hero">Hero Section</option>
                                            <option value="services">Services Section</option>
                                            <option value="portfolio">Portfolio Section</option>
                                            <option value="stats">Statistics Section</option>
                                            <option value="testimonials">Testimonials Section</option>
                                            <option value="news">News Section</option>
                                            <option value="products">Products Section</option>
                                            <option value="custom">Custom Section</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label class="form-label">Title (English)</label>
                                        <input type="text" name="title_en" class="form-control">
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label class="form-label">Title (Arabic)</label>
                                        <input type="text" name="title_ar" class="form-control">
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label class="form-label">Sort Order</label>
                                        <input type="number" name="sort_order" class="form-control" value="0">
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-check mt-4">
                                        <input class="form-check-input" type="checkbox" name="is_active" value="1" id="is_active" checked>
                                        <label class="form-check-label" for="is_active">
                                            Active
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Content Tab -->
                        <div class="tab-pane fade" id="section-content" role="tabpanel">
                            <div class="mb-3">
                                <label class="form-label">Content (English)</label>
                                <textarea name="content_en" class="form-control" id="content_en_editor" rows="8"></textarea>
                            </div>
                            <div class="mb-3">
                                <label class="form-label">Content (Arabic)</label>
                                <textarea name="content_ar" class="form-control" id="content_ar_editor" rows="8"></textarea>
                            </div>
                            <div class="mb-3">
                                <label class="form-label">Background Image</label>
                                <input type="file" name="background_image" class="form-control" accept="image/*">
                                <small class="form-text text-muted">Leave empty to keep current image</small>
                            </div>
                        </div>

                        <!-- Styling Tab -->
                        <div class="tab-pane fade" id="styling" role="tabpanel">
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label class="form-label">Background Color</label>
                                        <input type="color" name="background_color" class="form-control" value="#ffffff">
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label class="form-label">Text Color</label>
                                        <input type="color" name="text_color" class="form-control" value="#000000">
                                    </div>
                                </div>
                            </div>
                            <div id="type-specific-settings">
                                <!-- Dynamic content based on section type -->
                            </div>
                        </div>

                        <!-- Settings Tab -->
                        <div class="tab-pane fade" id="section-settings" role="tabpanel">
                            <div class="mb-3">
                                <label class="form-label">Additional Settings (JSON)</label>
                                <textarea name="settings" class="form-control" rows="6" placeholder='{"key": "value"}'></textarea>
                                <small class="form-text text-muted">Advanced settings in JSON format</small>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary">Save Section</button>
                </div>
            </form>
        </div>
    </div>
</div>

@endsection

@section('scripts')
<script>
// Make sections sortable
$(document).ready(function() {
    $('#sections-list').sortable({
        handle: '.drag-handle',
        placeholder: 'sortable-placeholder bg-light border rounded p-3 mb-3',
        update: function(event, ui) {
            updateSectionOrder();
        }
    });

    // Initialize TinyMCE
    if (typeof tinymce !== 'undefined') {
        // English editor (LTR)
        tinymce.init({
            selector: '#content_en_editor',
            height: 300,
            menubar: false,
            plugins: 'lists link image code codesample directionality paste',
            toolbar: 'bold italic underline | bullist numlist | link image codesample | code | ltr rtl',
            directionality: 'ltr',
            images_upload_handler: function (blobInfo, success, failure) {
                const formData = new FormData();
                formData.append('file', blobInfo.blob(), blobInfo.filename());
                formData.append('_token', '{{ csrf_token() }}');

                fetch('{{ route("admin.media.upload", ["locale" => app()->getLocale()]) }}', {
                    method: 'POST',
                    body: formData
                })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        success(data.url);
                    } else {
                        failure(data.message || 'Upload failed');
                    }
                })
                .catch(error => {
                    failure('Upload failed: ' + error.message);
                });
            },
            paste_data_images: true,
            automatic_uploads: true
        });

        // Arabic editor (RTL)
        tinymce.init({
            selector: '#content_ar_editor',
            height: 300,
            menubar: false,
            plugins: 'lists link image code codesample directionality paste',
            toolbar: 'bold italic underline | bullist numlist | link image codesample | code | ltr rtl',
            directionality: 'rtl',
            content_style: 'body { font-family: "Arial", sans-serif; font-size: 14px; direction: rtl; }',
            images_upload_handler: function (blobInfo, success, failure) {
                const formData = new FormData();
                formData.append('file', blobInfo.blob(), blobInfo.filename());
                formData.append('_token', '{{ csrf_token() }}');

                fetch('{{ route("admin.media.upload", ["locale" => app()->getLocale()]) }}', {
                    method: 'POST',
                    body: formData
                })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        success(data.url);
                    } else {
                        failure(data.message || 'Upload failed');
                    }
                })
                .catch(error => {
                    failure('Upload failed: ' + error.message);
                });
            },
            paste_data_images: true,
            automatic_uploads: true
        });
    }
});

// Update section order
function updateSectionOrder() {
    const order = [];
    $('#sections-list .section-item').each(function(index) {
        order.push($(this).data('id'));
    });

    $.post('{{ route("admin.manage.homepage-sections.update-order", ["locale" => app()->getLocale()]) }}', {
        _token: '{{ csrf_token() }}',
        order: order
    })
        if (response.success) {
            showToast('Section order updated successfully', 'success');
        }
    }).fail(function() {
        showToast('Failed to update section order', 'error');
    });
}

// Toggle section active status
$(document).on('change', '.section-toggle', function() {
    const sectionId = $(this).data('id');
    const isActive = $(this).is(':checked');

    $.post(`{{ route('admin.manage.homepage-sections.toggle-active', ['id' => ':id', 'locale' => app()->getLocale()]) }}`.replace(':id', sectionId), {
        _token: '{{ csrf_token() }}'
    })
        if (response.success) {
            showToast(`Section ${isActive ? 'activated' : 'deactivated'} successfully`, 'success');
        }
    }).fail(function() {
        showToast('Failed to update section status', 'error');
        $(this).prop('checked', !isActive); // Revert on failure
    });
});

// Edit section
function editSection(id) {
    // Load section data and populate modal
    $.get(`{{ route('admin.manage.homepage-sections.edit', ['homepage_section' => ':id', 'locale' => app()->getLocale()]) }}`.replace(':id', id), function(data) {
        // Populate form with section data
        $('#sectionForm input[name="section_key"]').val(data.section_key);
        $('#sectionForm select[name="section_type"]').val(data.section_type);
        $('#sectionForm input[name="title_en"]').val(data.title_en);
        $('#sectionForm input[name="title_ar"]').val(data.title_ar);
        $('#sectionForm input[name="sort_order"]').val(data.sort_order);
        $('#sectionForm input[name="is_active"]').prop('checked', data.is_active);
        $('#sectionForm textarea[name="content_en"]').val(data.content_en);
        $('#sectionForm textarea[name="content_ar"]').val(data.content_ar);
        $('#sectionForm input[name="background_color"]').val(data.background_color || '#ffffff');
        $('#sectionForm input[name="text_color"]').val(data.text_color || '#000000');
        $('#sectionForm textarea[name="settings"]').val(JSON.stringify(data.settings, null, 2));

        $('#sectionMethod').val('PUT');
        $('#sectionForm').attr('action', `{{ route('admin.manage.homepage-sections.update', ['homepage_section' => ':id', 'locale' => app()->getLocale()]) }}`.replace(':id', id));
        $('#sectionModalTitle').text('Edit Section');
        $('#addSectionModal').modal('show');

        updateSectionFields(data.section_type);
    });
}

// Delete section
function deleteSection(id) {
    if (confirm('Are you sure you want to delete this section?')) {
        const form = $('<form>', {
            'method': 'POST',
            'action': `{{ route('admin.manage.homepage-sections.destroy', ['homepage_section' => ':id', 'locale' => app()->getLocale()]) }}`.replace(':id', id)
        });

        form.append($('<input>', {
            'name': '_token',
            'value': '{{ csrf_token() }}',
            'type': 'hidden'
        }));

        form.append($('<input>', {
            'name': '_method',
            'value': 'DELETE',
            'type': 'hidden'
        }));

        form.appendTo('body').submit();
    }
}

// Reset to defaults
function resetToDefaults() {
    if (confirm('Are you sure you want to reset all sections to defaults? This will delete all custom sections.')) {
        // Implement reset logic
        showToast('Reset functionality not implemented yet', 'info');
    }
}

// Update section fields based on type
function updateSectionFields(type) {
    const settingsContainer = $('#type-specific-settings');
    settingsContainer.empty();

    const typeSettings = {
        hero: `
            <h6>Hero Section Settings</h6>
            <div class="row">
                <div class="col-md-6">
                    <div class="mb-3">
                        <label class="form-label">Button Primary Text</label>
                        <input type="text" name="settings[button_primary_text]" class="form-control" value="Get Started">
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="mb-3">
                        <label class="form-label">Button Secondary Text</label>
                        <input type="text" name="settings[button_secondary_text]" class="form-control" value="Learn More">
                    </div>
                </div>
            </div>
        `,
        services: `
            <h6>Services Section Settings</h6>
            <div class="row">
                <div class="col-md-4">
                    <div class="mb-3">
                        <label class="form-label">Limit</label>
                        <input type="number" name="settings[limit]" class="form-control" value="6">
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="mb-3">
                        <label class="form-label">Layout</label>
                        <select name="settings[layout]" class="form-select">
                            <option value="grid">Grid</option>
                            <option value="carousel">Carousel</option>
                            <option value="list">List</option>
                        </select>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="form-check mt-4">
                        <input class="form-check-input" type="checkbox" name="settings[show_icons]" value="1" checked>
                        <label class="form-check-label">Show Icons</label>
                    </div>
                </div>
            </div>
        `,
        // Add more type-specific settings as needed
    };

    if (typeSettings[type]) {
        settingsContainer.html(typeSettings[type]);
    }
}

// Show toast notification
function showToast(message, type = 'info') {
    const toastClass = type === 'success' ? 'bg-success' : type === 'error' ? 'bg-danger' : 'bg-info';
    const toast = $(`<div class="toast align-items-center text-white ${toastClass} border-0" role="alert">
        <div class="d-flex">
            <div class="toast-body">${message}</div>
            <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"></button>
        </div>
    </div>`);

    $('.toast-container').append(toast);
    const bsToast = new bootstrap.Toast(toast[0]);
    bsToast.show();
}

// Reset form when modal is closed
$('#addSectionModal').on('hidden.bs.modal', function() {
    $('#sectionForm')[0].reset();
    $('#sectionMethod').val('POST');
    $('#sectionForm').attr('action', '{{ route("admin.manage.homepage-sections.store", ["locale" => app()->getLocale()]) }}');
    $('#sectionModalTitle').text('Add New Section');
    $('#type-specific-settings').empty();
});
</script>
@endsection