@extends('layouts.app')
@section('content')

    <!-- PAGE-HEADER -->
    <div class="page-header">
        <div>
            <h1>Project Milestones</h1>
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="#">Home</a></li>
                <li class="breadcrumb-item active" aria-current="page">Dashboard</li>
            </ol>
        </div>

        <div class="float-end">
            <button type="button" class="modal-effect btn btn-primary d-grid mb-3" data-bs-effect="effect-scale"
                data-bs-toggle="modal" id="createNewMilestone" data-bs-target="#MilestoneModel"> Add Project
                Milestone</button>
        </div>
    </div>
    <!-- PAGE-HEADER END -->

    <table class="table" id="milestoneTable">
        <thead>
            <tr>
                <th>#</th>
                <th>Milestone</th>
                <th>Phase</th>
                <th>Status</th>
                <th>Completion Date</th>
                <th>Financial Milestone</th>
                <th>Next Steps</th>
                <th>Task Owner</th>
                <th>Planned Start Date</th>
                <th>Start Date</th>
                <th>Planned End Date</th>
                <th>End Date</th>
                <th>Days Used</th>
                <th>Notes</th>
            </tr>
        </thead>
    </table>

    <script>
        $(document).ready(function() {
            $('#milestoneTable').DataTable({
                processing: true,
                serverSide: true,
                ajax: "{{ url('lead/' . $lead->id . '/milestones/data') }}",
                columns: [{
                        data: 'DT_RowIndex',
                        name: 'DT_RowIndex'
                    },
                    {
                        data: 'milestone',
                        name: 'milestone'
                    },
                    {
                        data: 'phase',
                        name: 'phase'
                    },
                    {
                        data: 'status',
                        name: 'status',
                        orderable: false
                    },
                    {
                        data: 'completion_date',
                        name: 'completion_date',
                        orderable: false
                    },
                    {
                        data: 'financial_milestone',
                        name: 'financial_milestone'
                    },
                    {
                        data: 'next_steps',
                        name: 'next_steps'
                    },
                    {
                        data: 'task_owner',
                        name: 'task_owner'
                    },
                    {
                        data: 'planned_start_date',
                        name: 'planned_start_date'
                    },
                    {
                        data: 'start_date',
                        name: 'start_date'
                    },
                    {
                        data: 'planned_end_date',
                        name: 'planned_end_date'
                    },
                    {
                        data: 'end_date',
                        name: 'end_date'
                    },
                    {
                        data: 'days_used',
                        name: 'days_used',
                        render: function(data, type, row) {
                            if (row.start_date && row.end_date) {
                                let startDate = new Date(row.start_date);
                                let endDate = new Date(row.end_date);
                                let timeDiff = Math.abs(endDate - startDate);
                                let daysDiff = Math.ceil(timeDiff / (1000 * 3600 * 24));
                                return daysDiff;
                            }
                            return "N/A";
                        }
                    },
                    {
                        data: 'notes',
                        name: 'notes'
                    }
                ]
            });

            $(document).on('change', '.milestone-status, .milestone-date', function() {
                let id = $(this).data('id');
                let status = $(this).is(':checked') ? 1 : 0;
                let completion_date = $(this).closest('tr').find('.milestone-date').val();

                $.post("{{ url('lead/' . $lead->id . '/milestones/update') }}", {
                    _token: "{{ csrf_token() }}",
                    id: id,
                    status: status,
                    completion_date: completion_date
                }, function(response) {
                    alert(response.msg);
                });
            });
        });
    </script>