@extends('layouts.app')
@section('content')
<section class="list-ahs">
    <div class="x_panel">
        <div class="x_title">
            <h2>Create Backup Volume</h2>
            <div class="clearfix"></div>
        </div>
        <div class="x_content">
            <form action="{{route('backup_volume.store')}}" method="POST" enctype="multipart/form-data">
            {{csrf_field()}}
                <div class="col-md-8 col-md-offset-2 col-xs-12">
                    <div class="form-group">
                        <label>
                            Nama RAB
                        </label>
                        <input type="text" name="nama_rab" class="form-control" required="">
                    </div>
                    <hr>
                </div>
                <div class="clearfix"></div>
                <div class="scroll">
                    <table class="table table-bordered">
                        <thead>
                            <tr>
                                <th style="min-width: 300px">
                                    Item
                                </th>
                                <th>
                                    Dimensi & Spesifikasi
                                </th>
                                <th>
                                    Volume
                                </th>
                                <th>
                                    Unit
                                </th>
                                <th colspan="7" class="text-center">
                                    Koefisien
                                </th>
                            </tr>
                        </thead>
                        @foreach($ahsKategoris as $row)
                        <tr>
                            <th colspan="11" style="background-color: #ddd">
                                {{$row->nama_kategori}}
                            </th>
                        </tr>
                            @foreach($row->subkategoris as $row2)
                             <tr>
                                <th colspan="11">
                                    <a href="javascript:;" data-toggle="collapse" data-target=".collapse.{{$row2->id}}">
                                        {{$row2->nama_subkategori}}
                                        <i class="fa fa-chevron-down"></i>
                                    </a>
                                </th>
                            </tr> 
                            <tr class="collapse {{$row2->id}}">
                                <th colspan="4"></th>
                                <th colspan="7"></th>
                            </tr>
                            @foreach($row2->ahsS as $row3)
                            <tr class="collapse {{$row2->id}}">
                                <th>
                                    <div class="checkbox">
                                    <label>
                                        <input type="checkbox" name="ahs[]" value="{{$row3->id}}" class="id_ahs">
                                        {{$row3->nama_pekerjaan}}
                                    </label>
                                    </div>
                                </th>
                                <th>
                                    {{$row3->dimensi_spesifikasi}}
                                </th>
                                <th id="volume_{{$row3->id}}">
                                    0
                                </th>
                                <th>
                                    {{$row3->satuan}}
                                </th>
                                <th>
                                    PJG
                                </th>
                                <th>
                                    LBR
                                </th>
                                <th>
                                    TNG
                                </th>
                                <th>
                                    BRT
                                </th>
                                <th>
                                    QTY
                                </th>
                                <th>
                                    FKTR
                                </th>
                                <th>
                                    <label class="btn btn-primary btn-xs" for="file_ahs{{$row3->id}}">
                                        <i class="fa fa-upload"></i>
                                        upload file
                                        <input type="file" class="image" name="image[]" accept="image/*" id="file_ahs{{$row3->id}}" style="display: none;">
                                    </label>
                                </th>
                            </tr>  
                            <tbody class="collapse {{$row2->id}}" id="rincian_penambah-{{$row3->id}}">
                                <tr>
                                    <th colspan="4" style="color: #B04C4B">
                                        Rincian Penambah
                                    </th>
                                    <th colspan="7">
                                        <button class="btn btn-danger btn-xs" onclick="add_penambah('{{$row3->id}}',false)" type="button" disabled="">
                                            Create Penambah
                                        </button>
                                    </th>
                                </tr>
                            </tbody>
                            <tbody class="collapse {{$row2->id}}" id="rincian_pengurang-{{$row3->id}}">
                                <tr>
                                    <th colspan="4" style="color: #0582ad">
                                        Rincian Pengurang
                                    </th>
                                    <th colspan="7">
                                        <button class="btn btn-primary btn-xs" onclick="add_pengurang('{{$row3->id}}',false)" type="button" disabled="">
                                            Create Pengurang
                                        </button>
                                    </th>
                                </tr>
                            </tbody>
                            @endforeach
                            @foreach($row2->vendors as $row3)
                            <tr class="collapse {{$row2->id}}">
                                <th>
                                    <div class="checkbox">
                                        <label>
                                            <input type="checkbox" name="ahs_v[]" value="{{$row3->id}}" class="id_ahs_vendor">
                                            {{$row3->vendor->nama_pekerjaan}}
                                        </label>
                                    </div>
                                </th>
                                <th>
                                    {{$row3->vendor->dimensi_spesifikasi}}
                                </th>
                                <th id="volume_v{{$row3->id}}">
                                    0
                                </th>
                                <th>
                                    {{$row3->vendor->satuan}}
                                </th>
                                <th>
                                    PJG
                                </th>
                                <th>
                                    LBR
                                </th>
                                <th>
                                    TNG
                                </th>
                                <th>
                                    BRT
                                </th>
                                <th>
                                    QTY
                                </th>
                                <th>
                                    FKTR
                                </th>
                                <th>
                                    <label class="btn btn-primary btn-xs" for="file_ahsv{{$row3->id}}">
                                        <i class="fa fa-upload"></i>
                                        upload file
                                        <input type="file" class="image_v" accept="image/*" name="image[]" id="file_ahsv{{$row3->id}}" style="display: none;">
                                    </label>
                                </th>
                            </tr> 
                            <tbody class="collapse {{$row2->id}}" id="rincian_penambah-v{{$row3->id}}">
                                <tr>
                                    <th colspan="4" style="color: #B04C4B">
                                        Rincian Penambah
                                    </th>
                                    <th colspan="7">
                                        <button class="btn btn-danger btn-xs" onclick="add_penambah('{{$row3->id}}',true)" type="button" disabled="">
                                            Create Penambah
                                        </button>
                                    </th>
                                </tr>
                            </tbody>
                            <tbody class="collapse {{$row2->id}}" id="rincian_pengurang-v{{$row3->id}}">
                                <tr>
                                    <th colspan="4" style="color: #0582ad">
                                        Rincian Pengurang
                                    </th>
                                    <th colspan="7">
                                        <button class="btn btn-primary btn-xs" onclick="add_pengurang('{{$row3->id}}',true)" type="button" disabled="">
                                            Create Pengurang
                                        </button>
                                    </th>
                                </tr>
                            </tbody>
                            @endforeach 
                            @endforeach
                        @endforeach
                    </table>
                </div>
                <div class="ln_solid"></div>
                <div class="form-group text-right">
                    <button class="btn btn-primary" type="submit" onclick="cekAh(event)">Save</button>
                    <button class="btn btn-danger" type="reset">
                        Cancel
                    </button>
                </div>
            </form>
        </div>
    </div>
</section>
@endsection
@section('js')
<script>
     function cekAh(evt) {
        if ($('.id_ahs:checked').length == 0 && $('.id_ahs_vendor:checked').length == 0) {
            evt.preventDefault();
            alert('ahs tidak boleh kosong');
        }
        $('.id_ahs').each(function(index, el) {
            if (!$(this).prop('checked')) {
                $('.image').eq(index).removeAttr('name')
                $(this).removeAttr('name')
            }else{
                $(this).attr('name','ahs[]')
                $('.image').eq(index).attr('name','image[]')
            }
        });
        $('.id_ahs_vendor').each(function(index, el) {
            if (!$(this).prop('checked')) {
                $('.image_v').eq(index).removeAttr('name')
                $(this).removeAttr('name')
            }else{
                $(this).attr('name','ahs_v[]')
                $('.image_v').eq(index).attr('name','image_v[]')
            }
        });
    }

    function add_penambah(id,vendor){
        if(vendor){
            index = ($('.nama_rincian_penambah_v_'+id).length - 1) + 1
            $('tbody#rincian_penambah-v'+id).append('\
            <tr id="tr_penambah_v_'+index+'">\
                <th colspan="2">\
                    <input type="text" name="nama_rincian_penambah_v_'+id+'[]" class="form-control nama_rincian_penambah_v_'+id+'" placeholder="masukan nama rincian" required>\
                </th>\
                <th class="volume_rincian_penambah_v_'+id+'">\
                    0\
                </th>\
                <th></th>\
                <th>\
                    <input type="text" name="pjg_penambah_v_'+id+'[]" class="form-control pjg_penambah_v_'+id+'" onkeyup="set_volume('+id+','+index+',true,true)" onkeypress="filter(this,event)">\
                </th>\
                <th>\
                    <input type="text" name="lbr_penambah_v_'+id+'[]" class="form-control lbr_penambah_v_'+id+'" onkeyup="set_volume('+id+','+index+',true,true)" onkeypress="filter(this,event)">\
                </th>\
                <th>\
                    <input type="text" name="tng_penambah_v_'+id+'[]" class="form-control tng_penambah_v_'+id+'" onkeyup="set_volume('+id+','+index+',true,true)" onkeypress="filter(this,event)">\
                </th>\
                <th>\
                    <input type="text" name="brt_penambah_v_'+id+'[]" class="form-control brt_penambah_v_'+id+'" onkeyup="set_volume('+id+','+index+',true,true)" onkeypress="filter(this,event)">\
                </th>\
                <th>\
                    <input type="text" name="qty_penambah_v_'+id+'[]" class="form-control qty_penambah_v_'+id+'" onkeyup="set_volume('+id+','+index+',true,true)" onkeypress="filter(this,event)">\
                </th>\
                <th>\
                    <input type="text" name="fktr_penambah_v_'+id+'[]" class="form-control fktr_penambah_v_'+id+'" onkeyup="set_volume('+id+','+index+',true,true)" onkeypress="filter(this,event)">\
                </th>\
                <th>\
                    <button class="btn btn-danger" type="button" onclick=remove_item('+id+',"#tr_penambah_v_'+index+'",false)>\
                        <i class="fa fa-trash"></i>\
                    </button>\
                </th>\
            </tr>')
        }else{
            index = ($('.nama_rincian_penambah_'+id).length - 1) + 1
            $('tbody#rincian_penambah-'+id).append('\
            <tr id="tr_penambah_'+index+'">\
                <th colspan="2">\
                    <input type="text" name="nama_rincian_penambah_'+id+'[]" class="form-control nama_rincian_penambah_'+id+'" placeholder="masukan nama rincian" required>\
                </th>\
                <th class="volume_rincian_penambah_'+id+'">\
                    0\
                </th>\
                <th></th>\
                <th>\
                    <input type="text" name="pjg_penambah_'+id+'[]" class="form-control pjg_penambah_'+id+'" onkeyup="set_volume('+id+','+index+',false, true)" onkeypress="filter(this,event)">\
                </th>\
                <th>\
                    <input type="text" name="lbr_penambah_'+id+'[]" class="form-control lbr_penambah_'+id+'" onkeyup="set_volume('+id+','+index+',false, true)" onkeypress="filter(this,event)">\
                </th>\
                <th>\
                    <input type="text" name="tng_penambah_'+id+'[]" class="form-control tng_penambah_'+id+'" onkeyup="set_volume('+id+','+index+',false, true)" onkeypress="filter(this,event)">\
                </th>\
                <th>\
                    <input type="text" name="brt_penambah_'+id+'[]" class="form-control brt_penambah_'+id+'" onkeyup="set_volume('+id+','+index+',false, true)" onkeypress="filter(this,event)">\
                </th>\
                <th>\
                    <input type="text" name="qty_penambah_'+id+'[]" class="form-control qty_penambah_'+id+'" onkeyup="set_volume('+id+','+index+',false, true)" onkeypress="filter(this,event)">\
                </th>\
                <th>\
                    <input type="text" name="fktr_penambah_'+id+'[]" class="form-control fktr_penambah_'+id+'" onkeyup="set_volume('+id+','+index+',false, true)" onkeypress="filter(this,event)">\
                </th>\
                <th>\
                    <button class="btn btn-danger" type="button" onclick=remove_item('+id+',"#tr_penambah_'+index+'",false)>\
                        <i class="fa fa-trash"></i>\
                    </button>\
                </th>\
            </tr>')
        }
    }

    function add_pengurang(id,vendor){
        if(vendor){
            index = ($('.nama_rincian_pengurang_v_'+id).length - 1) + 1
            $('tbody#rincian_pengurang-v'+id).append('\
            <tr id="tr_pengurang_v_'+index+'">\
                <th colspan="2">\
                    <input type="text" name="nama_rincian_pengurang_v_'+id+'[]" class="form-control nama_rincian_pengurang_v_'+id+'" placeholder="masukan nama rincian" required>\
                </th>\
                <th class="volume_rincian_pengurang_v_'+id+'">\
                    0\
                </th>\
                <th></th>\
                <th>\
                    <input type="text" name="pjg_pengurang_v_'+id+'[]" class="form-control pjg_pengurang_v_'+id+'" onkeyup="set_volume('+id+','+index+',true,false)" onkeypress="filter(this,event)" >\
                </th>\
                <th>\
                    <input type="text" name="lbr_pengurang_v_'+id+'[]" class="form-control lbr_pengurang_v_'+id+'" onkeyup="set_volume('+id+','+index+',true,false)" onkeypress="filter(this,event)" >\
                </th>\
                <th>\
                    <input type="text" name="tng_pengurang_v_'+id+'[]" class="form-control tng_pengurang_v_'+id+'" onkeyup="set_volume('+id+','+index+',true,false)" onkeypress="filter(this,event)" >\
                </th>\
                <th>\
                    <input type="text" name="brt_pengurang_v_'+id+'[]" class="form-control brt_pengurang_v_'+id+'" onkeyup="set_volume('+id+','+index+',true,false)" onkeypress="filter(this,event)" >\
                </th>\
                <th>\
                    <input type="text" name="qty_pengurang_v_'+id+'[]" class="form-control qty_pengurang_v_'+id+'" onkeyup="set_volume('+id+','+index+',true,false)" onkeypress="filter(this,event)" >\
                </th>\
                <th>\
                    <input type="text" name="fktr_pengurang_v_'+id+'[]" class="form-control fktr_pengurang_v_'+id+'" onkeyup="set_volume('+id+','+index+',true,false)" onkeypress="filter(this,event)" >\
                </th>\
                <th>\
                    <button class="btn btn-danger" type="button" onclick=remove_item('+id+',"#tr_pengurang_v_'+index+'",false)>\
                        <i class="fa fa-trash"></i>\
                    </button>\
                </th>\
            </tr>')
        }else{
            index = ($('.nama_rincian_pengurang_'+id).length - 1) + 1
            $('tbody#rincian_pengurang-'+id).append('\
            <tr id="tr_pengurang_'+index+'">\
                <th colspan="2">\
                    <input type="text" name="nama_rincian_pengurang_'+id+'[]" class="form-control nama_rincian_pengurang_'+id+'" placeholder="masukan nama rincian" required>\
                </th>\
                <th class="volume_rincian_pengurang_'+id+'">\
                    0\
                </th>\
                <th></th>\
                <th>\
                    <input type="text" name="pjg_pengurang_'+id+'[]" class="form-control pjg_pengurang_'+id+'" onkeyup="set_volume('+id+','+index+',false,false)" onkeypress="filter(this,event)" >\
                </th>\
                <th>\
                    <input type="text" name="lbr_pengurang_'+id+'[]" class="form-control lbr_pengurang_'+id+'" onkeyup="set_volume('+id+','+index+',false,false)" onkeypress="filter(this,event)" >\
                </th>\
                <th>\
                    <input type="text" name="tng_pengurang_'+id+'[]" class="form-control tng_pengurang_'+id+'" onkeyup="set_volume('+id+','+index+',false,false)" onkeypress="filter(this,event)" >\
                </th>\
                <th>\
                    <input type="text" name="brt_pengurang_'+id+'[]" class="form-control brt_pengurang_'+id+'" onkeyup="set_volume('+id+','+index+',false,false)" onkeypress="filter(this,event)" >\
                </th>\
                <th>\
                    <input type="text" name="qty_pengurang_'+id+'[]" class="form-control qty_pengurang_'+id+'" onkeyup="set_volume('+id+','+index+',false,false)" onkeypress="filter(this,event)" >\
                </th>\
                <th>\
                    <input type="text" name="fktr_pengurang_'+id+'[]" class="form-control fktr_pengurang_'+id+'" onkeyup="set_volume('+id+','+index+',false,false)" onkeypress="filter(this,event)" >\
                </th>\
                <th>\
                    <button class="btn btn-danger" type="button" onclick=remove_item('+id+',"#tr_pengurang_'+index+'",false)>\
                        <i class="fa fa-trash"></i>\
                    </button>\
                </th>\
            </tr>')
        }
    }

    function remove_item(id,el,vendor){
        $(el).remove();
        if(!vendor){
            total_volume = 0;
            $('.volume_rincian_penambah_'+id).each(function(){
                total_volume += parseFloat($(this).text())
            })
            $('.volume_rincian_pengurang_'+id).each(function(){
                total_volume -= parseFloat($(this).text())
            })
            $('#volume_'+id).text(total_volume)
        }else{
           $('.volume_rincian_penambah_v_'+id).each(function(){
                total_volume += parseFloat($(this).text())
            })
            $('.volume_rincian_pengurang_v_'+id).each(function(){
                total_volume -= parseFloat($(this).text())
            })
            $('#volume_v'+id).text(total_volume)
        }
    }

    $('.id_ahs').change(function(e){
        id = $(this).val()
        if ($(this).prop('checked')) {
            $('tbody#rincian_penambah-'+id).find('button').attr('disabled',false)
            $('tbody#rincian_pengurang-'+id).find('button').attr('disabled',false)

        }else{
            $('tbody#rincian_penambah-'+id).find('button').attr('disabled',true)
            $('tbody#rincian_pengurang-'+id).find('button').attr('disabled',true)

            $('tbody#rincian_penambah-'+id).children('tr:not(:first)').remove()
            $('tbody#rincian_pengurang-'+id).children('tr:not(:first)').remove()
        }
    });

    $('.id_ahs_vendor').change(function(e){
        id = $(this).val()
        if ($(this).prop('checked')) {
            $('tbody#rincian_penambah-v'+id).find('button').attr('disabled',false)
            $('tbody#rincian_pengurang-v'+id).find('button').attr('disabled',false)

        }else{
            $('tbody#rincian_penambah-v'+id).find('button').attr('disabled',true)
            $('tbody#rincian_pengurang-v'+id).find('button').attr('disabled',true)

            $('tbody#rincian_penambah-v'+id).children('tr:not(:first)').remove()
            $('tbody#rincian_pengurang-v'+id).children('tr:not(:first)').remove()
        }
    });

    function filter(el,evt){
        var theEvent = evt || window.event;
        var char = String.fromCharCode(theEvent.keyCode);
        if (char > 0 || char < 9 || char == ',') {
            if (char == ',') {
                cek = $(el).val().includes(',');
                if (cek) {
                    theEvent.preventDefault();        
                }
            }
        }else{
            theEvent.preventDefault();
        }
    }

    function set_volume(id,index,vendor,penambah){
        total_volume = 0
        if (penambah) {
            if (vendor) {
                pjg = $('.pjg_penambah_v_'+id).eq(index).val().replace(',','.')?$('.pjg_penambah_v_'+id).eq(index).val().replace(',','.'):1;
                lbr = $('.lbr_penambah_v_'+id).eq(index).val().replace(',','.')?$('.lbr_penambah_v_'+id).eq(index).val().replace(',','.'):1;
                tng = $('.tng_penambah_v_'+id).eq(index).val().replace(',','.')?$('.tng_penambah_v_'+id).eq(index).val().replace(',','.'):1;
                brt = $('.brt_penambah_v_'+id).eq(index).val().replace(',','.')?$('.brt_penambah_v_'+id).eq(index).val().replace(',','.'):1;
                qty = $('.qty_penambah_v_'+id).eq(index).val().replace(',','.')?$('.qty_penambah_v_'+id).eq(index).val().replace(',','.'):1;
                fktr = $('.fktr_penambah_v_'+id).eq(index).val().replace(',','.')?$('.fktr_penambah_v_'+id).eq(index).val().replace(',','.'):1;

                volume = parseFloat(pjg * lbr * tng * brt * qty * fktr);
                $('.volume_rincian_penambah_v_'+id).eq(index).text(Math.round(volume * 100) / 100)
            }else{
                pjg = $('.pjg_penambah_'+id).eq(index).val().replace(',','.')?$('.pjg_penambah_'+id).eq(index).val().replace(',','.'):1;
                lbr = $('.lbr_penambah_'+id).eq(index).val().replace(',','.')?$('.lbr_penambah_'+id).eq(index).val().replace(',','.'):1;
                tng = $('.tng_penambah_'+id).eq(index).val().replace(',','.')?$('.tng_penambah_'+id).eq(index).val().replace(',','.'):1;
                brt = $('.brt_penambah_'+id).eq(index).val().replace(',','.')?$('.brt_penambah_'+id).eq(index).val().replace(',','.'):1;
                qty = $('.qty_penambah_'+id).eq(index).val().replace(',','.')?$('.qty_penambah_'+id).eq(index).val().replace(',','.'):1;
                fktr = $('.fktr_penambah_'+id).eq(index).val().replace(',','.')?$('.fktr_penambah_'+id).eq(index).val().replace(',','.'):1;

                volume = parseFloat(pjg * lbr * tng * brt * qty * fktr);
                $('.volume_rincian_penambah_'+id).eq(index).text(Math.round(volume * 100) / 100)
            }
        }else{
            if (vendor) {
                pjg = $('.pjg_pengurang_v_'+id).eq(index).val().replace(',','.')?$('.pjg_pengurang_v_'+id).eq(index).val().replace(',','.'):1;
                lbr = $('.lbr_pengurang_v_'+id).eq(index).val().replace(',','.')?$('.lbr_pengurang_v_'+id).eq(index).val().replace(',','.'):1;
                tng = $('.tng_pengurang_v_'+id).eq(index).val().replace(',','.')?$('.tng_pengurang_v_'+id).eq(index).val().replace(',','.'):1;
                brt = $('.brt_pengurang_v_'+id).eq(index).val().replace(',','.')?$('.brt_pengurang_v_'+id).eq(index).val().replace(',','.'):1;
                qty = $('.qty_pengurang_v_'+id).eq(index).val().replace(',','.')?$('.qty_pengurang_v_'+id).eq(index).val().replace(',','.'):1;
                fktr = $('.fktr_pengurang_v_'+id).eq(index).val().replace(',','.')?$('.fktr_pengurang_v_'+id).eq(index).val().replace(',','.'):1;

                volume = parseFloat(pjg * lbr * tng * brt * qty * fktr);
                $('.volume_rincian_pengurang_v_'+id).eq(index).text(Math.round(volume * 100) / 100)
            }else{
                pjg = $('.pjg_pengurang_'+id).eq(index).val().replace(',','.')?$('.pjg_pengurang_'+id).eq(index).val().replace(',','.'):1;
                lbr = $('.lbr_pengurang_'+id).eq(index).val().replace(',','.')?$('.lbr_pengurang_'+id).eq(index).val().replace(',','.'):1;
                tng = $('.tng_pengurang_'+id).eq(index).val().replace(',','.')?$('.tng_pengurang_'+id).eq(index).val().replace(',','.'):1;
                brt = $('.brt_pengurang_'+id).eq(index).val().replace(',','.')?$('.brt_pengurang_'+id).eq(index).val().replace(',','.'):1;
                qty = $('.qty_pengurang_'+id).eq(index).val().replace(',','.')?$('.qty_pengurang_'+id).eq(index).val().replace(',','.'):1;
                fktr = $('.fktr_pengurang_'+id).eq(index).val().replace(',','.')?$('.fktr_pengurang_'+id).eq(index).val().replace(',','.'):1;

                volume = parseFloat(pjg * lbr * tng * brt * qty * fktr);
                $('.volume_rincian_pengurang_'+id).eq(index).text(Math.round(volume * 100) / 100)
            }
        }
        if (vendor) {
            $('.volume_rincian_penambah_v_'+id).each(function(){
                total_volume += parseFloat($(this).text())
            })
            $('.volume_rincian_pengurang_v_'+id).each(function(){
                total_volume -= parseFloat($(this).text())
            })
            $('#volume_v'+id).text(total_volume)
        }else{
            $('.volume_rincian_penambah_'+id).each(function(){
                total_volume += parseFloat($(this).text())
            })
            $('.volume_rincian_pengurang_'+id).each(function(){
                total_volume -= parseFloat($(this).text())
            })
            $('#volume_'+id).text(total_volume)
        }
    }
</script>
@endsection