@extends('layouts.default')

@section('title')
    hello
@endsection

@section('header-style')
    <!--Load custom style link or css-->

@endsection

@section('content')
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-body">
                    <h4 class="card-title">Work FLow Stage</h4>
                    <form method="POST" action="">
                        {!! csrf_field() !!}
                        <div class="row">
                            <div class="col-md-4">
                                <div class="row my-1">
                                    <div class="col-md-4"><label>Work FLow For</label></div>
                                    <div class="col-md-8">
                                        <select class="select2 form-control" name="meeting_type">
                                            <option disabled="disabled" value="">-- Please select an option --</option>
                                            <option value="1">Board Meeting</option>
                                            <option value="2">Dept. Meeting</option>
                                        </select></div>
                                </div>
                            </div>
                        </div>
                        <br/>
                        <br/>
                        <!-- Borderless table start -->
                        <div class="card">
                            <h4 class="card-title">User Assign</h4>
                            <div class="card-content">
                                <div class="table-responsive assignUser col-md-6">
                                    <table class="table">
                                        <thead>
                                        <tr>
                                            <th>Stage</th>
                                            <th>User</th>
                                            <th>Add</th>
                                        </tr>
                                        </thead>
                                        <tbody></tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="d-flex justify-content-end col">
                                <button type="submit" name="save" class="btn btn-success glow mr-1 mb-1"><i
                                        class="bx bx-save"></i> Save
                                </button>
                                <button type="reset" class="btn btn-danger glow mb-1"><i
                                        class="bx bx-window-close"></i> Cancel
                                </button>
                            </div>
                        </div>
                    </form>
                    <!-- Borderless table end -->
                </div>
            </div>
            <!-- List table -->
        @include('settings.wf.workFlowStageList')
            <!--/ List table -->
        </div>
    </div>

@endsection


@section('footer-script')
    <!--Load custom script-->
    <script>
        $(document).ready(function () {
            $('.datatable').DataTable({
                processing: true,
                serverSide: true,
                ajax: '{{ route('getDataWorkFlowStage') }}',
                "columns": [
                    {"data": "id"},
                    {"data": "workflow_name"},
                    {"data": "stage"},
                    {"data": "user"},
                    {data: 'action', name: 'action', orderable: false, searchable: false}
                ],
            });
            var counter = 1;
            var markup1 = addNewRow(counter);
            $(".assignUser table tbody").html(markup1);
            $("#addRow").click(function () {
                let number = counter + 1;
                var markup = addNewRow(number);
                $(".assignUser table tbody").append(markup);
                counter++;
            });

            function addNewRow(counter) {
                 var html = '<tr role="row" aria-rowindex="1" class="">' +
                    '<td aria-colindex="1" data-label="Stage" role="cell" class="text-left"> ' +
                    '<div>' + "Stage "+ counter + '</div> ' +
                    '</td> ' +
                    '<td aria-colindex="2" data-label="User" role="cell" class="text-left"> ' +
                    '<select class="select2 form-control" name="location">\n' +
                    ' <option disabled="disabled" value="">-- Please select an option --</option>\n' +
                    ' <option value="1">Admin 1</option>\n' +
                    ' <option value="2">Admin 2</option>\n' +
                    ' </select>' +
                    '</td> ';
                     if(counter == 1){
                         html +=  '<td aria-colindex="7" data-label="Add" role="cell" class="text-left">' +
                             '<a size="sm" href="#" class="text-success" id="addRow"><i  class="bx bxs-plus-circle cursor-pointer font-medium-3"></i></a>' +
                             '</td>';
                     }else{
                         html +=  '<td aria-colindex="7" data-label="Add" role="cell" class="text-left">' +
                             '<a size="sm" href="#" class="text-danger delete-row"><i  class="bx bxs-minus-circle cursor-pointer font-medium-3"></i></a>' +
                             '</td>';
                     }
                 html += '</tr>';

                return html;
            }

            $(".assignUser table tbody").on("click", ".delete-row", function (event) {
                event.preventDefault();
                $(this).closest("tr").remove();
                counter -= 1
                $('#addRow').attr('disabled', false).prop('value', "Add Row");
            });
        });
    </script>

@endsection