@extends('admin.layout.master')

@section('content')

<div class="content-wrapper">
    <div class="content">
        <div class="card">
            <div class="row">
                <div class="col-lg-12">
                    <div class="user-profile-box">
                        <div class="box-profile text-white" > 
                            <img class="profile-user-img img-responsive img-circle m-b-2" style="margin:0" src="{{$poll->created_by->profile_pic?$poll->created_by->profile_pic:asset('assets/admin/images/users/1.jpg')}}" alt="User profile picture">
                            <h3 class="profile-username">{{ucwords($poll['created_by']['first_name'].' '.$poll['created_by']['last_name'])}}</h3>
                        </div>
                    </div>
                </div>
            </div> 
        </div>
        <div class=" card eventdeatil"> 
            <div class=" card-body ">
                <div class="row">
                    <div class="col-lg-6 col-xs-6 b-r mb-4"> 
                        <strong>Question</strong>
                        <br>
                        <p class="text-muted">{{$poll->question}}</p>
                    </div>
                    <div class="col-lg-6 col-xs-6 b-r mb-4"> <strong>Time</strong>
                        <br>
                        <p class="text-muted">{{$poll->time}}</p>
                    </div>  
                    <div class="col-lg-6 col-xs-6 b-r mb-4"> 
                        <strong>Email-Id</strong>
                        <br>
                        <p class="text-muted">{{$poll->created_by->email}}</p>
                    </div>
                    <div class="col-lg-6 col-xs-6 b-r mb-4"> <strong>Mobile No</strong>
                        <br>
                        <p class="text-muted">+{{trim($poll->created_by->country_code,'+').' '.$poll->created_by->mobile_number}}</p>
                    </div>

                    @if(!empty($poll->options))
                    <div class="col-lg-12 col-xs-12 b-r mb-4">
                        <strong>OPTIONS</strong>
                    </div>
                    @foreach($poll->options as $k=>$option)
                    <!-- <div class=" card">  -->
                        <!-- <div class="card-body"> -->
                            <div class="col-lg-5 col-xs-5 b-r mb-4 mr-2" style="border: 2px solid #efefef;padding: 10px;border-radius: 15px;"> 
                                <strong>Option {{$k+1}}</strong>
                                <br>
                                <p class="text-muted">{{$option->option}}</p>
                                
                                <style>
                                    .w3-border {
                                        border: 1px solid #ccc!important;
                                    }
                                    .w3-success, .w3-hover-success:hover{
                                        color: #000!important;
                                        background-color: #52a032!important;
                                    }
                                </style>
                                <div class="w3-border">
                                    <div class="w3-success" style="height:24px;width:{{$option->selection_percentage}}%;text-align:center;font-size: 12px;line-height: 2;">{{$option->selection_percentage>0?$option->selection_percentage.'%':''}}</div>
                                </div>
                            </div>
                        <!-- </div> -->
                    <!-- </div> -->
                    @endforeach
                    @endif
                </div> 
            </div>
        </div>
    </div>
    
@endsection