{{-- resources/views/admin/section/layouts/section.blade.php --}}

@extends('admin.layouts.master')

@section('title', 'Section Management')

@push('styles')
<style>
    .badge-settings {
        font-size: 0.75rem;
        padding: 0.25rem 0.5rem;
        margin: 2px;
        font-weight: normal;
    }

    .img-thumbnail {
        background-color: #f8f9fa;
        border-radius: 4px;
    }

    .no-image-placeholder {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 60px;
        height: 40px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        border-radius: 4px;
        font-size: 0.7rem;
        font-weight: bold;
    }

    .border-left {
        border-left-width: 3px !important;
    }

    .modal-body {
        max-height: 70vh;
        overflow-y: auto;
    }
</style>
@endpush

@section('content')
<!-- Content Header -->
<section class="content-header">
    <div class="container-fluid">
        <div class="row mb-2">
            <div class="col-sm-6">
                <h1><i class="fas fa-puzzle-piece"></i> Section Management</h1>
            </div>
            <div class="col-sm-6">
                <ol class="breadcrumb float-sm-right">
                    <li class="breadcrumb-item"><a href="{{ route('dashboard.home') }}">Home</a></li>
                    <li class="breadcrumb-item active">Sections</li>
                </ol>
            </div>
        </div>
    </div>
</section>

<!-- Main content -->
<section class="content">
    <div class="container-fluid">
        <!-- Success/Error Messages -->
        @if(session('success'))
        <div class="alert alert-success alert-dismissible fade show" role="alert">
            <i class="fas fa-check-circle"></i> {{ session('success') }}
            <button type="button" class="close" data-dismiss="alert"><span>&times;</span></button>
        </div>
        @endif

        @if(session('error'))
        <div class="alert alert-danger alert-dismissible fade show" role="alert">
            <i class="fas fa-exclamation-circle"></i> {{ session('error') }}
            <button type="button" class="close" data-dismiss="alert"><span>&times;</span></button>
        </div>
        @endif

        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-header">
                        <div class="d-flex justify-content-between align-items-center">
                            <h3 class="card-title">
                                <i class="fas fa-list"></i> All Sections
                            </h3>
                            <button type="button" class="btn btn-primary btn-sm" id="btnAddSection">
                                <i class="fas fa-plus"></i> Add New Section
                            </button>
                        </div>
                    </div>
                    <div class="card-body">
                        <!-- Filter -->
                        <div class="row mb-3">
                            <div class="col-md-3">
                                <select class="form-control form-control-sm" id="filterStatus">
                                    <option value="">All Status</option>
                                    <option value="1">Active</option>
                                    <option value="0">Inactive</option>
                                </select>
                            </div>
                        </div>

                        <!-- Table -->
                        <div class="table-responsive">
                            <table class="table table-hover" id="sectionsTable">
                                <thead>
                                    <tr>
                                        <th width="60">#</th>
                                        <th width="80">Image</th>
                                        <th>Display Name</th>
                                        <th>File Name</th>
                                        <th>Configuration</th>
                                        <th width="100">Status</th>
                                        <th width="120">Action</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @forelse($sections as $index => $section)
                                    <tr>
                                        <td>{{ $index + 1 }}</td>
                                        <td>
                                            @if($section->image)
                                                <img src="{{ asset($section->image) }}" width="60" height="40" alt="Section" class="img-thumbnail" onerror="this.onerror=null; this.style.display='none'; this.nextElementSibling.style.display='inline-flex';">
                                                <span class="no-image-placeholder" style="display:none;"><i class="fas fa-image"></i></span>
                                            @else
                                                <span class="no-image-placeholder"><i class="fas fa-image"></i></span>
                                            @endif
                                        </td>
                                        <td>
                                            <strong>{{ $section->display_name }}</strong>
                                            @if($section->short_details)
                                            <br><small class="text-muted">{{ Str::limit($section->short_details, 50) }}</small>
                                            @endif
                                        </td>
                                        <td><code>{{ $section->file_name }}</code></td>
                                        <td>
                                            @php
                                                $settings = json_decode($section->settings, true) ?? [];
                                            @endphp

                                            @if(!empty($settings['category']))
                                            <span class="badge badge-info badge-settings"><i class="fas fa-folder"></i> {{ $settings['total_category'] ?? '∞' }} Categories</span>
                                            @endif

                                            @if(!empty($settings['widgets']))
                                            <span class="badge badge-primary badge-settings"><i class="fas fa-puzzle-piece"></i> {{ $settings['total_widgets'] ?? '∞' }} Widgets</span>
                                            @endif

                                            @if(!empty($settings['ads']))
                                            <span class="badge badge-warning badge-settings"><i class="fas fa-ad"></i> {{ $settings['total_ads'] ?? '∞' }} Ads</span>
                                            @endif

                                            @if(!empty($settings['is_lead_news']))
                                            <span class="badge badge-warning badge-settings">Lead</span>
                                            @endif

                                            @if(!empty($settings['is_main_news']))
                                            <span class="badge badge-info badge-settings">Main</span>
                                            @endif

                                            @if(!empty($settings['is_ads_section']))
                                            <span class="badge badge-info badge-settings">Ads Section</span>
                                            @endif
                                        </td>
                                        <td>
                                            @if($section->status)
                                                <span class="badge badge-success">Active</span>
                                            @else
                                                <span class="badge badge-secondary">Inactive</span>
                                            @endif
                                        </td>
                                        <td>
                                            <button class="btn btn-info btn-sm btn-edit-section" data-id="{{ $section->id }}" title="Edit">
                                                <i class="fas fa-edit"></i>
                                            </button>
                                            <form action="{{ route('sections.destroy', $section->id) }}" method="POST" class="d-inline delete-form">
                                                @csrf
                                                @method('DELETE')
                                                <button type="submit" class="btn btn-danger btn-sm" title="Delete">
                                                    <i class="fas fa-trash"></i>
                                                </button>
                                            </form>
                                        </td>
                                    </tr>
                                    @empty
                                    <tr>
                                        <td colspan="7" class="text-center py-5">
                                            <i class="fas fa-inbox fa-3x text-muted mb-3 d-block"></i>
                                            <h5 class="text-muted">No Sections Found</h5>
                                            <p class="text-muted">Start by adding your first section</p>
                                        </td>
                                    </tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Section Modal -->
<div class="modal fade" id="sectionModal" tabindex="-1" role="dialog">
    <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">
                    <span>&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 -->
                                    <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>
                                    </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 (Max 2MB)</small>

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

                                    <!-- Note -->
                                    <div class="form-group">
                                        <label for="note">Short Details / Note</label>
                                        <textarea class="form-control" id="note" name="note" rows="3" placeholder="Add description..."></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>
                                    </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">
                                        <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="categoryCollapse" style="display:none;">
                                                <div class="mt-2">
                                                    <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>
                                    </div>

                                    <!-- Widget Configuration -->
                                    <div class="card mb-3 border-left border-info">
                                        <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="widgetCollapse" style="display:none;">
                                                <div class="mt-2">
                                                    <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>
                                    </div>

                                    <!-- Ads Configuration -->
                                    <div class="card mb-3 border-left border-warning">
                                        <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="adsCollapse" style="display:none;">
                                                <div class="mt-2">
                                                    <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 d-block mb-3">How many ads slots allowed?</small>

                                                    <label class="mb-2" style="font-size: 0.85rem;">Ads Position</label>

                                                    <div class="form-group mb-0">
                                                        <div class="custom-control custom-checkbox mb-1">
                                                            <input type="checkbox" class="custom-control-input" name="ads_position[]" id="adsTop" value="top">
                                                            <label class="custom-control-label" for="adsTop">
                                                                <i class="fas fa-arrow-up"></i> Top
                                                            </label>
                                                        </div>

                                                        <div class="custom-control custom-checkbox mb-1">
                                                            <input type="checkbox" class="custom-control-input" name="ads_position[]" id="adsBottom" value="bottom">
                                                            <label class="custom-control-label" for="adsBottom">
                                                                <i class="fas fa-arrow-down"></i> Bottom
                                                            </label>
                                                        </div>

                                                        <div class="custom-control custom-checkbox mb-1">
                                                            <input type="checkbox" class="custom-control-input" name="ads_position[]" id="adsSide" value="side">
                                                            <label class="custom-control-label" for="adsSide">
                                                                <i class="fas fa-arrow-right"></i> Side
                                                            </label>
                                                        </div>
                                                    </div>
                                                    <small class="form-text text-muted d-block mt-2">Where should ads display?</small>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <hr>

                                    <!-- Section Types -->
                                    <div class="form-group mb-0">
                                        <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="isAdsSection" name="is_ads_section">
                                                    <label class="custom-control-label" for="isAdsSection">
                                                        <i class="fas fa-ad text-warning"></i> Ads Section
                                                    </label>
                                                </div>
                                                <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>
                                </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>


<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

<!-- JavaScript - Placed at the end of content section -->
<script type="text/javascript">
(function() {
    'use strict';

    // Store sections data
    var sectionsData = @json($sections);

    console.log('Section Management Script Loaded');
    console.log('Sections count:', sectionsData.length);

    // Wait for DOM to be ready
    $(document).ready(function() {
        console.log('DOM Ready - Initializing...');

        // ========== ADD SECTION ==========
        $('#btnAddSection').on('click', function() {
            console.log('Add button clicked');
            resetForm();
            $('#sectionModal').modal('show');
        });

        // ========== EDIT SECTION ==========
        $(document).on('click', '.btn-edit-section', function(e) {
            e.preventDefault();
            var id = $(this).data('id');
            console.log('==================');
            console.log('EDIT CLICKED - ID:', id);
            console.log('==================');
            editSection(id);
        });

        // ========== DELETE SECTION ==========
        $(document).on('submit', '.delete-form', function(e) {
            e.preventDefault();
            var form = this;
            Swal.fire({
                title: 'Are you sure?',
                text: "You won't be able to revert this!",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#d33',
                cancelButtonColor: '#3085d6',
                confirmButtonText: 'Yes, delete it!'
            }).then((result) => {
                if (result.isConfirmed) {
                    form.submit();
                }
            });
        });

        // ========== FILTER ==========
        $('#filterStatus').on('change', function() {
            var status = $(this).val();
            $('#sectionsTable tbody tr').each(function() {
                if (status === '') {
                    $(this).show();
                } else {
                    var isActive = $(this).find('td:eq(5) .badge-success').length > 0;
                    if ((status == '1' && isActive) || (status == '0' && !isActive)) {
                        $(this).show();
                    } else {
                        $(this).hide();
                    }
                }
            });
        });

        // ========== COLLAPSE TOGGLES ==========
        $('#hasCategory').on('change', function() {
            if ($(this).is(':checked')) {
                $('#categoryCollapse').slideDown(200);
            } else {
                $('#categoryCollapse').slideUp(200);
                $('#totalCategory').val(0);
            }
        });

        $('#hasWidgets').on('change', function() {
            if ($(this).is(':checked')) {
                $('#widgetCollapse').slideDown(200);
            } else {
                $('#widgetCollapse').slideUp(200);
                $('#totalWidgets').val(0);
            }
        });

        $('#hasAds').on('change', function() {
            if ($(this).is(':checked')) {
                $('#adsCollapse').slideDown(200);
            } else {
                $('#adsCollapse').slideUp(200);
                $('#totalAds').val(0);
                $('input[name="ads_position[]"]').prop('checked', false);
            }
        });

        // ========== IMAGE PREVIEW ==========
        $('#sectionImage').on('change', function() {
            if (this.files && this.files[0]) {
                var reader = new FileReader();
                reader.onload = function(e) {
                    $('#imagePreview').attr('src', e.target.result);
                    $('#imagePreviewBox').fadeIn(200);
                };
                reader.readAsDataURL(this.files[0]);
                var fileName = $(this).val().split('\\').pop();
                $(this).siblings('.custom-file-label').html(fileName);
            }
        });

        $('#btnRemoveImage').on('click', function() {
            $('#sectionImage').val('');
            $('#imagePreview').attr('src', '');
            $('#imagePreviewBox').fadeOut(200);
            $('.custom-file-label').html('Choose file');
        });

        // ========== FORM SUBMISSION ==========
        $('#sectionForm').on('submit', function(e) {
            e.preventDefault();
            var submitBtn = $('#submitBtn');
            var originalText = submitBtn.html();
            submitBtn.prop('disabled', true).html('<i class="fas fa-spinner fa-spin"></i> Saving...');
            var formData = new FormData(this);
            var url = $(this).attr('action');

            $.ajax({
                url: url,
                type: 'POST',
                data: formData,
                processData: false,
                contentType: false,
                success: function(response) {
                    $('#sectionModal').modal('hide');
                    Swal.fire({
                        icon: 'success',
                        title: 'Success!',
                        text: response.message || 'Section saved successfully!',
                        showConfirmButton: false,
                        timer: 1500
                    });
                    setTimeout(function() {
                        location.reload();
                    }, 1500);
                },
                error: function(xhr) {
                    submitBtn.prop('disabled', false).html(originalText);
                    var errorMessage = 'Error saving section!';
                    if (xhr.responseJSON && xhr.responseJSON.message) {
                        errorMessage = xhr.responseJSON.message;
                    } else if (xhr.responseJSON && xhr.responseJSON.errors) {
                        var errors = Object.values(xhr.responseJSON.errors).flat();
                        errorMessage = errors.join('\n');
                    }
                    Swal.fire({
                        icon: 'error',
                        title: 'Error!',
                        text: errorMessage
                    });
                }
            });
        });
    });

    // ========== RESET FORM FUNCTION ==========
    function resetForm() {
        console.log('Resetting form...');
        document.getElementById('sectionForm').reset();
        $('#sectionId').val('');
        $('#formMethod').val('POST');
        $('#modalTitle').html('<i class="fas fa-puzzle-piece"></i> Add New Section');
        $('#categoryCollapse, #widgetCollapse, #adsCollapse, #imagePreviewBox').hide();
        $('#hasCategory, #hasWidgets, #hasAds, #isLeadNews, #isAdsSection, #isMainNews, #isHeader, #isFooter').prop('checked', false);
        $('input[name="ads_position[]"]').prop('checked', false);
        $('#totalCategory, #totalWidgets, #totalAds').val(0);
        $('.custom-file-label').html('Choose file');
        $('#sectionForm').attr('action', '{{ route("sections.store") }}');
        $('#submitBtn').html('<i class="fas fa-save"></i> Save Section');
    }

    // ========== EDIT SECTION FUNCTION ==========
    function editSection(id) {
        console.log('Edit function called for ID:', id);

        var section = null;
        for (var i = 0; i < sectionsData.length; i++) {
            if (sectionsData[i].id == id) {
                section = sectionsData[i];
                break;
            }
        }

        if (!section) {
            console.error('Section not found!');
            alert('Section not found!');
            return;
        }

        console.log('Found section:', section);

        var settings = {};
        try {
            if (typeof section.settings === 'string') {
                settings = JSON.parse(section.settings);
            } else if (section.settings) {
                settings = section.settings;
            }
        } catch (e) {
            console.error('Error parsing settings:', e);
        }

        console.log('Settings:', settings);

        document.getElementById('sectionForm').reset();

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

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

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

        if (settings.ads) {
            $('#hasAds').prop('checked', true);
            $('#totalAds').val(settings.total_ads || 0);
            $('#adsCollapse').show();
            $('input[name="ads_position[]"]').prop('checked', false);

            if (settings.ads_position) {
                if (Array.isArray(settings.ads_position)) {
                    for (var j = 0; j < settings.ads_position.length; j++) {
                        $('input[name="ads_position[]"][value="' + settings.ads_position[j] + '"]').prop('checked', true);
                    }
                } else {
                    $('input[name="ads_position[]"][value="' + settings.ads_position + '"]').prop('checked', true);
                }
            }
        }

        $('#isAdsSection').prop('checked', !!settings.is_ads_section);
        $('#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);
            $('#imagePreviewBox').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');

        console.log('Opening modal...');
        $('#sectionModal').modal('show');
    }

})();
</script>

@endsection