@section('title', 'Oxytech - Enquiry')
@section('page-script')


    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.14.0-beta2/js/bootstrap-select.min.js"></script>
    <link rel="stylesheet" href="{{ asset('assets/css/multiselect.css') }}" />
@endsection
<div class="container">
    <div class="row">
        <div class="col-md-12">
            @extends('layouts.websitetab')
        </div>
    </div>
  </div>
  @section('website_content')


    <hr class="my-5">
    @if (session('success') || session('error'))
        <div class="alert alert-{{ session('success') ? 'success' : 'danger' }}">
            {{ session('success') ? session('success') : session('error') }}
        </div>
    @endif


    {{-- head part --}}
    <div class="card p-0 mb-6">
        <div class="card-body d-flex flex-column flex-md-row justify-content-between p-0 pt-6">
            <div class="app-academy-md-25 card-body py-0 pt-6 ps-12">
                <img src="{{ asset('assets/img/backgrounds/bulb-light.png') }}"
                    class="img-fluid app-academy-img-height scaleX-n1-rtl" alt="Bulb in hand"
                    data-app-light-img="illustrations/bulb-light.png" data-app-dark-img="illustrations/bulb-dark.png"
                    height="90">
            </div>
            <div
                class="app-academy-md-50 card-body d-flex align-items-md-center flex-column text-md-center mb-6 py-6 w-100">
                <span class="card-title mb-4 px-md-12 h4">
                    Selected Success Stories of

                    <span class="text-primary text-nowrap">Our 1000+ Project Portfolio</span>.
                </span>
                <p class="mb-4">
                    We have been learning, unlearning and relearning with our clients as we deployed<br> various strategies
                    to
                    make customer success our topmost priority.
                </p>
                <div class="d-flex align-items-center justify-content-between app-academy-md-80">
                    <input type="search" placeholder="Find your casestyudy" class="form-control me-4">
                    <button type="submit" class="btn btn-primary btn-icon"><i class="mdi mdi-magnify"></i></button>
                </div>
            </div>
            <div class="app-academy-md-25 d-flex align-items-end justify-content-end">

                <img src="{{ asset('assets/img/backgrounds/pencil-rocket.png') }}" alt="pencil rocket" height="180"
                    class="scaleX-n1-rtl">
            </div>
        </div>
    </div>
    {{-- /end head part --}}


    <!-- Basic Bootstrap Table -->
    <div class="card mt-4">
        <div class="card-header d-flex flex-wrap justify-content-between gap-4">
            <div class="card-title mb-0 me-1">
                <h5 class="mb-0">Manage Case Studies</h5>

                <div class="demo-inline-spacing">
                    @if (isset($userGroupPermissions['technologies']) && $userGroupPermissions['technologies']['adds'] == 1)
                        <a class="dropdown-item" data-bs-toggle="modal" data-bs-target="#categoryModal"
                            style="cursor: pointer">
                            <i class="mdi mdi-plus me-1"></i>ADD CASESTUDIES</a>
                    @else
                        <a href="#" 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 CASESTUDIES
                        </a>
                    @endif
                </div>
            </div>

            <div class="d-flex justify-content-md-end align-items-center column-gap-6 flex-sm-row flex-column row-gap-4">
                <select id="industrySelect" class="form-select">
                    <option value="">Select Industry</option>
                    @foreach ($industries as $industry)
                        <option value="{{ $industry->id }}">{{ $industry->page_name }}</option>
                    @endforeach
                </select>

                {{--  <div class="form-check form-switch my-2 ms-2">
                    <input type="checkbox" class="form-check-input" id="CourseSwitch">
                    <label class="form-check-label text-nowrap mb-0" for="CourseSwitch">Hide completed</label>
                </div> --}}
            </div>

        </div>

        <div id="cardContainer" class="row row-cols-1 row-cols-md-3 g-4 p-3">
            @foreach ($paginationdata as $item)
                <div class="col card-item" data-industry="{{ $item->industry_id }}">
                    <div class="card h-100">
                        <img src="{{ !empty($item->image_path) ? asset('storage/' . $item->image_path) : asset('images/default.png') }}"
                            class="card-img-top" alt="{{ $item->alt }}" style="height: 200px; object-fit: cover;">
                        <div class="card-body">
                            <h5 class="card-title">{{ $item->title }}</h5>
                            <p class="card-text">
                                <!-- Display a summary or part of the content -->
                                {{ Str::limit($item->description, 100) }}
                            </p>
                        </div>
                        <div class="card-footer d-flex justify-content-between">
                            <div class="dropdown">
                                <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">
                                    @if (isset($userGroupPermissions['technologies']) && $userGroupPermissions['technologies']['edits'] == 1)
                                        <a class="dropdown-item" data-id="{{ $item->id }}" data-bs-toggle="offcanvas"
                                            data-bs-target="#editOffcanvas{{ $item->id }}">
                                            <i class="mdi mdi-pencil me-1"></i> Edit
                                        </a>
                                    @else
                                        <a class="dropdown-item disabled" href="#" data-id="{{ $item->id }}">
                                            <i class="mdi mdi-pencil me-1"></i> Edit
                                        </a>
                                    @endif

                                    <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>

                                    @if (isset($userGroupPermissions['technologies']) && $userGroupPermissions['technologies']['deletes'] == 1)
                                        <form action="{{ route('casestudies.casestudy.destroy', $item->id) }}"
                                            method="post">
                                            @csrf
                                            @method('DELETE')
                                            <button class="dropdown-item" type="submit">
                                                <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">
                                            <i class="mdi mdi-trash-can-outline me-2"></i> Delete
                                        </a>
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Modal for Detailed View -->
                <div class="modal fade" id="detailsModal{{ $item->id }}" tabindex="-1"
                    aria-labelledby="detailsModalLabel" aria-hidden="true">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title" id="detailsModalLabel">View Details</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}) }}"
                                                        class="img-thumbnail" style="max-width: 50px; max-height: 50px;">
                                                @elseif ($column === 'status')
                                                    {{ $item->{$column} == 1 ? 'Active' : 'Inactive' }}
                                                @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>
            @endforeach
        </div>

        <!-- Pagination -->
        <div class="d-flex justify-content-center" id="paginationContainer">
            {{ $paginationdata->links() }}
        </div>
    </div>
    <script>
        // Get the selected industry from the dropdown
        const industrySelect = document.getElementById('industrySelect');

        // Adding an event listener to trigger the fetch when a new option is selected
        industrySelect.addEventListener('change', function() {
            const selectedIndustry = this.value; // Get the selected industry ID

            // Send the request to the backend to get the filtered data
            fetch(`/casestudies/filter?industry=${selectedIndustry}`)
                .then(response => response.json())
                .then(data => {
                    // Check if we received the expected data
                    if (data.filteredData && data.filteredData.length > 0) {
                        // Render the filtered data in the card container
                        const cardContainer = document.getElementById('cardContainer');
                        cardContainer.innerHTML = ''; // Clear previous data

                        // Loop through filteredData and add each case study as a card
                        data.filteredData.forEach(item => {
                            const cardElement = document.createElement('div');
                            cardElement.classList.add('col');
                            cardElement.innerHTML = `
                        <div class="card h-100">
                            <img src="${item.image_path || '/images/default.png'}" style="height: 200px; object-fit: cover;" alt="${item.alt || 'No image'}">
                            <div class="card-body">
                                <h5 class="card-title">${item.title}</h5>
                            </div>
                            <div class="card-footer d-flex justify-content-between">
                                <div class="dropdown">
                                    <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">
                                        <a class="dropdown-item" data-id="${item.id}" data-bs-toggle="offcanvas" data-bs-target="#editOffcanvas${item.id}">
                                            <i class="mdi mdi-pencil me-1"></i> Edit
                                        </a>
                                        <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>
                                        <form action="/casestudies/casestudy/${item.id}" method="post">
                                            <input type="hidden" name="_method" value="DELETE">
                                            <input type="hidden" name="_token" value="{{ csrf_token() }}">
                                            <button class="dropdown-item" type="submit">
                                                <i class="mdi mdi-trash-can-outline me-2"></i> Delete
                                            </button>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                    `;
                            cardContainer.appendChild(cardElement);
                        });

                        // Handle pagination (if pagination is included in the response)
                        const paginationContainer = document.getElementById('paginationContainer');
                        paginationContainer.innerHTML = ''; // Clear previous pagination
                        const pagination = data.pagination;

                        // Add pagination buttons
                        for (let page = 1; page <= pagination.last_page; page++) {
                            const pageButton = document.createElement('a');
                            pageButton.href = `#`; // Add proper link if necessary
                            pageButton.classList.add('page-link');
                            if (pagination.current_page === page) {
                                pageButton.classList.add('active');
                            }
                            pageButton.textContent = page;
                            paginationContainer.appendChild(pageButton);
                        }
                    } else {
                        // No data found, show a message to the user
                        const cardContainer = document.getElementById('cardContainer');
                        cardContainer.innerHTML =
                            '<p class="alert alert-info">No case studies found for the selected industry.</p>';
                    }
                })
                .catch(error => {
                    console.error('Error fetching filtered data:', error);
                });
        });
    </script>
    <!-- Basic Pagination -->
    <div class="modal fade" id="categoryModal" tabindex="-1" aria-labelledby="categoryModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="detailsModalLabel">Add Casestudy
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form action="{{ route('casestudies.casestudy.store') }}" method="post"
                        enctype="multipart/form-data">
                        @csrf

                        @foreach ($columns as $column)
                            @if ($column === 'image_path')
                                <div class="mb-4">
                                    <label for="{{ $column }}" class="form-label">{{ ucfirst($column) }}</label>
                                    <input type="file" id="{{ $column }}" class="form-control"
                                        name="{{ $column }}">
                                </div>
                            @elseif (
                                $column === 'created_at' ||
                                    $column === 'updated_at' ||
                                    $column === 'id' ||
                                    $column === 'technologies' ||
                                    $column === 'service' ||
                                    $column === 'client' ||
                                    $column === 'content' ||
                                    $column === 'challenge' ||
                                    $column === 'solutions' ||
                                    $column === 'metta_title' ||
                                    $column === 'metta_description' ||
                                    $column === 'metta_keyword' ||
                                    $column === 'industry')
                                <!-- Skip these fields in the form -->
                            @elseif ($column === 'status')
                                <!-- Dropdown for the status field -->
                                <div class="mb-4">
                                    <label for="{{ $column }}" class="form-label">{{ ucfirst($column) }}</label>
                                    <select id="{{ $column }}" class="form-select" name="{{ $column }}">
                                        <option value="1">Active</option>
                                        <option value="0">Inactive</option>
                                    </select>
                                </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>
                                {{--        @elseif ($column === 'industry')
                                <div class="mb-4">
                                    <label for="{{ $column }}" class="form-label">{{ ucfirst($column) }}</label>
                                    <select id="{{ $column }}" class="form-select" name="{{ $column }}">

                                        @foreach ($industries as $industry)
                                            <option value="{{ $industry->id }}">{{ $industry->page_name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            @elseif ($column === 'technologies')
                                <div class="mb-4">
                                    <label for="{{ $column }}" class="form-label">{{ ucfirst($column) }}</label>

                                    <select class="selectpicker form-select" multiple aria-label="Default select example"
                                        data-live-search="true" id="{{ $column }}[]"
                                        name="{{ $column }}[]">
                                        @foreach ($technologies as $technology)
                                            <option value="{{ $technology->id }}">{{ $technology->technology }}</option>
                                        @endforeach
                                    </select>
                                </div> --}}
                            @else
                                <div class="form-floating form-floating-outline mb-4">
                                    <input type="text" id="{{ $column }}" class="form-control"
                                        name="{{ $column }}" placeholder="Enter your {{ $column }}">
                                    <label for="{{ $column }}">{{ ucfirst($column) }}</label>
                                </div>
                            @endif
                        @endforeach

                        <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>
                    </form>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
    <!--/ Basic Pagination -->
    <!--/ Basic Bootstrap Table -->
    <hr class="my-5">
    {{-- canvas --}}
    @foreach ($paginationdata as $item)
        <div class="offcanvas offcanvas-end" tabindex="-1" id="editOffcanvas{{ $item->id }}"
            aria-labelledby="editOffcanvasLabel{{ $item->id }}">
            <div class="offcanvas-header">
                <h5 class="offcanvas-title" id="editOffcanvasLabel{{ $item->id }}">Edit {{ $item->title }}</h5>
                <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
            </div>
            <div class="offcanvas-body">
                <form id="editForm{{ $item->id }}">
                    @csrf
                    <input type="hidden" name="id" value="{{ $item->id }}">
                    @foreach ($columns as $column)
                        @if ($column === 'image_path')
                            <div class="mb-4">
                                <label for="{{ $column }}{{ $item->id }}"
                                    class="form-label">{{ ucfirst($column) }}</label>
                                <input type="file" id="{{ $column }}{{ $item->id }}" class="form-control"
                                    name="{{ $column }}">
                                <img id="{{ $column }}_preview{{ $item->id }}"
                                    src="{{ asset('storage/' . $item->$column) }}" alt="Preview"
                                    class="img-thumbnail mt-2" style="max-width: 100px;">
                            </div>
                        @elseif ($column === 'client' || $column === 'challenge' || $column === 'solutions' || $column === 'content')
                            <!-- Rich Text Editor for the {{ ucfirst($column) }} field inside offcanvas -->
                            <div class="mb-4">
                                <label for="{{ $column }}{{ $item->id }}"
                                    class="form-label">{{ ucfirst($column) }}</label>
                                <textarea id="{{ $column }}{{ $item->id }}" class="form-control" name="{{ $column }}">
                                    {{ old($column, $item->$column) }}
                                </textarea>
                            </div>

                            <!-- CKEditor Script -->
                            <script src="https://cdn.ckeditor.com/4.16.2/standard/ckeditor.js"></script>

                            <script>
                                document.addEventListener('DOMContentLoaded', function() {
                                    // Get the offcanvas element
                                    var offcanvasElement = document.getElementById('editOffcanvas{{ $item->id }}');

                                    // Listen for the offcanvas to be fully shown
                                    offcanvasElement.addEventListener('shown.bs.offcanvas', function() {
                                        // Initialize CKEditor on the textarea with the correct ID
                                        if (CKEDITOR.instances['{{ $column }}{{ $item->id }}']) {
                                            CKEDITOR.instances['{{ $column }}{{ $item->id }}'].destroy(true);
                                        }
                                        CKEDITOR.replace('{{ $column }}{{ $item->id }}');
                                    });

                                    // Optional: Clean up the CKEditor instance when offcanvas is hidden
                                    offcanvasElement.addEventListener('hidden.bs.offcanvas', function() {
                                        if (CKEDITOR.instances['{{ $column }}{{ $item->id }}']) {
                                            CKEDITOR.instances['{{ $column }}{{ $item->id }}'].destroy(true);
                                        }
                                    });
                                });
                            </script>

                            <style>
                                .cke_notification_warning {
                                    display: none;
                                }
                            </style>
                        @elseif ($column === 'industry')
                            <div class="mb-4">
                                <label for="{{ $column }}" class="form-label">{{ ucfirst($column) }}</label>
                                <select id="{{ $column }}" class="form-select" name="{{ $column }}">

                                    @foreach ($industries as $industry)
                                        {{-- <option value="{{ $industry->id }}">{{ $industry->page_name }}</option> --}}
                                        <option value="{{ $industry->id }}"
                                            {{ old('industry', $item->industry ?? '') == $industry->id ? 'selected' : '' }}>
                                            {{ $industry->page_name }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                        @elseif ($column === 'service')
                            <div class="mb-4">
                                <label for="{{ $column }}" class="form-label">{{ ucfirst($column) }}</label>
                                <select id="{{ $column }}" class="form-select" name="{{ $column }}">

                                    @foreach ($services as $service)
                                        {{-- <option value="{{ $industry->id }}">{{ $industry->page_name }}</option> --}}
                                        <option value="{{ $service->id }}"
                                            {{ old('industry', $item->service ?? '') == $service->id ? 'selected' : '' }}>
                                            {{ $service->page_name }}
                                        </option>
                                    @endforeach
                                </select>
                            </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)" value="{{ old($column, $item->$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>
                            {{--  @elseif ($column === 'technologies')
                            <div class="mb-4">
                                <label for="{{ $column }}" class="form-label">{{ ucfirst($column) }}</label>

                                <select class="selectpicker form-select" multiple aria-label="Default select example"
                                    data-live-search="true" id="{{ $column }}[]" name="{{ $column }}[]">
                                    @foreach ($technologies as $technology)
                                        <option value="{{ $technology->id }}"
                                            {{ in_array($technology->id, is_array(old($column)) ? old($column) : explode(',', $item->technologies ?? '')) ? 'selected' : '' }}>
                                            {{ $technology->technology }}
                                        </option>
                                    @endforeach
                                </select>
                            </div> --}}
                        @elseif ($column === 'technologies')
                            <div class="mb-4">
                                <label for="{{ $column }}" class="form-label">{{ ucfirst($column) }}</label>
                                <select class="selectpicker form-select" multiple aria-label="Default select example"
                                    data-live-search="true" id="{{ $column }}[]" name="{{ $column }}[]">
                                    @php
                                        // Decode the technologies field safely
                                        $selectedTechnologies = json_decode($item->technologies ?? '[]', true);
                                        if (!is_array($selectedTechnologies)) {
                                            $selectedTechnologies = [];
                                        }
                                    @endphp

                                    @foreach ($technologies as $technology)
                                        <option value="{{ $technology->id }}"
                                            {{ in_array($technology->id, $selectedTechnologies) ? 'selected' : '' }}>
                                            {{ $technology->technology }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                        @elseif ($column === 'status')
                            <div class="mb-4">
                                <label for="status{{ $item->id }}" class="form-label">Status</label>
                                <select id="status{{ $item->id }}" class="form-select" name="status">
                                    <option value="1" {{ $item->status == 1 ? 'selected' : '' }}>Active</option>
                                    <option value="0" {{ $item->status == 0 ? 'selected' : '' }}>Inactive</option>
                                </select>
                            </div>
                        @elseif (!in_array($column, ['created_at', 'updated_at', 'id', 'page_id']))
                            <div class="form-floating form-floating-outline mb-4">
                                <input type="text" id="{{ $column }}{{ $item->id }}"
                                    class="form-control" name="{{ $column }}"
                                    placeholder="Enter your {{ $column }}"
                                    value="{{ old($column, $item->$column) }}">
                                <label for="{{ $column }}{{ $item->id }}">{{ ucfirst($column) }}</label>
                            </div>
                        @endif
                    @endforeach
                    <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="offcanvas">Close</button>
                    <button type="button" class="btn btn-primary" onclick="submitForm2({{ $item->id }})">Save
                        changes</button>
                </form>
            </div>
        </div>
    @endforeach

    <script>
        function submitForm2(id) {
            for (var instance in CKEDITOR.instances) {
                CKEDITOR.instances[instance].updateElement();
            }
            var form = document.getElementById('editForm' + id);
            var formData = new FormData(form);

            $.ajax({
                url: '/casestudies/casestudy/update/' + id,
                method: 'POST',
                processData: false,
                contentType: false,
                data: formData,
                success: function(data) {
                    console.log('Form submission success:', data); // Debugging step

                    if (data.success) {
                        // Try to find the card in the DOM
                        var card = document.querySelector('.card[data-id="' + id + '"]');
                        console.log('Card Element:', card); // Debugging step

                        if (card) {
                            // If the card exists, update the title
                            card.querySelector('.card-title').textContent = form.querySelector(
                                'input[name="title"]').value;
                        }

                        // Close offcanvas
                        var offcanvasElement = document.getElementById('editOffcanvas' + id);
                        var offcanvasInstance = bootstrap.Offcanvas.getInstance(offcanvasElement);

                        if (offcanvasInstance) {
                            offcanvasInstance.hide();
                        } else {
                            var bsOffcanvas = new bootstrap.Offcanvas(offcanvasElement);
                            bsOffcanvas.hide();
                        }

                        // Redirect to the updated page
                        window.location.href = '/casestudies';
                    } else {
                        alert('Update failed: ' + data.message);
                    }
                },
                error: function(xhr) {
                    console.log('Form submission error:', xhr.responseText); // Debugging step
                    alert('Update failed: ' + xhr.responseText);
                }
            });
        }
    </script>


    <!-- Assuming you have included jQuery -->
    <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
    <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 data?
                </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>
@endsection

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

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

        const confirmDeleteBtn = document.getElementById('confirmDeleteBtn');
        confirmDeleteBtn.addEventListener('click', function() {
            const speakerId = this.getAttribute('data-speaker-id');
            const form = document.createElement('form');
            form.action = "{{ route('casestudies.casestudy.destroy', ':id') }}".replace(':id',
                speakerId);
            form.method = 'POST';
            form.innerHTML = '@csrf @method('DELETE')';
            document.body.appendChild(form);
            form.submit();
        });
    });
</script>