<script>
    var data_responsibilities = <?php echo json_encode($data_responsibilities); ?>;
    var data_task = <?php echo json_encode($data_task); ?>;
    var type_constructor = <?php echo json_encode($type_constructor); ?>;
    function responsibility_get_detail(construction_id,title){
        var tr = ``;
        var route = "<?php echo e(route('task_responsibilities_contractor.get_detail_responsibility')); ?>";
        $.ajax({
            url:route,
            type:"POST",
            dataType:"JSON",
            async: false,
            data:{
                title:title,
                construction_id:construction_id,
                "_token":"<?php echo e(csrf_token()); ?>"
            },
            success:function(data){
                $.each(data,function(ind,val){
                    var button = ``;
                    if(ind==0){
                        button = `<td><button class="btn btn-sm btn-danger" disabled>
                                    <span class="fa fa-trash"></span></button>
                                </td>`;
                    }else{
                        button = `<td>
                                    <button type="button" onclick="remove(this)" class="btn btn-sm btn-danger">
                                    <span class="fa fa-trash"></span></button>
                                </td>`;
                    }
                    tr +=`<tr>
                        <td>
                            <span>${ind+1}</span>
                        </td>
                        <td>
                            <textarea name="responsibility[]" placeholder="Responsibility" class="form-control" rows="2" required>${val.responsibility_name}</textarea>
                        </td>
                        <td>
                            <input type="hidden" class="form-control" name="title_responsibility[]" value="${val.title}">
                            <textarea name="description_responsibility[]" placeholder="Description" class="form-control" rows="2">${val.description!=null?val.description:""}</textarea>
                        </td>
                        ${button}
                    </tr>`;
                });
                return tr;
            }
        });
        return tr;
    }
    $(document).ready(function(){
        if(type_constructor==1){
            $('#trp-append').empty();
        }
        else{
            $.each(data_responsibilities,function(index,value){
                var remove = ``;
                if(index>0)
                    remove = `  <div style="border: 1px solid gray;height:1px;margin-bottom:35px;"></div>
                                <p style="color: #045FB4 !important;font-size: 90%;margin-top: -30px;background-color: white !important;
                                    width: 90px !important;text-align: center;font-family: 'Khmer OS Muol Light';position: absolute;right:30px;" >
                                    <span class="button_danger btn-sm plus_ens" style="cursor:pointer;" onclick="$(this).closest('div').remove()">Remove</span>
                                </p>`;
                var table =`
                            <div class="row" style="padding:15px;">
                                ${remove}
                                <div class="col-sm-4" style="padding: 0px;" > <label>Title : </label><input class="form-control" value="${value.title}" name="tt[]" placeholder="Title" id="title-responsibility${index+1}" onkeyup="title_press_key(this)" onchange="title_press_key(this)" required>
                                    <br/>
                                </div>
                                
                                <table class="table table-striped table-bordered" width="100%">
                                    <thead>
                                        <tr>
                                            <th>No</th>
                                            <th>
                                                <label class="required">
                                                    Responsibility
                                                </label>
                                            </th>
                                            <th>
                                                <label>
                                                    Description
                                                </label>
                                            </th>
                                            <th>
                                                <span class="pull-right button_primary btn-sm plus_ens fa fa-plus" onclick="add_row_responsibility(this)"></span>
                                            </th>
                                        </tr>
                                    </thead>
                                    <tbody class="responsibility${index+1}">
                                        ${responsibility_get_detail(value.construction_id,value.title)}
                                    </tbody>
                                </table>
                            </div>
                `;
                $("#responsibility-table-form").append(table);
            });
        }
        
        $.each(data_task,function(index,value){
            var tr="";
            $.ajax({
                url:"<?php echo e(route('task_contractor.get_detail_task')); ?>",
                dataType:"JSON",
                type:"POST",
                async: false,
                data:{
                    title:value.title,
                    construction_id:value.construction_id,
                    "_token":"<?php echo e(csrf_token()); ?>"
                },
                success:function(data){
                    $.each(data,function(ind,val){
                        var button = ``;
                        if(ind==0){
                            button = `<td><button class="btn btn-sm btn-danger" disabled>
                                        <span class="fa fa-trash"></span></button>
                                    </td>`;
                        }else{
                            button = `<td>
                                        <button type="button" class="btn btn-sm btn-danger" onclick="remove(this)">
                                        <span class="fa fa-trash"></span></button>
                                    </td>`;
                        }
                        tr+=`<tr>
                                <td>
                                    <span>${ind+1}</span>
                                </td>
                                <td>
                                    <input type="hidden" class="form-control task_type" name="task_type[]" value = "${val.task_type}">
                                    <textarea name="task[]" placeholder="Task" class="form-control" rows="2" required>${val.name}</textarea>
                                </td>
                                <td>
                                    <input type="text" class="form-control number-only total-amount" name="amount[]" placeholder="Amount" required value="${val.amount}">
                                </td>
                                <td>
                                    <input type="text" class="form-control number-only" name="duration[]" placeholder="ថ្ងៃ" required value="${val.duration}">
                                </td>
                                <td>
                                    <input type="hidden" class="form-control" name="title_task[]" value="${value.title}">
                                    <textarea name="description_task[]" placeholder="Description" class="form-control" rows="2">${val.description!=null?val.description:""}</textarea>
                                    
                                </td>
                                ${button}
                                
                            </tr>`;
                    })
                }
            });
            var remove = ``;
                if(index>0)
                    remove = `  <div style="border: 1px solid gray;height:1px;margin-bottom:35px;"></div>
                                <p style="color: #045FB4 !important;font-size: 90%;margin-top: -30px;background-color: white !important;
                                    width: 90px !important;text-align: center;font-family: 'Khmer OS Muol Light';position: absolute;right:30px;" >
                                    <span class="button_danger btn-sm plus_ens" style="cursor:pointer;" onclick="$(this).closest('div').remove()">Remove</span>
                                </p>`;
            let option = ``;
            if(value.task_type==2){
                option += ` <option value = "1">Labour</option>
                            <option value = "2" selected>Material</option>`;
            }else{
                option += ` <option value = "1" selected>Labour</option>
                            <option value = "2">Material</option>`;
            }
            var table = `
                        <div class="row main-add-new" style="padding:15px;">
                            ${remove}
                           <div class="col-sm-6" style="padding: 0px;" > <label>Title : </label><input class="form-control" name="t[]" placeholder="Title" id="title-task${index+1}" onkeyup="title_press_key_task(this)" onchange="title_press_key_task(this)" required value="${value.title}">
                                <br/>
                            </div>

                            <div class="col-sm-6" > 
                                <label>Type : </label>
                                <select class="form-control select2" onchange="type_main_task_change(this)" name="type_main_task" placeholder="Title" id="type_main_task${index+1}" required>
                                    ${option}
                                </select>
                                <br/>
                            </div>
                            
                            <table class="table table-striped table-bordered" width="100%">
                                <thead>
                                    <tr>
                                        <th>No</th>
                                        <th>
                                            <label class="required">
                                                Task
                                            </label>
                                        </th>
                                        <th>
                                            <label class="required">
                                                Amount
                                            </label>
                                        </th>
                                        <th>
                                            <label class="required">
                                                Duration
                                            </label>
                                        </th>
                                        <th>
                                            <label>
                                                Description
                                            </label>
                                        </th>
                                        <th>
                                            <span class="pull-right button_primary btn-sm plus_ens fa fa-plus" onclick="add_row_task(this)"></span>
                                        </th>
                                    </tr>
                                </thead>
                                <tbody class="task${index+1}">
                                    ${tr}
                                </tbody>
                            </table>
                        </div>
            `;
            $("#task-table-form").append(table);
            $(".select2").select2();
        });
    });
</script>