@extends('templates.structure')
@section('custom_css')

<!-- Select2 -->
<link rel="stylesheet" href="{{asset('AdminLTE-3.0.0-alpha.2/plugins/select2/select2.min.css')}}">
<style>
    /* Start by setting display:none to make this hidden.
    Then we position it in relation to the viewport window
    with position:fixed. Width, height, top and left speak
    for themselves. Background we set to 80% white with
    our animation centered, and no-repeating */
    .modal_ajaxloading {
        display:    none;
        position:   fixed;
        z-index:    10000;
        top:        0;
        left:       0;
        height:     100%;
        width:      100%;
        background: rgba( 255, 255, 255, .8 )
                    url('{{asset("ajax-loader.gif")}}')
                    50% 50%
                    no-repeat;
    }

    /* When the body has the loading class, we turn
    the scrollbar off with overflow:hidden */
    body.loading .modal_ajaxloading {
        overflow: hidden;
    }

    /* Anytime the body has the loading class, our
    modal element will be visible */
    body.loading .modal_ajaxloading {
        display: block;
    }
    </style>
@endsection
@section('content')

<div class="row">
    <div class="col-md-12">
        <!-- general form elements disabled -->
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">Plan Adjust</h3>
            </div>
            <!-- /.card-header -->
            <form role="form" id="form">
                <div class="card-body">
                    <!-- text input -->
                    <div class="form-group">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label>Client:</label>
                                    <br>
                                    <select name="client_id" class="form-control">
                                    </select>  
                                </div>
                                <!-- /input-group -->
                            </div>
                            <!-- /.col-md-6 -->
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label>Plan:</label>
                                    <select name="plan" class="form-control" id="listplan" disabled>
                                    </select> 
                                </div>
                                <!-- /input-group -->
                            </div>
                            <!-- /.col-md-6 -->
                        </div>
                    </div>
                    <!-- text input -->
                    <div class="form-group">
                        <div class="row">
                            <div class="col-md-6 p-3">
                                <div class="form-group">
                                    <div class="row">
                                        <div class="col-3">
                                            <label>Client Id</label>
                                        </div>
                                        <div class="col-1">
                                            <span>:</span>
                                        </div>
                                        <div class="col">
                                            <span id="client_id"></span>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-3">
                                            <label>Name</label>
                                        </div>
                                        <div class="col-1">
                                            <span>:</span>
                                        </div>
                                        <div class="col">
                                            <span id="client_name"></span>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-3">
                                            <label>Company</label>
                                        </div>
                                        <div class="col-1">
                                            <span>:</span>
                                        </div>
                                        <div class="col">
                                            <span id="company_name"></span>
                                        </div>
                                    </div>
                                </div>
                                <!-- /input-group -->
                            </div>
                            <!-- /.col-md-6 -->
                            <div class="col-md-6 p-3">
                                <div class="form-group">
                                   <div class="row">
                                        <div class="col-3">
                                            <label>Plan Id</label>
                                        </div>
                                        <div class="col-1">
                                            <span>:</span>
                                        </div>
                                        <div class="col">
                                            <span id="plan_id"></span>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-3">
                                            <label>Product</label>
                                        </div>
                                        <div class="col-1">
                                            <span>:</span>
                                        </div>
                                        <div class="col">
                                            <span id="product"></span>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-3">
                                            <label>Expired At</label>
                                        </div>
                                        <div class="col-1">
                                            <span>:</span>
                                        </div>
                                        <div class="col ">
                                            <span id="exipred_at"></span>
                                        </div>
                                    </div>
                                </div>
                                <!-- /input-group -->
                            </div>
                            <!-- /.col-md-6 -->
                        </div>
                    </div>

                    <div class="form-group">
                        <div class="row pt-3 mb-3 border-top">
                            <div class="col-md-12">
                                <h5>Meeting Room</h5>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="input-group mb-3">
                                    <input type="text" class="form-control" disabled name="meetingroom_current">
                                    <div class="input-group-append">
                                        <span class="input-group-text">Current</span>
                                    </div>
                                </div>
                            </div>
                            <!-- /.col-md-6 -->
                            <div class="col-md-6">
                               <div class="input-group mb-3">
                                    <input type="text" class="form-control" name="meetingroom_new">
                                    <div class="input-group-append">
                                        <span class="input-group-text">New</span>
                                    </div>
                                </div>
                            </div>
                            <!-- /.col-md-6 -->
                        </div>
                    </div>

                    <div class="form-group">
                        <div class="row pt-3 mb-3 border-top">
                            <div class="col-md-12">
                                <h5>Work Pass</h5>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="input-group mb-3">
                                    <input type="text" class="form-control" disabled name="workpass_current">
                                    <div class="input-group-append">
                                        <span class="input-group-text">Current</span>
                                    </div>
                                </div>
                            </div>
                            <!-- /.col-md-6 -->
                            <div class="col-md-6">
                               <div class="input-group mb-3">
                                    <input type="text" class="form-control" name="workpass_new">
                                    <div class="input-group-append">
                                        <span class="input-group-text">New</span>
                                    </div>
                                </div>
                            </div>
                            <!-- /.col-md-6 -->
                        </div>
                    </div>
                </div>
                <!-- /.card-body -->
                <div class="card-footer">
                    <button type="submit" class="btn btn-info float-right">Save</button>
                    {{-- <button class="btn btn-default float-right">Cancel</button> --}}
                </div>
            </form>
        </div>
        <!-- /.card -->
    </div>
</div>
<!-- /.row -->
@endsection

@section('custom_js')
<!-- Select2 -->
<script src="{{asset('AdminLTE-3.0.0-alpha.2/plugins/select2/select2.full.min.js')}}"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@7.30.0/dist/sweetalert2.all.min.js"></script>
{{-- <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.0/axios.min.js"></script> --}}
<script>
    

    let client = $("select[name='client_id']")

    $("select[name='client_id']").select2({
        placeholder: 'Client name ...',
        width: '100%',
        allowClear: true,
        ajax: {            
            url: '{{route("clients.datatable")}}',
            dataType: 'json',
            data: function(params) {                
                return {                    
                    start: params.page == NaN ? 0 : (params.page-1) * 25,
                    length: 25,
                    columns: {
                        0:{
                        name: 'op.fullname',
                        orderable: true,
                        searchable: true
                        },
                        1:{
                        name: 'op.company_name',
                        orderable: true,
                        searchable: true
                        },
                        2:{
                        name: 'op.clientid',
                        orderable: true,
                        searchable: true
                        },
                        3:{
                        name: 'op.status',
                        orderable: true,
                        searchable: true,
                        search: {
                                regex: true,
                                value : '1',
                            },
                        }
                    },
                    search: {value: params.term},
                    order: {0:{dir:'asc'}}
                }
            },
            processResults: function (data, params) {
                params.page = params.page || 1;                
                var newData = []
                $.each(data.data, function(key, val){
                    var text = val.clientid;
                    text += (val.fullname != null ? ' - '+val.fullname : '');
                    text += (val.company_name != null ? ' - '+val.company_name : '');

                    newData[key] = {'id' : val.clientid, 'text' : text};                    
                })

                data.results = newData;
            
                return {
                    results: data.results,
                    pagination: {
                        more: (params.page * 25) < data.recordsFiltered
                    }
                }

            },
            cache: true
        }
    });

    client.on('select2:select', function (e) {
        console.log("asd");
        $("body").addClass("loading");
        var str = e.params.data.text;
        var client_data = str.split(" - ");
        $('[id="client_id"]').html(client_data[0]);
        $('[id="client_name"]').html(client_data[1]);
        $('[id="company_name"]').html(client_data[2]);
        $('[id="plan_id"]').html('');
        $('[id="product"]').html('');
        $('[id="exipred_at"]').html('');
        $('[name="meetingroom_current"]').val('');
        $('[name="workpass_current"]').val('');
        $('[name="meetingroom_new"]').val('');
        $('[name="workpass_new"]').val('');

            axios.get('{{route("plan.datatable")}}?columns[0][name]=op.members&columns[0][searchable]=true&columns[0][search][value]='+e.params.data.id+'&columns[1][name]=op.status&columns[1][searchable]=true&columns[1][search][value]=3', config) .then(function (response) {
                // console.log(response.data.data.length)
                $('#listplan').html('')
                if (response.data.data.length > 0){
                    $('#listplan').append($("<option></option>")
                                .text('Select Plan ...')); 
                    $.each(response.data.data, function (index, value) {

                        var param = {
                            id: value.id,
                            product_name: value.product_name,
                            expired: value.next_renew_date,
                            quota: {
                                working_pass: value.working_pass,
                                meeting_room_hours: value.meeting_room_hours,
                            },
                        };


                        $('#listplan').append($("<option></option>")
                                    .attr("value",value.id+"|||"+value.product_name+"|||"+value.next_renew_date+"|||"+value.meeting_room_hours+"|||"+value.working_pass)
                                    .text(value.product_name)); 

                        $('#listplan').attr('disabled', false);
                        $("body").removeClass("loading");
                    })

                } else {
                    $('#listplan').html('No Plan!')
                }
                
            })
            .catch(function (error) { 
                
                console.log(error);
            });
        });

    client.on("select2:unselect", function (e) { 
        console.log("unselect");
        $('#listplan').html('')
        $('#listplan').attr('disabled', false);
        $('[id="client_id"]').html('');
        $('[id="client_name"]').html('');
        $('[id="company_name"]').html('');
        $('[id="plan_id"]').html('');
        $('[id="product"]').html('');
        $('[id="exipred_at"]').html('');
        $('[name="meetingroom_current"]').val('');
        $('[name="workpass_current"]').val('');
        $('[name="meetingroom_new"]').val('');
        $('[name="workpass_new"]').val('');
    })



    $("#listplan").change(function(){
        // console.log( this.value );
        var str = this.value;
        var plan_data = str.split("|||");
        console.log(plan_data)
        $('[id="plan_id"]').html(plan_data[0]);
        $('[id="product"]').html(plan_data[1]);
        $('[id="exipred_at"]').html(plan_data[2]);
        $('[name="meetingroom_current"]').val(((plan_data[3] == "null" || plan_data[3] == null) ? 0 : plan_data[3]));
        $('[name="workpass_current"]').val(((plan_data[4] == "null" || plan_data[4] == null) ? 0 : plan_data[4]));
        $('[name="meetingroom_new"]').val((plan_data[3] == "null" || plan_data[3] == null) ? 0 : plan_data[3]);
        $('[name="workpass_new"]').val(((plan_data[4] == "null" || plan_data[4] == null) ? 0 : plan_data[4]));
    });

    $("#form").submit(function(e) {
        e.preventDefault();
        
        // let formBodyData = $(this).serialize();
        var client_plan_id = $('[id="plan_id"]').html();
        var meeting_room = $('[name="meetingroom_new"]').val();
        var working_pass = $('[name="workpass_new"]').val();

        console.log("asdasda");
        console.log(client_plan_id);
        console.log(meeting_room);
        console.log(working_pass);

        Swal({ 
            title: 'Are you sure you want to add this number?', 
            text: "You won't be able to delete it once it's added!", 
            type: 'warning', 
            showCancelButton:true, 
            confirmButtonColor: '#3085d6', 
            cancelButtonColor: '#d33', 
            confirmButtonText: 'Yes, add it!' 
        }).then((result)=> { 
            if (result.value) {
                axios.put('{{route("clients.planAdjust")}}', {client_plan_id:client_plan_id, meeting_room:meeting_room, working_pass:working_pass}, config).then(res => {
                    console.log(res.data);
                    window.location = res.data.additional.redirect;
                }).catch(err => {
                    console.log(err.response.data.data.message);
                    $('.newerror').remove();

                    Swal({
                        type: 'error',
                        title: 'Oops...',
                        text: err.response.data.data.message,
                        // footer: '<a href>Why do I have this issue?</a>'
                    })
                });
            } 
        })
    })
</script>
@endsection