@extends('layouts.index')
@section('title')
    Add KPI
@endsection
@section('css')
    <link href="{{ asset('back') }}/extra-libs/datatables.net-bs4/css/dataTables.bootstrap4.css" rel="stylesheet" />
    <link href="{{ asset('back') }}/libs/jquery-steps/jquery.steps.css" rel="stylesheet" />
    <link href="{{ asset('back') }}/libs/jquery-steps/steps.css" rel="stylesheet" />
    <link href="{{ asset('back') }}/libs/select2/dist/css/select2.min.css" rel="stylesheet" />
    <link rel="stylesheet" type="text/css" href="{{ asset('back') }}/libs/daterangepicker/daterangepicker.css" />

    <style>
        .l2 {
            padding-left: 1em;
        }

        .l3 {
            padding-left: 2em;
        }

        label.error {
            color: #F94687;
            font-size: 13px;
            font-size: .875rem;
            font-weight: 400;
            line-height: 1.5;
            margin-top: 5px;
            padding: 0;
        }

        input.error {
            color: #F94687;
            border: 1px solid #F94687;
        }

        select.error {
            color: #F94687;
            border: 1px solid #F94687;
        }

        textarea.error {
            color: #F94687;
            border: 1px solid #F94687;
        }

        .colored-toast.swal2-icon-success {
            background-color: #a5dc86 !important;
        }

        .colored-toast.swal2-icon-error {
            background-color: #f27474 !important;
        }

        .colored-toast.swal2-icon-warning {
            background-color: #f8bb86 !important;
        }

        .colored-toast.swal2-icon-info {
            background-color: #3fc3ee !important;
        }

        .colored-toast.swal2-icon-question {
            background-color: #87adbd !important;
        }

        .colored-toast .swal2-title {
            color: white;
        }

        .colored-toast .swal2-close {
            color: white;
        }

        .colored-toast .swal2-html-container {
            color: white;
        }
    </style>
@endsection
@section('content')
    <div class="page-titles">
        <div class="row">
            <div class="col-lg-8 col-md-6 col-12 align-self-center">
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb mb-0 d-flex align-items-center">
                        <li class="breadcrumb-item">
                            <a href="index.html" class="link"><i class="ri-home-3-line fs-5"></i></a>
                        </li>
                        <li class="breadcrumb-item" aria-current="page">
                            <a href="{{ route('kpi.index') }}">KPI</a>
                        </li>
                        <li class="breadcrumb-item active" aria-current="page">
                            Add
                        </li>

                    </ol>
                </nav>
                <h1 class="mb-0 fw-bold">Add KPI</h1>
            </div>
        </div>
    </div>
    <!-- ============================================================== -->
    <!-- End Bread crumb and right sidebar toggle -->
    <!-- ============================================================== -->
    <!-- ============================================================= -->
    <div class="container-fluid">
        <!-- ============================================================= -->
        <!-- Start Page Content -->
        <!-- ============================================================= -->

        <div class="row">

            <form method="POST" action="{{ route('kpi.store') }}" id="createForm" enctype="multipart/form-data">
                @csrf
                <section id="tabs">

                    <div class="card">
                        <div class="card-body">
                            <!-- Nav tabs -->
                            <div class="d-flex">
                                <h4>Add KPI</h4>
                            </div>
                            <!-- Tab panes -->
                            <div class="tab-content">
                                <div class="p-3">
                                    <div class="col-12 col-sm-12">
                                        <h5 class="mt-2 mb-1 mt-sm-0"></h5>
                                        <div class="row">
                                            <div class="col-md-6 mt-3">
                                                <div class="row">
                                                    <div class="col-sm-12">
                                                        <div class="form-group">
                                                            <div class="controls">
                                                                <label>Goal Name</label>
                                                                <input type="text" id="goal_name" name="goal_name"
                                                                    value="{{ old('goal_name') }}" class="form-control"
                                                                    placeholder="Goal Name">
                                                            </div>
                                                        </div>
                                                        <label id="error_goal_name" class="error"
                                                            style="display: none;"></label>
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="col-md-6 mt-3">
                                                <div class="row">
                                                    <div class="col-sm-12">
                                                        <div class="form-group">
                                                            <div class="controls">
                                                                <label>Weight of KPI</label>
                                                                <input type="number" id="weight_of_kpi" name="weight_of_kpi"
                                                                    value="{{ old('weight_of_kpi') }}" class="form-control"
                                                                    placeholder="Weight of KPI">
                                                            </div>
                                                        </div>
                                                        <label id="error_weight_of_kpi" class="error"
                                                            style="display: none;"></label>
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="col-md-6 mt-3">
                                                <div class="row">
                                                    <div class="col-sm-12">
                                                        <div class="form-group">
                                                            <div class="controls">
                                                                <label>Target of KPI</label>
                                                                <input type="number" id="target_of_kpi" name="target_of_kpi"
                                                                    value="{{ old('target_of_kpi') }}" class="form-control"
                                                                    placeholder="Target of KPI">
                                                            </div>
                                                        </div>
                                                        <label id="error_target_of_kpi" class="error"
                                                            style="display: none;"></label>
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="col-md-6 mt-3">
                                                <div class="row">
                                                    <div class="col-sm-12">
                                                        <div class="form-group">
                                                            <div class="controls">
                                                                <label>Units</label>
                                                                <input type="text" id="unit" name="unit"
                                                                    value="{{ old('unit') }}" class="form-control"
                                                                    placeholder="Units">
                                                            </div>
                                                        </div>
                                                        <label id="error_unit" class="error"
                                                            style="display: none;"></label>
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="col-md-6 mt-3">
                                                <div class="row">
                                                    <div class="col-sm-12">
                                                        <div class="form-group">
                                                            <div class="controls">
                                                                <label>Actual</label>
                                                                <input type="number" id="actual" name="actual"
                                                                    value="{{ old('actual') }}" class="form-control"
                                                                    placeholder="Actual">
                                                            </div>
                                                        </div>
                                                        <label id="error_actual" class="error"
                                                            style="display: none;"></label>
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="col-md-6 mt-3">
                                                <div class="row">
                                                    <div class="col-sm-12">
                                                        <div class="form-group">
                                                            <div class="controls">
                                                                <label>Type</label>
                                                                <select name="type" id="type" class="form-select">
                                                                    <option value="">Choose Type</option>
                                                                    <option value="personal">Personal</option>
                                                                    <option value="team">Team</option>
                                                                </select>
                                                            </div>
                                                        </div>
                                                        <label id="error_type" class="error"
                                                            style="display: none;"></label>
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="col-md-12 mt-3">
                                                <div class="row">
                                                    <div class="col-sm-12">
                                                        <div class="form-group">
                                                            <div class="controls">
                                                                <label>Cascading</label>
                                                                <select name="cascading" id="cascading" class="form-select" onchange="cascadeChoose(this.value)">
                                                                    <option value="">Choose Cascading</option>
                                                                    <option value="program_initation">Program Initiation</option>
                                                                    <option value="program_formulation">Program Formulation</option>
                                                                    <option value="project">Project</option>
                                                                </select>
                                                            </div>
                                                        </div>
                                                        <label id="error_cascading" class="error"
                                                            style="display: none;"></label>
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="col-md-12 mt-3" id="allCascadeWrap" style="display: none;">
                                                <div class="row" id="programInitation" style="display: none; width: 100%;">
                                                    <div class="col-sm-12">
                                                        <div class="form-group">
                                                            <div class="controls">
                                                                <label>Program Initation</label>
                                                                <select name="cascade_stuff_id" class="form-select w-100">
                                                                    <option value="">Choose Program Initiation</option>
                                                                    @foreach($program_initiation as $data)
                                                                        <option value="{{ $data->id }}">{{ $data->name }}</option>
                                                                    @endforeach
                                                                </select>
                                                            </div>
                                                        </div>
                                                        <label id="error_cascade_stuff_id" class="error"
                                                            style="display: none;"></label>
                                                    </div>
                                                </div>
                                                <div class="row" id="programFormulation" style="display: none; width: 100%;">
                                                    <div class="col-sm-12">
                                                        <div class="form-group">
                                                            <div class="controls">
                                                                <label>Program Formulation</label>
                                                                <select name="cascade_stuff_id" class="form-select w-100">
                                                                    <option value="">Choose Program Formulation</option>
                                                                    @foreach($program_formulation as $data)
                                                                        <option value="{{ $data->id }}">{{ $data->name }}</option>
                                                                    @endforeach
                                                                </select>
                                                            </div>
                                                        </div>
                                                        <label id="error_cascade_stuff_id" class="error"
                                                            style="display: none;"></label>
                                                    </div>
                                                </div>
                                                <div class="row" id="projectWrap" style="display: none; width: 100%;">
                                                    <div class="col-sm-12">
                                                        <div class="form-group">
                                                            <div class="controls">
                                                                <label>Project</label>
                                                                <select name="cascade_stuff_id" class="form-select w-100">
                                                                    <option value="">Choose Project</option>
                                                                    @foreach($project as $data)
                                                                        <option value="{{ $data->id }}">{{ $data->name }}</option>
                                                                    @endforeach
                                                                </select>
                                                            </div>
                                                        </div>
                                                        <label id="error_cascade_stuff_id" class="error"
                                                            style="display: none;"></label>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-md-6 mt-3">
                                                <div class="row">
                                                    <div class="col-sm-12">
                                                        <div class="form-group">
                                                            <div class="controls">
                                                                <label>Overdue Date</label>
                                                                <input type="hidden" name="date_range" id="date_range" value="">
                                                                <div class="input-group mb-3">
                                                                    <input type="text" id="date_range_plugin" class="form-control daterange"
                                                                        value="" />
                                
                                                                    <span class="input-group-text">
                                                                        <i data-feather="calendar" class="feather-sm"></i>
                                                                    </span>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <label id="error_date_range" class="error"
                                                            style="display: none;"></label>
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="col-md-6 mt-3">
                                                <div class="row">
                                                    <div class="col-sm-12">
                                                        <div class="form-group">
                                                            <div class="controls">
                                                                <label>Reviewed By</label>
                                                                <select name="reviewed_by" id="reviewed_by" class="form-select">
                                                                    <option value="">Choose Reviewer</option>
                                                                    @foreach($employee as $data)
                                                                     <option value="">{{ $data->nama_lengkap }}</option>
                                                                    @endforeach
                                                                </select>
                                                            </div>
                                                        </div>
                                                        <label id="error_reviewed_by" class="error"
                                                            style="display: none;"></label>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>

                <div class="d-grid gap-2 d-md-flex justify-content-md-end mt-4">
                    <a href="{{ route('kpi.index') }}" class="btn btn-outline-primary me-md-2">Back</a>
                    <button class="btn btn-primary me-md-2" type="button" id="kpiSave">Submit</button>
                </div>
            </form>

        </div>
        <!-- ============================================================= -->
        <!-- End PAge Content -->
        <!-- ============================================================= -->
    </div>
@endsection
@section('js')
    <!--This page plugins -->
    <script src="{{ asset('back') }}/extra-libs/datatables.net/js/jquery.dataTables.min.js"></script>
    <!-- start - This is for export functionality only -->
    <script src="https://cdn.datatables.net/buttons/1.5.1/js/dataTables.buttons.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.flash.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/pdfmake.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/vfs_fonts.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.html5.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.print.min.js"></script>
    <script src="{{ asset('back') }}/js/pages/datatable/datatable-advanced.init.js"></script>

    <script src="{{ asset('back') }}/libs/jquery-steps/build/jquery.steps.min.js"></script>
    <script src="{{ asset('back') }}/libs/jquery-validation/dist/jquery.validate.min.js"></script>
    <script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.19.0/additional-methods.js"></script>
    <script src="{{ asset('back') }}/libs/select2/dist/js/select2.full.min.js"></script>
    <script src="{{ asset('back') }}/libs/select2/dist/js/select2.min.js"></script>
    <script src="{{ asset('back') }}/js/pages/forms/select2/select2.init.js"></script>
    <script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <!--This page JavaScript -->
    <script src="{{ asset('back') }}/libs/jquery.repeater/jquery.repeater.min.js"></script>
    <script src="{{ asset('back') }}/extra-libs/jquery.repeater/repeater-init.js"></script>
    <script src="{{ asset('back') }}/libs/moment/moment.js"></script>
    <script src="{{ asset('back') }}/libs/daterangepicker/daterangepicker.js"></script>    
    <script>
        $(".daterange").daterangepicker({
            autoUpdateInput: false,
        });
        $('.daterange').on('apply.daterangepicker', function(ev, picker) {
            $(this).val(picker.startDate.format('MM/DD/YYYY') + ' - ' + picker.endDate.format('MM/DD/YYYY'));
            $("#date_range").val($("#date_range_plugin").val());
        });
    
        $('.daterange').on('cancel.daterangepicker', function(ev, picker) {
            $(this).val('');
        });
    </script>
    {{-- <script src="{{ asset('back') }}/extra-libs/jquery.repeater/dff.js"></script> --}}

    <script>
        function cascadeChoose(value) {
            if(value == 'program_initation') {
                $("#allCascadeWrap").css('display', 'flex');
                $("#programInitation").css('display', 'flex');
                $("#programFormulation").css('display', 'none');
                $("#projectWrap").css('display', 'none');
            } else if(value == 'program_formulation') {
                $("#allCascadeWrap").css('display', 'flex');
                $("#programInitation").css('display', 'none');
                $("#programFormulation").css('display', 'flex');
                $("#projectWrap").css('display', 'none');
            } else if(value == 'project') {
                $("#allCascadeWrap").css('display', 'flex');
                $("#programInitation").css('display', 'none');
                $("#programFormulation").css('display', 'none');
                $("#projectWrap").css('display', 'flex');
            } else {
                $("#allCascadeWrap").css('display', 'none');
                $("#programInitation").css('display', 'none');
                $("#programFormulation").css('display', 'none');
                $("#projectWrap").css('display', 'none');
            }
        }
    </script>

    <script>
        $('#createForm').on('submit', function(event) {
            event.preventDefault();
            $.ajax({
                url: "{{ route('kpi.store') }}",
                method: "POST",
                data: new FormData(this),
                contentType: false,
                processData: false,
                success: function(result) {
                    if (result.success == false) {
                        $("label.error").css("display", "none");
                        $("input.error").removeClass("error");
                        $("select.error").removeClass("error");
                        for (const [key, value] of Object.entries(result.errors)) {
                            $("#error_" + key).css("display", "block");
                            $("#error_" + key).html(value[0]);
                            $('[name="' + key + '"]').addClass("error");
                        }
                    } else if (result.success == true) {
                        $("#kpiSave").prop('disabled', true);
                        $("label.error").css("display", "none");
                        $("input.error").removeClass("error");
                        $("select.error").removeClass("error");
                        Swal.fire({
                            icon: 'success',
                            title: 'Success',
                            text: 'KPI has been added successfully',
                        }).then(function() {
                            location.href = "{{ url('kpi') }}/" + result.kpi_id;
                        });
                    }
                }
            });
        });
    </script>
@endsection