@extends('app')
@section('content')
    @include('layout.admin_sidebar')

    <div class="">
        <div class="d-flex">
            <div class="recent-campaign-contanier px-3 pt-4 pb-2 pb-lg-0 d-flex flex-column flex-grow-1">
                <div class="user-title text-brown pb-2">Recent Campaigns</div>
                @include('pages.adminPanel.homeTabs.menus')
                <!-- search container -->
                <div class="searchContainer d-flex  justify-content-between  flex-column flex-md-row ">
                    <div class="d-flex flex-wrap align-items-center gap-3 gap-md-0">
                        <!-- <label for="">Search by Title: &nbsp;</label>
                                    <div class="user-search position-relative">
                                        <input type="text" class="user-input rounded-1 ps-2" placeholder="Search..." id="user-search-input">
                                        <button class="position-absolute top-0 end-0 px-3 border-0 bg-blue text-light h-100 rounded-1" id="user-search-btn">
                                            <i class="fa-solid fa-magnifying-glass fa-lg"></i>
                                        </button>
                                    </div> -->
                    </div>
                    <!-- add user -->
                    <div class=" py-md-0 pt-3 text-md-end organizationcreate ">
                        <button class="edit btn-organizationcreate border-0 text-light py-1 px-2 rounded-1 cus-bg-dark-blue">Add
                            Campaign</button>
                    </div>
                </div>
                <!-- laptop view -->
                <div class="table-responsive usertable_container d-none d-xl-block pt-0 ">
                    <table class=" table bg-white donoruser-table text-center" id="userTable">
                        <thead class="bg-brown text-light user-thead">
                            <tr>
                                <th class="border-end">#</th>
                                <th class="border-end">Fundraiser</th>
                                <th class="border-end">Image</th>
                                <th class="border-end">Title</th>
                                <th class="border-end">Description</th> <!-- New Username column -->
                                <th class="border-end">Categories</th> <!-- New Username column -->
                                <!-- <th class="border-end">Children rights</th> -->
                                <th class="border-end">Status</th>
                                <th class="border-end">Actions</th>
                            </tr>
                        </thead>
                        <tbody class="user-tbody">
                            @if ($recentCampaigns && $recentCampaigns->count() > 0)
                                @foreach ($recentCampaigns as $recentCampaign)
                                    <tr class="user-tr status-tag">
                                        <td width="5%" class="border-end"> {{ $loop->iteration }}</td>
                                        <td width="15%" class="border-end">{{ $recentCampaign->fundraiser_org_name }} -
                                            {{ $recentCampaign->fundraiser_code }} -
                                            {{ $recentCampaign->fundraiser_first_name }}
                                            {{ $recentCampaign->fundraiser_last_name ? $recentCampaign->fundraiser_last_name : '' }}
                                            @if ($recentCampaign->fundraiser_org_status == 0)
                                                <br>
                                                <span class="text-success">( Campaign Activate)</span>
                                            @else
                                                <br>
                                                <span class="text-danger">(Campaign Inactivate)</span>
                                            @endif
                                        </td>
                                        <td width="15%" class="border-end">
                                            @php
                                                $imagePath = 'recent_campaign/' . $recentCampaign->image;
                                                $imageUrl = asset('storage/' . $imagePath);
                                            @endphp
                                            @if ($recentCampaign->image)
                                                <img src="{{ $imageUrl }}" alt="image" class="w-50">
                                            @else
                                                Not Available
                                            @endif
                                        </td>
                                        <td width="15%" class="border-end text-wrap">{{ $recentCampaign->title }}</td>
                                        <td width="30%" class="border-end text-wrap">{{ $recentCampaign->description }}
                                        </td>
                                        <td width="25%" class="border-end text-wrap">{{ $recentCampaign->categories }}
                                        </td>
                                        <td width="25%" class="border-end">
                                            <button id="statusButton-mbl"
                                                class="btn btn-sm user-active-btn py-0 text-light user-inactive-btn cursore-p" style="pointer-events: none; cursor: default;"
                                                data-id="{{ $recentCampaign->id }}"
                                                data-status="{{ $recentCampaign->status }}">
                                                @if ($recentCampaign->fundraiser_org_status == 1)
                                                    Inactivate
                                                @else
                                                    @if ($recentCampaign->status == 'N')
                                                        Activate
                                                    @else
                                                        Inactivate
                                                    @endif
                                                @endif
                                            </button>
                                        </td>
                                        <td width="10%" class="position-relative border-end">
                                            @if ($recentCampaign->fundraiser_org_status == 0)
                                                <i class="fa-solid fa-ellipsis-vertical fa-xl text-brown"></i>
                                                <div class="hidden-div py-2 px-4 text-sta rt bg-light">
                                                    <div id="deactivateOption-mbl"
                                                        class="deactivateOption-mbl user-inactive-btn py-2 bg-light  cursor-pointer">
                                                    </div>
                                                    <div class="py-2 ps-2 text-start openEditPanel openEditCampaign cursor-pointer"
                                                        data-campaign='@json($recentCampaign)'>
                                                        <i class="fa-regular fa-pen-to-square fa-lg pe-2 text-brown"></i>
                                                        Edit
                                                    </div>
                                                    <div class="py-2 ps-2 text-start delete-campaign cursor-pointer"
                                                        data-id="{{ $recentCampaign->id }}"
                                                        data-title="{{ $recentCampaign->title }}">
                                                        <i class="fa-regular fa-trash-can fa-lg pe-2 text-brown"></i>
                                                        <span>Delete</span>
                                                    </div>
                                                @else
                                                    <div class="py-2 ps-2 text-center delete-campaign cursor-pointer"
                                                        data-id="{{ $recentCampaign->id }}"
                                                        data-title="{{ $recentCampaign->title }}">
                                                        <i class="fa-regular fa-trash-can fa-lg pe-2 text-brown"></i>
                                                        {{-- <span>Delete</span> --}}
                                                    </div>
                                            @endif
                </div>
                </td>
                </tr>
                @endforeach
            @else
                <tr class="empty-table">
                    <td colspan="8" class="text-center">No Recent Campaigns Are Available</td>
                </tr>
                @endif
                </tbody>
                </table>
            </div>


            <!-- mobile view  -->
            <div class="user-mobile-view d-flex flex-column d-xl-none pb-3" id="user_mobile">
                @if ($recentCampaigns && $recentCampaigns->count() > 0)
                    @foreach ($recentCampaigns as $recentCampaign)
                        <div class="user-mobile-item status-tag mb-3 ">
                            <div class="user-mobile-header d-flex justify-content-between align-items-center ">
                                <div class="user-label gap-3 d-flex align-items-center">
                                    <!-- <input type="checkbox" class=""> -->
                                    <span class="users-name text-wrap">{{ $recentCampaign->fundraiser_org_name }} -
                                        {{ $recentCampaign->fundraiser_code }}
                                        @if ($recentCampaign->fundraiser_org_status == 0)
                                            <br>
                                            <span class="text-success">( Campaign Activate)</span>
                                        @else
                                            <br>
                                            <span class="text-danger">(Campaign Inactivate)</span>
                                        @endif
                                    </span>

                                </div>
                                <div class="d-flex align-items-center">
                                    <button id="statusButton-mbl"
                                        class="statusButton-mbl btn btn-success btn-sm user-btn me-3 ms-2" style="pointer-events: none; cursor: default;"
                                        data-id="{{ $recentCampaign->id }}" data-status="{{ $recentCampaign->status }}">
                                        @if ($recentCampaign->fundraiser_org_status == 1)
                                            Inactivate
                                        @else
                                            @if ($recentCampaign->status == 'N')
                                                Activate
                                            @else
                                                Inactivate
                                            @endif
                                        @endif
                                    </button>
                                    <i class="fa-solid fa-angle-down"></i>
                                </div>
                            </div>
                            <div class="user-mobile-body bg-light pb-3">


                                <div class="mobile-body-content d-flex justify-content-between py-3 mx-3">
                                    <span class="user-label">Fundraiser:</span>
                                    <span class="value user-value text-wrap">{{ $recentCampaign->fundraiser_org_name }}
                                        - {{ $recentCampaign->fundraiser_code }} -
                                        {{ $recentCampaign->fundraiser_first_name }}
                                        {{ $recentCampaign->fundraiser_last_name ? $recentCampaign->fundraiser_last_name : '' }}</span>
                                </div>

                                <div class="mobile-body-content d-flex justify-content-between py-3 mx-3">
                                    <span class="user-label">Image:</span>
                                    <span class="value user-value">
                                        @php
                                            $imagePath = 'recent_campaign/' . $recentCampaign->image;
                                            $imageUrl = asset('storage/' . $imagePath);
                                        @endphp
                                        @if ($recentCampaign->image)
                                            <img src="{{ $imageUrl }}" alt="image" style="width: 100px;"
                                                class="">
                                        @else
                                            Not Available
                                        @endif
                                    </span>
                                </div>

                                <!-- Email Section -->
                                <div class="mobile-body-content d-flex justify-content-between py-3 mx-3">
                                    <span class="user-label">Title:</span>
                                    <span class="value user-value text-wrap">{{ $recentCampaign->title }}</span>
                                </div>
                                <div class="mobile-body-content d-flex justify-content-between py-3 mx-3">
                                    <span class="user-label ">Description:</span>
                                    <span class="value user-value text-wrap">{{ $recentCampaign->description }}</span>
                                </div>
                                <div class="mobile-body-content d-flex justify-content-between py-3 mx-3">
                                    <span class="user-label ">Categories:</span>
                                    <span class="value user-value text-wrap">{{ $recentCampaign->categories }}</span>
                                </div>

                                <div class="mobile-body-content d-flex justify-content-between py-3 mx-3">
                                    <span class="user-label">Actions:</span>
                                    <span class="value status mobile-more">
                                        @if ($recentCampaign->fundraiser_org_status == 0)
                                            <i class="fa-solid fa-ellipsis-vertical fa-xl text-brown"></i>
                                            <div class="hidden-div bg-light py-3 px-4 text-start">
                                                <div id="deactivateOption-mbl"
                                                    class="deactivateOption-mbl py-2  cursor-pointer">
                                                </div>
                                                <div class="py-2 text-start openEditPanel openEditCampaign  cursor-pointer"
                                                    data-campaign='@json($recentCampaign)'>
                                                    <i class="fa-regular fa-pen-to-square fa-lg pe-2 text-brown"></i>
                                                    Edit
                                                </div>
                                                <div class="py-2 delete-campaign" data-id="{{ $recentCampaign->id }}"
                                                    data-title="{{ $recentCampaign->title }}">
                                                    <i class="fa-regular fa-trash-can fa-lg pe-2 text-brown"></i>
                                                    <span>Delete</span>
                                                </div>
                                            </div>
                                        @else
                                            <div class="py-2 delete-campaign cursor-pointer"
                                                data-id="{{ $recentCampaign->id }}"
                                                data-title="{{ $recentCampaign->title }}">
                                                <i class="fa-regular fa-trash-can fa-lg pe-2 text-brown"></i>

                                            </div>
                                        @endif
                                    </span>
                                </div>
                            </div>
                        </div>
                    @endforeach
                @else
                    <span class="text-center">No Recent Campaigns Are Available</span>
                @endif
            </div>
            <div class="mobile-pagination-container bg-white align-items-center d-flex flex-column justify-content-between d-xl-none py-3 px-3"
                style="box-shadow: rgba(0, 0, 0, 0.2) 0px 4px 4px -2px, rgba(0, 0, 0, 0.1) 4px 0px 4px -2px, rgba(0, 0, 0, 0.1) -4px 0px 4px -2px"
                id="user-pagination">
                @if ($recentCampaigns && $recentCampaigns->count() > 0)
                  <div class="items-per-page-mobile text-center d-flex justify-content-center">
            <div>
                 <label for="items-per-page-dropdown" class="me-1 pt-1">Show</label>
            </div>

            <div>
                 <select id="items-per-page-dropdown" class="items-per-page-dropdown">
                <option value="10">10</option>
                <option value="15">15</option>
                <option value="20">20</option>
                <option value="25">25</option>
                <option value="-1">All</option>
            </select>
            </div>
            <div>
                 <label for="items-per-page-dropdown" class="entries-label ms-1 pt-1">entries</label>
            </div>

        </div>

                    <div id="pagination" class="text-center d-flex mt-3">
                        <!-- Previous Button -->
                        <a id="prev-button" class="p-1 me-2 rounded pre border-0"
                            style="cursor: pointer; user-select: none; color: #333; padding: 5px 10px; border: 1px solid #ccc; border-radius: 5px; text-decoration: none;"
                            onmouseover="this.style.backgroundColor='#881e25'; this.style.color='white';"
                            onmouseout="this.style.backgroundColor='white'; this.style.color='#333';">
                            Previous
                        </a>

                        <!-- Pagination Numbers will be dynamically added here -->
                        <div id="pagination-numbers" class="d-flex"></div>

                        <!-- Next Button -->
                        <a id="next-button" class="p-1 ms-2 rounded next border-0"
                            style="cursor: pointer; user-select: none; color: #333; padding: 5px 10px; border: 1px solid #ccc; border-radius: 5px; text-decoration: none;"
                            onmouseover="this.style.backgroundColor='#881e25'; this.style.color='white';"
                            onmouseout="this.style.backgroundColor='white'; this.style.color='#333';">
                            Next
                        </a>
                    </div>
                @endif
            </div>



        </div>
        <!--add form-side panel -->
        <div class="admin-sidebar-add position-absolute end-0 bg-light">
            <div class="edit-title bg-brown text-light p-3 d-flex justify-content-between align-items-center">
                <div>Add Campaign</div>
                <i class="fa-solid fa-xmark clearInputFields" id="edit-cancel"></i>
            </div>
            <div class="text-sm-end edit-container pb-3 d-flex flex-column justify-content-between">
                <div class="px-4 mb-3 panel-size-md recent-campaign-form">
                    <div class="edit-context text-start">
                        <label class="edit-label pb-2 mb-sm-0" for="">Fundraiser <span
                                class="text-danger">*</span> :</label>
                        <select class="validate-select-box w-100 form-controler" name="fundraiser" id="fundraiser"
                            style="padding:9rem 0 9rem 0">
                            <option value="" selected> Select Fundraiser</option>
                            @foreach ($users as $user)
                                @if (!$recentCampaigns->contains('fundraiser_org_id', $user->organization_id))
                                    <option value="{{ $user->organization_id }}">
                                        {{ $user->name }} - {{ $user->code }} - {{ $user->first_name }}
                                        {{ $user->last_name ?? '' }}
                                    </option>
                                @endif
                            @endforeach
                        </select>

                    </div>
                    <div class="edit-context text-start">
                        <label class="edit-label pb-2 mb-sm-0" for="">Choose Image File <span
                                class="text-danger">*</span> :</label>
                        <div class="input-group">
                            <input type="file" class="form-control file" id="save-choose-image" name="image"
                                accept=".jpg, .jpeg, .png">
                            <button type="button" id="clearImageBtn" class="btn btn-img-clear">
                                <i class="fa-solid fa-xmark"></i>
                            </button>
                        </div>
                         <div class="text-grey mt-2">
                                <small class="fs-6">(Only jpeg, jpg & png are allowed.)</small>
                            </div>
                    </div>



                    <div class="edit-context text-start">
                        <label class="edit-label pb-2 mb-sm-0" for="title">Title <span class="text-danger">*</span> :
                        </label>
                        <input maxlength="100" type="text" name="title" id="title" class="form-control"
                            placeholder="Enter Title">
                        <div>
                            <small id="lastnameError" class="text-danger"></small> <!-- Error message for Lastname -->
                        </div>
                    </div>

                    <div class="edit-context text-start">
                        <label class="edit-label pb-2 mb-sm-0" for="">Categories <span
                                class="text-danger">*</span> : </label>
                        <div id="tag-container" class="d-flex align-items-center">
                            <input type="text" id="tag-input" maxlength="15" class="form-control"
                                placeholder="Add Categories" />
                            <button id="add-tag-btn" class="btn btn-transparent-blue">Add</button>
                        </div>
                        <div id="tags" class="mt-3"></div>
                    </div>

                    <div class="edit-context text-start">
                        <label class="edit-label pb-2 mb-sm-0" for="">Description <span
                                class="text-danger">*</span> : </label>
                        <textarea placeholder="Enter Description" name="description" id="description" rows="6"
                            class="edit-input form-control"></textarea>
                        <div>
                            <p>Characters used: <span id="description-count">0</span>/100</p>
                        </div>
                    </div>
                </div>
                <div class="text-end py-3 pe-4 edit-action-btn  bg-light">
                    <input class="btn-transparent-blue btn-edit-cancle px-2 py-1 rounded me-1 clearInputFields"
                        id="btnCancel" type="button" value="Cancel">
                    <button class="btn-blue px-2 py-1 rounded btn-edit-save" type="button" id="save-campaign">Save
                        <span id="login-spinner" class="spinner-border spinner-border-sm d-none salesperson-spinner"
                            role="status" aria-hidden="true" style="margin-left: 10px;"></span>
                    </button>
                </div>
            </div>
        </div>
        <!--edit form-side panel -->

        <div class="admin-sidebar-edit position-absolute end-0 bg-light home-edit-container">
            <div class="edit-title bg-brown text-light p-3 d-flex justify-content-between align-items-center">
                <div>Edit Campaign</div>
                <i class="fa-solid fa-xmark clearInputFields" id="edit-cancelIcon"></i>
            </div>

            <div class="text-sm-end edit-container pb-3 d-flex flex-column justify-content-between">
                <div class="px-4 mb-3 panel-size-md">
                    <input type="text" class="d-none" id="campaign-id">
                    <div class="edit-context text-start">
                        <label class="edit-label pb-2 mb-sm-0" for="">Fundraiser <span
                                class="text-danger">*</span> :</label>
                        <select disabled class="validate-select-box disabled w-100 form-controler" name="fundraiser"
                            id="edit-fundraiser" style="padding:9rem 0 9rem 0">
                            <option value="" selected> Select Fundraiser</option>
                            @foreach ($users as $user)
                                <option value="{{ $user->organization_id }}">{{ $user->name }} -
                                    {{ $user->code }} - {{ $user->first_name }}
                                    {{ $user->last_name ? $user->last_name : '' }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="edit-context text-start">
                        <label class="edit-label pb-2 mb-sm-0" for="">Choose Image File <span
                                class="text-danger">*</span> :</label>
                        <div class="input-group choose-image-div">
                            <input type="file" class="form-control file" id="update-choose-image" name="image"
                                value="" accept=".jpg, .jpeg, .png">
                            <button type="button" id="" class="clearImageBtn btn btn-img-clear">
                                <i class="fa-solid fa-xmark"></i>
                            </button>
                        </div>
                        <div class="input-group show-image-div">
                            <input type="text" disabled class="form-control" id="show-image" name="image">
                            <button type="button" id="remove-image" class="btn btn-img-clear">
                                <i class="fa-solid fa-xmark"></i>
                            </button>
                        </div>
                        <div class="text-grey mt-2">
                                <small class="fs-6">(Only jpeg, jpg & png are allowed.)</small>
                        </div>
                    </div>

                    <div class="edit-context text-start">
                        <label class="edit-label mb-2 mb-sm-0" for="title">Title <span class="text-danger">*</span> :
                        </label>
                        <input maxlength="100" type="text" name="title" id="edit-title"
                            class="form-control edit-input " placeholder="Enter Title">
                        <div>
                            <small id="lastnameError" class="text-danger"></small> <!-- Error message for Lastname -->
                        </div>
                    </div>

                    <div class="edit-context text-start">
                        <label class="edit-label pb-2 mb-sm-0" for="">Categories <span
                                class="text-danger">*</span> : </label>
                        <div id="tag-container" class="d-flex align-items-center">
                            <input type="text" id="edit-tag-input" maxlength="15" class="form-control"
                                placeholder="Add Categories" />
                            <button id="edit-add-tag-btn" class="btn btn-transparent-blue">Add</button>
                        </div>
                        <div id="edit-tags" class="mt-3"></div>
                    </div>

                    <div class="edit-context text-start">
                        <label class="edit-label pb-2 mb-sm-0" for="">Description <span
                                class="text-danger">*</span> : </label>
                        <div class="form-group">
                            <textarea placeholder="Enter Description" name="description" id="edit-description" rows="6"
                                class="edit-input form-control"></textarea>
                            <small id="char-count" class="form-text text-muted">Characters used: <span
                                    id="count">0</span> / 100</small>
                        </div>


                        <div>

                            <small id="usernameError" class="text-danger"></small>
                        </div>
                    </div>
                </div>
                <div class="text-end py-3 pe-4 edit-action-btn  bg-light">
                    <input class="btn-transparent-blue btn-edit-cancle clearInputFields px-2 py-1 rounded me-1"
                        id="edit-cancelButton" type="button" value="Cancel">
                    <button class="btn-blue px-2 py-1 rounded btn-edit-save" type="button" id="update-campaign">Update
                        <span id="login-spinner" class="spinner-border spinner-border-sm d-none salesperson-spinner"
                            role="status" aria-hidden="true" style="margin-left: 10px;"></span>
                    </button>
                </div>

            </div>
        </div>
        <!---Delete modal-->
        <div id="modal1"
            class="modal-overlay justify-content-center align-items-center h-100 w-100 top-0 start-0 px-3 d-none">
            <div class="bg-light modal-container">
                <div class="bg-brown text-light d-flex justify-content-between align-items-center px-2 py-2" role="button">
                    <span>Delete</span>
                    <i class="fa-solid fa-xmark fa-xl close-modal"></i>
                    <!-- Added class 'close-modal' for easy close -->
                </div>

                <div class="d-flex flex-column py-3 px-sm-3 px-2 text-center">
                    <div class="d-flex align-items-center">
                        <span class="text-center delete-message">Are you sure you want to delete this user?</span>
                        <!-- Placeholder for dynamic message -->
                    </div>
                    <div class="d-flex justify-content-end mt-3">
                        <button id="ambBtnCancel" class="btn-modal-cancel me-2 py-1 px-3 rounded-1 border-0"
                            style="background-color: #cecece;">Cancel</button>
                        <button type="button" id="confirmDeleteBtn"
                            class="org-reports-sendbtn bg-danger text-light py-1 px-3 rounded-1 border-0"
                            data-id="">Delete</button>
                    </div>
                </div>
            </div>
        </div>

        {{-- ==============  image crop model ================ --}}

        <div id="cropperModal" class="modal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1"
            aria-labelledby="cropperModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="cropperModalLabel">Crop Image</h5>
                        <button type="button" class="btn-close clearImageBtn" data-bs-dismiss="modal"
                            aria-label="Close"></button>
                    </div>
                    <div class="modal-body p-0" style="max-height: 400px;">
                        <img id="cropperImage" style="max-width: 100%; max-height: 400px;">
                    </div>
                    <div class="modal-footer">
                        <button id="zoomInButton" type="button  " class="btn btn-primary btn-brown">Zoom
                            In(+)</button>
                        <button id="zoomOutButton" type="button  " class="btn btn-primary btn-brown">Zoom
                            out(-)</button>
                        <button type="button" class="btn btn-blue" id="cropButton">Submit</button>
                        <button type="button" class="btn btn-secondary clearImageBtn"
                            data-bs-dismiss="modal">Cancel</button>
                    </div>
                </div>
            </div>
        </div>

        <!---Delete modal-->
        <div id="modal1"
            class="modal-overlay justify-content-center align-items-center h-100 w-100 top-0 start-0 px-3 d-none">
            <div class="bg-light modal-container">
                <div class="bg-brown text-light d-flex justify-content-between align-items-center px-2 py-2" role="button">
                    <span>Delete</span>
                    <i class="fa-solid fa-xmark fa-xl close-modal"></i>
                    <!-- Added class 'close-modal' for easy close -->
                </div>

                <div class="d-flex flex-column py-3 px-sm-3 px-2 text-center">
                    <div class="d-flex align-items-center">
                        <span class="text-center delete-message">Are you sure you want to delete this user?</span>
                        <!-- Placeholder for dynamic message -->
                    </div>
                    <div class="d-flex justify-content-end mt-3">
                        <button id="ambBtnCancel" class="btn-modal-cancel me-2 py-1 px-3 rounded-1 border-0"
                            style="background-color: #cecece;">Cancel</button>
                        <button type="button" id="confirmDeleteBtn"
                            class="org-reports-sendbtn bg-danger text-light py-1 px-3 rounded-1 border-0"
                            data-id="">Delete</button>
                    </div>
                </div>
            </div>
        </div>

    </div>
    </div>


    @vite(['resources/js/pages/admin_dashboard.js'])

    <!-- @vite(['resources/js/admin_panel/user.js']) -->
    <!--search functionality for table-->
    @vite(['resources/js/admin_panel/search.js'])
    @vite(['resources/js/admin_panel/home/recent_campaign.js'])

    <!--search functionality for mobile-->
    @vite(['resources/js/admin_panel/mobile_search.js'])

    <!--pagination for table-->
    @vite(['resources/js/admin_panel/pagination.js'])

    @vite(['resources/js/admin_panel/addform_sidepanel.js'])

    <!--pagination for mobile-->
    @vite(['resources/js/admin_panel/paginationmobile.js'])
@endsection