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

<!-- PAGE-HEADER -->
<div class="page-header">
    <div>
        <h1>Project Plan <small>Details & Management</small></h1>
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="#">Home</a></li>
            <li class="breadcrumb-item active" aria-current="page">Project Plan</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="createNewProjectPlan" data-bs-target="#ProjectPlanModel"> Add Project Plan</button>
    </div>
</div>
<!-- PAGE-HEADER END -->

<div class="content mt-3">
    <div class="card">
        <div class="card-body">
            <table class="table table-bordered table-hover data-table" width="100%">
                <thead>
                    <tr>
                        <th>Sr.</th>
                        <th>Milestone</th>
                        <th> Start Date</th>
                        <th> End Date</th>
                        <th> Status</th>
                        <th> Invoiced At</th>
                        <th>Payment Status</th>

                        {{-- <th>Total Payments</th> --}}
                        <th>Remarks</th>
                        <th>Last Update</th>
                        <th width="180px">Action</th>
                    </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
        </div>
    </div>
</div>

@include('view-modals/project_plan_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 table = $('.data-table').DataTable({
            processing: true,
            serverSide: true,
            scrollX:true,
            ajax: "{{ url('getProjectPlanData') }}/{{$project->id}}",
            columns: [
                {data: 'DT_RowIndex', name: 'DT_RowIndex'},
                {data: 'milestone', name: 'milestone'},
                {data: 'start_date', name: 'start_date'},
                {data: 'end_date', name: 'end_date'},
                {data: 'status', name: 'status'},
                {data: 'invoice_at', name: 'invoice_at'},
                // {data: 'total_payment', name: 'total_payment'},
                {data: 'payment_status', name: 'payment_status'},
                {data: 'remarks', name: 'remarks'},
                {data: 'updated_at', name: 'updated_at', orderable: false, searchable: false},
                {data: 'action', name: 'action', orderable: false, searchable: false},
            ],
            language: {
                search: "_INPUT_",
                searchPlaceholder: "Search records",
            }
        });

        $('#createNewProjectPlan').click(function () {
            reset_modal();

            let project_id = "{{ $project->id }}";
            $('#saveBtn').val("Create");
            $('#dataForm').trigger("reset");
            $('#modelHeading').html("Create New Project Plan");
            $('#project_id').val(project_id);
            $('#ajaxModel').modal('show');
        });

        $('body').on('click', '.editProjectPlan', function () {
            var project_plan_id = $(this).data('id');
            reset_modal();
            $.get("{{ url('projectplan/edit') }}" +'/' + project_plan_id, function (data) {
                $('#modelHeading').html("Edit Project Plan");
                $('#saveBtn').val("Save Changes");
                $('#ajaxModel').modal('show');
                $('#id').val(data.id);
                $('#project_id').val(data.project_id);
                $('#milestone').val(data.milestone);
                $('#start_date').val(data.start_date);
                $('#end_date').val(data.end_date);
                // $('#total_payments').val(data.total_payments);
                $('#remarks').val(data.remarks);
                $('#payment_status').val(data.payment_status);
                $('#invoice_at').val(data.invoice_at);
                $('#status').val(data.status);
            })
        });

        $('#saveBtn').click(function (e) {
            e.preventDefault();
            $(this).html('Sending..');

            $.ajax({
                data: $('#dataForm').serialize(),
                url: "{{ url('projectplan/store') }}",
                type: "POST",
                dataType: 'json',
                success: function (data) {
                    $('#dataForm').trigger("reset");
                    $('#ajaxModel').modal('hide');
                    table.draw();
                    swal({
                        title: "Good job!",
                        text: data.msg,
                        icon: "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');
                }
            });
        });

        $('body').on('click', '.viewProjectPlan', function () {
            var project_plan_id = $(this).data("id");
            window.location.href = "{{ url('projectplan/plan') }}" + '/' + project_plan_id;
        });

        function reset_modal() {
            $("#milestone").val("");
            $("#start_date").val("");
            $("#end_date").val("");
            $("#total_payment").val("");
            $("#remarks").val("");
            $("#payment_status").val("");
            $("#status").val("");
            $("#invoice_at").val("");
            $("#milestone").removeClass("is-invalid");
            $("#start_date").removeClass("is-invalid");
            $("#end_date").removeClass("is-invalid");
            // $("#total_payment").removeClass("is-invalid");
            $("#remarks").removeClass("is-invalid");
            $("#payment_status").removeClass("is-invalid");
            $("#milestone-error").html("");
            $("#date-error").html("");
            $("#payments-error").html("");
            $("#remarks-error").html("");
            $("#payment_status-error").html("");
            $('#saveBtn').html('Save Changes');
        }
    });
</script>
@stop