{{-- resources/views/admin/sections/modal.blade.php --}}

<!-- Section Modal -->
<div class="modal fade" id="sectionModal" tabindex="-1" role="dialog" aria-labelledby="sectionModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-xl" role="document">
        <div class="modal-content">
            <div class="modal-header bg-primary">
                <h5 class="modal-title text-white" id="modalTitle">
                    <i class="fas fa-puzzle-piece"></i> Add New Section
                </h5>
                <button type="button" class="close text-white" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form id="sectionForm" enctype="multipart/form-data" method="POST" action="{{ route('sections.store') }}">
                @csrf
                <input type="hidden" name="_method" id="formMethod" value="POST">
                <input type="hidden" id="sectionId" name="section_id">

                <div class="modal-body">
                    <div class="row">
                        <!-- Left Column -->
                        <div class="col-md-6">
                            <div class="card">
                                <div class="card-header bg-light">
                                    <h6 class="mb-0">
                                        <i class="fas fa-info-circle text-primary"></i> Basic Information
                                    </h6>
                                </div>
                                <div class="card-body">
                                    <!-- File Name - Select Dropdown -->
                                    <div class="form-group">
                                        <label for="fileName">
                                            File Name <span class="text-danger">*</span>
                                        </label>
                                        <select class="form-control" id="fileName" name="file_name" required>
                                            <option value="">-- Select Blade File --</option>
                                            @if(isset($fileNames) && $fileNames->count() > 0)
                                                @foreach($fileNames as $file)
                                                    <option value="{{ $file }}">{{ $file }}.blade.php</option>
                                                @endforeach
                                            @endif
                                        </select>
                                        <small class="form-text text-muted">
                                            <i class="fas fa-info-circle"></i> Select from available blade files
                                        </small>
                                    </div>

                                    <!-- Display Name -->
                                    <div class="form-group">
                                        <label for="displayName">
                                            Display Name <span class="text-danger">*</span>
                                        </label>
                                        <input type="text"
                                               class="form-control"
                                               id="displayName"
                                               name="display_name"
                                               placeholder="e.g., Hero Slider Section"
                                               required>
                                        <small class="form-text text-muted">
                                            User-friendly name for display
                                        </small>
                                    </div>

                                    <!-- Section Image -->
                                    <div class="form-group">
                                        <label for="sectionImage">
                                            Section Image/Demo
                                        </label>
                                        <div class="custom-file">
                                            <input type="file"
                                                   class="custom-file-input"
                                                   id="sectionImage"
                                                   name="section_demo"
                                                   accept="image/*">
                                            <label class="custom-file-label" for="sectionImage">Choose file</label>
                                        </div>
                                        <small class="form-text text-muted">
                                            Recommended: 600x400px (JPG, PNG, GIF, WEBP - Max 2MB)
                                        </small>

                                        <!-- Image Preview -->
                                        <div class="mt-3" id="imagePreviewContainer" style="display:none;">
                                            <div class="text-center">
                                                <img id="imagePreview"
                                                     src=""
                                                     alt="Preview"
                                                     style="max-width: 100%; max-height: 200px; border: 2px dashed #dee2e6; border-radius: 4px; padding: 5px;">
                                                <button type="button"
                                                        class="btn btn-sm btn-danger mt-2"
                                                        id="btnRemoveImagePreview">
                                                    <i class="fas fa-times"></i> Remove
                                                </button>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- Note/Description -->
                                    <div class="form-group">
                                        <label for="note">
                                            Short Details / Note
                                        </label>
                                        <textarea class="form-control"
                                                  id="note"
                                                  name="note"
                                                  rows="3"
                                                  placeholder="Add description about this section..."></textarea>
                                    </div>

                                    <!-- Status -->
                                    <div class="form-group">
                                        <div class="custom-control custom-switch custom-switch-off-danger custom-switch-on-success">
                                            <input type="checkbox"
                                                   class="custom-control-input"
                                                   id="status"
                                                   name="status"
                                                   checked>
                                            <label class="custom-control-label" for="status">
                                                <strong>Active Status</strong>
                                            </label>
                                        </div>
                                        <small class="form-text text-muted">
                                            Toggle to activate/deactivate this section
                                        </small>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Right Column -->
                        <div class="col-md-6">
                            <div class="card">
                                <div class="card-header bg-light">
                                    <h6 class="mb-0">
                                        <i class="fas fa-cog text-info"></i> Section Configuration
                                    </h6>
                                </div>
                                <div class="card-body">
                                    <!-- Category Configuration -->
                                    <div class="card mb-3 border-left border-primary" style="border-left-width: 3px !important;">
                                        <div class="card-body py-2">
                                            <div class="custom-control custom-switch mb-2">
                                                <input type="checkbox"
                                                       class="custom-control-input"
                                                       id="hasCategory"
                                                       name="category">
                                                <label class="custom-control-label" for="hasCategory">
                                                    <i class="fas fa-folder text-primary"></i>
                                                    <strong>Enable Categories</strong>
                                                </label>
                                            </div>

                                            <div id="categoryLimitGroup" style="display:none;">
                                                <label class="mb-1" style="font-size: 0.85rem;">Total Categories</label>
                                                <input type="number"
                                                       class="form-control form-control-sm"
                                                       id="totalCategory"
                                                       name="total_category"
                                                       min="0"
                                                       value="0"
                                                       placeholder="0 = Unlimited">
                                                <small class="form-text text-muted">How many categories allowed?</small>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- Widget Configuration -->
                                    <div class="card mb-3 border-left border-info" style="border-left-width: 3px !important;">
                                        <div class="card-body py-2">
                                            <div class="custom-control custom-switch mb-2">
                                                <input type="checkbox"
                                                       class="custom-control-input"
                                                       id="hasWidgets"
                                                       name="widgets">
                                                <label class="custom-control-label" for="hasWidgets">
                                                    <i class="fas fa-puzzle-piece text-info"></i>
                                                    <strong>Enable Widgets</strong>
                                                </label>
                                            </div>

                                            <div id="widgetLimitGroup" style="display:none;">
                                                <label class="mb-1" style="font-size: 0.85rem;">Total Widgets</label>
                                                <input type="number"
                                                       class="form-control form-control-sm"
                                                       id="totalWidgets"
                                                       name="total_widgets"
                                                       min="0"
                                                       value="0"
                                                       placeholder="0 = Unlimited">
                                                <small class="form-text text-muted">How many widgets allowed?</small>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- Ads Configuration -->
                                    <div class="card mb-3 border-left border-warning" style="border-left-width: 3px !important;">
                                        <div class="card-body py-2">
                                            <div class="custom-control custom-switch mb-2">
                                                <input type="checkbox"
                                                       class="custom-control-input"
                                                       id="hasAds"
                                                       name="ads">
                                                <label class="custom-control-label" for="hasAds">
                                                    <i class="fas fa-ad text-warning"></i>
                                                    <strong>Enable Ads</strong>
                                                </label>
                                            </div>

                                            <div id="adsLimitGroup" style="display:none;">
                                                <label class="mb-1" style="font-size: 0.85rem;">Total Ads</label>
                                                <input type="number"
                                                       class="form-control form-control-sm"
                                                       id="totalAds"
                                                       name="total_ads"
                                                       min="0"
                                                       value="0"
                                                       placeholder="0 = Unlimited">
                                                <small class="form-text text-muted">How many ads slots allowed?</small>
                                            </div>
                                        </div>
                                    </div>

                                    <hr>

                                    <!-- Section Types -->
                                    <div class="form-group">
                                        <label class="d-block mb-3">
                                            <strong><i class="fas fa-tags"></i> Section Type</strong>
                                        </label>

                                        <div class="row">
                                            <div class="col-md-6">
                                                <div class="custom-control custom-checkbox mb-2">
                                                    <input type="checkbox"
                                                           class="custom-control-input"
                                                           id="isLeadNews"
                                                           name="is_lead_news">
                                                    <label class="custom-control-label" for="isLeadNews">
                                                        <i class="fas fa-star text-warning"></i> Lead News
                                                    </label>
                                                </div>

                                                <div class="custom-control custom-checkbox mb-2">
                                                    <input type="checkbox"
                                                           class="custom-control-input"
                                                           id="isMainNews"
                                                           name="is_main_news">
                                                    <label class="custom-control-label" for="isMainNews">
                                                        <i class="fas fa-newspaper text-info"></i> Main News
                                                    </label>
                                                </div>
                                            </div>

                                            <div class="col-md-6">
                                                <div class="custom-control custom-checkbox mb-2">
                                                    <input type="checkbox"
                                                           class="custom-control-input"
                                                           id="isHeader"
                                                           name="is_header">
                                                    <label class="custom-control-label" for="isHeader">
                                                        <i class="fas fa-heading text-primary"></i> Header
                                                    </label>
                                                </div>

                                                <div class="custom-control custom-checkbox mb-2">
                                                    <input type="checkbox"
                                                           class="custom-control-input"
                                                           id="isFooter"
                                                           name="is_footer">
                                                    <label class="custom-control-label" for="isFooter">
                                                        <i class="fas fa-shoe-prints text-secondary"></i> Footer
                                                    </label>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- Additional Info -->
                                    <div class="alert alert-info mb-0" role="alert">
                                        <i class="fas fa-info-circle"></i>
                                        <strong>Note:</strong> Configure section settings based on your theme requirements.
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="modal-footer bg-light">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">
                        <i class="fas fa-times"></i> Cancel
                    </button>
                    <button type="submit" class="btn btn-primary" id="submitBtn">
                        <i class="fas fa-save"></i> Save Section
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

@push('script')
<script>
// Define all functions in global scope
(function() {
    'use strict';

    // Initialize all event listeners
    $(document).ready(function() {
        initializeSectionModal();
    });

    function initializeSectionModal() {
        // Category toggle with smooth animation
        $('#hasCategory').on('change', function() {
            toggleCategoryLimit();
        });

        // Widget toggle with smooth animation
        $('#hasWidgets').on('change', function() {
            toggleWidgetLimit();
        });

        // Ads toggle with smooth animation
        $('#hasAds').on('change', function() {
            toggleAdsLimit();
        });

        // Image preview
        $('#sectionImage').on('change', function() {
            previewImage(this);
        });

        // Remove image preview
        $('#btnRemoveImagePreview').on('click', function() {
            removeImagePreview();
        });

        // Form submission
        $('#sectionForm').on('submit', function(e) {
            handleFormSubmit(e);
        });

        // Custom file input label update
        $('.custom-file-input').on('change', function() {
            const fileName = $(this).val().split('\\').pop();
            $(this).siblings('.custom-file-label').addClass('selected').html(fileName);
        });
    }

    // Toggle category limit input with collapse effect
    function toggleCategoryLimit() {
        if ($('#hasCategory').is(':checked')) {
            $('#categoryLimitGroup').slideDown(300);
        } else {
            $('#categoryLimitGroup').slideUp(300);
            $('#totalCategory').val(0);
        }
    }

    // Toggle widget limit input with collapse effect
    function toggleWidgetLimit() {
        if ($('#hasWidgets').is(':checked')) {
            $('#widgetLimitGroup').slideDown(300);
        } else {
            $('#widgetLimitGroup').slideUp(300);
            $('#totalWidgets').val(0);
        }
    }

    // Toggle ads limit input with collapse effect
    function toggleAdsLimit() {
        if ($('#hasAds').is(':checked')) {
            $('#adsLimitGroup').slideDown(300);
        } else {
            $('#adsLimitGroup').slideUp(300);
            $('#totalAds').val(0);
        }
    }

    // Preview uploaded image
    function previewImage(input) {
        if (input.files && input.files[0]) {
            const reader = new FileReader();
            reader.onload = function(e) {
                $('#imagePreview').attr('src', e.target.result);
                $('#imagePreviewContainer').fadeIn(300);
            };
            reader.readAsDataURL(input.files[0]);
        }
    }

    // Remove image preview
    function removeImagePreview() {
        $('#sectionImage').val('');
        $('#imagePreview').attr('src', '');
        $('#imagePreviewContainer').fadeOut(300);
        $('.custom-file-label').html('Choose file');
    }

    // Reset form - Global function
    window.resetForm = function() {
        $('#sectionForm')[0].reset();
        $('#sectionId').val('');
        $('#formMethod').val('POST');
        $('#modalTitle').html('<i class="fas fa-puzzle-piece"></i> Add New Section');
        $('#fileName').val('').trigger('change');
        $('#imagePreviewContainer').hide();
        $('#categoryLimitGroup').hide();
        $('#widgetLimitGroup').hide();
        $('#adsLimitGroup').hide();
        $('.custom-file-label').html('Choose file');
        $('#sectionForm').attr('action', '{{ route("sections.store") }}');
        $('#submitBtn').html('<i class="fas fa-save"></i> Save Section');
    };

    // Edit section - Global function
    window.editSection = function(id) {
        const section = sectionsData.find(s => s.id === id);
        if (!section) return;

        const settings = typeof section.settings === 'string'
            ? JSON.parse(section.settings)
            : section.settings;

        $('#sectionId').val(section.id);
        $('#formMethod').val('PUT');
        $('#fileName').val(section.file_name).trigger('change');
        $('#displayName').val(section.display_name);
        $('#note').val(section.short_details || '');
        $('#status').prop('checked', section.status == 1);

        if (settings) {
            // Category settings
            $('#hasCategory').prop('checked', settings.category);
            $('#totalCategory').val(settings.total_category || 0);
            if (settings.category) {
                $('#categoryLimitGroup').show();
            }

            // Widget settings
            $('#hasWidgets').prop('checked', settings.widgets);
            $('#totalWidgets').val(settings.total_widgets || 0);
            if (settings.widgets) {
                $('#widgetLimitGroup').show();
            }

            // Ads settings
            $('#hasAds').prop('checked', settings.ads);
            $('#totalAds').val(settings.total_ads || 0);
            if (settings.ads) {
                $('#adsLimitGroup').show();
            }

            // Section types
            $('#isLeadNews').prop('checked', settings.is_lead_news);
            $('#isMainNews').prop('checked', settings.is_main_news);
            $('#isHeader').prop('checked', settings.is_header);
            $('#isFooter').prop('checked', settings.is_footer);
        }

        if (section.image) {
            $('#imagePreview').attr('src', '{{ asset("") }}' + section.image);
            $('#imagePreviewContainer').show();
        }

        $('#modalTitle').html('<i class="fas fa-edit"></i> Edit Section');
        $('#sectionForm').attr('action', '{{ route("sections.update", ":id") }}'.replace(':id', id));
        $('#submitBtn').html('<i class="fas fa-save"></i> Update Section');
        $('#sectionModal').modal('show');
    };

    // Form submission
    function handleFormSubmit(e) {
        e.preventDefault();

        const submitBtn = $('#submitBtn');
        const originalText = submitBtn.html();

        submitBtn.prop('disabled', true).html('<i class="fas fa-spinner fa-spin"></i> Saving...');

        const formData = new FormData($('#sectionForm')[0]);
        const url = $('#sectionForm').attr('action');

        $.ajax({
            url: url,
            type: 'POST',
            data: formData,
            processData: false,
            contentType: false,
            success: function(response) {
                $('#sectionModal').modal('hide');

                if (typeof Swal !== 'undefined') {
                    Swal.fire({
                        icon: 'success',
                        title: 'Success!',
                        text: response.message || 'Section saved successfully!',
                        showConfirmButton: false,
                        timer: 1500
                    });
                } else {
                    alert('Section saved successfully!');
                }

                setTimeout(function() {
                    location.reload();
                }, 1500);
            },
            error: function(xhr) {
                submitBtn.prop('disabled', false).html(originalText);

                let errorMessage = 'Error saving section!';
                if (xhr.responseJSON && xhr.responseJSON.message) {
                    errorMessage = xhr.responseJSON.message;
                } else if (xhr.responseJSON && xhr.responseJSON.errors) {
                    const errors = Object.values(xhr.responseJSON.errors).flat();
                    errorMessage = errors.join('\n');
                }

                if (typeof Swal !== 'undefined') {
                    Swal.fire({
                        icon: 'error',
                        title: 'Error!',
                        text: errorMessage
                    });
                } else {
                    alert(errorMessage);
                }
            }
        });
    }

})();
</script>
@endpush