@extends('layouts.app')
@section('content')
<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>
<div class="content mt-3">
    <div class="card shadow mb-4">
        <div class="card-body">
            <div class="">
                <div class="table-responsive">
                    <table class="table table-bordered data-table" id="dataTable" width="100%" cellspacing="0">
                        <thead>
                            <tr>
                                <th>Sr</th>
                                <th>Phase</th>
                                <th>Milestone</th>
                                <th>Financial Milestone</th>
                                <!-- <th>Next Steps</th> -->
                                <th>Task Owner</th>
                                <th>Planned Start Date</th>
                                <th>Actual Start Date</th>
                                <th>Planned End Date</th>
                                <th>Actual End Date</th>
                                <th>Days Used</th>
                                <th>Status</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
</div>
@include('view-modals/project_milestone_addedit')
@include('view-modals/update_milestone_addedit')
@stop


@section('scripting')
<script type="text/javascript">

    $(document).ready(function() {
        $(".standardSelect").selectpicker();

        $('.standardSelect').on('change', function() {
            $(this).valid();
            $('.standardSelect').selectpicker('refresh');
        });

        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });



        var leadId = @json($lead -> id);
        console.log(leadId);

        var table = $('.data-table').DataTable({
            processing: true,
            serverSide: true,
            scrollX: true,
            ajax: {
                url: "{{ url('getProjectMilestoneData') }}/{{$lead->id}}",
                type: "GET",
                data: {
                    _token: "{{ csrf_token() }}",
                }
            },
            columns: [{
                    data: 'DT_RowIndex',
                    name: 'DT_RowIndex'
                },
                {
                    data: 'phase',
                    name: 'phase'
                },
                {
                    data: 'milestone',
                    name: 'milestone'
                },
                {
                    data: 'financial_milestone',
                    name: 'financial_milestone'
                },
                // {
                //     data: 'next_steps',
                //     name: 'next_steps'
                // },
                {
                    data: 'task_owner_id',
                    name: 'task_owner_id'
                },
                {
                    data: 'planned_start_date',
                    name: 'planned_start_date'
                },
                {
                    data: 'actual_start_date',
                    name: 'actual_start_date'
                },
                {
                    data: 'planned_end_date',
                    name: 'planned_end_date'
                },
                {
                    data: 'actual_end_date',
                    name: 'actual_end_date'
                },
                {
                    data: 'days_used',
                    name: 'days_used'
                },
                {
                    data: 'status',
                    name: 'status'
                },
                {
                    data: 'action',
                    name: 'action',
                    orderable: false,
                    searchable: false
                }
            ],

            language: {
                search: "_INPUT_",
                searchPlaceholder: "Search milestones...",
            }
        });


        // $(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);
        //     });
        // });

        $('body').on('click', '.editMilestone', function() {
            let id = $(this).data('id');
            console.log("editing :", id);
            resetModal();
            $.get("{{ url('milestone/edit') }}/" + id, function(data) {
                $('#id').val(data.id);
                $('#ajaxModel').modal('show');
                $('#phase').val(data.phase);
                $('#milestone').val(data.milestone);
                $('#planned_start_date').val(data.planned_start_date);
                $('#planned_end_date').val(data.planned_end_date);
                $('#actual_start_date').val(data.actual_start_date);
                $('#actual_end_date').val(data.actual_end_date);
                $('#task_owner_id').val(data.task_owner_id).trigger('change');
                $('#financial_milestone').prop('checked', data.financial_milestone == 1);
                $('#notes').val(data.notes);


                $('#modelHeading').text('Edit Milestone');
            });
        });

        // Submit full edit form
        $('#saveBtn').click(function(e) {
            e.preventDefault();
            let id = $('#id').val();
            $.ajax({
                data: $('#dataForm').serialize(),
                url: "{{ url('milestone/update') }}/" + id,
                type: "POST",
                dataType: 'json',
                success: function(data) {
                    $('#dataForm').trigger("reset");
                    $('#ajaxModel').modal('hide');
                    table.draw();
                    swal("Success!", data.msg, "success");
                },
                error: function(data) {
                    if (data.status == 422) {
                        var x = data.responseJSON;
                        $.each(x.errors, function(index, value) {
                            $("#" + index).addClass("is-invalid");
                            $("#" + index + "-error").html(value[0]);
                        });
                    }
                    $('#saveBtn').html('Save Changes');
                }
            });
        });

        // Open status update modal
        $('body').on('click', '.updateStatus', function() {
            let id = $(this).data('id');
            resetModal();

            $.get("{{ url('milestone/edit') }}/" + id, function(data) {
                $('#milestone_Id').val(data.id); // Hidden input for id
                $('#status').val(data.status).selectpicker('refresh'); // Set status and refresh selectpicker if used
                $('#actual_end_date').val(data.actual_end_date); // Set actual end date

                $('#status-error').text('');

                $('#UpdateModal').modal('show');
            });
        });


        // Submit status update
        $('#updateForm').on('submit', function(e) {
            e.preventDefault();
            let id = $('#milestone_Id').val();
            console.log('Updating milestone id:', id);
            $.ajax({
                data: $(this).serialize(),
                url: "{{ url('milestone/status-update') }}/" + id,

                type: "POST",
                dataType: 'json',
                success: function(data) {
                    $('#updateForm')[0].reset();
                    $('#UpdateModal').modal('hide');
                    table.draw();
                    swal("Success!", data.msg, "success");
                },
                error: function(data) {
                    if (data.status == 422) {
                        var x = data.responseJSON;
                        if (x.errors.status) $('#status-error').text(x.errors.status[0]);
                        if (x.errors.actual_end_date) $('#actual_end_date-error').text(x.errors.actual_end_date[0]);
                    }
                }
            });
        });



    });


    function resetModal() {
    // Reset all form fields
    $("#id").val("");
    $("#milestone_Id").val("");
    $("#task_owner_id").val("");
    $("#notes").val("");
    $("#status").val("");

    $('.standardSelect').selectpicker('refresh');

    $("#task_owner_id, #planned_start_date, #planned_end_date, #actual_start_date, #actual_end_date, #notes, #status").removeClass("is-invalid");

    $("#notes-error").text("");
    $("#status-error").text("");

    $('#saveBtn').html('Save Changes');
}

</script>


@endsection