@extends('layouts.app')

@section('content')
<section class="pcoded-main-container">
    <div class="pcoded-wrapper">
        <div class="pcoded-content">
            <div class="pcoded-inner-content">
                <div class="main-body">
                    <div class="page-wrapper">
                        <div class="page-header">
                            <h5>Milestones</h5>
                        </div>
                        <div class="card">
                            <div class="card-body">
                                <!-- Add Milestone Button -->
                                <div class="d-flex justify-content-end mb-3">
                                    <button type="button" id="addRowBtn" class="btn btn-primary btn-sm">
                                        <i class="fas fa-plus me-1"></i> Milestone
                                    </button>
                                </div>

                                <!-- Milestone Form -->
                                <form action="{{ route('milestone.store', $id) }}" method="POST">
                                    @csrf
                                    <table class="table table-bordered">
                                        <thead>
                                            <tr>
                                                <th>Phase</th>
                                                <th>Keterangan</th>
                                                <th>Tarikh</th>
                                                <th>Action</th>
                                            </tr>
                                        </thead>
                                        <tbody id="milestoneTableBody">
                                            <!-- Default new milestone row -->
                                            @if ($milestones->isEmpty())
                                            <tr class="default-row">
                                                <td><input type="text" name="new[phase][]" class="form-control" placeholder="Phase"></td>
                                                <td><input type="text" name="new[penerangan][]" class="form-control" placeholder="Keterangan"></td>
                                                <td><input type="date" name="new[tarikh][]" class="form-control"></td>
                                                <td></td>
                                            </tr>
                                            @endif

                                            <!-- Existing milestones -->
                                            @foreach ($milestones as $milestone)
                                            <tr>
                                                <td>
                                                    <textarea name="existing[{{ $milestone->id }}][phase]" class="form-control" rows="3" placeholder="Phase">{{ $milestone->phase }}</textarea>
                                                </td>
                                                <td>
                                                    <textarea name="existing[{{ $milestone->id }}][penerangan]" class="form-control" rows="3" placeholder="Keterangan">{{ $milestone->penerangan }}</textarea>
                                                </td>
                                                <td>
                                                    <input type="date" name="existing[{{ $milestone->id }}][tarikh]" value="{{ $milestone->tarikh }}" class="form-control">
                                                </td>
                                                <td class="text-center align-middle">
                                                    <button type="button" class="delete-milestone-btn text-danger border-0 bg-transparent p-0" 
                                                            data-id="{{ $milestone->id }}" title="Delete">
                                                        <i class="fas fa-trash"></i>
                                                    </button>
                                                </td>
                                            </tr>
                                            @endforeach
                                        </tbody>
                                    </table>

                                    <!-- Submit Button -->
                                    <div class="text-right">
                                        <button type="submit" class="btn btn-primary">Simpan</button>
                                    </div>
                                </form>

                                <!-- Hidden Template Row -->
                                <table style="display: none;">
                                    <tbody>
                                        <tr id="milestoneTemplate">
                                            <td><input type="text" name="new[phase][]" class="form-control" placeholder="Phase"></td>
                                            <td><input type="text" name="new[penerangan][]" class="form-control" placeholder="Keterangan"></td>
                                            <td><input type="date" name="new[tarikh][]" class="form-control"></td>
                                            <td>
                                                <button type="button" class="btn btn-danger btn-sm removeRow">Remove</button>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- JavaScript -->
<script>
    document.addEventListener('DOMContentLoaded', function () {
        const addRowBtn = document.getElementById('addRowBtn');
        const tableBody = document.getElementById('milestoneTableBody');
        const templateRow = document.getElementById('milestoneTemplate');

        addRowBtn.addEventListener('click', function () {
            const newRow = templateRow.cloneNode(true);
            newRow.removeAttribute('id');
            newRow.style.display = '';
            tableBody.appendChild(newRow);
        });

        tableBody.addEventListener('click', function (e) {
            if (e.target && e.target.classList.contains('removeRow')) {
                const row = e.target.closest('tr');
                if (!row.classList.contains('default-row')) {
                    row.remove();
                }
            }
        });

        // Handle deletion via AJAX
        document.querySelectorAll('.delete-milestone-btn').forEach(button => {
            button.addEventListener('click', function () {
                const milestoneId = this.getAttribute('data-id');

                if (!confirm('Are you sure you want to delete this milestone?')) return;

                fetch("{{ url('milestone') }}/" + milestoneId, {
                    method: 'DELETE',
                    headers: {
                        'X-CSRF-TOKEN': '{{ csrf_token() }}',
                        'Accept': 'application/json',
                    },
                })
                .then(response => {
                    if (response.ok) {
                        this.closest('tr').remove();
                    } else {
                        alert('Failed to delete milestone.');
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                    alert('An error occurred while deleting the milestone.');
                });
            });
        });
    });
</script>

@endsection