@extends('layout.master')
@section('content')
<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">Edit 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">
            @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>
        </div>
        <div class="d-flex">
            @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>
    <div class="row card custom-card">
        <div class="card-body">
            <form action="{{ route('task.update',$task->id) }}" method="POST" enctype="multipart/form-data">
                
            
            @method('PUT')
            @csrf

                <div class="mb-3">
                    <label for="name" class="form-label">Task Name</label>
                    <input type="text" class="form-control" id="name" name="name" value="{{ $task->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">{{ $task->task_detail }}</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[]" multiple>
                        @foreach ($users as $user)
                            <option value="{{ $user->id }}" 
                                {{ in_array($user->id, $task->taskteam->pluck('user_id')->toArray()) ? 'selected' : '' }}>
                                {{ $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" {{ ($task->periority == 'High') ? "Selected":"" }}>High</option>
                    <option value="Medium" {{ ($task->periority == 'Medium') ? "Selected":"" }}>Medium</option>
                        <option value="Low" {{ ($task->periority == 'Low') ? "Selected":"" }}>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" {{ ($task->status == 'Open') ? "Selected":"" }}>Open</option>
                        <option value="In Progress" {{ ($task->status == 'In Progress') ? "Selected":"" }}>In Progress</option>
                        <option value="Completed" {{ ($task->status == 'Completed') ? "Selected":"" }}>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>

                @if($task->files)
                    @foreach($task->files as $note)
                        <div style="margin-top: 15px; display: flex; align-items: center; border-radius: 5px; background-color: #f9f9f9; gap: 5px;" class='p-3'>
                            <a href="{{ asset($note->file) }}" target="_blank" class="btn btn-success">View</a>
                            <a onclick="confirmDelete('{{ route('task.filedelete', $note->id) }}')" class="btn btn-danger">Delete</a>
                        </div>
                    @endforeach
                @endif

                <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/sweetalert2@11"></script>

<script>

function confirmDelete(url) {
        Swal.fire({
            title: "Are you sure?",
            text: "This action cannot be undone!",
            icon: "warning",
            showCancelButton: true,
            confirmButtonColor: "#d33",
            cancelButtonColor: "#3085d6",
            confirmButtonText: "Yes, delete it!",
            cancelButtonText: "Cancel",
        }).then((result) => {
            if (result.isConfirmed) {
                window.location.href = url; // Redirect to the delete route
            }
        });
    }

$(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