@extends('layouts.app')

@section('appjs')
<script type="application/javascript" src="{{ asset('js/app.js') }}"></script>
@endsection

@section('content')
@section('page_title')
Upload DND
@endsection
<style>
    input[type=file]:focus,
    .custom-file-input:focus~.custom-file-label {
        outline: none !important;

        box-shadow: none !important;
    }

    .custom-file,
    .custom-file-label,
    .custom-file-input {
        cursor: pointer;
    }
</style>
<div class="container-fluid">
    <div class="card mt-4">
        <div class="card-header flex">
            <h4><b>Globally BlackList Number</b></h4>
             <!-- count section start-->
        <form class="flex m-auto">
            <div class="count-div btn-outline-success active" data-toggle="tooltip" title="Global Blocklist Number">
                <input type="hidden" id="smsblocknumber" value="{{$totalmobilecount}}">
                <input type="hidden" id="whatsappblocknumber" value="{{$whatsappcount}}">
                <label>  Total Blocked: </label>
            <small id="smsblock">{{$totalmobilecount}}</small>
            </div>
        </form>
        <!-- count section end -->
        </div>
        <div class="card-body table-responsive">
            <div class="panel-body">
                <form action="{{ url('/storeglobalBlockNumber') }}" method="POST" enctype="multipart/form-data">
                    {{ csrf_field() }}
                    <div class="row">
                        <div class="container">
                            <!-- radio button  -->
                            <div class="form-group">
                                <div class="form-check form-check-inline col-md-2">
                                    <input class="form-check-input radio-check" type="radio" name="smsWhatsapp" id="sms"  value="1" checked>
                                    <label class="form-check-label" for="sms">SMS</label> 
                                </div>
                                <div class="form-check form-check-inline col-md-2">
                                    <input class="form-check-input radio-check" type="radio" name="smsWhatsapp" id="whats_num_blocked" value="2">
                                    <label class="form-check-label" for="whats_num_blocked">WhatsApp</label> 
                                </div>
                                <div class="form-check form-check-inline col-md-3 desc">
                                    <select class="form-control" name="whatsapp_acc_name" id="whatsapp_acc_name" data-live-search="true">
                                    <option value="">Select Organization</option>
                                        @foreach($whatsappAccName as $value)
                                    <option value={{$value->account_number}} > {{ $value->account_name }} </option>
                                        @endforeach
                                        </select>
                                </div>
                            </div>
                            <div class="form-check form-check-inline col-md-2">
                                <input class="form-check-input" type="radio" name="blockunblock" id="blocked" value="1" checked>
                                <label class="form-check-label" for="blocked">Block</label> 
                            </div>
                            <div class="form-check form-check-inline col-md-2">
                                <input class="form-check-input" type="radio" name="blockunblock" id="unblocked" value="0">
                                <label class="form-check-label" for="unblocked">UnBlock</label> 
                            </div>
                            <!-- file upload  -->
                            <div class="input-group mb-3 mt-4">
                                <div class="custom-file">
                                    <input type="file" name="file" class="custom-file-input" id="inputGroupFile01">
                                    <label class="custom-file-label" for="inputGroupFile01">Choose file</label>
                                </div>
                                <!-- upload button  -->
                                @can('hasAddPermission')
                                <div class="col-md-6">
                                    <button type="submit" id="blockfilesubmit" class="btn btn-primary border-radius-0">Upload</button>
                                </div>
                                @endcan

                            </div>
                            <!-- error message  -->
                            <span class="error-file text-danger"></span>
                        </div>
                    </div>
                    </div>
                </form>
            </div>
        </div>
    </div>


</div>
<script>
    $(document).on('change', 'input[type="file"]', function(event) {
        var filename = $(this).val();
        let file_extention = filename.split(".").pop();
        if (filename == undefined || filename == "") {
            $(this).next('.custom-file-label').html('No file chosen');
        } else {
            if ((file_extention != "csv") && (file_extention != "txt")) {
                $(".error-file").html("Choose any one file CSV or TEXT file");
                setTimeout(function() {
                    $('.error-file').html('');
                }, 5000);
                $("#blockfilesubmit").attr("disabled", true);
            } else {
                $("#blockfilesubmit").attr("disabled", false);
            }
            $(this).next('.custom-file-label').html(event.target.files[0].name);
        }
    });
    $(document).on("change",'.radio-check',function(event){
        var radio_check = $(this).val();
        var smsTotal = $("#smsblocknumber").val()
        var whatsappTotal = $("#whatsappblocknumber").val()
        if (radio_check == 1){
            $("#smsblock").html(smsTotal)
        }else{
            $("#smsblock").html(whatsappTotal)
        }
    });

    $('#whatsapp_acc_name').multiselect({
        enableFiltering: true,
        selectAllJustVisible: false,
        includeSelectAllOption: true,
        allSelectedText: 'All Accounts selected',
        nonSelectedText: 'No  Account selected',
        selectAllValue: 'all',
        selectAllText: 'Select all',
        unselectAllText: 'Unselect all',
        buttonWidth: '100%',
        templates: {
                filterClearBtn: '<span class="input-group-btn"><button class="btn btn-default multiselect-clear-filter border-radius-0" type="button">Clear</button></span>',
            },
            enableCaseInsensitiveFiltering: true
    });
    $(document).ready(function() {
        $('.desc').hide();
        $('#whats_num_blocked,#sms').change(function() {
            var selectedValue = $(this).val();
            if (selectedValue == '2') {
            $('.desc').show();
            } else {
            $('.desc').hide();
            }
        });
    });
</script>
@endsection