@extends('layouts/contentNavbarLayout')

@section('title', 'Shabeersaleel - Blogs')
@section('page-script')
    <script src="{{ asset('assets/js/form-basic-inputs.js') }}"></script>
    <script src="https://cdn.ckeditor.com/4.16.2/standard/ckeditor.js"></script>
    <script>
        $(document).ready(function() {
            CKEDITOR.replace('description');
        });
    </script>
    <style>
        .cke_notification_warning {
            display: none;
        }
    </style>
@endsection

@section('content')
    <h4 class="py-3 mb-4"><span class="text-muted fw-light">Blog /</span> Manage Blog
    </h4>
    <div class="demo-inline-spacing">
        @if (isset($userGroupPermissions['blogs']) && $userGroupPermissions['blogs']['adds'] == 1)
            <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addBlogModal">
                <span class="tf-icons mdi mdi-checkbox-marked-circle-outline me-1"></span>ADD
            </button>
        @else
            <a href="{{ url('/blogs/add-blog') }}" class="btn btn-primary" aria-disabled="true"
                style="pointer-events: none; opacity:0.5; ">
                <span class="tf-icons mdi mdi-checkbox-marked-circle-outline me-1"></span>ADD
            </a>
        @endif
    </div>
    <div class="mb-5" style="float: right">
        <div class="btn">
            <a href="/blog-category" class="text-light"><span class="mdi mdi-plus"></span> Blog Category</a>
        </div>
    </div>
    <hr class="my-5">
    @if (isset($userGroupPermissions['blogs']))
        @if ($userGroupPermissions['blogs']['adds'] == 0)
            <div id="addCareerAlert"
                class="alert fade alert-simple alert-warning alert-dismissible text-left font__family-montserrat font__size-16 font__weight-light brk-library-rendered rendered show"
                role="alert" data-brk-library="component__alert">
                <strong class="font__weight-semibold"><i class="mdi mdi-plus-circle"></i></strong> You do not have
                permission to add blogs on this page.
            </div>
        @endif

        @if ($userGroupPermissions['blogs']['edits'] == 0)
            <div id="editCareerAlert"
                class="alert fade alert-simple alert-warning alert-dismissible text-left font__family-montserrat font__size-16 font__weight-light brk-library-rendered rendered show"
                role="alert" data-brk-library="component__alert">
                <strong class="font__weight-semibold"><i class="mdi mdi-pencil"></i></strong> You do not have permission to
                edit blogs on this page.
            </div>
        @endif

        @if ($userGroupPermissions['blogs']['deletes'] == 0)
            <div id="deleteCareerAlert"
                class="alert fade alert-simple alert-warning alert-dismissible text-left font__family-montserrat font__size-16 font__weight-light brk-library-rendered rendered show"
                role="alert" data-brk-library="component__alert">
                <strong class="font__weight-semibold"><i class="mdi mdi-delete"></i></strong> You do not have permission to
                delete blogs on this page.
            </div>
        @endif
    @endif

    <script>
        setTimeout(function() {
            $('#addCareerAlert, #editCareerAlert, #deleteCareerAlert').fadeOut('slow');
        }, 5000); // 5000 milliseconds = 5 seconds
    </script>
    @if (session('success') || session('error'))
        <div class="alert alert-{{ session('success') ? 'success' : 'danger' }}">
            {{ session('success') ? session('success') : session('error') }}
        </div>
    @endif


    <div class="modal fade" id="addBlogModal" tabindex="-1" aria-labelledby="addBlogModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-xl">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="addBlogModalLabel">Add Blog</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form id="banner-form" action="{{ route('blogs.store') }}" method="post" enctype="multipart/form-data">
                        @csrf
                        <!-- Form fields -->
                        @foreach ($columns as $column)
                            @if ($column === 'id' || $column === 'created_at' || $column === 'updated_at')
                                <!-- Skip the id, created_at, and updated_at fields -->
                            @elseif ($column === 'status')
                                <!-- Status dropdown -->
                                <div class="form-floating form-floating-outline mb-4">
                                    <select id="{{ $column }}" class="form-control" name="{{ $column }}"
                                        required>
                                        <option value="1">Active</option>
                                        <option value="0">Inactive</option>
                                    </select>
                                    <label for="{{ $column }}">{{ ucfirst($column) }}</label>
                                    <div id="{{ $column }}-error" class="text-danger error-message"></div>
                                </div>
                            @elseif ($column === 'country')
                                <!-- Country select -->
                                <div class="mb-4">
                                    <label for="{{ $column }}" class="form-label">{{ ucfirst($column) }}</label>
                                    <select id="country" class="form-select" name="country">
                                        <!-- Add id="country" -->
                                        <option value="">Select Country</option>
                                        @if (!empty($countries))
                                            @foreach ($countries as $code => $name)
                                                <option value="{{ $code }}">{{ $name }}</option>
                                            @endforeach
                                        @endif
                                    </select>
                                </div>
                            @elseif ($column === 'state')
                                <!-- State select -->
                                <div class="mb-4">
                                    <label for="state" class="form-label">State</label>
                                    <select id="state" class="form-select" name="state">
                                        <option value="">Select State</option>
                                        <!-- States will be populated dynamically using JavaScript -->
                                    </select>
                                </div>
                            @elseif ($column === 'district')
                                <!-- District select -->
                                <div class="mb-4">
                                    <label for="district" class="form-label">District</label>
                                    <select id="district" class="form-select" name="district">
                                        <option value="">Select District</option>
                                        <!-- Districts will be populated dynamically using JavaScript -->
                                    </select>
                                </div>
                            @elseif ($column === 'category')
                                <!-- Category dropdown -->
                                <div class="form-floating form-floating-outline mb-4">
                                    <select id="{{ $column }}" class="form-control" name="{{ $column }}"
                                        required>
                                        <!-- Loop through each category and create an option for it -->
                                        @foreach ($categories as $category)
                                            <option value="{{ $category->id }}">{{ $category->category }}</option>
                                        @endforeach
                                    </select>
                                    <label for="{{ $column }}">{{ ucfirst($column) }}</label>
                                    <div id="{{ $column }}-error" class="text-danger error-message"></div>
                                </div>
                            @elseif ($column === 'image_path')
                                <!-- Image file input -->
                                <div class="form-floating form-floating-outline mb-4">
                                    <input type="file" id="{{ $column }}" class="form-control"
                                        name="{{ $column }}" required>
                                    <label for="{{ $column }}">Upload Image</label>
                                    <div id="{{ $column }}-error" class="text-danger error-message"></div>
                                </div>
                            @elseif ($column === 'description')
                                <div class="mb-4">
                                    <label for="{{ $column }}" class="form-label">{{ ucfirst($column) }}</label>
                                    <textarea id="{{ $column }}" name="{{ $column }}" class="form-control"></textarea>
                                </div>
                            @elseif ($column === 'url')
                                <div class="mb-4">
                                    <label for="{{ $column }}" class="form-label">{{ ucfirst($column) }}</label>
                                    <input type="text" id="{{ $column }}"
                                        class="form-control url-input is-invalid" name="{{ $column }}"
                                        placeholder="Enter your {{ $column }}" oninput="validateUrlInput(this)">
                                    <div class="invalid-feedback">
                                        Please use only lowercase letters, hyphen, and no special
                                        characters or numbers.
                                    </div>
                                </div>

                                <script>
                                    function validateUrlInput(input) {
                                        // Remove special characters, numerals, and punctuations
                                        input.value = input.value.replace(/[^a-zA-Z\s-]/g, '');

                                        // Replace spaces with hyphens
                                        input.value = input.value.replace(/\s/g, '-');

                                        // Replace consecutive hyphens with a single hyphen
                                        input.value = input.value.replace(/-{2,}/g, '-');
                                    }
                                </script>
                            @else
                                <!-- General text input fields -->
                                <div class="form-floating form-floating-outline mb-4">
                                    <input type="text" id="{{ $column }}" class="form-control"
                                        name="{{ $column }}" placeholder="Enter {{ ucfirst($column) }}" required>
                                    <label for="{{ $column }}">{{ ucfirst($column) }}</label>
                                    <div id="{{ $column }}-error" class="text-danger error-message"></div>
                                </div>
                            @endif
                        @endforeach
                        <!-- Submit button -->
                        <div class="demo-inline-spacing">
                            <button type="submit" class="btn btn-primary">
                                <span class="tf-icons mdi mdi-checkbox-marked-circle-outline me-1"></span>ADD
                            </button>
                        </div>
                        <script>
                            // Step 1: Fetch and populate states based on selected country
                            document.getElementById('country').addEventListener('change', function() {
                                var country = this.value;
                                if (country) {
                                    fetchStates(country);
                                } else {
                                    // Clear state and district dropdowns if no country is selected
                                    $('#state').empty().append($('<option>', {
                                        value: '',
                                        text: 'Select State'
                                    }));
                                    $('#district').empty().append($('<option>', {
                                        value: '',
                                        text: 'Select District'
                                    }));
                                }
                            });

                            function fetchStates(country) {
                                $.get('/stateslist/' + country, function(states) {
                                    // Clear the state dropdown and add default option
                                    $('#state').empty().append($('<option>', {
                                        value: '',
                                        text: 'Select State'
                                    }));

                                    // Loop through the states array and append each state to the dropdown
                                    states.forEach(function(state) {
                                        $('#state').append($('<option>', {
                                            value: state.code, // Use state code as the value
                                            text: state.name // Use state name as the display text
                                        }));
                                    });
                                });
                            }

                            // Step 2: Fetch and populate districts based on selected state
                            document.getElementById('state').addEventListener('change', function() {
                                var state = this.value;
                                if (state) {
                                    fetchDistricts(state);
                                } else {
                                    // Clear district dropdown if no state is selected
                                    $('#district').empty().append($('<option>', {
                                        value: '',
                                        text: 'Select District'
                                    }));
                                }
                            });

                            function fetchDistricts(state) {
                                $.get('/districtslist/' + state, function(districts) {
                                    console.log(districts); // Log districts to ensure they're correct

                                    // Clear the district dropdown and add default option
                                    $('#district').empty().append($('<option>', {
                                        value: '',
                                        text: 'Select District'
                                    }));

                                    // Loop through the districts array and append each district to the dropdown
                                    districts.forEach(function(district) {
                                        console.log(district); // Log each district to check its content
                                        $('#district').append($('<option>', {
                                            value: district.id, // Ensure district.id is correct
                                            text: district.name // Ensure district.name is correct
                                        }));
                                    });

                                    // Log the dropdown after appending options
                                    console.log($('#district').html());
                                }).fail(function() {
                                    console.error('Failed to fetch districts');
                                });
                            }
                        </script>

                    </form>
                </div>
            </div>
        </div>
    </div>

    <!-- Basic Bootstrap Table -->
    <div class="card">
        <h5 class="card-header">Manage Blog</h5>
        <div class="table-responsive text-nowrap">
            <table class="table">
                <thead>
                    <tr>
                        @foreach ($columns as $column)
                            @if (
                                $column !== 'id' &&
                                    $column !== 'metta_title' &&
                                    $column !== 'metta_description' &&
                                    $column !== 'metta_keyword' &&
                                    $column !== 'url' &&
                                    $column !== 'description' &&
                                    $column !== 'updated_at' &&
                                    $column !== 'created_at' &&
                                    $column !== 'alt' &&
                                    $column !== 'tags' &&
                                    $column !== 'quotes' &&
                                    $column !== 'quotes_auther')
                                {{-- Skip the 'id' column --}}
                                @if ($column === 'image_path')
                                    <th>Banner Image</th>
                                @elseif ($column === 'sub_image_path')
                                    <th>Sub Image</th>
                                @else
                                    <th>{{ ucfirst($column) }}</th>
                                @endif
                            @endif
                        @endforeach
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody class="table-border-bottom-0">
                    @foreach ($paginationdata as $item)
                        <tr>
                            @foreach ($columns as $column)
                                @if (
                                    $column !== 'id' &&
                                        $column !== 'metta_title' &&
                                        $column !== 'metta_description' &&
                                        $column !== 'metta_keyword' &&
                                        $column !== 'url' &&
                                        $column !== 'description' &&
                                        $column !== 'updated_at' &&
                                        $column !== 'created_at' &&
                                        $column !== 'alt' &&
                                        $column !== 'tags' &&
                                        $column !== 'quotes' &&
                                        $column !== 'quotes_auther')
                                    {{-- Skip the 'id' column --}}
                                    <td>
                                        @if ($column === 'image_path')
                                            {{-- Display thumbnail image --}}
                                            @if (!empty($item->{$column}))
                                                <img src="{{ asset('storage/' . $item->image_path) }}"
                                                    alt="{{ $item->alt }}" class="img-thumbnail"
                                                    style="max-width: 50px; max-height: 50px;">
                                            @endif
                                        @elseif ($column === 'sub_image_path')
                                            {{-- Display thumbnail image --}}
                                            @if (!empty($item->{$column}))
                                                <img src="{{ asset('storage/' . $item->sub_image_path) }}"
                                                    class="img-thumbnail" style="max-width: 50px; max-height: 50px;">
                                            @endif
                                        @elseif ($column === 'status')
                                            {{ $item->{$column} == 1 ? 'Active' : 'Inactive' }}
                                        @elseif ($column === 'category')
                                            {{ $item->categoryModel->category }}
                                        @elseif ($column === 'country')
                                            {{ $countries[$item->country] }}
                                        @elseif ($column === 'state')
                                            {{ $item->stateModel ? $item->stateModel->name : 'No state' }}
                                        @elseif ($column === 'author')
                                            {{ $item->author }}
                                        @else
                                            {{-- Display other column values --}}
                                            {{ $item->{$column} }}
                                        @endif
                                    </td>
                                @endif
                            @endforeach
                            <td>
                                <div class="dropdown">
                                    <button type="button" class="btn p-0 dropdown-toggle hide-arrow"
                                        data-bs-toggle="dropdown">
                                        <i class="mdi mdi-dots-vertical"></i>
                                    </button>
                                    <div class="dropdown-menu">
                                        <!-- Edit Link -->
                                        @if (isset($userGroupPermissions['blogs']) && $userGroupPermissions['blogs']['edits'] == 1)
                                            <a class="dropdown-item" href="javascript:void(0);" data-bs-toggle="modal"
                                                data-bs-target="#exLargeModal" onclick="editRow({{ $item->id }})">
                                                <i class="mdi mdi-pencil-outline me-2"></i> Edit
                                            </a>
                                        @else
                                            <a class="dropdown-item disabled" href="#" tabindex="-1"
                                                aria-disabled="true" data-bs-toggle="tooltip" data-bs-placement="left"
                                                title="You don't have permission to edit this item">
                                                <i class="mdi mdi-pencil-outline me-2"></i> Edit
                                            </a>
                                        @endif

                                        <!-- Detailed View Link -->
                                        <a class="dropdown-item" data-bs-toggle="modal"
                                            data-bs-target="#detailsModal{{ $item->id }}">
                                            <i class="mdi mdi-file-find me-1"></i> Detailed view
                                        </a>

                                        <!-- Delete Link -->
                                        @if (isset($userGroupPermissions['blogs']) && $userGroupPermissions['blogs']['deletes'] == 1)
                                            <form id="deleteForm{{ $item->id }}"
                                                action="{{ route('blogs.destroy', $item->id) }}" method="post">
                                                @csrf
                                                @method('DELETE')
                                                <button class="dropdown-item delete-blog-btn" type="button"
                                                    data-blog-id="{{ $item->id }}">
                                                    <i class="mdi mdi-trash-can-outline me-2"></i> Delete
                                                </button>
                                            </form>
                                        @else
                                            <a class="dropdown-item disabled" href="#" tabindex="-1"
                                                aria-disabled="true" data-bs-toggle="tooltip" data-bs-placement="left"
                                                title="You don't have permission to delete this item">
                                                <i class="mdi mdi-trash-can-outline me-2"></i> Delete
                                            </a>
                                        @endif
                                    </div>
                                </div>
                            </td>
                        </tr>
                        <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
                        <!-- Delete Modal HTML Structure -->
                        <div class="modal fade" id="deleteConfirmationModal" tabindex="-1"
                            aria-labelledby="deleteConfirmationModalLabel" aria-hidden="true">
                            <div class="modal-dialog">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <h5 class="modal-title" id="deleteConfirmationModalLabel">Confirm Delete</h5>
                                        <button type="button" class="btn-close" data-bs-dismiss="modal"
                                            aria-label="Close"></button>
                                    </div>
                                    <div class="modal-body">
                                        Are you sure you want to delete this blog post?
                                    </div>
                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-secondary"
                                            data-bs-dismiss="modal">Cancel</button>
                                        <button type="button" class="btn btn-danger"
                                            id="confirmDeleteBtn">Delete</button>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="modal fade" id="detailsModal{{ $item->id }}" tabindex="-1"
                            aria-labelledby="detailsModalLabel" aria-hidden="true">
                            <div class="modal-dialog modal-xl">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <h5 class="modal-title" id="detailsModalLabel">Details for
                                            {{ $item->project_name }}
                                        </h5>
                                        <button type="button" class="btn-close" data-bs-dismiss="modal"
                                            aria-label="Close"></button>
                                    </div>
                                    <div class="modal-body">
                                        <dl class="row">
                                            @foreach ($item->getTableColumns() as $column)
                                                @if ($column !== 'id')
                                                    <dt class="col-sm-4">{{ ucfirst(str_replace('_', ' ', $column)) }}:
                                                    </dt>
                                                    <dd class="col-sm-8">
                                                        @if ($column === 'image_path' && !empty($item->{$column}))
                                                            <img src="{{ asset('storage/' . $item->{$column}) }}"
                                                                alt="{{ $item->image_alt }}" class="img-thumbnail"
                                                                style="max-width: 50px; max-height: 50px;">
                                                        @elseif ($column === 'sub_image_path' && !empty($item->{$column}))
                                                            <img src="{{ asset('storage/' . $item->{$column}) }}"
                                                                alt="{{ $item->image_alt }}" class="img-thumbnail"
                                                                style="max-width: 50px; max-height: 50px;">
                                                        @elseif ($column === 'status')
                                                            {{ $item->{$column} == 1 ? 'Active' : 'Inactive' }}
                                                        @elseif ($column === 'category')
                                                            {{ $item->categoryModel->category }}
                                                        @elseif ($column === 'author')
                                                            {{ $item->author }}
                                                        @else
                                                            {{ $item->{$column} }}
                                                        @endif
                                                    </dd>
                                                @endif
                                            @endforeach

                                        </dl>

                                    </div>
                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-secondary"
                                            data-bs-dismiss="modal">Close</button>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="modal fade" id="exLargeModal" tabindex="-1" aria-hidden="true">
                            <div class="modal-dialog modal-xl" role="document">
                                <form id="editForm">
                                    @csrf
                                    @method('PUT')
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <h4 class="modal-title" id="exampleModalLabel4">Update Blog Details</h4>
                                            <button type="button" class="btn-close" data-bs-dismiss="modal"
                                                aria-label="Close"></button>
                                        </div>
                                        <div class="modal-body">
                                            <div class="row">
                                                <div class="row g-2">
                                                    <input type="hidden" name="id" id="editId11">
                                                    @foreach ($columns as $column)
                                                        @if ($column === 'id' || $column === 'created_at' || $column === 'country' || $column === 'updated_at')
                                                            <!-- Skip the id, created_at, and updated_at fields -->
                                                        @elseif ($column === 'state')
                                                            <!-- State select -->
                                                            <div class="mb-4">
                                                                <label for="state" class="form-label">State</label>
                                                                <select id="state1" class="form-select"
                                                                    name="state">
                                                                    <option value="">Select State</option>
                                                                    @foreach ($states as $code => $name)
                                                                        <option value="{{ $code }}"
                                                                            {{ isset($selectedState) && $code === $selectedState ? 'selected' : '' }}>
                                                                            {{ $name }}
                                                                        </option>
                                                                    @endforeach
                                                                </select>
                                                            </div>
                                                        @elseif ($column === 'district')
                                                            <!-- District select -->
                                                            <div class="mb-4">
                                                                <label for="districtInput"
                                                                    class="form-label">District</label>
                                                                <select id="districtSelect1" class="form-select"
                                                                    name="district">
                                                                    <option value="">Select District</option>
                                                                    <!-- Options will be populated by JavaScript -->
                                                                </select>
                                                            </div>
                                                        @elseif ($column === 'status')
                                                            <!-- Status dropdown -->
                                                            <div class="form-floating form-floating-outline mb-4">
                                                                <select id="{{ $column }}" class="form-control"
                                                                    name="{{ $column }}" required>
                                                                    <option value="1">Active</option>
                                                                    <option value="0">Inactive</option>
                                                                </select>
                                                                <label
                                                                    for="{{ $column }}">{{ ucfirst($column) }}</label>
                                                                <div id="{{ $column }}-error"
                                                                    class="text-danger error-message"></div>
                                                            </div>
                                                        @elseif ($column === 'category')
                                                            <!-- Category dropdown -->
                                                            <div class="form-floating form-floating-outline mb-4">
                                                                <select id="category1" class="form-control"
                                                                    name="{{ $column }}" required>
                                                                    <option value="">Select District</option>
                                                                    @foreach ($categories as $category)
                                                                        <option value="{{ $category->id }}">
                                                                            {{ $category->category }}</option>
                                                                    @endforeach
                                                                </select>
                                                                <label
                                                                    for="{{ $column }}">{{ ucfirst($column) }}</label>
                                                                <div id="{{ $column }}-error"
                                                                    class="text-danger error-message"></div>
                                                            </div>
                                                        @elseif ($column === 'image_path')
                                                            <!-- Image file input -->
                                                            <div class="form-floating form-floating-outline mb-4">
                                                                <input type="file" id="{{ $column }}1"
                                                                    class="form-control" name="{{ $column }}">
                                                                <label for="{{ $column }}">Upload Image</label>
                                                                <div id="{{ $column }}-error"
                                                                    class="text-danger error-message"></div>
                                                            </div>
                                                        @elseif ($column === 'description')
                                                            <div class="mb-4">
                                                                <label for="{{ $column }}"
                                                                    class="form-label">{{ ucfirst($column) }}</label>
                                                                <textarea id="description1" name="{{ $column }}" class="form-control"></textarea>

                                                            </div>
                                                        @elseif ($column === 'url')
                                                            <div class="mb-4">
                                                                <label for="{{ $column }}"
                                                                    class="form-label">{{ ucfirst($column) }}</label>
                                                                <input type="text" id="{{ $column }}1"
                                                                    class="form-control url-input is-invalid"
                                                                    name="{{ $column }}"
                                                                    placeholder="Enter your {{ $column }}"
                                                                    oninput="validateUrlInput(this)"
                                                                    value="{{ old($column) }}">
                                                                <div class="invalid-feedback">
                                                                    Please use only lowercase letters, hyphen, and no
                                                                    special
                                                                    characters or numbers.
                                                                </div>
                                                            </div>
                                                            <script>
                                                                function validateUrlInput(input) {
                                                                    // Remove special characters, numerals, and punctuations
                                                                    input.value = input.value.replace(/[^a-zA-Z\s-]/g, '');

                                                                    // Replace spaces with hyphens
                                                                    input.value = input.value.replace(/\s/g, '-');

                                                                    // Replace consecutive hyphens with a single hyphen
                                                                    input.value = input.value.replace(/-{2,}/g, '-');
                                                                }
                                                            </script>
                                                        @else
                                                            <!-- General text input fields -->
                                                            <div class="form-floating form-floating-outline mb-4">
                                                                <input type="text" id="{{ $column }}1"
                                                                    class="form-control" name="{{ $column }}"
                                                                    placeholder="Enter {{ ucfirst($column) }}" required>
                                                                <label
                                                                    for="{{ $column }}">{{ ucfirst($column) }}</label>
                                                                <div id="{{ $column }}-error"
                                                                    class="text-danger error-message"></div>
                                                            </div>
                                                        @endif
                                                    @endforeach
                                                </div>
                                            </div>
                                        </div>
                                        <div class="modal-footer">
                                            <button type="button" class="btn btn-outline-secondary"
                                                data-bs-dismiss="modal">Close</button>
                                            <button type="submit" class="btn btn-primary">Save changes</button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    @endforeach
                </tbody>
            </table>
            <!-- Display pagination links -->

        </div>
    </div><br>
    <div class="d-flex justify-content-center col-md-2 pagination">
        {{ $paginationdata->links() }}
    </div>
    <script>
        $(document).ready(function() {
            // Initialize CKEditor for description on page load
            if (typeof CKEDITOR !== 'undefined') {
                CKEDITOR.replace('description1');
            }

            // Form submission with AJAX
            $('#editForm').submit(function(e) {
                e.preventDefault();

                var id = $('#editId11').val();
                var formData = new FormData(this);
                formData.append('_method', 'PUT');

                // Remove the old description field and append the CKEditor content
                formData.delete('description');
                formData.append('description', CKEDITOR.instances['description1'].getData());

                $.ajax({
                    url: '/blogs/blog-listing/update/' + id,
                    method: 'POST',
                    processData: false,
                    contentType: false,
                    data: formData,
                    success: function(data) {
                        $('#exLargeModal').modal('hide');
                        window.location.href = '/blogs';
                    },
                    error: function(xhr, status, error) {
                        // Error handling (optional)
                    }
                });
            });
        });

        function fetchStates1(selectedCountry) {
            $.ajax({
                url: '/chapters/get-states/' + selectedCountry,
                method: 'GET',
                success: function(states) {
                    var stateSelect = document.getElementById('state');
                    stateSelect.innerHTML = '<option value="">Select State</option>'; // Reset options
                    for (var code in states) {
                        if (states.hasOwnProperty(code)) {
                            var option = new Option(states[code], code);
                            stateSelect.add(option);
                        }
                    }
                    // Set selected state if applicable
                    if (window.selectedState) {
                        stateSelect.value = window.selectedState;
                        fetchDistricts1(window.selectedState); // Fetch districts for selected state
                    }
                },
                error: function() {
                    console.error('Error fetching states');
                }
            });
            console.log(selectedState);

        }

        function fetchDistricts1(stateCode) {
            $.ajax({
                url: '/chapters/get-districts/' + stateCode,
                method: 'GET',
                success: function(districts) {
                    var districtSelect = document.getElementById('districtSelect1');
                    districtSelect.innerHTML = '<option value="">Select District</option>'; // Reset options
                    for (var code in districts) {
                        if (districts.hasOwnProperty(code)) {
                            var option = new Option(districts[code], code);
                            districtSelect.add(option);
                        }
                    }
                    // Set selected district if applicable
                    if (window.selectedDistrict) {
                        districtSelect.value = window.selectedDistrict;
                    }
                },
                error: function(xhr, status, error) {
                    console.error('Error fetching districts:', error);
                }
            });
        }

        function editRow(id) {
            $.get('/blogs/blog-listing/' + id + '/edit', function(data) {
                console.log(data); // Check what data is received
                $('#editId11').val(data.id);
                $('#country1').val(data.country);
                $('#state1').val(data.state);
                $('#districtSelect').val(data.district);
                $('#category1').val(data.category);
                $('#status').val(data.status);
                $('#title1').val(data.title);
                $('#url1').val(data.url);
                $('#metta_title1').val(data.metta_title);
                $('#metta_description1').val(data.metta_description);
                $('#metta_keyword1').val(data.metta_keyword);
                // Set the description in CKEditor
                if (CKEDITOR.instances['description1']) {
                    CKEDITOR.instances['description1'].setData(data.description);
                }
                $('#alt1').val(data.alt);
                $('#author1').val(data.author);

                // Set the selected state and district
                window.selectedState = data.state; // Store selected state
                window.selectedDistrict = data.district; // Store selected district

                // Iterate over columns and set values
                @foreach ($columns as $column)
                    @if ($column === 'country')
                        $('#country').val(data.country);
                        fetchStates1(data.country); // Ensure the state fetch is called here
                    @elseif ($column === 'state1')
                        // State will be set by fetchStates1
                    @elseif ($column === 'district')
                        // District will be set by fetchDistricts
                    @else
                        $('#{{ $column }}1').val(data.{{ $column }}); // Ensure this is correct
                    @endif
                @endforeach

                // Show the modal
                $('#exLargeModal').modal('show');
            }).fail(function(xhr, status, error) {
                console.error('Error fetching chapter data:', error);
            });
        }

        $(document).ready(function() {
            // Handle state change
            $('#country1').change(function() {
                var selectedCountry = $(this).val();
                var selectedState = $('#state').val(); // Use current value if available
                var selectedDistrict = $('#district').val(); // Use current value if available
                fetchStates1(data.country, 'editForm', data.state, data.district);

            });

            $('#state1').change(function() {
                var selectedState = $(this).val();
                var selectedDistrict = $('#district').val(); // Use current value if available
                fetchDistricts1(selectedState, 'editForm', selectedDistrict);
            });

            // Check for stored messages and display them
            var successMessage = sessionStorage.getItem('successMessage');
            var errorMessage = sessionStorage.getItem('errorMessage');

            if (successMessage) {
                $('#alerts').html('<div class="alert alert-success">' + successMessage + '</div>').fadeIn().delay(
                    5000).fadeOut('slow');
                sessionStorage.removeItem('successMessage'); // Clear the message after displaying
            }

            if (errorMessage) {
                $('#alerts').html('<div class="alert alert-danger">' + errorMessage + '</div>').fadeIn().delay(5000)
                    .fadeOut('slow');
                sessionStorage.removeItem('errorMessage');
            }

        });

        function handleSubmit() {
            var id = $('#editId').val(); // Extract the ID from the form
            var formData = new FormData($('#editForm')[0]); // Get the form data

            $.ajax({
                url: '/blogs/blog-listing/update/' + id,
                method: 'POST',
                processData: false,
                contentType: false,
                data: formData,
                success: function(response) {

                    if (response.success) {
                        sessionStorage.setItem('successMessage', response.success);
                        window.location.reload(); // Reload the page to display the success message
                    }
                    if (response.error) {
                        sessionStorage.setItem('errorMessage', response.error);
                        window.location.reload(); // Reload the page to display the error message
                    }
                },
                error: function(xhr) {
                    window.location.reload();
                }
            });
        }
    </script>
    <hr class="my-5">

    <!-- Assuming you have included jQuery -->

@endsection
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const deleteButtons = document.querySelectorAll('.delete-blog-btn');
        const deleteConfirmationModal = new bootstrap.Modal(document.getElementById('deleteConfirmationModal'));

        deleteButtons.forEach(button => {
            button.addEventListener('click', function() {
                const blogId = this.getAttribute('data-blog-id');
                document.getElementById('confirmDeleteBtn').setAttribute('data-blog-id',
                    blogId);
                deleteConfirmationModal.show();
            });
        });

        const confirmDeleteBtn = document.getElementById('confirmDeleteBtn');
        confirmDeleteBtn.addEventListener('click', function() {
            const blogId = this.getAttribute('data-blog-id');
            const form = document.getElementById('deleteForm' + blogId);
            if (form) {
                form.submit();
            }
            deleteConfirmationModal.hide(); // Hide the modal after form submission
        });
    });
</script>