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

<!-- summernote -->
<link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote.min.css" rel="stylesheet">

<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 Project</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>
        @if(session('success'))
            <div class="alert alert-success alert-dismissible fade show" role="alert">
                {{ session('success') }}
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        @endif
        <div class="row card custom-card">
            <div class="card-body">
                <form
                    action="{{ route('project.store') }}"
                    method="POST"
                    enctype="multipart/form-data"
                >
                    @csrf

                    <div class="mb-3">
                        <label for="name" class="form-label">Project Name</label>
                        <input
                            type="text"
                            class="form-control"
                            id="name"
                            name="project_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">Project Date</label>
                        <input
                            type="date"
                            class="form-control"
                            id="name"
                            name="date"
                            required
                        />
                       
                    </div>



                    <div class="mb-3">
                        <label for="name" class="form-label">Project Detail</label>
                        <textarea name="project_detail"></textarea>

                    </div>

                    <div class="mb-3">
                        <label for="team" class="form-label"
                            >Team Members</label
                        >
                        <select
                            class="select2 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="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 src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote.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