@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(80px, 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;
        }

    </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">
                    <div class="container">
                        <div class="main-folder-body-header">
                          <h5>الرئيسية</h5>
                          <button id="addFolderBtn">+ مجلد جديد</button>
                        </div>
                        @if($folders->count() > 0 || $files->count() > 0)
                            <div class="icon-grid" id="folderGrid">
                                @foreach($folders as $folder)
                                <div class="icon-item">
                                    <a href="{{route('admin.media-storage.show', $folder->id)}}">
                                        <img height="50px" src="{{asset('dashboard/folder.svg')}}">
                                        <span>{{$folder->title}}</span>
                                    </a>
                                </div>
                                @endforeach
                                <!-- @foreach($files as $file)
                                <div class="icon-item">
                                    <a href="{{route('admin.media-storage.show', $file->id)}}" target="_blank">
                                        <img height="50px" src="{{$file->file_image_full_path}}">
                                        <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')}}" 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>
            </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 folderModal = document.getElementById('folderModal');
const closeModalBtn = document.getElementById('closeModal');
const createFolderBtn = document.getElementById('createFolder');
const folderList = document.getElementById('folderList');

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

closeModalBtn.onclick = () => {
  folderModal.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';
};

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