@extends('layout.master')
@section('content')

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <style>
        .preview-container img {
            max-width: 100px;
            margin: 10px;
            border: 1px solid #ddd;
            border-radius: 5px;
        }
        .preview-container {
            display: flex;
            flex-wrap: wrap;
        }
        .remove-btn {
            display: block;
            text-align: center;
            cursor: pointer;
            color: red;
            font-size: 14px;
        }
    </style>
    
<div class="main-content app-content">
    <div class="container-fluid">
        <div class="d-md-flex d-block align-items-center justify-content-between page-header-breadcrumb">
            <div>
                <h2 class="main-content-title fs-24 mb-1">Create Task</h2>
                <ol class="breadcrumb mb-0">
                    <li class="breadcrumb-item"><a href="javascript:void(0)">Home</a></li>
                    <li class="breadcrumb-item active" aria-current="page">Form</li>
                </ol>
            </div>
            <div class="d-flex">
            </div>
        </div>
    <div class="row card custom-card">
        <div class="card-body">
            <form action="{{ route('task.store') }}" method="POST" enctype="multipart/form-data">
                @csrf

                <div class="mb-3">
                    <label for="name" class="form-label">Task Name</label>
                    <input type="text" class="form-control" id="name" name="name" required>
                    <input type="hidden" value="{{ Auth::user()->id }}" class="form-control" id="name" name="created_by" required>
                </div>

                <div class="mb-3">
                    <label for="name" class="form-label">Task Name</label>
                    <textarea name="task_detail" cols="130" rows="5"></textarea>
                    <div id="editor"></div>
                </div>


                <div class="mb-3">
                    <label for="team" class="form-label">Team Members</label>
                    <select class="form-control" id="team" name="team[]" id="choices-multiple-remove-button" multiple>
                        @foreach ($users as $user)
                            <option value="{{ $user->id }}">{{ $user->name }}</option>
                        @endforeach
                    </select>
                </div>


                <div class="mb-3">
                    <label for="periority" class="form-label">Priority</label>
                    <select class="form-control" id="periority" name="periority" required>
                    <option value="" >Select Option</option>
                        <option value="High">High</option>
                        <option value="Medium">Medium</option>
                        <option value="Low">Low</option>
                    </select>
                </div>

                <div class="mb-3">
                    <label for="status" class="form-label">Status</label>
                    <select class="form-control" id="status" name="status" required>
                        <option value="Open">Open</option>
                        <option value="In Progress">In Progress</option>
                        <option value="Completed">Completed</option>
                    </select>
                </div>

                

            

                <div class="mb-3">
                    <label for="files" class="form-label">Task Files</label>
                    <input type="file" class="form-control" id="files" name="files[]" multiple>
                    <div class="preview-container" id="preview-container"></div>
                </div>




                <button type="submit" class="btn btn-primary">Submit</button>
            </form>
        </div>
    </div>

    </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

<script>



$(document).ready(function () {
    
    const previewContainer = $('#preview-container');
    const imagesInput = $('#files');

    // Preview Images
    imagesInput.on('change', function () {
        previewContainer.empty(); // Clear previous previews
        const files = this.files;

        Array.from(files).forEach((file, index) => {
            const reader = new FileReader();

            reader.onload = function (event) {
                const imagePreview = `
                    <div class="preview-wrapper" data-index="${index}">
                        <img src="${event.target.result}" alt="Image Preview">
                        <span class="remove-btn" data-index="${index}">Remove</span>
                    </div>
                `;
                previewContainer.append(imagePreview);
            };

            reader.readAsDataURL(file);
        });
    });

    // Remove Image from Preview
    previewContainer.on('click', '.remove-btn', function () {
        const index = $(this).data('index');
        const previewWrapper = $(`.preview-wrapper[data-index="${index}"]`);
        previewWrapper.remove();

        // Remove the file from the input
        const files = Array.from(imagesInput[0].files);
        files.splice(index, 1);

        // Create a new FileList object
        const dataTransfer = new DataTransfer();
        files.forEach(file => dataTransfer.items.add(file));
        imagesInput[0].files = dataTransfer.files;
    });
});


</script>

@endsection