@extends('admin.admin_master')

 @section('admin')

     <style>
         .switch-button {
             display: inline-block;
             border-radius: 50px;
             background-color: #b3b3b3;
             width: 90px;
             height: 27px;
             padding: 4px;
             position: relative;
             overflow: hidden;
             vertical-align: middle;
         }

         .switch-button input[type=checkbox] {
             display: none;
         }

         .switch-button label {
             border-radius: 50%;
             -webkit-box-shadow: 0 0 1px 1px #fff inset;
             box-shadow: 0 0 1px 1px #fff inset;
             background-color: #ffffff;
             margin: 0;
             height: 19px;
             width: 19px;
             z-index: 1;
             display: inline-block;
             cursor: pointer;
             background-clip: padding-box;
             float: left;
         }

         .switch-button label:before {
             position: absolute;
             font-size: 0.8462rem;
             font-weight: 600;
             z-index: 0;
             content: "OFF";
             right: 0;
             display: block;
             width: 100%;
             height: 100%;
             line-height: 27px;
             top: 0;
             text-align: right;
             padding-right: 10px;
             color: #ffffff;
         }

         .switch-button input[type=checkbox]:checked+span {
             background-color: #0f9cf3;
             display: block;
             position: absolute;
             top: 0;
             left: 0;
             width: 100%;
             height: 100%;
             padding: 4px;
         }

         .switch-button input[type=checkbox]:checked+span label {
             float: right;
             border-color: #fe4d8e;
         }

         .switch-button input[type=checkbox]:checked+span label:before {
             position: absolute;
             font-size: 0.8462rem;
             font-weight: 600;
             z-index: 0;
             content: "ON";
             color: #ffffff;
             left: 0;
             text-align: left;
             padding-left: 10px;
         }

         .switch-button.switch-button-yesno label:before {
             content: "Free";
         }

         .switch-button.switch-button-yesno input[type=checkbox]:checked+span label:before {
             content: "Premium";
         }
     </style>

     <div class="page-content">
         <div class="container-fluid">
             <!-- Start page title -->
             <!-- Breadcrumbs -->

             @isset($breadcrumbs)
                 <nav aria-label="breadcrumb">
                     <ol class="breadcrumb">
                         @foreach ($breadcrumbs as $breadcrumb)
                             @if ($loop->last)
                                 <li class="breadcrumb-item active">{{ $breadcrumb['text'] }}</li>
                             @else
                                 <li class="breadcrumb-item"><a href="{{ $breadcrumb['link'] }}">{{ $breadcrumb['text'] }}</a>
                                 </li>
                             @endif
                         @endforeach
                     </ol>
                 </nav>
             @endisset
             <!-- End Breadcrumbs -->

             <div class="row">
                 <div class="col-12">
                     <div class="page-title-box d-flex align-items-center justify-content-between">
                         <h4 class="mb-0">Folders & Media</h4>
                     </div>
                 </div>
             </div>
             <!-- End page title -->


             <div class="row">
                 <div class="col-12">
                     <div class="card">
                         <div class="card-body pb-1">
                             <!-- Add Folder Button -->
                             <button type="button" class="btn btn-primary float-end" data-toggle="modal"
                                 data-target="#addFolderModal" name="parent_id" style="margin-left: 1rem;">
                                 Add Folder
                             </button>

                             @if($folderId !== 0)
                             <button type="button" class="btn btn-primary ml-2 float-end" data-toggle="modal"
                                 data-target="#addMediaLinkModal">
                                 Add Media  
                             </button>
                             @endif
                         </div>
                         <div class="card-body">
                             @if (count((array) $finalMergedObject) === 0)
                                 <p class="text-center">No folders or media created.</p>
                             @endif

                             <div class="row" id="drangsitem">
                                 {{-- Method 1 --}}
                                 @foreach ($finalMergedObject as $item)
                                     @if (isset($item->folder_id))
                                         <div class="col-2 pb-3" id="{{ $item->id }}" data-type="media"
                                            data-id="{{ $item->id }}">
                                             <div class="border shadow-sm rounded p-3 text-center h-100">
                                                 <p>
                                                     @if ($item->type === 'youtube')
                                                         <p title="{{$item->title ?? ''}}">
                                                             <a title="{{$item->title ?? ''}}" href="{{ route('view.media', $item->id) }}"
                                                                 style="color:#000000">
                                                                 <i class="fab fa-youtube" style="font-size:30px"></i>
                                                             </a>
                                                         </p>
                                                     @elseif ($item->type === 'blog')
                                                         <p  title="{{$item->title ?? ''}}">
                                                             <a title="{{$item->title ?? ''}}" href="{{ route('view.media', $item->id) }}"
                                                                 style="color:#000000">
                                                                 <i class="fas fa-blog" style="font-size:30px"></i>
                                                             </a>
                                                         </p>
                                                     @elseif ($item->type === 'link')
                                                         <p title="{{$item->title ?? ''}}">
                                                             <a title="{{$item->title ?? ''}}" href="{{ route('view.media', $item->id) }}"
                                                                 style="color: #000000">
                                                                 <i class="fas fa-link" style="font-size:30px"></i>
                                                             </a>
                                                         </p>
                                                     @else
                                                         <p title="{{$item->title ?? ''}}">
                                                             <a title="{{$item->title ?? ''}}" href="{{ route('view.media', $item->id) }}"
                                                                 style="color: #000000">
                                                                 <i class="fas fa-file" style="font-size:30px"></i>
                                                             </a>

                                                         </p>
                                                     @endif

                                                 </p>
                                                 <p>{{ Str::words($item->title, 2) }}</p>
                                                 <p>
                                                     <a href="javascript:void(0)" class="edit-media-btn" title="Edit Media"
                                                         style="color:teal" data-id="{{ $item->id }}"
                                                         data-title="{{ $item->title }}"
                                                         data-description="{{ $item->description }}"
                                                         data-type="{{ $item->type }}" data-url="{{ $item->url }}"
                                                         data-video="{{ $item->video }}">
                                                         <i class="fas fa-edit"></i>
                                                     </a>
                                                     <a href="{{ route('delete.media.link', $item->id) }}" id="delete"
                                                         title="Delete Data" style="color: red">
                                                         <i class="fas fa-trash"></i>
                                                     </a>

                                                     <a href="{{ route('view.media', $item->id) }}" style="color: #000000">
                                                         <i class="fa fa-eye" aria-hidden="true"></i>
                                                     </a>

                                                    <a href="javascript:void(0)" data-href="{{ route('move.file') }}" data-file_id="{{$item->id}}" data-id="{{$folderId}}" class="move_file" style="color: #000000" title="move" data-bs-toggle="modal" data-bs-target="#exampleModal">
                                                        <i class="fa fa-arrows-alt" aria-hidden="true"></i>
                                                    </a>

                                                 </p>
                                                 <form method="POST" action="{{ route('toggle.media', $item->id) }}"
                                                     class="mb-0">
                                                     @csrf
                                                     <div class="admin-list">
                                                         <button type="submit" class="toggle-button"
                                                             style="border: none;
                                                            background: none;">
                                                             <div
                                                                 class="switch-button switch-button-xs switch-button-yesno">
                                                                 <input type="checkbox" name="status"
                                                                     id="item{{ $item->id }}"
                                                                     {{ $item->status == 1 ? 'checked' : '' }} />
                                                                 <span><label for="item{{ $item->id }}"></label></span>
                                                             </div>
                                                         </button>
                                                     </div>
                                                 </form>
                                             </div>
                                         </div>
                                     @else
                                         <div class="col-2 pb-3" id="{{ $item->id }}" data-type="folder"
                                            data-id="{{ $item->id }}">
                                             <div class="border shadow-sm rounded text-center p-3 h-100">
                                                 <p title="{{ $item->name ?? '' }}"><a href="{{ route('folders-list', $item->id) }}"><i
                                                             class="fas fa-folder" style="font-size:50px"></i></a></p>
                                                 <p>{{ $item->name ?? '' }}</p>
                                                 <p>
                                                     <a href="javascript:void(0)" class="edit-folder-btn" title="Edit Data"
                                                         style="color:teal" data-id="{{ $item->id }}"
                                                         data-name="{{ $item->name ?? '' }}">
                                                         <i class="fas fa-edit"></i>
                                                     </a>
                                                     <a href="{{ route('delete.folder', $item->id) }}" id="delete"
                                                         title="Delete Data" style="color: red">
                                                         <i class="fas fa-trash"></i>
                                                     </a>
                                                     <a href="javascript:void(0)" data-href="{{ route('move.folder') }}" data-file_id="{{$item->id}}" data-id="{{$folderId}}" class="move_folder" style="color: #000000" title="move" data-bs-toggle="modal" data-bs-target="#exampleModal">
                                                        <i class="fa fa-arrows-alt" aria-hidden="true"></i>
                                                    </a>

                                                 </p>
                                                 {{-- <form method="POST" action="{{ route('toggle.folder', $item->id) }}" class="mb-0">
                                                    @csrf
                                                        <div class="admin-list">
                                                        <button type="submit" class="toggle-button" style="border: none;
                                                        background: none;">
                                                        <div class="switch-button switch-button-xs switch-button-yesno">
                                                        <input type="checkbox" name="status" id="item{{ $item->id }}" {{ $item->status == 1 ? 'checked' : '' }} />
                                                        <span><label for="item{{ $item->id }}"></label></span>
                                                        </div>
                                                        </button>
                                                        </div>
                                                </form> --}}
                                             </div>
                                         </div>
                                     @endif
                                 @endforeach
                             </div>
                         </div>
                     </div>
                 </div>
             </div> <!-- end row -->
         </div> <!-- container-fluid -->
     </div>

    <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title" id="exampleModalLabel">Move File</h5>
              <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div id="move_files_section">

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

     <!-- Add Folder Modal -->
     <div class="modal fade" id="addFolderModal" tabindex="-1" role="dialog" aria-labelledby="addFolderModalLabel"
         aria-hidden="true">
         <div class="modal-dialog" role="document">
             <div class="modal-content">
                 <div class="modal-header">
                     <h5 class="modal-title" id="addFolderModalLabel">Add Folder</h5>
                     <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                         <span aria-hidden="true">&times;</span>
                     </button>
                 </div>

                 <div class="modal-body">
                     <!-- Form for adding a folder -->
                     <form method="post" action="{{ route('store.folder') }}" enctype="multipart/form-data">
                         @csrf
                         <input type="hidden" name="parent_id" value="{{ isset($folderId) ? $folderId : '0' }}">

                         <div class="form-group">
                             <label for="folderName" class="required-label">Folder Name &nbsp; (max 100)</label>
                             <input type="text" class="form-control" id="folderName" name="name" required
                                 value="{{ old('name') }}">
                        
                             @if ($errors->has('name'))
                                 <div class="col-12 mt-2">
                                     <span class="text-danger">{{ $errors->first('name') }}</span>
                                 </div>
                             @endif
                         </div>

                         <!-- Additional folder fields can be added here -->
                         <div class="modal-footer">
                             <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                             <button type="submit" class="btn btn-primary">Save Folder</button>
                         </div>

                     </form>
                 </div>

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

     <!-- Add Media Link Modal -->
     <div class="modal fade" id="addMediaLinkModal" tabindex="-1" role="dialog"
         aria-labelledby="addMediaLinkModalLabel" aria-hidden="true">
         <div class="modal-dialog" role="document">
             <div class="modal-content">
                 <div class="modal-header">
                     <h5 class="modal-title" id="addMediaLinkModalLabel">Add Media Link</h5>
                     <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                         <span aria-hidden="true">&times;</span>
                     </button>
                 </div>
                 <div class="modal-body">
                     <!-- Form for adding a media link -->
                     <form method="post" action="{{ route('store.media.link') }}" enctype="multipart/form-data">
                         @csrf

                         <input type="hidden" name="parent_id" value="{{ isset($folderId) ? $folderId : '0' }}">

                         {{-- Media type start --}}
                         <div class="form-group">
                             <label for="mediaType" class="required-label">Type</label>
                             <select class="form-control" id="mediaType" name="type" required>
                                 <option value="youtube">YouTube Video</option>
                                 <option value="link">Article</option>
                                 <option value="file">Self Posted video</option>
                             </select>
                             @if ($errors->has('type'))
                                 <div class="col-12 mt-2">
                                     <span class="text-danger">{{ $errors->first('type') }}</span>
                                 </div>
                             @endif
                         </div>
                         {{-- Media type end --}}

                         <div class="form-group">
                             <label for="mediaTitle" class="required-label">Title</label>
                             <input type="text" class="form-control" id="mediaTitle" name="title" required
                                 value="{{ old('title') }}">
                             @if ($errors->has('title'))
                                 <div class="col-12 mt-2">
                                     <span class="text-danger">{{ $errors->first('title') }}</span>
                                 </div>
                             @endif
                         </div>
                         <div class="form-group">
                             <label for="mediaDescription">Description</label>
                             <textarea class="form-control" id="elm1" name="description" rows="4" required> {{ old('description') }}</textarea>
                             @if ($errors->has('description'))
                                 <div class="col-12 mt-2">
                                     <span class="text-danger">{{ $errors->first('description') }}</span>
                                 </div>
                             @endif
                         </div>
                         {{-- <div class="form-group">
                                <label for="mediaType" class="required-label">Type</label>
                                <select class="form-control" id="mediaType" name="type" required>
                                    <option value="youtube">YouTube Video</option>
                                    <option value="link">link</option>
                                    <option value="file">File</option>
                                </select>
                                    @if ($errors->has('type'))
                                    <div class="col-12 mt-2">
                                    <span class="text-danger">{{ $errors->first('type') }}</span>
                                    </div>
                                    @endif      
                           </div> --}}
                         <div class="form-group" id="urlField">
                             <label for="mediaUrl" class="required-label">URL</label>
                             <input type="text" class="form-control" id="mediaUrl" name="url"
                                 value="{{ old('url') }}" required>
                             @if ($errors->has('url'))
                                 <div class="col-12 mt-2">
                                     <span class="text-danger">{{ $errors->first('url') }}</span>
                                 </div>
                             @endif
                         </div>
                         <div class="form-group" id="videoField">
                             <label for="mediaVideo" class="required-label">Video Upload</label>
                             <input type="file" class="form-control" id="mediaVideo" name="video"
                                 accept="video/*">
                                 <small id="videoUploadMessage" class="text-danger" style="display: none;">Please wait, video file uploading...</small>
                                 
                         </div>
                         <div class="modal-footer">
                             <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                             <button type="submit" id="save_media" class="btn btn-primary">Save Media Link</button>
                         </div>

                     </form>
                 </div>

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

     <!-- Add Media Link Modal -->

     {{-- edit folder model start  --}}

     <div class="modal fade" id="editFolderModal" tabindex="-1" role="dialog" aria-labelledby="editFolderModalLabel"
         aria-hidden="true">
         <div class="modal-dialog" role="document">
             <div class="modal-content">
                 <div class="modal-header">
                     <h5 class="modal-title" id="editFolderModalLabel">Edit Folder</h5>
                     <button type="button" class="close" data-dismiss="model" aria-label="Close">
                         <span aria-hidden="true">&times;</span>
                     </button>
                 </div>
                 <div class="modal-body">
                     <!-- Form for editing a folder -->
                     <form method="post" action="{{ route('update.folder') }}">
                         @csrf
                         <input type="hidden" name="id" id="editFolderId">

                         <div class="form-group">
                             <label for="editFolderName">Folder Name</label>
                             <input type="text" class="form-control" id="editFolderName" name="name">
                         </div>
                         <!-- Additional folder fields can be added here -->
                         <div class="modal-footer">
                             <button type="button" class="btn btn-secondary" data-dismiss="model">Close</button>
                             <button type="submit" class="btn btn-primary">Save Changes</button>
                         </div>
                     </form>
                 </div>
             </div>
         </div>
     </div>


     {{-- edit folder model end  --}}

     <!-- Edit Media Modal -->
     <div class="modal fade" id="editMediaModal" tabindex="-1" role="dialog" aria-labelledby="editMediaModalLabel"
         aria-hidden="true">
         <div class="modal-dialog" role="document">
             <div class="modal-content">
                 <div class="modal-header">
                     <h5 class="modal-title" id="editMediaModalLabel">Edit Media Link</h5>
                     <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                         <span aria-hidden="true">&times;</span>
                     </button>
                 </div>
                 <div class="modal-body">
                     <!-- Form for editing a media link -->
                     <form method="post" action="{{ route('update.media.link') }}" enctype="multipart/form-data">
                         @csrf
                         <input type="hidden" name="id" id="editMediaId">
                         <input type="hidden" name="existing_video" id="existingVideo">

                         {{-- edit media type start --}}
                         <div class="form-group">
                             <label for="editmediaType">Type</label>
                             <select class="form-control" id="editmediaType" name="type">
                                 <option value="youtube">YouTube Video</option>
                                 <option value="link">Article</option>
                                 <option value="file">Self posted video</option>
                                 <!-- Add more options as needed -->
                             </select>
                             @if ($errors->has('type'))
                             <div class="col-12 mt-2">
                                 <span class="text-danger">{{ $errors->first('type') }}</span>
                             </div>
                         @endif
                         </div>
                         {{-- edit media type end --}}

                         <div class="form-group">
                             <label for="editmediaTitle">Title</label>
                             <input type="text" class="form-control" id="editmediaTitle" name="title" required>
                             @if ($errors->has('title'))
                             <div class="col-12 mt-2">
                                 <span class="text-danger">{{ $errors->first('title') }}</span>
                             </div>
                         @endif
                         </div>
                         <div class="form-group">
                             <label for="editmediaDescription">Description</label>
                             <textarea class="form-control tinymce-editor" id="editmediaDescription" name="description" rows="4"></textarea>
                             @if ($errors->has('description'))
                             <div class="col-12 mt-2">
                                 <span class="text-danger">{{ $errors->first('description') }}</span>
                             </div>
                         @endif
                         </div>
                         {{-- <div class="form-group">
                        <label for="editmediaType">Type</label>
                        <input type="text" class="form-control" id="editmediaType" name="type" required>
                    </div> --}}
                         {{-- <div class="form-group">
                                <label for="editmediaType">Type</label>
                                <select class="form-control" id="editmediaType" name="type">
                                    <option value="youtube">YouTube Video</option>
                                    <option value="link">Article</option>
                                    <option value="file">Self posted video</option>
                                    <!-- Add more options as needed -->
                                </select>
                            </div> --}}
                         <div class="form-group" id="editUrlField">
                             <label for="mediaUrl">URL</label>
                             <input type="text" class="form-control" id="editmediaUrl" name="url">
                             @if ($errors->has('url'))
                             <div class="col-12 mt-2">
                                 <span class="text-danger">{{ $errors->first('url') }}</span>
                             </div>
                         @endif
                         </div>
                         <div class="form-group" id="editVideoField">
                             <label for="editMediaVideo" class="">New Video Upload</label>
                             <input type="file" class="form-control" id="editMediaVideo" name="new_video">
                             @if ($errors->has('new_video'))
                             <div class="col-12 mt-2">
                                 <span class="text-danger">{{ $errors->first('new_video') }}</span>
                             </div>
                         @endif
                             <small id="UpdatevideoUploadMessage" class="text-danger" style="display: none;">Please wait, video file uploading...</small>
                         </div>

                         <div class="modal-footer">
                             <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                             <button type="submit" id="updat_media" class="btn btn-primary">Save Changes</button>
                         </div>
                     </form>
                 </div>
             </div>
         </div>
     </div>
     {{-- edit media model end  --}}


     <script src="https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js"></script>

     <script>


$('#save_media').on('click', function() {

    if ($('#mediaVideo').get(0).files.length > 0) {
        $('#videoUploadMessage').show();
        $('#addMediaLinkModal form').submit();
    }else{
        $('#fileUpladValidationRequired').show();
    }

           
            // Add code here to handle video upload and hide the message on completion
        });

        $('#updat_media').on('click', function() {

            if ($('#editMediaVideo').get(0).files.length > 0) {
                $('#UpdatevideoUploadMessage').show();
            }else {
                $('#editMediaModal form').submit();
            }
           
            // Add code here to handle video update and hide the message on completion
        });


         // Function to initialize TinyMCE editor
         function initTinyMCEEditor() {
             tinymce.init({
                 selector: 'textarea.tinymce-editor',
                 height: 300,
             });
         }

         // Call initTinyMCEEditor on document load
         $(document).ready(function() {
             initTinyMCEEditor();
         });


         // Function to populate the edit folder modal

         function populateEditFolderModal(id, name) {
             $('#editFolderId').val(id);
             $('#editFolderName').val(name);
             // Trigger the modal
             $('#editFolderModal').modal('show');

         }


         $(document).ready(function() {
             // Listen for the click event on the edit buttons
             $('.edit-folder-btn').on('click', function(e) {
                 e.preventDefault();
                 var folderId = $(this).data('id');
                 var folderName = $(this).data('name');
                 console.log(folderName);
                 populateEditFolderModal(folderId, folderName);
             });

             // Close the editFolderModal when the close button is clicked
             $('#editFolderModal').on('click', '.btn-secondary', function(e) {
                 e.preventDefault();
                 $('#editFolderModal').modal('hide');
             });

         });

         // Edit Media Model functionality start

         function showOrHideFieldsEdit(selectedType) {
             if (selectedType === 'youtube' || selectedType === 'link') {
                 $('#editVideoField').hide();
                 $('#editUrlField').show();
                 $('#editMediaVideo').removeAttr('required');
             } else if (selectedType === 'file') {
                 $('#editUrlField').hide();
                 $('#editVideoField').show();
                 // $('#editMediaVideo').attr('required', 'required');
             } else {
                 $('#editUrlField, #editVideoField').hide();
                 $('#editMediaVideo').removeAttr('required');
             }
         }

         // Edit Media Modal: Listen for the change event on the Type dropdown
         $('#editmediaType').on('change', function() {
             showOrHideFieldsEdit($(this).val());

         });

         // Function to populate the edit folder modal
         function populateEditMediaModal(id, title, description, type, url, video) {
             $('#editMediaId').val(id);
             $('#editmediaTitle').val(title);
             $('#editmediaDescription').val(description);
             $('#editmediaType').val(type);
             $('#editmediaUrl').val(url);
             $('#existingVideo').val(video);
             $('#editMediaVideo').val('');

             showOrHideFieldsEdit(type);
             // Trigger the modal      

             $('#editMediaModal').modal('show');

             // Check if TinyMCE is initialized, then set the content
             if (typeof tinymce.get('editmediaDescription') !== 'undefined') {
                 tinymce.get('editmediaDescription').setContent(description);
             }
         }

         $(document).ready(function() {
             // Listen for the click event on the Edit buttons
             $('.edit-media-btn').on('click', function(e) {
                 e.preventDefault();
                 var mediaId = $(this).data('id');
                 var mediaTitle = $(this).data('title');
                 var mediaDescription = $(this).data('description');
                 var mediaType = $(this).data('type');
                 var mediaUrl = $(this).data('url');
                 var mediaVideo = $(this).data('video');
                 console.log(mediaDescription);

                 populateEditMediaModal(mediaId, mediaTitle, mediaDescription, mediaType, mediaUrl,
                     mediaVideo);
             });


             $('#editMediaModal').on('click', '.btn-secondary', function(e) {
                 e.preventDefault();

                 $('#editMediaModal').modal('hide');
             });

         });


         // Showing Option Wise option start 
         $(document).ready(function() {

             // Initially hide the URL and Video fields
             $('#videoField').hide();
             $('#mediaType').on('change', function() {
                 var selectedType = $(this).val();
                 if (selectedType === 'youtube' || selectedType === 'link') {
                     // Hide the Video field and show the URL field
                     $('#videoField').hide();
                     $('#urlField').show();
                     // Remove the 'required' attribute and validation for the video field
                     $('#mediaVideo').removeAttr('required');
                 } else if (selectedType === 'file') {
                     // Hide the URL field and show the Video field
                     $('#urlField').hide();
                     $('#videoField').show();
                     // Set 'required' attribute and validation for the video field
                     // $('#mediaVideo').attr('required', 'required');
                 }

             });
         });
         // Showing Option Wise option end 

         const sortable = new Sortable(document.getElementById('drangsitem'), {
             onEnd: function(evt) {
                 const itemList = Array.from(evt.from.children);
                 const itemInfoArray = itemList.map((item, index) => {
                     const itemId = item.id;
                     const dataId = item.getAttribute('data-id');
                     const type = item.getAttribute('data-type');
                     return {
                         type: type,
                         id: dataId,
                         position: index
                     };
                 });
                 $.ajax({
                     type: 'POST',
                     url: '{{ route('update.folder.order') }}',
                     contentType: 'application/json',
                     data: JSON.stringify(itemInfoArray),
                     headers: {
                         'X-CSRF-TOKEN': "{{ csrf_token() }}"
                     },
                     success: function(data) {
                        console.log(data);
                         console.log('Server response:', data);
                     },
                     error: function(error) {
                         console.error('Error:', error);
                     }
                 });
             }
         });

         $(document).ready(function(){
            $(".move_file").on("click",function()
            {
                var url=$(this).data("href");
                var id=$(this).data("id");
                var file_id=$(this).data("file_id");
                $.ajax({
                    url:url,
                    method:"POST",
                    data:{
                        "_token":"{{csrf_token()}}",
                        "folderId":id,
                        "file_id":file_id
                    },
                    success:function(response){
                        $("#move_files_section").html(response.html);
                    }
                })
            })

            $(".move_folder").on("click",function()
            {
                var url=$(this).data("href");
                var id=$(this).data("id");
                var file_id=$(this).data("file_id");
                $.ajax({
                    url:url,
                    method:"POST",
                    data:{
                        "_token":"{{csrf_token()}}",
                        "folderId":id,
                        "file_id":file_id
                    },
                    success:function(response){
                        $("#move_files_section").html(response.html);
                    }
                })
            })
         })
         
     </script>


 @endsection