@if (!Permit::isPermit(str_replace('/create', '', Route::current()->uri()), 'create', true))
<div class="alert alert-danger">You are not allowed to access this section.</div>
@else
<!-- Error display container -->
<div id="error-messages" class="alert alert-danger d-none"></div>
<!-- Basic Horizontal form layout section start -->

<style>
.tooltipDiv {
    position: relative;
    display: inline-block;
}

.tooltipDiv .tooltiptext {
    visibility: hidden;
    width: 140px;
    background-color: #555;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px;
    position: absolute;
    z-index: 1;
    bottom: 150%;
    left: 50%;
    margin-left: -75px;
    opacity: 0;
    transition: opacity 0.3s;
}

.tooltipDiv .tooltiptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #555 transparent transparent transparent;
}

.tooltipDiv:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}
</style>

<!-- Basic Horizontal form layout section start -->
<form id="trendingForm" action="{{ route('price-guide-vendor.store') }}" class="form-horizontal" method="POST" autocomplete="off" enctype="multipart/form-data">
    @csrf
    <section>
        <div class="row">
                <div class="card">
                    <div class="card-header">
                        <h4 class="card-title">Add Price Guide vendor</h4>
                    </div>
                    <div class="card-content">
                        <div class="card-body">
                            <div class="form-body">
                                <div class="row">
                                    <div class="col-6 mb-4">
                                        <div class="form-group row">
                                            <div class="col-md-4">
                                                <span>{{__('Vendor Name')}}</span>
                                            </div>
                                            <div class="col-md-8">
                                                <div class="position-relative has-icon-left">
                                                    <input type="text" name="vendor_name" class="form-control" required value="{{old('vendor_name')}}">
                                                    <div class="form-control-position">
                                                        <i class="feather icon-home"></i>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-6 mb-4">
                                        <div class="form-group row">
                                            <div class="col-md-4">
                                                <span>{{__('Vendor Email')}}</span>
                                            </div>
                                            <div class="col-md-8">
                                                <div class="position-relative has-icon-left">
                                                    <input type="text" name="vendor_email" class="form-control" required value="{{old('vendor_email')}}">
                                                    <div class="form-control-position">
                                                        <i class="feather icon-home"></i>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-6 mb-4">
                                        <div class="form-group row">
                                            <div class="col-md-4">
                                                <span>{{__('Description')}}</span>
                                            </div>
                                            <div class="col-md-8">
                                                <div class="position-relative has-icon-left">
                                                    <input type="text" name="description" class="form-control" value="{{old('description')}}" >
                                                    <div class="form-control-position">
                                                        <i class="feather icon-home"></i>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-6 mb-4">
                                        <div class="form-group row">
                                            <div class="col-md-4">
                                                <span>{{__('Logo')}}</span>
                                            </div>
                                            <div class="col-md-8">
                                                <fieldset class="form-group">
                                                    <div class="custom-file">
                                                        <input type="file" class="custom-file-input" id="logo" name="logo">
                                                        <label class="custom-file-label" for="logo">Choose file</label>
                                                    </div>
                                                </fieldset>
                                            </div>
                                        </div>
                                    </div>  
                                    <div class="col-6 mb-4">
                                        <div class="form-group row">
                                            <div class="col-md-4">
                                                <span>{{__('Status')}}</span>
                                            </div>
                                            <div class="col-md-8">
                                                <div class="position-relative has-icon-left">
                                                    <label for="">Active</label>
                                                    <input type="radio" id="status" name="status" value="1" checked required autocomplete="off">
                                                    <label for="">Deactive</label>
                                                    <input type="radio" id="status" name="status" value="0"  required autocomplete="off">
                                                </div>
                                            </div>
                                        </div>
                                    </div>  
                                    <div class="col-md-12">
                                                <span>{{__('Access Token')}}</span>
                                    </div>
                                    <div class="col-12 mt-4">
                                        <div class="form-group row">
                                            <div class="col-6">
                                            <input class="form-control" type="text" name="pe_token" id="peToken" value="{{old('pe_token')??$uniqueToken??""}}" readonly>
                                            </div>
                                            <div class="col-2 tooltipDiv">
                                            <a href="javascript:void();" class="border border-primary rounded p-1" onclick="copyText()" onmouseout="outFunc()">
                                            <span class="tooltiptext" id="myTooltip">Copy to clipboard</span>
                                            Copy Token
                                            </a>
                                            </div>
                                            <div class="col-4 tooltipDiv">
                                                <a href="javascript:void();" class="border border-danger rounded p-1" onclick="regenerateToken()" >
                                                <span class="tooltiptext" >Regenerate Token</span>
                                                Regenerate Token
                                                </a>
                                            </div>
                                        </div>
                                    </div>   


                                    <div class="col-12">
                                        <h4> API Permissions</h4>
                                    </div>
                                    @foreach ($permissions as $key=>$permission)
                                    <div class="col-6 mb-4">
                                        <div class="form-group row">
                                            <div class="col-md-4">
                                                <span>{{ $key }}</span>
                                            </div>
                                            <div class="col-md-8">
                                                <label class="switch">
                                                    <input type="checkbox" class="switch-input" name="permissions[{{$key}}]" {{ $permission ? 'checked' : '' }} value="true" id="{{$key}}" />
                                                    <span class="switch-toggle-slider">
                                                    <span class="switch-on"></span>
                                                    <span class="switch-off"></span>
                                                    </span>
                                                    <span class="switch-label">Active</span>
                                                </label>
                                            </div>
                                        </div>
                                    </div>
                                    @endforeach
                                    <div class="block-content block-content-full text-right border-top pt-1">
                                        <button type="submit" class="btn btn-primary"><i
                                                    class="fa fa-check mr-1"></i>{{__('Save')}}</button>
                                        <button class="btn btn-secondary" data-bs-dismiss="offcanvas" aria-label="Close">{{__('Cancel & Back')}}</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
        </div>
    </section>
</form>
<script>
    function copyText() {
      var copyText = document.getElementById("peToken");
      copyText.select();
      copyText.setSelectionRange(0, 99999);
      navigator.clipboard.writeText(copyText.value);
      
      var tooltip = document.getElementById("myTooltip");
      tooltip.innerHTML = "Copied: " + copyText.value;
    }
    
    function outFunc() {
      var tooltip = document.getElementById("myTooltip");
      tooltip.innerHTML = "Copy to clipboard";
    }
    function regenerateToken(){
        $.get("/admin/price-guide-vendor/regenerateToken", function(data, status){
            if(status=="success"){
                $("#peToken").val(data.token);
                var copyText = document.getElementById("peToken");
                    copyText.select();
                    copyText.setSelectionRange(0, 99999);
                    navigator.clipboard.writeText(copyText.value);  
            }
        });
    }
</script>
@endif