@extends('admin.layouts.master')
@section('content')
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.25/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.7.1/css/buttons.dataTables.min.css">
<div class="page-content">
    <div class="page-bar">
        <div class="page-title-breadcrumb">
            <div class=" pull-left">
                <div class="page-title">All Client Budget</div>
                @if(session('success'))
                    <div class="alert alert-success">{{session('success')}}</div>
                @elseif(session('warning'))
                    <div class="alert alert-warning">{{session('warning')}}</div>
                @elseif(session('danger'))
                    <div class="alert alert-danger">{{session('danger')}}</div>
                @endif

                @if($errors->any())
                    {!! implode('', $errors->all("<div class='alert alert-warning'>:message</div>")) !!}
                @endif
            </div>
            <ol class="breadcrumb page-breadcrumb pull-right">
                <li><i class="fa fa-home"></i>&nbsp;<a class="parent-item" href="index-2.html">Home</a>&nbsp;<i class="fa fa-angle-right"></i>
                </li>
                <li class="active">All Client Budget List</li>
            </ol>
        </div>
    </div>
    <div>
        {{-- <h3>Filters</h3> --}}
    <div class="row">
            <div class="col-md-3">
                <label for="">Start Date</label>
                <input type="date" name="startDateFrom" id="startDateFrom" class="form-control" @if(!empty(session()->get('startDateFrom'))) value="{{session()->get('startDateFrom')}}" @endif>
            </div>
            <div class="col-md-3">
                <label for="">End Date</label>
                <input type="date" name="startDateTo" id="startDateTo" class="form-control" @if(!empty(session()->get('startDateTo'))) value="{{session()->get('startDateTo')}}" @endif>
            </div>
            {{-- <div class="col-md-3">
                <label for="">End Date From</label>
                <input type="date" name="endDateFrom" id="endDateFrom" class="form-control" @if(!empty(session()->get('endDateFrom'))) value="{{session()->get('endDateFrom')}}" @endif>
            </div>
            <div class="col-md-3">
                <label for="">End Date To</label>
                <input type="date" name="endDateTo" id="endDateTo" class="form-control" @if(!empty(session()->get('endDateTo'))) value="{{session()->get('endDateTo')}}" @endif>
            </div> --}}
            <div class="col-md-3">
                <Label>Filter By Client</Label>
                <select class="form-control js-example-basic-single" name="client" id="client" >
                    <option selected>Select Client</option>
                    @foreach ($client as $clients)
                        <option value="{{$clients['id']}}" @if(session()->get('client') == $clients['id']) selected @endif>{{$clients['name']}}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-3" style="margin-top:33px;">
                <button id="resetFilter" class="btn btn-danger btn-sm">Reset</button>
            </div>
    </div>
    <div class="row">
             {{-- @php
                 session()->forget('current_date');
             @endphp --}}
            {{-- <div class="col-md-3">
                <label for="">Date</label> --}}
                <input type="hidden" name="current_date" id="current_date" class="form-control"  value="{{Carbon\Carbon::now()->format('Y-m-d')}}" readonly>
            {{-- </div> --}}
            <div class="col-md-3" style="margin-top:33px;">
                <button id="active_buget" class="btn btn-primary btn-sm">Active Budget</button>
            </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <div class="tabbable-line">
                <div class="tab-content">
                    <div class="tab-pane active fontawesome-demo">
                        <div class="row">
                            <div class="col-md-12">
                                <div class="card card-box">
                                    <div class="card-head">
                                        <header>All Client Budget</header>
                                        <div class="tools">
                                            <a class="fa fa-repeat btn-color box-refresh" href="javascript:;"></a>
                                            <a class="t-collapse btn-color fa fa-chevron-down" href="javascript:;"></a>
                                            {{-- <a class="t-close btn-color fa fa-times" href="javascript:;"></a> --}}
                                        </div>
                                    </div>
                                    <div class="card-body ">
                                        <div class="row">
                                            <div class="col-md-6 col-sm-6 col-6">
                                               <div class="btn-group">
                                                    @can('create',"App\Models\Users\ClientBudget")
                                                        <div class="btn-group">
                                                            <a href="#" type="button" class="btn btn-info" data-toggle="modal" data-target="#myModal">Add New <i class="fa fa-plus"></i> </a>
                                                        </div>
                                                    @endcan
                                                    @can('import',"App\Models\Users\ClientBudget")
                                                        <form action="{{route('clientBudget.excel_import')}}" method="POST" enctype="multipart/form-data" id="clientImportForm">
                                                            @csrf
                                                            <input type="file" name="clientbudgetImport" id="clientbudgetImport" class="btn btn-info ml-1" accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel" />
                                                            <input type="submit" id="submitImportForm" style="display: none;">
                                                        </form>
                                                    @endcan
                                                </div>
                                            </div>
                                            <div class="col-md-6 col-sm-6 col-6">
                                                <div class="btn-group pull-right">
                                                    @can('export',"App\Models\Users\ClientBudget")<a href="{{asset('admin/dummysheets/clientbudget_sample.xlsx')}}" class="btn btn-primary mr-2" download>Sample Sheet</a>@endcan
                                                    {{-- <a class="btn deepPink-bgcolor  btn-outline dropdown-toggle" data-toggle="dropdown">Tools
                                                        <i class="fa fa-angle-down"></i>
                                                    </a>
                                                    <ul class="dropdown-menu pull-right">
                                                        <li>
                                                            <a href="javascript:;">
                                                                <i class="fa fa-print"></i> Print </a>
                                                        </li>
                                                        <li>
                                                            <a href="javascript:;">
                                                                <i class="fa fa-file-pdf-o"></i> Save as PDF </a>
                                                        </li>
                                                        <li>
                                                            <a href="javascript:;">
                                                                <i class="fa fa-file-excel-o"></i> Export to Excel </a>
                                                        </li>
                                                    </ul> --}}
                                                </div>
                                            </div>
                                        </div>
                                        <div class="table-scrollable">
                                        <table id="clientbudgettable" class="table table-striped table-bordered table-hover table-checkable order-column valign-middle">
                                            <thead>
                                                <tr>
                                                    <th>ID</th>
                                                    <th>Client Name</th>
                                                    <th>Budget Amount </th>
                                                    <th>Remaining Budget</th>
                                                    <th>Used Budget</th>
                                                    <th>Start Date</th>
                                                    <th>End Date </th>
                                                    <th>Remaining Fornight</th>
                                                    <th>Total Fornight</th>
                                                    <th>last Fornight Charged</th>
                                                    <th>Target Rate</th>
                                                    <th> Action </th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                            </tbody>
                                        </table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!--Add Modal -->
<div id="myModal" class="modal fade" role="dialog">
    <div class="modal-dialog modal-lg">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Add Client Budget</h4>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>
            <form action="{{route('admin.clientbudget.process')}}" method="post" id="addClientBudgetForm">
                @csrf
                <div class="modal-body">
                    <div class="card-box">
                        <div class="card-body row">
                            <div class="col-lg-6 p-t-20">
                                <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label txt-full-width is-upgraded" data-upgraded=",MaterialTextfield">
                                    <Label>Client Name</Label>
                                    {{-- <input type="text" name="client_name" class="form-control"> --}}
                                    <select name="client_name" id="client_name" class="form-control js-example-basic-single" value="{{old('client_name')}}">
                                        <option value="">Select Client Name</option>
                                    @foreach ($client as $clients)
                                        <option value="{{$clients->id}}">{{$clients->name}} ({{$clients->is_client}})</option>
                                    @endforeach
                                    </select>
                                    <span class="text-danger">{{$errors->first('client_name')}}</span>
                                </div>
                            </div>
                            <div class="col-lg-6 p-t-20">
                                <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label txt-full-width is-upgraded" data-upgraded=",MaterialTextfield">
                                    <Label>Budget Amount</Label>
                                    <input type="number" step="any" name="amount" class="form-control" value="{{old('amount')}}" required>
                                    <span class="text-danger">{{$errors->first('amount')}}</span>

                                </div>
                            </div>
                            <div class="col-lg-6 p-t-20">
                                <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label txt-full-width is-upgraded" data-upgraded=",MaterialTextfield">
                                    <Label>Start Date</Label>
                                    <input type="date" name="start_date" id="startDate" class="form-control" value="{{old('start_date')}}" required>
                                    <span class="text-danger">{{$errors->first('start_date')}}</span>

                                </div>
                            </div>
                            <div class="col-lg-6 p-t-20">
                                <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label txt-full-width is-upgraded" data-upgraded=",MaterialTextfield">
                                    <Label>End Date</Label>
                                    <input type="date" name="end_date" id="endDate" class="form-control" value="{{old('end_date')}}" required>
                                    <span class="text-danger">{{$errors->first('end_date')}}</span>

                                </div>
                            </div>
                            <div class="col-lg-12 p-t-20 text-center">
                                <button type="submit" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect m-b-10 m-r-20 btn-pink" id="addBudget" data-upgraded=",MaterialButton,MaterialRipple">Submit<span class="mdl-button__ripple-container"><span class="mdl-ripple"></span></span></button>
                                <button type="button" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect m-b-10 btn-default" data-upgraded=",MaterialButton,MaterialRipple" data-dismiss="modal">Cancel<span class="mdl-button__ripple-container"><span class="mdl-ripple"></span></span></button>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
<!--Edit Modal -->
<div id="myModal1" class="modal fade" role="dialog">
    <div class="modal-dialog modal-lg">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Edit Client Budget</h4>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>
            <form action="{{route('admin.clientbudget.update')}}" method="post" id="editClientBudgetForm">
                @csrf
                <div class="modal-body">
                    <div class="card-box">
                        <div class="card-body row">
                            <div class="col-lg-6 p-t-20">
                                <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label txt-full-width is-upgraded" data-upgraded=",MaterialTextfield">
                                    <Label>Client Name</Label>
                                    <input type="hidden" name="id" class="id" value="">
                                    {{-- <input type="text" class="form-control"> --}}
                                    <select name="client_name" id="editClient_name" class="form-control js-example-basic-single client_name" value="{{old('client_name')}}">
                                        <option value="">Select Client Name</option>
                                    @foreach ($client as $clients)
                                        <option value="{{$clients->id}}">{{$clients->name}} ({{$clients->is_client}})</option>
                                    @endforeach
                                    </select>
                                    <span class="text-danger">{{$errors->first('client_name')}}</span>
                                </div>
                            </div>
                            <div class="col-lg-6 p-t-20">
                                <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label txt-full-width is-upgraded" data-upgraded=",MaterialTextfield">
                                    <Label>Budget Amount</Label>
                                    <input type="number" step="any" name="amount" class="form-control amount" value="{{old('amount')}}">
                                    <span class="text-danger">{{$errors->first('amount')}}</span>

                                </div>
                            </div>
                            <div class="col-lg-6 p-t-20">
                                <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label txt-full-width is-upgraded" data-upgraded=",MaterialTextfield">
                                    <Label>Start Date</Label>
                                    <input type="date" name="start_date" id="editStartDate" class="form-control start_date" value="{{old('start_date')}}">
                                    <span class="text-danger">{{$errors->first('start_date')}}</span>

                                </div>
                            </div>
                            <div class="col-lg-6 p-t-20">
                                <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label txt-full-width is-upgraded" data-upgraded=",MaterialTextfield">
                                    <Label>End Date</Label>
                                    <input type="date" name="end_date" id="editEndDate" class="form-control end_date" value="{{old('end_date')}}">
                                    <span class="text-danger">{{$errors->first('end_date')}}</span>

                                </div>
                            </div>
                            <div class="col-lg-12 p-t-20 text-center">
                                <input type="hidden" name="updateId" id="updateId">
                                <button type="submit" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect m-b-10 m-r-20 btn-pink" id="editBudget" data-upgraded=",MaterialButton,MaterialRipple">Submit<span class="mdl-button__ripple-container"><span class="mdl-ripple"></span></span></button>
                                <button type="button" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect m-b-10 btn-default" data-upgraded=",MaterialButton,MaterialRipple" data-dismiss="modal">Cancel<span class="mdl-button__ripple-container"><span class="mdl-ripple"></span></span></button>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection
@section('script')
{{-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> --}}
<script src="https://cdn.datatables.net/buttons/1.7.1/js/dataTables.buttons.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
<script src="https://cdn.datatables.net/buttons/1.7.1/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.7.1/js/buttons.print.min.js"></script>
    <script>
       /* var start = document.getElementById('startDate');
        var end = document.getElementById('endDate');

        start.addEventListener('change', function() {
            if (start.value)
                end.min = start.value;
        }, false);
        end.addEventLiseter('change', function() {
            if (end.value)
                start.max = end.value;
        }, false);
        var start = document.getElementById('editStartDate');
        var end = document.getElementById('editStartDate');

        start.addEventListener('change', function() {
            if (start.value)
                end.min = start.value;
        }, false);
        end.addEventLiseter('change', function() {
            if (end.value)
                start.max = end.value;
        }, false);*/
        $(document).ready(function() {
             $('.js-example-basic-single').select2();
             //$('.selectpicker').selectpicker();
            $('#clientbudgetImport').on('change', function()
            {
                $("#submitImportForm").click();
            });

            $("#startDateTo").on('change', function()
            {
                if($("#startDateFrom").val() != '' || $("#startDateFrom").val() != null)
                {
                     //alert($("#startDateFrom").val());
                    $.ajax({
                        url:"{{route('clientbudget.filter')}}",
                        type:'POST',
                        data:
                        {
                            "_token":"{{csrf_token()}}",
                            "startDateFrom":$("#startDateFrom").val(),
                            "startDateTo":$("#startDateTo").val(),
                        },
                        success:function(response)
                        {
                            if(response.status)
                            {
                                location.reload();
                            }
                        },
                        error:function()
                        {
                            alert('Something Went Wrong');
                        }
                    });
                }
                else
                {
                    alert('Please Select Date In Start Date From Section');
                }
            } );

            $("#endDateTo").on('change', function()
            {
                if($("#endDateFrom").val() != '' || $("#endDateFrom").val() != null)
                {
                    $.ajax({
                        url:"{{route('clientbudget.filter')}}",
                        type:'POST',
                        data:
                        {
                            "_token":"{{csrf_token()}}",
                            "endDateFrom":$("#endDateFrom").val(),
                            "endDateTo":$("#endDateTo").val(),
                        },
                        success:function(response)
                        {
                            if(response.status)
                            {
                                location.reload();
                            }
                        },
                        error:function()
                        {
                            alert('Something Went Wrong');
                        }
                    });
                }
                else
                {
                    alert('Please Select Date In Start Date From Section');
                }
            } );

            $("#client").on('change', function()
            {
                $.ajax({
                    url:"{{route('clientbudget.filter')}}",
                    type:'POST',
                    data:
                    {
                        "_token":"{{csrf_token()}}",
                        "client":$("#client").val()
                    },
                    success:function(response)
                    {
                        if(response.status)
                        {
                            location.reload();
                        }
                    },
                    error:function()
                    {
                        alert('Something Went Wrong');
                    }
                });
            } );

             $("#active_buget").on('click', function()
            {
                // alert($("#current_date").val())
                $.ajax({
                    url:"{{route('clientbudget.filter')}}",
                    type:'POST',
                    data:
                    {
                        "_token":"{{csrf_token()}}",
                        "current_date":$("#current_date").val()
                    },
                    success:function(response)
                    {
                        if(response.status)
                        {
                            location.reload();
                        }
                    },
                    error:function()
                    {
                        alert('Something Went Wrong');
                    }
                });
            } );

            $("#resetFilter").on('click', function()
            {
                $.ajax({
                    url:"{{route('clientbudget.resetfilter')}}",
                    type:'GET',
                    success:function(response)
                    {
                        if(response)
                        {
                            location.reload();
                        }
                    },
                    error:function()
                    {
                        alert('Something Went Wrong');
                    }
                });
            } );

            $('#clientbudgettable').dataTable( {
                //data: dataSet.data,
                processing: true,
                serverSide: true,
                "createdRow": function( row, data, dataIndex){
                    if(data['target_rate']>0){
                        var colorformula=((data['used_fornight']-data['target_rate'])/data['target_rate'])*100
                        if(colorformula==40 ||colorformula>40){
                            $(row).css({"background-color":"orange"});
                        }else if(colorformula==-40 || colorformula<-40){
                            $(row).css({"background-color":"red"});
                        }
                    }
                },
                //"paging":   false,
                ajax: {url: "{{ route('data.client.buget') }}"},
                columns:[
                {data: 'id',name:'id'},
                {data: 'name',name:'name'},
                {data: 'amount',name:'amount'},
                {data: 'remaining_amount1',name:'remaining_amount1'},
                {data: 'total_client_charge1',name:'total_client_charge1'},
                {data: 'start_date',name:'start_date'},
                {data: 'end_date',name:'end_date'},
                {data: 'remaining_fornight',name:'remaining_fornight'},
                {data: 'total_fornight',name:'total_fornight'},
                {data: 'used_fornight',name:'used_fornight'},
                {data: 'target_rate',name:'target_rate'},
                {data: 'action',name: 'action',orderable: false}
                ],
                @can('export',"App\Models\Users\ClientBudget")
                    dom: 'lBfrtip',
                    buttons: [
                        {
                            extend: 'excelHtml5',
                            exportOptions: {
                               // "visible" : false,
                                columns: [0,1, 2, 3, 4, 5,6,7,8,9,10]
                            }
                        },
                        {
                            extend: 'pdfHtml5',
                            exportOptions: {
                               // "visible" : false,
                                columns: [0,1, 2, 3, 4, 5,6]
                            }
                        },
                    ],
                @endcan
                "lengthMenu": [ [-1], ["All"] ]
                /*dom: 'Bfrtip',
                buttons: [
                    {
                        extend: 'excelHtml5',
                        exportOptions: {
                            columns: [ 0, 1, 2, 3, 4, 5 ]
                        }
                    },
                    {
                        extend: 'pdfHtml5',
                        exportOptions: {
                            columns: [ 0, 1, 2, 3, 4, 5 ]
                        }
                    },
                ]*/
            });
            check="{{old('client_name')}}";
            check_id="{{old('id')}}";
            if (check!="" && check_id=='') {
            $("#myModal").modal("show");
            }
            if (check_id!="") {
            $(".id").val(check_id);
            $("#myModal1").modal("show");
            }

            $("#addBudget").on('click', function(e)
            {
                e.preventDefault();
                $.ajax({
                    url: "{{route('client.buget.clientBudgetBetween')}}",
                    type: "POST",
                    data:
                    {
                        "_token":"{{csrf_token()}}",
                        'clientId':$("#client_name").val(),
                        'startDate':$("#startDate").val(),
                        'endDate':$("#endDate").val(),
                    },
                    success:function(response)
                    {
                        // console.log(response);
                        if(response == 'Record already Exists')
                        {
                            alert('Budget Already Exists Between These Dates');
                        }
                        else
                        {
                            if(response == 'Record Updated')
                            {
                                $("#addClientBudgetForm").submit();
                            }
                            if(response.status == 3)
                            {
                                $("#startDate").val(response.date);
                                // alert($("#startDate").val());
                                // alert(response.date);
                                if($("#startDate").val() == response.date)
                                {
                                    if($("#endDate").val() > response.date)
                                    {
                                        $("#addClientBudgetForm").submit();
                                    }
                                    else
                                    {
                                        alert('End Date Must Be Greater Then Start Date');
                                    }
                                }
                            }
                            else
                            {
                                $("#addClientBudgetForm").submit();
                            }
                        }
                    },
                    error:function()
                    {
                        alert('Sorry.. Something Went Wrong');
                    }
                });
            });

            $("#editBudget").on('click', function(e)
            {
                e.preventDefault();
                // alert($("#editEndDate").val());
                $.ajax({
                    url: "{{route('editClientbuget.clientBudgetBetween')}}",
                    type: "POST",
                    data:
                    {
                        "_token":"{{csrf_token()}}",
                        'clientId':$("#editClient_name").val(),
                        'startDate':$("#editStartDate").val(),
                        'endDate':$("#editEndDate").val(),
                        'updateId':$("#updateId").val(),
                    },
                    success:function(response)
                    {
                        console.log(response);
                        if(response.status == false)
                        {
                            alert(response.message);
                        }
                        else
                        {
                            $("#editClientBudgetForm").submit();
                        }
                    },
                    error:function()
                    {
                        alert('Sorry.. Something Went Wrong');
                    }
                });
            });
        } );

$(document).on("click",".delete",function(){
    name=$(this).data("name");
    if(confirm('Do You Real Want To Delete This Client Budget ? ('+name+')'))
    {
        if(confirm('Sure Do You Want To Delete This Client Budget ? ('+name+')'))
        {
            id=$(this).data("id");
            $.ajax({
                url:'clientbudget-delete/'+id,
                type:'GET',
                data:{
                    _token:$('input[name=_token]').val()

                },
                success:function(response)
                {
                    $('#clientbudgettable').DataTable().ajax.reload();

                }

            })
        }
    }
})


$(document).on("click",".edit",function(){
    id=$(this).data("id");
    $("#updateId").val(id);
    $.get('clientbudget-edit/'+id,function(clientbudget){
    // console.log(cat);
    $('#myModal1 .id').val(clientbudget.id);
    $('#myModal1  .client_name').val(clientbudget.client_id).change();
    $('#myModal1  .amount').val(clientbudget.amount);
    $('#myModal1  .start_date').val(clientbudget.start_date);
    $('#myModal1  .end_date').val(clientbudget.end_date);

    $(".edit-message").html("");
    $('#myModal1').modal('show');
  });
})


    </script>
@endsection