@extends('layout')
@section('content')

@if (session('success'))
<div class="alert alert-success" role="alert">
    <button type="button" class="close" data-dismiss="alert">×</button>
    {{ session('success') }}
</div>
@elseif(session('danger'))
<div class="alert alert-danger" role="alert">
    <button type="button" class="close" data-dismiss="alert">×</button>
    {{ session('danger') }}
</div>
@endif

<!--Content Header (Page header)-->
<div class="content-header row align-items-center m-0">
    <nav aria-label="breadcrumb" class="col-sm-4 order-sm-last mb-3 mb-sm-0 p-0 ">
        <ol class="breadcrumb d-inline-flex font-weight-600 fs-13 bg-white mb-0 float-sm-right">
            <li class="breadcrumb-item"><a href="{{ URL('dashboard') }}">Dashboard</a></li>
            <li class="breadcrumb-item active">Type Wise Bill Generate</li>
        </ol>
    </nav>
    <div class="col-sm-8 header-title p-0">
        <div class="media">
            <div class="header-icon text-success mr-3"><i class="typcn typcn-document-text"></i></div>
            <div class="media-body">
                <h1 class="font-weight-bold">Type Wise Bill Generate</h1>
                <small>With type wise company</small>                
            </div>
        </div>
    </div>
</div>
<div class="body-content">
    <div class="row">
        <div class="col-md-12 col-lg-12">
            <div class="card mb-4">
                <div class="card-body">
                    <form>
                        @csrf
                        <div class="widget-content padding">
                            <div class="form-group">
                                <div class="row">									
                                    <div class="col-sm-6">
                                        <label>Users</label>
                                        <select class="form-control" name="type" id="type">
                                            <option value="All">All Type Customers</option>
                                            @foreach($type as $data)                          
                                            <option value="{{ $data->ty_id }}">{{ $data->ty_name }}</option>       
                                            @endforeach                        
                                        </select>
                                    </div>										
                                </div>
                            </div>
                        
                            <div class="form-group">
                                <div class="row">
                                    <div class="col-sm-4">
                                        <button type="button" id="mainButton" class="btn btn-primary" onclick="showCustomerData()">Show</button>

                                        <button id="loadingButton" class="buttonload btn btn-primary" style="display:none;">
                                          <i class="fa fa-spinner fa-spin"></i> Loading
                                        </button>

                                    </div>
                                </div>
                            </div>
                        </div>
                    </form><hr>

                    <div id="displayContent">
                        
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
    function showCustomerData()
    {
        var type = $("#type").val();
        $("#mainButton").hide();
        $("#loadingButton").show();

        $.ajax({
            url:'{{ url('bulk-bill-generate-show') }}',
            type: 'GET',
            data: { type:type},
            success: function(data)
            {                
                $("#displayContent").html(data); 
                $("#mainButton").show();
                $("#loadingButton").hide();
            }
        });
    }

    var isAllCheck = false;
    function togglecheckboxes(cn){

        var cbarray = document.getElementsByName(cn);
        for(var i = 0; i < cbarray.length; i++){

            cbarray[i].checked = !isAllCheck
        }   

        isAllCheck = !isAllCheck;   
    }

    function valueCalBandwith(id)
    {
        //alert(id);
        var bandwith        = $("#cubandwith_"+id).val();
        var bandwithPrice   = $("#cubandwithprice_"+id).val();
        var totalPrice      = parseFloat(bandwith*bandwithPrice).toFixed(2);
        $("#cutotalbn_"+id).val(totalPrice);

        valueCalSub(id);
    }

    function valueCalYoutube(id)
    {
        //alert(id);
        var bandwith    = $("#cuyoutube_"+id).val();
        var price       = $("#cuyoutubeprice_"+id).val();
        var totalPrice  = parseFloat(bandwith*price).toFixed(2);
        $("#cutotalyo_"+id).val(totalPrice);

        valueCalSub(id);
    }

    function valueCalFacebook(id)
    {
        //alert(id);
        var bandwith    = $("#cufacebook_"+id).val();
        var price       = $("#cufacebookprice_"+id).val();
        var totalPrice  = parseFloat(bandwith*price).toFixed(2);
        $("#cutotalfa_"+id).val(totalPrice);

        valueCalSub(id);
    }

    function valueCalData(id)
    {
        //alert(id);
        var bandwith    = $("#cudata_"+id).val();
        var price       = $("#cudataprice_"+id).val();
        var totalPrice  = parseFloat(bandwith*price).toFixed(2);
        $("#cutotaldata_"+id).val(totalPrice);

        valueCalSub(id);
    }

    function valueCalBdix(id)
    {
        //alert(id);
        var bandwith    = $("#cubdix_"+id).val();
        var price       = $("#cubdixprice_"+id).val();
        var totalPrice  = parseFloat(bandwith*price).toFixed(2);
        $("#cutotalbdix_"+id).val(totalPrice);

        valueCalSub(id);
    }

    function valueCalSub(id)
    {
        var grand_price = parseFloat($("#cutotalfa_"+id).val()*1)+parseFloat($("#cutotalbn_"+id).val()*1)+parseFloat($("#cutotalyo_"+id).val()*1)+parseFloat($("#cutotaldata_"+id).val()*1)+parseFloat($("#cutotalbdix_"+id).val()*1);

        $("#cugrtotal_"+id).val(parseFloat(grand_price).toFixed(2));
    }
    
    
        
</script>
@endsection