@extends('dashboard.layouts.main')

@section('content')
<div class="container mt-5">
    <div class="row">

        <!-- Display Uploaded Files at the Top -->
        <div class="col-md-12 mb-4">
    <h2 class="mb-3">Indexes</h2>
    <div class="d-flex flex-wrap gap-4">
        @if (count($files) > 0)
            @foreach ($files as $file)
                <div class="d-flex flex-column align-items-center">
                    <!-- File Icon -->
            
                    <a href="{{ route('file.download.employee', ['folder' => '0', 'fileName' => basename($file['file_name'])]) }}" target="_blank">
                        <img src="{{ asset('fileimage.png') }}" alt="File Icon" width="50" />
                    </a>
                  
                    <!-- File Name -->
                    <p class="mt-2 mb-2">
            {{ \Illuminate\Support\Str::limit(basename($file->file_name), 15, '...') }}
                   </p>
                    <!-- Delete Button -->
                  
                    <form action="{{ route('file.delete.employee', ['folder_id' => 0, 'filename' => basename($file['file_name'])]) }}" method="POST" class="d-inline" onsubmit="return confirm('Are you sure you want to delete this file?');">
                        @csrf
                        @method('DELETE')
                        <button type="submit" class="btn btn-danger btn-sm">Delete</button>
                    </form>
                   
                </div>
            @endforeach
        @else
            <p class="text-muted">No files uploaded yet.</p>
        @endif
    </div>
</div>


        <!-- Display Folders Below -->
        <div class="col-md-12 mb-4">
            <h2 class="mb-3">Folders</h2>
            <div class="d-flex flex-wrap gap-3">
                @foreach ($foldersdata as $folder)
                    <div class="text-center">
                        <!-- Folder Icon -->
                        <a href="{{ route('folder.show.employee', $folder['id']) }}">
                            <img src="{{ asset('foldericon.png') }}" alt="Folder Icon" width="50" />
                        </a>
                        <!-- Folder Name -->
                        <p class="mt-2">{{ $folder['name'] }}</p>
                    </div>
                @endforeach
            </div>
        </div>

        <!-- File Upload Section -->
        <div class="col-md-8 offset-md-2">
            <h1 class="mb-4 text-center">File Upload</h1>

            <!-- Error Message -->
            @if ($errors->any())
                <div class="alert alert-danger alert-dismissible fade show" role="alert">
                    {{ $errors->first() }}
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                </div>
            @endif

            <!-- File Upload Form -->
            <div class="card mb-1">
                <div class="card-header bg-primary text-white d-flex justify-content-between">
                    <!-- Upload File
                    <button class="btn btn-sm btn-light" data-bs-toggle="modal" data-bs-target="#createFolderModal">
                        <i class="fas fa-folder-plus"></i> Create Folder
                    </button> -->
                </div>
                <div class="card-body">
                    <form action="{{ route('file.upload.employee.form') }}" method="POST" enctype="multipart/form-data">
                        @csrf
                        <div class="mb-3">
                            <label for="folder" class="form-label">Choose Folder:</label>
                            <select name="folder" id="folder" class="form-select">
                                <option value="0">Index Folder</option>
                                @foreach ($foldersdata as $folder)
                                    <option value="{{ $folder->id }}">{{ $folder->name }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="mb-3">
                            <label for="file" class="form-label">Choose File:</label>
                            <input type="file" name="file" id="file" class="form-control" required>
                        </div>
                        <button type="submit" class="btn btn-success w-100">Upload</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Create Folder Modal -->
<div class="modal fade" id="createFolderModal" tabindex="-1" aria-labelledby="createFolderModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="createFolderModalLabel">Create Folder</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form action="{{ route('folder.create') }}" method="POST">
                    @csrf
                    <div class="mb-3">
                        <label for="folderName" class="form-label">Folder Name:</label>
                        <input type="text" name="name" id="folderName" class="form-control" required>
                    </div>
                    <button type="submit" class="btn btn-primary w-100">Save</button>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection