@extends('dashboard.layouts.master')

@section('css')
    <!-- DataTables -->
    <link href="{{ URL::asset('dashboard/plugins/datatables/dataTables.bootstrap4.min.css') }}" rel="stylesheet" type="text/css" />
    <link href="{{ URL::asset('dashboard/plugins/datatables/buttons.bootstrap4.min.css') }}" rel="stylesheet" type="text/css" />
    <!-- Responsive datatable examples -->
    <link href="{{ URL::asset('dashboard/plugins/datatables/responsive.bootstrap4.min.css') }}" rel="stylesheet" type="text/css" />
    <!-- Sweet Alert -->
    <link href="{{ URL::asset('dashboard/plugins/sweet-alert2/sweetalert2.min.css') }}" rel="stylesheet" type="text/css">
    <style type="text/css">
        .main-folder-body {
          width: 100%;
          background: #ffffff;
          border-right: 1px solid #ddd;
          padding: 20px;
          box-shadow: 2px 0 5px rgba(0,0,0,0.05);
        }

        .main-folder-body-header {
          display: flex;
          justify-content: space-between;
          align-items: center;
        }

        .main-folder-body-header button {
          background: grey;
          color: #fff;
          border: none;
          font-size: 18px;
          width: fit-content;
          height: 30px;
          border-radius: 10px;

          cursor: pointer;
        }

        .folder-list,
        .file-list {
          list-style: none;
          padding-left: 0;
          margin-top: 20px;
        }

        .folder-list li,
        .file-list li {
          padding: 8px 0;
          border-bottom: 1px solid #eee;
          cursor: pointer;
        }

        .main {
          flex: 1;
          padding: 30px;
          background: #fafafa;
        }

        .modal {
          position: fixed;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background: rgba(0,0,0,0.4);
          display: none;
          justify-content: center;
          align-items: center;
          z-index: 1000;
        }

        .modal-content {
          background: #fff;
          padding: 20px;
          width: 300px;
          border-radius: 8px;
          margin: 25%;
        }

        .modal-content input {
          width: 100%;
          padding: 8px;
          margin-bottom: 10px;
        }

        .modal-actions {
          display: flex;
          justify-content: flex-end;
          gap: 10px;
        }

        .modal-actions button {
          padding: 6px 12px;
          border: none;
          background: #007bff;
          color: white;
          cursor: pointer;
        }

        .modal-actions button#closeModal {
          background: #aaa;
        }
        .icon-grid {
          display: grid;
          grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
          gap: 15px;
          margin-top: 20px;
        }

        .icon-item {
          display: flex;
          flex-direction: column;
          align-items: center;
          text-align: center;
          font-size: 16px;
          cursor: pointer;
          padding: 10px;
          border-radius: 6px;
          transition: background 0.2s;
        }

        .icon-item:hover {
          background: #f0f0f0;
        }

        .icon-item span {
          margin-top: 6px;
          font-size: 14px;
          word-break: break-word;
        }

        /// 
        .folder-item {
          display: flex;
          flex-direction: column;
          align-items: center;
          position: relative;
          padding-top: 10px;
        }

        /* Three dots icon next to folder image */
        .icon-menu {
          position: absolute;
          top: 0;
          left: 0;
          z-index: 2;
        }

        .menu-toggle {
          background: none;
          border: none;
          font-size: 18px;
          cursor: pointer;
          padding: 0 6px;
        }

        /* Dropdown */
        .menu-dropdown {
          display: none;
          position: absolute;
          top: 25px;
          left: 0;
          background: white;
          border: 1px solid #ccc;
          list-style: none;
          padding: 5px 0;
          margin: 0;
          z-index: 3;
          width: 100px;
          box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
        }

        .menu-dropdown li {
          padding: 5px 10px;
        }

        .menu-dropdown a,
        .menu-dropdown button {
          color: #333;
          text-decoration: none;
          display: block;
          width: 100%;
          text-align: left;
          background: none;
          border: none;
          cursor: pointer;
        }

        .menu-dropdown li:hover {
          background: #f0f0f0;
        }

        /* Folder image & name */
        .folder-link {
          display: flex;
          flex-direction: column;
          align-items: center;
          text-align: center;
          margin-top: 10px;
        }

/*        .drop-zone {
          border: 2px dashed #aaa;
          border-radius: 10px;
          text-align: center;
          padding-top: 60px;
          font-size: 16px;
          color: #555;
          transition: border-color 0.3s;
        }
*/
        .drop-zone.dragover {
          border-color: #007bff;
          background-color: #f0f8ff;
        }

        .progress-container {
          width: 300px;
          height: 10px;
          background-color: #eee;
          margin-top: 10px;
          border-radius: 5px;
          overflow: hidden;
        }

        .progress-bar {
          height: 100%;
          width: 0;
          background-color: #007bff;
          transition: width 0.2s;
        }

        .file-select{
            border: 2px solid #591f85;
            border-radius: 10px;
            padding: 10px;
            font-size: 20px;
            text-align: center;
            margin: 10px 0px;
            font-weight: 600;
        }
    </style>
@endsection

@section('breadcrumb')
    <div class="col-sm-6">
        <h4 class="page-title">مجلدات المنصة</h4>
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{{route('admin.dashboard')}}">{{trans('labels.dashboard')}}</a></li>
            <li class="breadcrumb-item active">مجلدات المنصة</li>
        </ol>
    </div>
    <div class="col-sm-6">
        <div class="float-right d-none d-md-block">
           <!--  @can('admins-create')
            <button class="btn btn-primary waves-effect waves-light" type="button" onclick="location.href='{{route('admin.branches.create')}}'" aria-haspopup="true" aria-expanded="false">
                {{trans('labels.create')}}
            </button>
            @endcan -->
        </div>
    </div>
@endsection

@section('content')
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-body">
                    <!-- Progress -->
                    <div id="progressContainer" class="progress-container" style="display: none;">
                      <div id="progressBar" class="progress-bar"></div>
                    </div>
                    <div class="container drop-zone" id="dropArea">
                        <div class="main-folder-body-header">
                            <div>
                                <a href="{{route('admin.media-storage.index')}}">
                                    <span>الرئيسية</span>
                                </a>
                                @foreach($currentFolder->folderPath() as $pathFolder)
                                    <a href="{{route('admin.media-storage.show', $pathFolder->id)}}">
                                        <span>></span> <span>{{$pathFolder->title}}</span>
                                    </a>
                                @endforeach
                            </div>
                            <div>
                                <button id="addFolderBtn">+ مجلد جديد</button>
                                <button id="addFileBtn" style="background-color: #c1185b;">+ ملف جديد</button>
                            </div>
                        </div>
                        @if($folders->count() > 0 || $files->count() > 0)
                            <div class="icon-grid" id="folderGrid">
                                @foreach($folders as $folder)
                                <div class="icon-item folder-item" style="position: relative;">
                                    <div class="action-menu" style="width: 100%;">
                                        <button class="menu-toggle" style="width: 100%;text-align: left;">...</button>
                                        <ul class="menu-dropdown">
                                            <li><a href=""><i class="fa fa-pencil"></i> تعديل</a></li>
                                            <li><form method="POST" action="{{ route('admin.media-storage.destroy', $folder->id) }}" onsubmit="return confirm('Delete this folder?')">
                                                @csrf
                                                @method('DELETE')
                                                <button type="submit"><i class="fa fa-remove"></i> حذف</button>
                                            </form></li>
                                        </ul>
                                    </div>
                                    <a href="{{route('admin.media-storage.show', $folder->id)}}" style="display: flex;flex-direction: column;" class="folder-link">
                                        <img height="160px" src="{{asset('dashboard/folder.svg')}}"  style="width:100%">
                                        <span>{{$folder->title}}</span>
                                    </a>
                                </div>
                                @endforeach
                                @foreach($files as $file)
                                <div class="icon-item">
                                    <div class="action-menu" style="width: 100%;">
                                        <a class="menu-toggle" style="width: 100%;text-align: left;display: block;">
                                            <i class="fa fa-pen"></i>
                                        </a>
                                    </div>
                                    <a href="{{$file->file_full_path ?? '#'}}" target="_blank">
                                        <img height="160" src="{{$file->file_image_full_path}}" style="width:100%">
                                        <span>{{$file->title}}</span>
                                    </a>
                                </div>
                                @endforeach
                            </div>
                        @else
                            <div style="height: 200px;align-items: center;display: flex;justify-content: center;">
                                المجلد فارغ
                            </div>
                        @endif

                      <!-- <div class="main">
                        <h2>Files</h2>
                        <div class="icon-grid">
                          <div class="icon-item">📄<span>index.html</span></div>
                          <div class="icon-item">📄<span>app.js</span></div>
                        </div>
                      </div>
                    </div> -->
                    <!-- Modal -->
                    <div class="modal" id="folderModal">
                      <div class="modal-content">
                        <form action="{{route('admin.media-storage.create', $currentFolder->id)}}" method="POST">
                            @csrf
                            <h3>إنشاء مجلد جديد</h3>
                            <input class="form-control" type="text" name="title" placeholder="اسم المجلد">
                            <input class="form-control" type="text" name="hint" placeholder="تعليق (اختياري)">
                            <div class="modal-actions">
                              <button class="btn btn-primary" type="submit">تنفيذ</button>
                              <button id="closeModal">الغاء</button>
                            </div>
                        </form>
                      </div>
                    </div>

                    <div class="modal" id="fileModal">
                      <div class="modal-content">
                        <div class="file-select">
                            <a href="{{route('admin.media-storage.create-vdo', $currentFolder->id)}}">اضافة فيديو مشفر</a>
                        </div>
                        <div  class="file-select">
                            <a href="{{route('admin.media-storage.create-iframe', $currentFolder->id)}}">اضافة iframe</a>
                        </div>
                        <div  class="file-select">
                            <a onclick="document.getElementById('fileInput').click()">اضافة ملف من الجهاز</a>
                            <input type="file" id="fileInput" onchange="uploadFile()" style="display:none;">
                        </div>
                        <div class="modal-actions">
                          <a id="closeFileModal" style="cursor: pointer;">الغاء</a>
                        </div>
                      </div>
                    </div>
                </div>
            </div>
        </div> <!-- end col -->
    </div> <!-- end row -->
@endsection

@section('script')
    <!-- Required datatable js -->
    <script src="{{ URL::asset('dashboard/plugins/datatables/jquery.dataTables.min.js') }}"></script>
    <script src="{{ URL::asset('dashboard/plugins/datatables/dataTables.bootstrap4.min.js') }}"></script>
    <!-- Buttons examples -->
    <script src="{{ URL::asset('dashboard/plugins/datatables/dataTables.buttons.min.js') }}"></script>
    <script src="{{ URL::asset('dashboard/plugins/datatables/buttons.bootstrap4.min.js') }}"></script>
    <script src="{{ URL::asset('dashboard/plugins/datatables/jszip.min.js') }}"></script>
    <script src="{{ URL::asset('dashboard/plugins/datatables/pdfmake.min.js') }}"></script>
    <script src="{{ URL::asset('dashboard/plugins/datatables/vfs_fonts.js') }}"></script>
    <script src="{{ URL::asset('dashboard/plugins/datatables/buttons.html5.min.js') }}"></script>
    <script src="{{ URL::asset('dashboard/plugins/datatables/buttons.print.min.js') }}"></script>
    <script src="{{ URL::asset('dashboard/plugins/datatables/buttons.colVis.min.js') }}"></script>
    <!-- Responsive examples -->
    <script src="{{ URL::asset('dashboard/plugins/datatables/dataTables.responsive.min.js') }}"></script>
    <script src="{{ URL::asset('dashboard/plugins/datatables/responsive.bootstrap4.min.js') }}"></script>

    <!-- Datatable init js -->
    <script src="{{ URL::asset('dashboard/assets/pages/datatables.init.js') }}"></script>


    <!-- Sweet-Alert  -->
    <script src="{{ URL::asset('dashboard/plugins/sweet-alert2/sweetalert2.min.js') }}"></script>
    <script type="text/javascript">
        const addFolderBtn = document.getElementById('addFolderBtn');
        const addFileBtn = document.getElementById('addFileBtn');
        const folderModal = document.getElementById('folderModal');
        const fileModal = document.getElementById('fileModal');
        const closeModalBtn = document.getElementById('closeModal');
        const closeFileModalBtn = document.getElementById('closeFileModal');
        const createFolderBtn = document.getElementById('createFolder');
        const folderList = document.getElementById('folderList');

        addFolderBtn.onclick = () => {
          folderModal.style.display = 'flex';
          document.getElementById('folderName').focus();
        };

        addFileBtn.onclick = () => {
          fileModal.style.display = 'flex';
        };

        closeModalBtn.onclick = () => {
          folderModal.style.display = 'none';
        };

        closeFileModalBtn.onclick = () => {
          fileModal.style.display = 'none';
        };

        createFolderBtn.onclick = () => {
          const name = document.getElementById('folderName').value.trim();
          const hint = document.getElementById('folderHint').value.trim();

          if (name) {
            const li = document.createElement('li');
            li.textContent = `📁 ${name}` + (hint ? ` — ${hint}` : '');
            folderList.appendChild(li);
          }

          // Reset & close
          document.getElementById('folderName').value = '';
          document.getElementById('folderHint').value = '';
          folderModal.style.display = 'none';
        };

        // Optional: close modal when clicking outside
        window.onclick = (e) => {
          if (e.target === folderModal) folderModal.style.display = 'none';
          if (e.target === fileModal) fileModal.style.display = 'none';
        };

        const folderGrid = document.getElementById('folderGrid');

        createFolderBtn.onclick = () => {
          const name = document.getElementById('folderName').value.trim();
          const hint = document.getElementById('folderHint').value.trim();

          if (name) {
            const div = document.createElement('div');
            div.className = 'icon-item';
            div.innerHTML = `📁<span>${name}</span>`;
            folderGrid.appendChild(div);
          }

          document.getElementById('folderName').value = '';
          document.getElementById('folderHint').value = '';
          folderModal.style.display = 'none';
        };

    </script>
    <script>
        $('.delete-confirm').click(function (event) {
            event.preventDefault();
            const url = $(this).attr('href');
            Swal.fire({
                title: "{{trans('labels.are_you_sure_deleting')}}",
                text: "{{trans('labels.you_wont_be_able_to_revert_this')}}",
                type: "warning",
                showCancelButton: true,
                cancelButtonText: "{{trans('labels.cancel')}}",
                confirmButtonColor: "#02a499",
                cancelButtonColor: "#ec4561",
                confirmButtonText: "{{trans('labels.yes_delete')}}"
            }).then(function (result) {
                if (result.value) {

                    Swal.fire({
                        title: "{{trans('labels.deleted')}}",
                        text: "",
                        type: "success",
                        confirmButtonText: "{{trans('labels.ok')}}"
                    });
                    $('<form action="'+url+'" method="post"> @csrf @method('delete')</form>').appendTo('body').submit();
                }
            });
        });
    </script>
    <script>
        document.addEventListener('click', function (e) {
          const isToggle = e.target.classList.contains('menu-toggle');

          // Close all open dropdowns
          document.querySelectorAll('.menu-dropdown').forEach(menu => {
            menu.style.display = 'none';
          });

          // Toggle the clicked one
          if (isToggle) {
            e.target.nextElementSibling.style.display = 'block';
            e.stopPropagation();
          }
        });
    </script>
    <script>
        const dropArea = document.getElementById('dropArea');
        const progressContainer = document.getElementById('progressContainer');
        const progressBar = document.getElementById('progressBar');

        // Handle drag events
        ['dragenter', 'dragover'].forEach(event => {
          dropArea.addEventListener(event, e => {
            e.preventDefault();
            dropArea.classList.add('dragover');
          });
        });

        ['dragleave', 'drop'].forEach(event => {
          dropArea.addEventListener(event, e => {
            e.preventDefault();
            dropArea.classList.remove('dragover');
          });
        });

        // Handle file drop
        dropArea.addEventListener('drop', e => {
          const file = e.dataTransfer.files[0];
          if (!file) return;

          const fd = new FormData();
          fd.append('file', file);
          fd.append('id', "{{$currentFolder->id}}");

          const xhr = new XMLHttpRequest();

          xhr.upload.addEventListener('progress', e => {
            if (e.lengthComputable) {
              const percent = (e.loaded / e.total) * 100;
              progressBar.style.width = `${percent}%`;
            }
          });

          xhr.onload = () => {
            if (xhr.status === 200) {
              console.log('Upload complete:', JSON.parse(xhr.responseText));
              progressBar.style.width = '100%';
              setTimeout(() => {
                progressContainer.style.display = 'none';
                progressBar.style.width = '0';
              }, 1000);
                window.location.reload();
            } else {
              alert('Upload failed');
            }
          };

          xhr.onerror = () => alert('Upload error');

          xhr.open('POST', '/control-panel/media-storage/upload');
          xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');

          // Show progress bar
          progressContainer.style.display = 'block';
          progressBar.style.width = '0';

          xhr.send(fd);
        });
    </script>
    <script type="text/javascript">
        function uploadFile(){
            const input = document.getElementById('fileInput');
            const file = input.files[0];
            if (!file) {
                alert("Please choose a file first.");
                return;
            }
            const fd = new FormData();
            fd.append('file', file);
            fd.append('id', "{{$currentFolder->id}}");

            const xhr = new XMLHttpRequest();

          xhr.upload.addEventListener('progress', e => {
            if (e.lengthComputable) {
              const percent = (e.loaded / e.total) * 100;
              progressBar.style.width = `${percent}%`;
            }
          });

          xhr.onload = () => {
            if (xhr.status === 200) {
              console.log('Upload complete:', JSON.parse(xhr.responseText));
              progressBar.style.width = '100%';
              setTimeout(() => {
                progressContainer.style.display = 'none';
                progressBar.style.width = '0';
              }, 1000);
                window.location.reload();
            } else {
              alert('Upload failed');
            }
          };

          xhr.onerror = () => alert('Upload error');

          xhr.open('POST', '/control-panel/media-storage/upload');
          xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');

          // Show progress bar
          progressContainer.style.display = 'block';
          progressBar.style.width = '0';

          xhr.send(fd);
        }
    </script>

@endsection