@local <!-- views/dashboard.blade.php --> @endlocal
<x-app-layout>
    <x-slot name="css">
        <!-- Page JS Plugins CSS -->
        <link rel="stylesheet" href="{{ asset('js/plugins/datatables-bs5/css/dataTables.bootstrap5.min.css') }}">
        <link rel="stylesheet" href="{{ asset('js/plugins/datatables-buttons-bs5/css/buttons.bootstrap5.min.css') }}">
        <style>
            td.truncated {
                max-width: 130px;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                cursor: pointer;
                position:relative;
            }
            td.truncated.smaller{
                max-width: 100px;
            }
            div#popover-container1 div.popover{
                border-width:2px;
                font-size:14px;
                font-weight: bold;
                color:#222;
            }
            div#popover-container2 div.popover, div#popover-container3 div.popover{
                border-width:4px;
                font-size:14px;
                font-weight: 500;
                color:#222;
                max-width:700px !important;
            }
            div#popover-container3 div.popover{
                font-size:12px;
            }
            div.content.large{
                width:100% !important;
                padding-left:10px !important;
                padding-right:10px !important;
            }
            div.table-responsive{
                overflow-x:auto !important;
            }
            td.joburl{
                cursor:pointer;
            }

            table.js-dataTable-full{
                min-width:100% !important;
            }
            .max-width-130{
                max-width:130px;
            }
            .disabled {
                cursor:not-allowed !important;
            }
            @keyframes slideDown {
                0% {
                    max-height: 0;
                }
                100% {
                    max-height: 10000px;
                }
            }
            @keyframes flashing {
                0% { opacity: 1.0; }
                50% { opacity: 0.7; }
                100% { opacity: 1.0; }
            }
            .flashing-button {
                animation: flashing 1.5s infinite;
            }
        </style>
    </x-slot>
    <x-slot name="js">
        <!-- jQuery (required for DataTables plugin) -->
        <script src="{{ asset('js/lib/jquery.min.js') }}"></script>
        <script>window.AppLocale = "{{ App::getLocale() }}";</script>
        <!-- Page JS Plugins -->
        <script src="{{ asset('js/plugins/datatables/jquery.dataTables.min.js') }}"></script>
        <script src="{{ asset('js/plugins/datatables-bs5/js/dataTables.bootstrap5.min.js') }}"></script>
        <script src="{{ asset('js/plugins/datatables-buttons/dataTables.buttons.min.js') }}"></script>
        <script src="{{ asset('js/plugins/datatables-buttons-bs5/js/buttons.bootstrap5.min.js') }}"></script>
        <script src="{{ asset('js/plugins/datatables-buttons-jszip/jszip.min.js') }}"></script>
        <script src="{{ asset('js/plugins/datatables-buttons-pdfmake/pdfmake.min.js') }}"></script>
        <script src="{{ asset('js/plugins/datatables-buttons-pdfmake/vfs_fonts.js') }}"></script>
        <script src="{{ asset('js/plugins/datatables-buttons/buttons.print.min.js') }}"></script>
        <script src="{{ asset('js/plugins/datatables-buttons/buttons.html5.min.js') }}"></script>
        <script src="{{ asset('js/plugins/ckeditor/ckeditor.js') }}"></script>
        <script>
            $(document).ready(function() {
                let current_tr = null;
                let current_id = null;
                let applicationColumnIndexes = {
                    "id": 0,
                    "sort":1,
                    "heading": 2,
                    "title": 3,
                    "text": 4,
                    "ticked":5,
                    "search":6,
                    "search_in":7,
                    "match":8,
                    'position':9,
                    'paragraph':10,
                    'section_pos':11,
                    'section':12,
                    'section_id':13,
                    'use_headings':14,
                    "Action": 15
                };
                let application_table = $('[data-table-id="application_table"]').DataTable({
                    pageLength: 10,
                    lengthMenu: [[5, 10, 20, 999999], [5, 10, 20, 'All']],
                    autoWidth: true,
                    "order": [[applicationColumnIndexes['heading'], "asc"]],
                    columns: [
                        { data: 'id', visible:false},
                        { data: 'sort', visible:false},
                        { data: 'heading', name: 'Section', render:function (data, type, row){
                            if(type == 'sort' || type == 'type'){
                                return parseInt(row['sort']);
                            }

                            return data;
                        }},
                        { data: 'title', name: 'Title', ender:function (data, type, row){
                                if(type == 'sort'){
                                    return row['id'];
                                }

                                return data;
                            } },
                        { data: 'text', name:'Text', orderable: false, 'width':'50%'},
                        { data: 'ticked', name:'Ticked', orderable: false},
                        { data: 'search', name:'In Data', orderable: false},
                        { data: 'search_in', visible: false},
                        { data: 'match', visible: false},
                        { data: 'position', visible:false},
                        { data: 'paragraph', visible:false},
                        { data: 'section_pos', visible:false},
                        { data: 'section', visible:false},
                        { data: 'section_id', visible:false},
                        { data: 'use_headings', visible:false},
                        { data: 'Action', name:null, orderable: false, render:function(data, type, row) {
                                return "<div class='btn-group'><button id='btn_"+row.id +"'class='btn btn-tools-green edit last-added'>Edit</button><button type='button' class='btn btn-tools-green dropdown-toggle dropdown-toggle-split' data-bs-toggle='dropdown' aria-expanded='false' data-bs-reference='parent'> <span class='visually-hidden'>Toggle Dropdown</span><ul class='dropdown-menu'><li class='edit-section'><a class='dropdown-item edit-section' href='#' data-bs-toggle='modal' data-bs-target='#section-modal'>Edit Section</a></li><li class='edit-paragraph'><a class='dropdown-item edit-paragraph' href='#' data-bs-toggle='modal' data-bs-target='#paragraph-modal'>Edit Paragraph</a></li></ul></button></div><button class='btn btn-danger ms-3 remove' data-bs-toggle='modal' data-bs-target='#paragraph-remove-modal'><i class='fas fa-trash'></i></button>";
                            } }
                    ],
                    serverSide: false, // pagination on the client
                    processing: true,
                    drawCallback: function(settings) {
                        $('button.last-added').each(function(idx, el){
                            const $el = $(el);
                            const td = $el.closest('td').addClass('text-muted').addClass('text-center').addClass('text-nowrap');
                            const new_row_id = $el.attr('id').split('_')[1];
                            $el.removeClass('last-added');
                            td.attr('id', 'action_'+new_row_id);
                        });
                    }
                });
                $('div#section-modal').on('click', 'button.add', function(e){
                    e.preventDefault();

                    const $that = $(this);
                    const form = $that.closest('.modal').find('form');
                    const section = form.find('input#section-name').val();
                    let position = form.find('input[type="radio"][name="section-position"]:checked').val();
                    const after_before = form.find('select').val() || 'last';
                    const use_headings = form.find('input[type="radio"][name="use-headings"]:checked').val();

                    if(position){
                        position = position.toLowerCase();
                    }
                    axios.post('/application/add_section', {
                        section: section,
                        position: position,
                        after_before:after_before,
                        use_headings:use_headings
                    }).then(function (response) {
                        if(response.data['exists']){
                            alert('This section already exists')
                        }
                        else{
                            window.location.reload(true);
                        }
                    })
                });
                $('div#paragraph-modal').on('click', 'button.add', function(e){
                    e.preventDefault();

                    const $that = $(this);
                    const form = $that.closest('.modal').find('form');
                    const paragraph = form.find('input#paragraph-name').val();
                    const section_id = form.find('select#paragraph-section-select').val();
                    const section = form.find('select#paragraph-section-select option:selected').text();
                    let position = form.find('input[type="radio"][name="paragraph-position_'+section_id+'"]:checked').val();
                    const after_before = form.find('select#paragraph-select_'+section_id).val();
                    const ticks = form.find('input[type="radio"][name="paragraph-ticks"]:checked').val();
                    const search_in = form.find('select#paragraph-search-in').val();

                    let match;
                    switch(search_in){
                        case 'Text':
                            match = $('input#search-in-text').val();
                            break;
                        case 'Region':
                            match = $('select#search-in-region').val();
                            break;
                        case 'Country':
                            match = $('input#search-in-country').val();
                            break;
                    }

                    if(position){
                        position = position.toLowerCase();
                    }

                    let paragraph_text = '';
                    for (var i in CKEDITOR.instances) {
                        paragraph_text = CKEDITOR.instances[i].getData();
                    }

                    axios.post('/application/add_paragraph', {
                        paragraph:paragraph,
                        section: section,
                        position: position,
                        after_before:after_before,
                        ticks:ticks,
                        search_in:search_in,
                        match:match,
                        paragraph_text:paragraph_text
                    }).then(function (response) {
                        if(response.data['exists'] === true){
                            alert('This paragraph already exists in the given section')
                        }
                        else if(response.data['exists'] == 'no_section'){
                            alert('You have to select a section')
                        }
                        else if(response.data['exists'] == 'no_paragraph'){
                            alert('You have to set a name for the paragraph')
                        }
                        else{
                            window.location.reload(true);
                        }
                    })
                });

                $('div#section-modal').on('click', 'button.edit', function(e){
                    e.preventDefault();

                    const $that = $(this);
                    const form = $that.closest('.modal').find('form');
                    const section = form.find('input#section-name').val();
                    let position = form.find('input[type="radio"][name="section-position"]:checked').val();
                    const after_before = form.find('select').val() || 'last';
                    const section_id = form.find('input#section-id').val();
                    const use_headings = form.find('input[type="radio"][name="use-headings"]:checked').val();

                    if(position){
                        position = position.toLowerCase();
                    }
                    axios.post('/application/edit_section', {
                        section: section,
                        position: position,
                        section_id:section_id,
                        after_before:after_before,
                        use_headings:use_headings
                    }).then(function (response) {
                        window.location.reload(true);
                    })
                });
                $('div#paragraph-modal').on('click', 'button.edit', function(e){
                    e.preventDefault();

                    const $that = $(this);
                    const form = $that.closest('.modal').find('form');
                    const paragraph = form.find('input#paragraph-name').val();
                    const section_id = form.find('select#paragraph-section-select').val();
                    const section = form.find('select#paragraph-section-select option:selected').text();
                    const search_in = form.find('select#paragraph-search-in').val();
                    let position = form.find('input[type="radio"][name="paragraph-position_'+section_id+'"]:checked').val();
                    const after_before = form.find('select#paragraph-select_'+section_id).val();
                    const ticks = form.find('input[type="radio"][name="paragraph-ticks"]:checked').val();
                    const item_id = form.find('input#paragraph-id').val();

                    let match;
                    switch(search_in){
                        case 'Text':
                            match = $('input#search-in-text').val();
                            break;
                        case 'Region':
                            match = $('select#search-in-region').val();
                            break;
                        case 'Country':
                            match = $('select#search-in-country').val();
                            break;
                    }

                    if(position){
                        position = position.toLowerCase();
                    }

                    let paragraph_text = '';
                    for (var i in CKEDITOR.instances) {
                        paragraph_text = CKEDITOR.instances[i].getData();
                    }

                    axios.post('/application/edit_paragraph', {
                        paragraph:paragraph,
                        section: section,
                        position: position,
                        after_before:after_before,
                        ticks:ticks,
                        paragraph_text:paragraph_text,
                        item_id:item_id,
                        search_in:search_in,
                        match:match
                    }).then(function (response) {
                        window.location.reload(true);
                    })
                });
                $('div#tables-container').on('click', 'a.edit-section', function(e){
                    e.preventDefault();

                    const $that = $(this);
                    const $btn = $that.closest('div.btn-group').find('button.edit');
                    current_tr = $btn.closest('tr');
                    current_id = $btn.attr('id').split('_')[1];

                    $('div#section-modal').find('button.add').addClass('hidden');
                    $('div#section-modal').find('button.edit').removeClass('hidden');

                    const row = application_table.row(current_tr);

                    let rowData = row.data();

                    const section = rowData['heading'];
                    const section_id = rowData['section_id'];
                    const use_headings = !!parseInt(rowData['use_headings']) ? 'Yes' : 'No';

                    $('input#section-id').val(section_id);
                    $('input#section-name').val(section);

                    $('input[type="radio"][name="use-headings"][value='+use_headings+']').prop("checked", true);

                    const ancestor = $('div.sections-wrap');
                    if(rowData['section_pos'] && rowData['section']){
                        $('input[type="radio"][name="section-position"][value='+rowData['section_pos']+']').prop("checked", true);
                        ancestor.find('label.section-select').html(rowData['section_pos']);
                        ancestor.find('select.section-select').val(rowData['section']);
                    }
                });
                $('div#tables-container').on('click', 'a.edit-paragraph', function(e){
                    e.preventDefault();

                    const $that = $(this);
                    const $btn = $that.closest('div.btn-group').find('button.edit');
                    current_tr = $btn.closest('tr');
                    current_id = $btn.attr('id').split('_')[1];

                    $('div#paragraph-modal').find('button.add').addClass('hidden');
                    $('div#paragraph-modal').find('button.edit').removeClass('hidden');

                    const row = application_table.row(current_tr);

                    let rowData = row.data();
                    const title = rowData['title'];
                    const section_id = rowData['section_id'];
                    const ancestor = $('div.p_section');
                    $('input#paragraph-id').val(current_id);
                    $('input#paragraph-name').val(title);
                    $('select#paragraph-section-select').val(section_id);
                    ancestor.addClass('hidden');
                    if(rowData['position'] && rowData['paragraph']){
                        $('div.p_section_'+section_id).removeClass('hidden')
                        $('input[type="radio"][name="paragraph-position_'+section_id+'"][value='+rowData['position']+']').prop("checked", true);
                        ancestor.find('label.paragraph-select').html(rowData['position']);
                        ancestor.find('select.paragraph-select').val(rowData['paragraph']);
                    }


                    const tick_value = rowData['ticked'] == 'Ticked' ? 'ticked' : (rowData['search'] == 'No' ? 'none' : 'search');

                    $('input[type="radio"][name="paragraph-ticks"][value='+tick_value+']').prop("checked", true);
                    if(rowData['search_in']){
                        $('select#paragraph-search-in').val(rowData['search_in']);
                    }
                    else{
                        $('select#paragraph-search-in').val('Text');
                    }

                    const match = $('div.match');

                    $('div.match').addClass('hidden');
                    if(tick_value == 'search'){
                        match.find('select').prop('disabled', false).removeClass('disabled');
                        match.find('input').prop('disabled', false).removeClass('disabled');
                        match.find('button').prop('disabled', false).removeClass('disabled');
                        $('select#paragraph-search-in').prop('disabled', false).removeClass('disabled');

                        switch(rowData['search_in']){
                            case 'Text':
                                const value_to_set = rowData['match'] == 'all' ? 'All Words' : (rowData['match'] == 'any' ? 'Any Word' : rowData['match']);
                                $('input#search-in-text').val(rowData['match']);
                                $('div.match.text').removeClass('hidden');
                                break;
                            case 'Region':
                                $('div.match.region').removeClass('hidden');
                                $('select#search-in-region').val(rowData['match']);
                                break;
                            case 'Country':
                                $('div.match.country').removeClass('hidden');
                                $('select#search-in-country').val(rowData['match']);
                                break;
                        }
                    }
                    else{
                        const value_to_set = rowData['match'] == 'all' ? 'All Words' : (rowData['match'] == 'any' ? 'Any Word' : rowData['match']);
                        $('div.match.text').removeClass('hidden');
                        match.find('select').prop('disabled', true).addClass('disabled');
                        match.find('input').prop('disabled', true).addClass('disabled');
                        match.find('button').prop('disabled', true).addClass('disabled');
                        $('select#paragraph-search-in').prop('disabled', true).addClass('disabled');
                    }
                    for (var i in CKEDITOR.instances) {
                        CKEDITOR.instances[i].setData(rowData['text']);
                    }
                });
                $('select#paragraph-search-in').change(function(){
                    const $that = $(this);
                    const value = $that.val().toLowerCase();
                    $('div.match').addClass('hidden');
                    $('div.match.'+value).removeClass('hidden');
                });
                $('input[type="radio"][name="paragraph-ticks"]').change(function(){
                    const $that = $(this);
                    const match = $('div.match');
                    const value = $that.val();
                    const disabled = value != 'search';
                    if(disabled){
                        match.find('select').prop('disabled', disabled).addClass('disabled');
                        match.find('input').prop('disabled', disabled).addClass('disabled');
                        match.find('button').prop('disabled', disabled).addClass('disabled');
                        $('select#paragraph-search-in').prop('disabled', disabled).addClass('disabled');
                    }
                    else{
                        match.find('select').prop('disabled', disabled).removeClass('disabled');
                        match.find('input').prop('disabled', disabled).removeClass('disabled');
                        match.find('button').prop('disabled', disabled).removeClass('disabled');
                        $('select#paragraph-search-in').prop('disabled', disabled).removeClass('disabled');
                    }
                });
                $('a.match').click(function(){
                    const $that = $(this);
                    const value = $that.text();
                    const input = $('input#search-in-text');
                    input.val(value);
                });
                $('button.add-paragraph').click(function(){
                    $('div#paragraph-modal').find('button.add').removeClass('hidden');
                    $('div#paragraph-modal').find('button.edit').addClass('hidden');
                });

                $('div#section-modal').on('hidden.bs.modal', function () {
                    const form = $(this).closest('.modal').find('form');
                    form[0].reset();
                });
                $('div#paragraph-modal').on('hidden.bs.modal', function () {
                    const form = $(this).closest('.modal').find('form');
                    form[0].reset();
                });
                $('input[type="radio"][name="section-position"]').change(function() {
                    if (this.checked) {
                        const position = $(this).val();
                        $('label.section-select').html(position);
                    }
                });

                $('input[type="radio"][name*="paragraph-position"]').change(function() {
                    if (this.checked) {
                        const $that = $(this);
                        const position = $that.val();
                        const ancestor = $that.closest('div.p_section');
                        ancestor.find('label.paragraph-select').html(position);
                    }
                });

                const current_section_select = $('select#paragraph-section-select').val();
                $('div.p_section_'+current_section_select).removeClass('hidden');
                $('select#paragraph-section-select').change(function(){
                    const current_section_select = $(this).val();
                    $('div.p_section').addClass('hidden');
                    $('div.p_section_'+current_section_select).removeClass('hidden');
                });
            });
        </script>

        <!-- Page JS Code -->
        @vite(['resources/js/pages/datatables.js'])
    </x-slot>
    <!-- Hero -->
    <x-page.hero-section pageTitle="DataTables Example" breadcrumbItem="Examples" breadcrumbActive="Plugin"/>
    <!-- END Hero -->
    <!-- Page Content -->
    <x-page.content-section>
        <div class="block block-rounded collapsed" id="tables-container">
            <div class="block-header block-header-default justify-content-end">
                <button class="btn btn-primary add-section" data-bs-toggle="modal" data-bs-target="#section-modal">Add Section</button>
                @if(count($sections))
                <button class="btn btn-primary ms-3 add-paragraph" data-bs-toggle="modal" data-bs-target="#paragraph-modal">Add Paragraph</button>
                @endif
            </div>
            <div class="block-content block-content-full table-responsive">
                <x-page.data-table jsDataTableClass="js-dataTable-full" dataTableId="application_table">
                    <thead>
                        <tr>
                            <th class="hidden">id</th>
                            <th class="hidden">sort</th>
                            <th>Section</th>
                            <th>Title</th>
                            <th>Text</th>
                            <th>Ticked</th>
                            <th>In Data</th>
                            <th class="hidden">Search In</th>
                            <th class="hidden">Match</th>
                            <th class="hidden">position</th>
                            <th class="hidden">paragraph</th>
                            <th class="hidden">section_pos</th>
                            <th class="hidden">section</th>
                            <th class="hidden">section_id</th>
                            <th class="hidden">use_headings</th>
                            <th></th>
                        </tr>
                    </thead>
                    <tbody>
                    @foreach ($application_data as $i => $application)
                        <tr>
                            <td>{{$application['id']}}</td>
                            <td>{{$application['sort']}}</td>
                            <td>{{$application['heading']}}</td>
                            <td>{{$application['title']}}</td>
                            <td>{!! $application['text'] !!}</td>
                            <td>{{$application['ticked']}}</td>
                            <td>{{$application['search']}}</td>
                            <td>{{$application['search_in']}}</td>
                            <td>{{$application['match']}}</td>
                            <td>{{$application['position']}}</td>
                            <td>{{$application['paragraph']}}</td>
                            <td>{{$section_positioning[$application['heading']]['position']}}</td>
                            <td>{{$section_positioning[$application['heading']]['section']}}</td>
                            <td>{{$application['section_id']}}</td>
                            <td>{{$application['use_headings']}}</td>
                            <td class="text-nowrap"></td>
                        </tr>
                    @endforeach
                </x-page.data-table>
            </div>
        </div>
        <!-- END Dynamic Table Full -->
        <div class="modal fade" id="section-modal" tabindex="-1" role="dialog" aria-labelledby="modal-block-fadein" aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="block block-rounded block-themed block-transparent mb-0">
                        <div class="block-header bg-primary-dark">
                            <h3 class="block-title">Add a section</h3>
                            <div class="block-options">
                                <button type="button" class="btn-block-option" data-bs-dismiss="modal" aria-label="Close">
                                    <i class="fa fa-fw fa-times"></i>
                                </button>
                            </div>
                        </div>
                        <div class="block-content">
                            <form action="be_blocks_forms.html" method="POST">
                                <div class="block block-rounded">
                                    <div class="block-content">
                                        <div class="row justify-content-center py-sm-3 py-md-5">
                                            <div class="col-sm-10 col-md-8">
                                                <div class="section-id mb-4 hidden">
                                                    <input type="text" class="form-control" id="section-id" name="section-id">
                                                </div>
                                                <div class="mb-4">
                                                    <label class="form-label" for="section-name">Section Name</label>
                                                    <input type="text" class="form-control" id="section-name" name="section-name" placeholder="Enter a name for the section..">
                                                </div>
                                                <div class="mb-4">
                                                    <label class="form-label">Use headings in the text</label>
                                                    <div class="space-x-2">
                                                        <div class="form-check form-check-inline">
                                                            <input class="form-check-input" type="radio" name="use-headings" value="Yes">
                                                            <label class="form-check-label" for="use-yes">Yes</label>
                                                        </div>
                                                        <div class="form-check form-check-inline">
                                                            <input class="form-check-input" type="radio" name="use-headings" value="No" checked>
                                                            <label class="form-check-label" for="use-no">No</label>
                                                        </div>
                                                    </div>
                                                </div>
                                                @if(count($sections))
                                                    <div class="mb-4">
                                                        <label class="form-label">Select position</label>
                                                        <div class="space-x-2">
                                                            <div class="form-check form-check-inline">
                                                                <input class="form-check-input" type="radio" id="section-after" name="section-position" value="After" checked>
                                                                <label class="form-check-label" for="section-after">After</label>
                                                            </div>
                                                            <div class="form-check form-check-inline">
                                                                <input class="form-check-input" type="radio" id="section-before" name="section-position" value="Before">
                                                                <label class="form-check-label" for="section-before">Before</label>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="mb-4 sections-wrap">
                                                        <label class="form-label section-select" for="section-select">After</label>
                                                        <select class="form-select section-select" id="section-select" name="section-select">
                                                            <option value="last" selected>Select a section</option>
                                                            @foreach ($sections as $section => $item_id)
                                                                <option value="{{$section}}">{{$section}}</option>
                                                            @endforeach
                                                        </select>
                                                    </div>
                                                @endif
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                        <div class="block-content block-content-full text-end bg-body">
                            <button type="button" class="btn btn-sm btn-alt-primary add" data-bs-dismiss="modal">Add</button>
                            <button type="button" class="btn btn-sm btn-alt-primary edit hidden" data-bs-dismiss="modal">Save</button>
                            <button type="button" class="btn btn-sm btn-alt-secondary" data-bs-dismiss="modal">Close</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="modal fade" id="paragraph-modal" tabindex="-1" role="dialog" aria-labelledby="modal-block-fadein" aria-hidden="true">
            <div class="modal-dialog modal-lg" role="document">
                <div class="modal-content">
                    <div class="block block-rounded block-themed block-transparent mb-0">
                        <div class="block-header bg-primary-dark">
                            <h3 class="block-title">Add a paragraph</h3>
                            <div class="block-options">
                                <button type="button" class="btn-block-option" data-bs-dismiss="modal" aria-label="Close">
                                    <i class="fa fa-fw fa-times"></i>
                                </button>
                            </div>
                        </div>
                        <div class="block-content">
                            <form action="be_blocks_forms.html" method="POST">
                                <div class="block block-rounded">
                                    <div class="block-content">
                                        <div class="row justify-content-center">
                                            <div class="col-12">
                                                <div class="paragraph-id mb-4 hidden">
                                                    <input type="text" class="form-control" id="paragraph-id" name="paragraph-id">
                                                </div>
                                                <div class="mb-4">
                                                    <label class="form-label" for="paragraph-name">Paragraph Name</label>
                                                    <input type="text" class="form-control" id="paragraph-name" name="paragraph-name" placeholder="Enter a name for the paragraph..">
                                                </div>
                                                @if(count($sections))
                                                    <div class="mb-5">
                                                        <label class="form-label paragraph-section-select" for="paragraph-section-select">Select the section</label>
                                                        <select class="form-select" id="paragraph-section-select" name="paragraph-section-select">
                                                            @foreach ($sections as $section => $item_id)
                                                                <option value="{{$item_id}}">{{$section}}</option>
                                                            @endforeach
                                                        </select>
                                                    </div>
                                                @endif
                                                @if(count($paragraphs_by_sections))
                                                    @foreach ($paragraphs_by_sections as $section => $paragraphs)
                                                        @if(count($paragraphs))
                                                            <div class="p_section p_section_{{$sections[$section]}} hidden">
                                                                <div class="mb-3">
                                                                    <label class="form-label">Select position</label>
                                                                    <div class="space-x-2">
                                                                        <div class="form-check form-check-inline">
                                                                            <input class="form-check-input p_section" type="radio" name="paragraph-position_{{$sections[$section]}}" value="After" checked>
                                                                            <label class="form-check-label" for="paragraph-after">After</label>
                                                                        </div>
                                                                        <div class="form-check form-check-inline">
                                                                            <input class="form-check-input p_section" type="radio" name="paragraph-position_{{$sections[$section]}}" value="Before">
                                                                            <label class="form-check-label" for="paragraph-before">Before</label>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                                <div class="mb-4">
                                                                    <label class="form-label paragraph-select" for="section-select">After</label>
                                                                    <select class="form-select paragraph-select" id="paragraph-select_{{$sections[$section]}}" name="paragraph-select_{{$sections[$section]}}">
                                                                        @foreach ($paragraphs as $i => $paragraph)
                                                                            <option value="{{$paragraph}}">{{$paragraph}}</option>
                                                                        @endforeach
                                                                    </select>
                                                                </div>
                                                            </div>
                                                        @endif
                                                    @endforeach
                                                @endif
                                                <div class="mt-5 mb-5">
                                                    <label class="form-label position-absolute">Select ticks</label>
                                                    <div class="space-x-2">
                                                        <div class="form-check form-check-inline">
                                                            <input class="form-check-input" type="radio" id="paragraph-ticks-none" name="paragraph-ticks" value="none" checked>
                                                            <label class="form-check-label" for="paragraph-before">None</label>
                                                        </div>
                                                        <div class="form-check form-check-inline">
                                                            <input class="form-check-input" type="radio" id="paragraph-ticks-ticked" name="paragraph-ticks" value="ticked">
                                                            <label class="form-check-label" for="paragraph-after">Ticked</label>
                                                        </div>
                                                        <div class="form-check form-check-inline">
                                                            <input class="form-check-input" type="radio" id="paragraph-ticks-search" name="paragraph-ticks" value="search">
                                                            <label class="form-check-label" for="paragraph-before">Search Word In ==></label>
                                                        </div>
                                                        <div class="form-check form-check-inline ms-0 ps-0">
                                                            <select class="form-select paragraph-select" id="paragraph-search-in" name="paragraph-search-in">
                                                                <option value="Text">Title and Description (Text)</option>
                                                                <option value="Country">Country</option>
                                                                <option value="Region">Region</option>
                                                            </select>
                                                        </div>
                                                        <div class="form-check form-check-inline ms-0 ps-0 match region hidden">
                                                            <label class="form-check-label" for="paragraph-before">Match:</label>
                                                            <select class="form-select paragraph-select" id="search-in-region" name="search-in-region">
                                                                <option value="EU">EU</option>
                                                                <option value="OTHER">OTHER</option>
                                                            </select>
                                                        </div>
                                                        <div class="form-check form-check-inline ms-0 ps-0 match country hidden">
                                                            <label class="form-check-label" for="paragraph-before">Match:</label>
                                                            <select class="form-select paragraph-select" id="search-in-country" name="search-in-country">
                                                                <option value="uk">United Kingdom</option>
                                                                <option value="us">United States</option>
                                                            </select>
                                                        </div>
                                                        <div class="form-check form-check-inline ms-0 ps-0 match text">
                                                            <label class="form-check-label" for="paragraph-before">Match (select or write):</label>
                                                            <div>
                                                                <div class="btn-group max-width-130">
                                                                    <input class="form-control" type="text" id="search-in-text" name="search-in-text" value="All Words">
                                                                    <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false" data-bs-reference="parent">
                                                                        <span class="visually-hidden">Toggle Dropdown</span>
                                                                    </button>
                                                                    <ul class="dropdown-menu">
                                                                        <li><a class="dropdown-item match all" href="#">All Words</a></li>
                                                                        <li><a class="dropdown-item match any" href="#">Any Word</a></li>
                                                                    </ul>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="mt-5 mb-4">
                                                    <label class="form-label">Text</label>
                                                    <textarea id="js-ckeditor" name="ckeditor"></textarea>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                        <div class="block-content block-content-full text-end bg-body">
                            <button type="button" class="btn btn-sm btn-alt-primary add" data-bs-dismiss="modal">Add</button>
                            <button type="button" class="btn btn-sm btn-alt-primary edit" data-bs-dismiss="modal">Save</button>
                            <button type="button" class="btn btn-sm btn-alt-secondary" data-bs-dismiss="modal">Close</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </x-page.content-section>
    <!-- END Page Content -->
</x-app-layout>