@extends('admin.partial.admin_master')
@section('title')
<title>Project Lists | Aplikasi Project Management</title>
@endsection
@section('css')               
    <link href="{{ asset('backend/assets/css/icons.min.css') }}" rel="stylesheet" type="text/css" />
    <link href="{{ asset('backend/assets/css/app.min.css') }}" rel="stylesheet" type="text/css" id="app-style"/>
    <link href="{{ asset('backend/assets/css/vendor/dataTables.bootstrap5.css') }}" rel="stylesheet" type="text/css" />
    <link href="{{ asset('backend/assets/css/vendor/responsive.bootstrap5.css') }}" rel="stylesheet" type="text/css" />
    <link href="{{ asset('backend/assets/css/vendor/buttons.bootstrap5.css') }}" rel="stylesheet" type="text/css" />
    <link href="{{ asset('backend/assets/css/vendor/select.bootstrap5.css') }}" rel="stylesheet" type="text/css" />
    <link href="{{ asset('backend/assets/css/vendor/fixedHeader.bootstrap5.css') }}" rel="stylesheet" type="text/css" />
    <link href="{{ asset('backend/assets/css/vendor/fixedColumns.bootstrap5.css') }}" rel="stylesheet" type="text/css" />  
    <link href="{{ asset('backend/assets/css/fontawesome.min.css') }}" rel="stylesheet" />
    <link href="{{ asset('backend/assets/css/toastr.css') }}" rel="stylesheet" />
    <style nonce="{{ csp_nonce() }}">
        .bold{
            font-weight: bold;
        }

       .bobot{
        width: 100px;
        text-align: center;
       }

       .update{
        float: right;
       }
       .center{
            text-align: center
       }
    </style>

@endsection
@section('main')
@can('Detail WBS')
<!-- Start Content-->
<div class="container-fluid">
                        
    <!-- start page title -->
    <div class="row">
        <div class="col-12">
            <div class="page-title-box">
                <div class="page-title-right">
                    <ol class="breadcrumb m-0">
                        <li class="breadcrumb-item"><a href="{{ route('dashboard') }}">Dashboard</a></li>                        
                        <li class="breadcrumb-item active"><a href="#">Edit WBS Plan</a></li>
                    </ol>
                </div>
            </div>
        </div>
    </div>     
    <!-- end page title --> 
    <!--planning -->
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-body">
                    {{-- <a href="{{ route('wbs.detil',encrypt($project->id)) }}" class="btn btn-sm btn-primary">Back</a> --}}
                    <a href="{{ route('wbs.detil',encrypt($id)) }}" class="btn btn-primary btn-sm">Back</a><h4><span class="">EDIT WBS PLAN</span></h4>
                    {{-- {{ $id }} --}}
                    <div class="tab-content">
                        <div class="tab-pane show active" >
                            <form id="formbobot" action="{{ route('wbs.updateplan') }}" method="POST" enctype="multipart/form-data">
                                @csrf
                            <table id="scroll-vertical-datatable1" class="table table-striped dt-responsive nowrap w-100">     
                                <thead>
                                    <tr>
                                        <th>No</th>
                                        <th>Task Name</th>
                                        <th>Start Date</th>
                                        <th>End Date</th>    
                                        <th>Bobot</th>                      
                                        <th>Duration</th>                       
                                    </tr>
                                    
                                </thead>
                                <thead>
                                    <tr>
                                        <th colspan=4 class="center">Total Bobot</th>
                                        <th><input type="number" readonly id="total_bobot" class="form-control"></th>
                                        <td>&nbsp;</td>
                                    </tr>
                                </thead>
                            
                                <input type="hidden" name="project_id" value="{{ $id }}">
                                <tbody>
                                   
                                    @foreach ($plan as $key=>$value )
                                    
                                    
                                    <tr>
                                        @php
                                            $i=0;
                                        @endphp
                                            
                                        <td>{{ $key+1 }}</td>
                                        <td>@if ($value->level == 1)
                                            <ul>
                                                <li>{{ $value->name??'' }}</li>
                                            </ul>
                                            @elseif ($value->level == 2)
                                            <ul style="list-style-type:none;">
                                                <li><ul style="list-style-type:square;">
                                                    <li>{{ $value->name??'' }}</li>
                                                    </ul>
                                                </li>
                                            </ul>
                                            @elseif ($value->level == 3)
                                            <ul style="list-style-type:none;">
                                                <li><ul style="list-style-type:none;">
                                                    <li>
                                                        <ul style="list-style-type:square;">
                                                        <li>{{ $value->name??'' }}</li>
                                                        </ul>
                                                    </li>
                                                </ul>
                                                </li>
                                            </ul>
                                            @else
                                            {{ $value->name??'' }}
                                        @endif</td>                                                                   
                                        <td>{{ Carbon\Carbon::parse($value->start ??'')->isoFormat('D MMMM Y') ??'' }}</td>
                                        <td>{{ Carbon\Carbon::parse($value->end ??'')->isoFormat('D MMMM Y') ??'' }}</td> 
                                        <td>
                                            @if($value->level > 0 and $value->hasChild == 0)
                                            <input type="number" step="0.01" class="form-control bobot" required name="bobot[]" id="bobot" value="{{ $value->bobot??''}}">
                                            <input type="hidden" class="form-control bobot" name="ids[]" value="{{ $value->id??''}}">                                            
                                            @endif
                                        </td>  
                                        <td>{{ $value->duration??'' }} Days</td>  
                                        @php
                                            $i++;
                                        @endphp                   
                                    </tr>
                                    @endforeach                    
                                </tbody>
                            </table>
                                  
                        </div>
                        
                    </div>

                </div> <input type="hidden" id="total_bobottxt" name="total_bobottxt">
                <button type="submit" disabled="disabled" class="btn btn-primary btn-sm update">Update</button>   
                        </form> 
            </div>
        </div>
    </div>    
</div>
@endcan
@endsection
@section('js')        
    <script src="{{ asset('backend/assets/js/jquery-3.7.1.min.js') }}"></script>
    <script src="{{ asset('backend/assets/js/vendor.min.js') }}"></script>
    <script src="{{ asset('backend/assets/js/app.min.js') }}"></script>    
    <script src="{{ asset('backend/assets/js/vendor/jquery.dataTables.min.js') }}"></script>
    <script src="{{ asset('backend/assets/js/vendor/dataTables.bootstrap5.js') }}"></script>
    <script src="{{ asset('backend/assets/js/vendor/dataTables.responsive.min.js') }}"></script>
    <script src="{{ asset('backend/assets/js/vendor/responsive.bootstrap5.min.js') }}"></script>
    <script src="{{ asset('backend/assets/js/vendor/dataTables.buttons.min.js') }}"></script>
    <script src="{{ asset('backend/assets/js/vendor/buttons.bootstrap5.min.js') }}"></script>
    <script src="{{ asset('backend/assets/js/vendor/buttons.html5.min.js') }}"></script>
    <script src="{{ asset('backend/assets/js/vendor/buttons.flash.min.js') }}"></script>
    <script src="{{ asset('backend/assets/js/vendor/buttons.print.min.js') }}"></script>
    <script src="{{ asset('backend/assets/js/vendor/dataTables.keyTable.min.js') }}"></script>
    <script src="{{ asset('backend/assets/js/vendor/dataTables.select.min.js') }}"></script>
    <script src="{{ asset('backend/assets/js/vendor/fixedColumns.bootstrap5.min.js') }}"></script>
    <script src="{{ asset('backend/assets/js/vendor/fixedHeader.bootstrap5.min.js') }}"></script>
    <script src="{{ asset('backend/assets/js/pages/demo.datatable-init.js') }}"></script>
    <script src="{{ asset('backend/assets/js/pages/demo.datatable-init1.js') }}"></script>
    <script src="{{ asset('backend/assets/js/toastr.js') }}"></script>
    <script src="{{ asset('backend/assets/js/sweetalert2.all.min.js') }}"></script>
    
    <script nonce="{{ csp_nonce() }}">
        $(document).ready(function() {
            cekBobot();
            $('form#formbobot :input').change(function(){
                cekBobot();
            });

            function cekBobot(){
                var total_bobot = 0.00;
                var inp_bobot = 0.00;
               
                $('input[id=bobot]').each(function(){
                    // console.log('each input '+$(this).val());
                    inp_bobot = $(this).val();
                    // console.log('input '+inp_bobot);
                    total_bobot = (10 * inp_bobot + 10 * total_bobot)/10;
                    // console.log('input total '+total_bobot);
                })

                total_bobot = parseFloat(total_bobot).toFixed(2);
                
                $('#total_bobottxt').val(total_bobot);
                $('#total_bobot').val(total_bobot);
                if(total_bobot < 100.00){
                    $('.update').attr('disabled','disabled');
                } else if(total_bobot == 100.00){
                    $('.update').removeAttr('disabled');
                } else if(total_bobot > 100.00) {
                    $('.update').attr('disabled','disabled');
                    Swal.fire({
                        title: 'Warning',
                        text: "Total Bobot > 100! Silahkan periksa kembali!",
                        icon: 'warning',
                        confirmButtonColor: '#d33',
                        confirmButtonText: 'OK!',
                    })
                }
            }
        }); 
      
    </script>
    
@endsection