{% extends "base.html.twig" %}
{% block body %}
	<main id="main" class="main">

		<div class="pagetitle">
			<h1>Requirements</h1>
			<nav>
				<ol class="breadcrumb">
					<li class="breadcrumb-item">
						<a href="index.html">Admin</a>
					</li>
					<li class="breadcrumb-item">Requirements</li>
				</ol>
			</nav>
		</div>
		<!-- End Page Title -->

		<input type="hidden" id="livereur-url" value="{{ path('requirements_implement') }}">
		<section class="section">
            <!-- Table implementation -->

			<table class="table">
                <thead>
                    <tr>
                        <th scope="col">#</th>
                        <th scope="col">Name</th>
                        <th scope="col">Description</th>
                        <th scope="col">Priority</th>
                        <th style="display: flex; align-items: center; gap: 10px;" scope="col">
							<div class="form-check">
								<input class="form-check-input main-input" type="checkbox" id="main-check">
							</div>
							<label for="main-check" style="margin: 0px;">Check all</label>
						</th>
                    </tr>
                </thead>
                <tbody>
                    {% for requirement in requirements %}
                        <tr>
                            <td>{{ requirement.id }}</td>
                            <td>{{ requirement.name }}</td>
                            <td>{{ requirement.description }}</td>
                            <td style="color: {{ requirement.priority.color }}">{{ requirement.priority.title }}</td>
                            <td style="display: flex; align-items: center; gap: 10px;" scope="col">
                                <div class="form-check">
                                    <input class="form-check-input sub" type="checkbox" {% if requirement.isImplemented == 1 %}checked disabled {% endif %} data-requirement="{{ requirement.name }}">
                                </div>
								<small style="font-size: 13px;">
									{% if requirement.isImplemented == 1 %}(implemented){% endif %}
									{% if requirement.isImplemented == 0 %}(not implemented){% endif %}
								</small>
                            </td>
                        </tr>
                    {% endfor %}
					<tr>
						<td></td>
						<td></td>
						<td></td>
						<td></td>
						<td>
							<button type="button" class="btn btn-primary btn-sm implement-button-test">implement</button>
						</td>
					</tr>
                </tbody>
            </table>

            <!-- Table implementation -->

            <!-- Basic Modal -->
				<button style="display: none;" type="button" class="btn btn-primary modal-button" data-bs-toggle="modal" data-bs-target="#basicModal">
					Basic Modal
				</button>
				<div class="modal fade" id="basicModal" tabindex="-1">
					<div class="modal-dialog">
						<div class="modal-content" style="width: 400px;">
							<div class="modal-header">
								<h5 class="modal-title">Requirements</h5>
								<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
							</div>
							<div class="modal-body" style="width: 100%; display: flex; justify-content: center; align-items: center; gap: 25px; flex-wrap: wrap;">
								
							</div>
							<div class="modal-footer">
								<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
							</div>
						</div>
					</div>
				</div><!-- End Basic Modal-->

		</section>

	</main>

	<script>
        document.addEventListener("DOMContentLoaded", function(event) {
			let mainInput = document.querySelector('.main-input');
            let inputs = document.querySelectorAll('.sub');
			let button = document.querySelector('.implement-button-test')

			mainInput.addEventListener("change", (event) => {
				let mainInputCheck = mainInput.checked;

				inputs.forEach(input => {
					if(input.disabled) return;
					input.checked = mainInputCheck;
				})
			})

			button.addEventListener('click', () => {
				let checkedInputs = Array.from(document.querySelectorAll('input[type="checkbox"]:checked')).filter(input => !input.classList.contains('main-input') && !input.disabled);

				implementCheckedInputs(checkedInputs);
			});
        });

		async function httpRequestHandler(requirement, route) {
            const url = document.querySelector("#requirement-url").value;

			try {
				let response = await fetch(url, {
					method: 'POST',
					headers: {
						'Content-Type': 'application/json',
						'Accept': 'application/json'
					},
					body: JSON.stringify({
						requirement: requirement,
					})
				});

				let data = await response.json();

				console.log('data', data);
				return data;
			} catch (error) {
				console.error('error', error.message);
				return { message: "Requirement failed", success: false };
			}
		}

		async function checkAllBoxes(inputs) {
			inputs.forEach(input => {
				input.isChecked = true;
			})
		}

		async function implementCheckedInputs(inputs) {
			if (inputs.length <= 0) return;

			let modalButton = document.querySelector('.modal-button');
			let modalBody = document.querySelector('.modal-body');

			let promisesArray = [];

			inputs.forEach(input => {
				let requirement = input.dataset.requirement;
				let isChecked = input.checked ? true : false;

				promisesArray.push(new Promise(async (resolve, reject) => {
					try {
						let result = await httpRequestHandler(requirement, 'implement');
						resolve(result);
					} catch (error) {
						reject(error);
					}
				}));
			});

			let results = await Promise.allSettled(promisesArray);

			let modalContent = '<ul>';

			results.forEach((result, index) => {
				let requirement = inputs[index].dataset.requirement;

				modalContent += `
					<li>Operation: Implement ${requirement}</li>
					<ul>
						<li>Message: ${result.value.message}</li>
						<li style="display: flex; gap: 5px;">
							<p style="margin: 0">Status :</p>
							<p style="color: ${result.value.success ? "green" : "red"}">${result.value.success ? "Success" : "Failure"}</p>
						</li>
					</ul>
				`;
			});

			modalContent += '</ul>'

			modalBody.innerHTML = modalContent;

			modalButton.click();
		}
	</script>
{% endblock %}