@extends('layoutsteacher.layouts')

@section('title', 'Video Content')
@section('content')
{{-- <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" rel="stylesheet"> --}}

<style>
    body {
        /* padding: 20px; */
    }
    .form-container {
        max-width: 800px;
        margin: 0 auto;
    }
    .folder-icon {
        font-size: 4rem;
        color: #555;
    }
    .pagination .page-link {
        color: #007bff;
    }
</style>

<div class="content" id="mainContent">
    <div class="container mt-5">
        <!-- Header Section -->
        <div class="d-flex justify-content-between mb-3">
            <h4>Video Content</h4>
            <div class="d-flex gap-2">
                <button class="btn">
                    <img src="{{ asset('icon/icon-trash.png') }}" width="25" height="25"> Delete
                </button>
                <button class="btn btn-primary text-light border" data-bs-toggle="modal" data-bs-target="#addFolderModal">
                    + Add New Folder
                </button>
            </div>
        </div>

        <div class="row" id="folderList">
            @foreach($folders as $folder)
                <div class="col-md-3 mb-4">
                    <a href="{{ route('folder.view', basename($folder)) }}" style="text-decoration: none;">
                        <div class="card text-center">
                            <div class="card-body">
                                <h5 class="card-title mt-3">{{ basename($folder) }}</h5>
                                <img src="{{ asset('icon/icon-folder.png') }}" width="100">
                            </div>
                        </div>
                    </a>
                </div>
            @endforeach
        </div>
    </div>
</div>

<!-- Modal for Creating Folder -->
<div class="modal fade" id="addFolderModal" tabindex="-1" aria-labelledby="addFolderModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="addFolderModalLabel">Create New Folder</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form id="createFolderForm" action="{{ route('folder.create') }}" method="POST">
                @csrf
                <div class="modal-body">
                    <div class="mb-3">
                        <label for="folderName" class="form-label">Folder Name</label>
                        <input type="text" name="name" id="folderName" class="form-control" placeholder="Enter folder name" required>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-primary">Create Folder</button>
                </div>
            </form>
        </div>
    </div>
</div>

<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script> <!-- Include SweetAlert2 -->

<script>
    document.getElementById('createFolderForm').addEventListener('submit', function(event) {
        event.preventDefault();

        const formData = new FormData(this);

        // Get JWT token (update this if you store it differently)
        const token = localStorage.getItem('token'); // e.g., "Bearer eyJ..."

        fetch('{{ route("subfolder.create") }}', {
            method: 'POST',
            body: formData,
            headers: {
                'Authorization': token // Make sure this includes the "Bearer " prefix
            },
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                Swal.fire({
                    icon: 'success',
                    title: 'Folder Created',
                    text: 'The folder was created successfully!',
                    confirmButtonText: 'OK',
                }).then(() => {
                    $('#addFolderModal').modal('hide');

                    const folderList = document.querySelector('.row'); // Ensure it's scoped correctly
                    const newFolderHTML = `
                        <div class="col-md-3 mb-4">
                            <a href="/folder/${data.folderPath}" style="text-decoration: none;">
                                <div class="card text-center">
                                    <div class="card-body">
                                        <h5 class="card-title mt-3">${data.folderName}</h5>
                                        <img src="{{ asset('icon/icon-folder.png') }}" width="100">
                                    </div>
                                </div>
                            </a>
                        </div>
                    `;
                    folderList.innerHTML += newFolderHTML;

                    // Optional: reload if needed
                    // location.reload();
                });
            } else {
                Swal.fire({
                    icon: 'error',
                    title: 'Error',
                    text: data.message || 'An error occurred.',
                    confirmButtonText: 'OK',
                });
            }
        })
        .catch(error => {
            console.error('Error:', error);
            Swal.fire({
                icon: 'error',
                title: 'Network Error',
                text: 'Something went wrong. Please try again.',
                confirmButtonText: 'OK',
            });
        });
    });
</script>
@endsection