{{-- Extends layout --}}
@extends('layout.default')
{{-- Content --}}
@section('styles')
    <link href="{{ asset('plugins/custom/datatables/datatables.bundle.css') }}" rel="stylesheet" type="text/css"/>
@endsection
@section('content')
<style>
.select2-container--default.select2-container--disabled .select2-selection--multiple{
    opacity:1;
}
.selected_outcode span.select2-selection__choice__remove 
{
    display: none !important;
} 
.table-condensed {
    background:#fff;
}
.card-custom {
    margin-top: 25px;
}
</style>
<link href="{{ asset('plugins/custom/datatables/datatables.bundle.css') }}" rel="stylesheet" type="text/css"/>
<div class="content d-flex flex-column flex-column-fluid" id="kt_content">
    <div class="d-flex flex-column-fluid">     
        <div class="container">       
            <div class="container py-8 ph-1">
                <div class="row">
                    <div class="container">
                        <div class="alert alert-custom alert-white alert-shadow gutter-b head-line top-box" role="alert">
                            <div class="alert-text head-text">
                                <h3 class="card-label">PostCode</h3>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card card-custom new-property">
                    <div class="card-body ">
                        <div class="col-xs-12">
                            <div class="">
                               <div class="form-group row align-right selected_outcode"> 
                                    <label class="col-form-label  col-sm-12 headline-postcode-in">
                                        Subscribed Postcodes
                                    </label>
                                    <div class="col-lg-9 col-md-9 col-sm-12">
                                        <select class="form-control select2" id="selected_outcode" name="outcode[]" multiple="multiple" style="opacity:1 !important">
                                            @if($user_outcode_details)
                                                @foreach($user_outcode_details as $item)
                                                    <option selected value="{{$item['id']}}"  >{{$item['outcode']}}</option>
                                                @endforeach     
                                            @endif      
                                        </select>
                                    </div>
                                </div>
                                @if ($pending->count())
                                    <div class="form-group row align-right selected_outcode">
                                        <label class="col-form-label  col-sm-12 headline-postcode-in">
                                            Waiting for approval
                                        </label>
                                        <div class="col-lg-9 col-md-9 col-sm-12 ">
                                            <select class="form-control select2" id="pending_outcode" name="pending[]" multiple="multiple" style="opacity:1 !important">
                                                @foreach($pending as $item)
                                                    <option selected value="{{$item['id']}}"  >{{$item['outcode']}}</option>
                                                @endforeach 
                                            </select>
                                        </div>
                                    </div>
                                @endif
                                <form method="post" name="outcodeSubscription" id="outcodeSubscription" action="{{route('updateSubscription')}}">
                                {{csrf_field()}}
                                    <div class="form-group row align-right">
                                        <label class="col-form-label  col-sm-12 headline-postcode-in">Add new Postcode</label>
                                        <div class="col-lg-9 col-md-9 col-sm-12">
                                            <select class="form-control select2" id="outcode" name="outcode[]" multiple="multiple">                             
                                            <!-- @if($user_outcode_details)
                                                @foreach($user_outcode_details as $item)
                                                    <option selected value="{{$item['id']}}"  >{{$item['outcode']}}</option>
                                                @endforeach     
                                            @endif       -->
                                            </select>
                                        </div>
                                    </div>
                                    <table class="table table-bordered table-hover" id="suscriptionDatatable">
                                        <thead>
                                        <tr>                   
                                            <th>Area Code</th>
                                            <!-- <th>Core</th> -->
                                            <th>Cost</th>                       
                                        </tr>
                                        </thead>
                                        <tbody>
                                        <!-- @if($user_outcode_details)
                                            @foreach($user_outcode_details as $item)
                                            <tr id="row_{{$item->id}}">
                                                <td class="code">{{$item->outcode}}</td>
                                                <td class="price">{{$item->price}}</td>
                                            </tr>
                                            @endforeach
                                        @endif                     -->
                                        </tbody>
                                    </table>                                   
                                    <table class="table table-nowrap">
                                        <thead>
                                            <tr>
                                                <th style="border-bottom: 1px solid #354057"></th>        
                                                <th style="border-bottom: 1px solid #354057"></th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <td colspan="1" class="border-0 text-right" style="color: #585858;">
                                                    <strong><h4 class="font-size-lg font-weight-bolder ">VAT (20%)</h4></strong></td>
                                                    <td class="border-0 text-right text-mute" style="color: #585858;"><h4 class="m-0  text-mute"><i class="fas fa-pound-sign text-mute"></i><span class="vat">{{number_format($vat,2)}}</span></h4>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td colspan="1" class="border-0 text-right" style="color: #585858;">
                                                    <strong>
                                                        <h3 class="font-weight-bolder">TOTAL AMOUNT</h3>
                                                    </strong>
                                                </td>
                                                <td class="border-0 text-right ">
                                                    <h2 class="m-0  text-danger">
                                                        <span id="total">
                                                            <i class="fas fa-pound-sign text-danger"></i>
                                                            <span class="grand_total" style="font-size: 18px;">{{$total}}</span>
                                                        </span>
                                                    </h2>
                                                </td>
                                                <input type="hidden" value="{{$user_outcode_total}}" class="user_outcode_total">
                                            </tr>
                                        </tbody>
                                    </table>
                                    <button data-btn="Submit Postcode" type="submit" id="submitForm" class="btn btn-primary mr-2 btn-icon-text float-right">Submit Postcode<i class="mdi mdi-send btn-icon-append"></i></button>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection
{{-- Styles Section --}}
@section('styles')
    <link href="{{ asset('plugins/custom/datatables/datatables.bundle.css') }}" rel="stylesheet" type="text/css"/>
    <link rel="stylesheet" href="{{asset('css/pages/style.css')}}">
@endsection
{{-- Scripts Section --}}
@section('scripts')
    {{-- vendors --}}
    <script src="{{ asset('plugins/custom/datatables/datatables.bundle.js') }}" type="text/javascript"></script>
    {{-- page scripts --}}
	<script src="{{ asset('js/app.js') }}" type="text/javascript"></script>
	<script src="{{ asset('js/pages/crud/forms/widgets/select2.js')}}"></script>
    <script>
        var subTable = $("#suscriptionDatatable").DataTable({
            "bPaginate": false,
            "bLengthChange": false,
            "bFilter": true,
            "bInfo": false,
            searching: false,
            responsive: !0,
            searchDelay: 500,
            processing: !0,
        }); 
        var vdata = JSON.parse('@php echo  json_encode($outcode); @endphp'); 
        $('#selected_outcode').select2({
            allowClear: false,
            disabled: true,
            placeholder: "Subscribed postcode.",
        });
        $('#pending_outcode').select2({
            allowClear: false,
            disabled: true,
            placeholder: "Waiting for approval.",
        });          
        //select2        
        $('#outcode').select2({
            placeholder: "Search new postcode here.",
            allowClear: true,
            data: vdata
        }).on('select2:select', function (e) {            
            var outcode_id =e.params.data.id; 
            var s_count = $(this).find(':selected').length; 
            if(s_count>0){   
                $('#submitForm').prop('disabled', false);    
                if(outcode_id>0){
                    $.ajax({      
                        url: "{{route('outcodeDetails')}}",                
                        type: 'GET',
                        data: {
                            "outcode_id" : outcode_id,
                        },
                        success: function(result) { console.log(result);
                         var rowNode =    subTable.row.add( [
                                result.outcode,
                                result.price,
                            ] ).node().id = 'row_'+outcode_id;
                
                            subTable.draw( false );
                            var user_outcode_total = $('.user_outcode_total').val();
                            user_outcode_total = parseFloat(user_outcode_total) + parseFloat(result.price);
                            $('.user_outcode_total').val(parseFloat(user_outcode_total));
                            var vat = (20/100)*user_outcode_total;
                            var total = user_outcode_total + vat;
                            $('.grand_total').html(total);
                            $('.vat').html(vat.toFixed(2));
                            $('#'+ rowNode ).find('td').eq(1).addClass('price');
                        },error:function(xhr, status, error,result){
                        console.log(xhr);
                        }
                    });
                }else{                    
                }
            }else{
                $('#submitForm').prop('disabled', true);    
            }          
        }).on("select2:unselect", function(e){
            var data = e.params.data.id;
            var price = parseInt($("#row_"+data+ " .price").text());
            var user_outcode_total = $('.user_outcode_total').val();
            user_outcode_total = parseFloat(user_outcode_total) - parseFloat(price);
             $('.user_outcode_total').val(parseFloat(user_outcode_total));
            var vat = (20/100)*user_outcode_total;
            var total = user_outcode_total + vat;
            $('.grand_total').html(total);
            $('.vat').html(vat.toFixed(2));
            subTable.row("#row_"+data)
                    .remove()
                    .draw();
        });
        //Validation 
        FormValidation.formValidation(
            document.getElementById('outcodeSubscription'),
            {
            fields: {
                'outcode[]': {
                    validators: {
                        notEmpty: {
                            message: 'Select any outcode.'
                        },                        
                    }
                },
            },
            plugins: {
                trigger: new FormValidation.plugins.Trigger(),
                // Bootstrap Framework Integration
                bootstrap: new FormValidation.plugins.Bootstrap(),
                // Validate fields when clicking the Submit button
                submitButton: new FormValidation.plugins.SubmitButton(),
                // Submit the form when all fields are valid
                defaultSubmit: new FormValidation.plugins.DefaultSubmit(),
            }
        })
    </script>
@endsection