@extends('layouts.master')
@section('page-css')


@endsection

@section('main-content')

<div class="breadcrumb">
    <h1>جزئیات مخاطب</h1>
    <ul>
        <li><a href="">برنامه ها</a></li>
        <li>مخاطبین</li>
    </ul>
</div>
<div class="separator-breadcrumb border-top"></div>

<!-- content goes here -->

<section class="ul-contact-detail">
    <div class="row">
        <div class="col-lg-4 col-xl-4">
            <div class="card">
                <img class="d-block w-100" src="{{ asset('assets/images/products/iphone-1.jpg') }}" alt="First slide">
                <div class="card-body">
                    <div class="ul-contact-detail__info">
                        <div class="row">
                            <div class="col-6 text-center">
                                <div class="ul-contact-detail__info-1">
                                    <h5>نام</h5>
                                    <span>Genelia Deshmukh</span>
                                </div>
                                <div class="ul-contact-detail__info-1">
                                    <h5>نام</h5>
                                    <span>Genelia Deshmukh</span>
                                </div>
                            </div>
                            <div class="col-6 text-center">
                                <div class="ul-contact-detail__info-1">
                                    <h5>نام</h5>
                                     <span>Genelia Deshmukh</span>
                                </div>
                                 <div class="ul-contact-detail__info-1">
                                    <h5>نام</h5>
                                    <span>Genelia Deshmukh</span>
                                </div>
                            </div>
                            <div class="col-12 text-center">
                                <div class="ul-contact-detail__info-1">
                                        <h5>آدرس</h5>
                                        <span>DieSachbearbeiter
                                                Choriner Straße 49
                                                10435 Berlin</span>
                                </div>
                            </div>
                            <div class="col-12 text-center">
                                
                                    <div class="ul-contact-detail__social">
                                        <div class="ul-contact-detail__social-1">
                                            <button type="button" class="btn btn-facebook btn-icon m-1">
                                                <span class="ul-btn__icon"><i class="i-Facebook-2"></i></span>
                                            </button>
                                            <span class="t-font-boldest ul-contact-detail__followers">400</span>
                                        </div>
                                        <div class="ul-contact-detail__social-1">
                                            <button type="button" class="btn btn-twitter btn-icon m-1">
                                                <span class="ul-btn__icon"><i class="i-Twitter"></i></span>
                                                
                                            </button>
                                            <span class="t-font-boldest ul-contact-detail__followers">900</span>
                                        </div>
                                        <div class="ul-contact-detail__social-1">
                                            <button type="button" class="btn btn-dribble btn-icon m-1">
                                                <span class="ul-btn__icon"><i class="i-Dribble"></i></span>
                                                
                                            </button>
                                            <span class="t-font-boldest ul-contact-detail__followers">658</span>
                                        </div>
                                    </div>
                                
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-8 col-xl-8">
            <!-- begin::basic-tab -->
            <div class="card mb-4 mt-4">
                <div class="card-header bg-transparent">تب های پایه</div>
                <div class="card-body">
                    <nav>
                        <div class="nav nav-tabs" id="nav-tab" role="tablist">
                            <a class="nav-item nav-link active show" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">Home</a>
                            <a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</a>
                            <a class="nav-item nav-link" id="nav-contact-tab" data-toggle="tab" href="#nav-contact" role="tab" aria-controls="nav-contact" aria-selected="false">Edit Contact</a>
                        </div>
                    </nav>
                    <div class="tab-content ul-tab__content" id="nav-tabContent">
                        <div class="tab-pane fade active show" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">
                           <div class="ul-contact-detail__timeline">
                             <div class="row">
                                <div class="col-lg-12 col-xl-12">
                                    <div class="ul-contact-detail__timeline-row">
                                            <div class="row">
                                                    <div class="col-lg-1">
                                                        <div class="ul-contact-detail__left-timeline">
                                                            <div class="ul-widget3-img">
                                                                <img src="{{ asset('assets/images/faces/1.jpg') }}" class="img-fluid" id="userDropdown" alt="" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="col-lg-11">
                                                        <div class="ul-contact-detail__right-timeline">
                                                            <a href="" class="ul-widget4__title d-block">Timity Clarkson</a> 
                                                            <small class="text-mute">10 دقیقه</small>
                                                            <p>یک کار جدید اختصاص دهید <a href="#">  چیدمان وب</a></p>
                                                            <div class="ul-contact-detail__timeline-image">
                                                                <img class="d-block" src="{{ asset('assets/images/products/iphone-1.jpg') }}" alt="First slide">
                                                                <img class="d-block" src="{{ asset('assets/images/products/iphone-1.jpg') }}" alt="First slide">
                                                                <img class="d-block" src="{{ asset('assets/images/products/iphone-1.jpg') }}" alt="First slide">
                                                            </div>
                                                        </div> 
                                                    </div>
                                            </div>
                                    </div>
                                    <div class="ul-contact-detail__timeline-row">
                                            <div class="row">
                                                    <div class="col-lg-1">
                                                        <div class="ul-contact-detail__left-timeline">
                                                            <div class="ul-widget3-img">
                                                                <img src="{{ asset('assets/images/faces/1.jpg') }}" id="userDropdown" alt="" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="col-lg-11">
                                                        <div class="ul-contact-detail__right-timeline">
                                                            <a href="" class="ul-widget4__title d-block">Timity Clarkson</a> 
                                                            <small class="text-mute">10 دقیقه</small>
                                                            
                                                            <div class="ul-contact-detail__timeline-image-2 mt-3">
                                                                <img class="d-block" src="{{ asset('assets/images/products/iphone-1.jpg') }}" alt="First slide">
                                                                <div class="ul-contact-detail__timeline-image-info">
                                                                    <p style="width:80%">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. </p>
                                                                    <button type="button" class="btn btn-primary btn-lg m-1">چیدمان وب</button>
                                                                </div>  
                                                            </div>
                                                            
                                                        </div> 
                                                    </div>
                                            </div>
                                    </div>

                                    <div class="ul-contact-detail__timeline-row">
                                            <div class="row">
                                                    <div class="col-lg-1">
                                                        <div class="ul-contact-detail__left-timeline">
                                                            <div class="ul-widget3-img">
                                                                <img src="{{ asset('assets/images/faces/1.jpg') }}" id="userDropdown" alt="" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="col-lg-8">
                                                        <div class="ul-contact-detail__right-timeline">
                                                            <a href="" class="ul-widget4__title d-block">Timity Clarkson</a> 
                                                            <small class="text-mute">10 دقیقه</small>
                                                            
                                                            <p class="mt-3"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper </p>
                                                        </div> 
                                                    </div>
                                            </div>
                                    </div>

                                    <div class="ul-contact-detail__timeline-row">
                                            <div class="row">
                                                    <div class="col-lg-1">
                                                        <div class="ul-contact-detail__left-timeline">
                                                            <div class="ul-widget3-img">
                                                                <img src="{{ asset('assets/images/faces/1.jpg') }}" id="userDropdown" alt="" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="col-lg-11">
                                                        <div class="ul-contact-detail__right-timeline">
                                                            <a href="" class="ul-widget4__title d-block">Timity Clarkson</a> 
                                                            <small class="text-mute">10 دقیقه</small>
                                                            <p>یک کار جدید اختصاص دهید<a href="#">  چیدمان وب</a></p>
                                                            
                                                        </div> 
                                                    </div>
                                            </div>
                                    </div>
                                    
                              
                                </div>
                                
                               
                            </div>
                           </div>
                        </div>
                        <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">
                            <div class="row">
                                <div class="col-lg-12 col-xl-12">
                                    <div class="ul-contact-detail__profile">
                                       <div class="ul-contact-detail__inner-profile">
                                          <h4 class="heading">نام و نام خانوادگی</h4>
                                          <span class="tetx-muted">Timity Clarkson</span>
                                       </div>

                                       <div class="ul-contact-detail__inner-profile">
                                            <h4 class="heading">نام و نام خانوادگی</h4>
                                            <span class="tetx-muted">Timity Clarkson</span>
                                         </div>
                                       <div class="ul-contact-detail__inner-profile">
                                            <h4 class="heading">نام و نام خانوادگی</h4>
                                            <span class="tetx-muted">Timity Clarkson</span>
                                         </div>
                                       <div class="ul-contact-detail__inner-profile">
                                            <h4 class="heading">نام و نام خانوادگی</h4>
                                            <span class="tetx-muted">Timity Clarkson</span>
                                         </div>
                                    </div>
                                    <div class="custom-separator"></div>
                                </div>
                               
                                <div class="col-lg-12 col-xl-12">
                                    <div class="ul-contact-dwtail__profile-swcription">
                                        <p class="mt-3">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries</p>
                                        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries</p>
                                        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries</p>
                                    </div>
                                </div>

                                <div class="col-lg-12 col-xl-12">
                                    <h4 class="card-title mb-3">مهارت ها</h4>
                                    <div class="custom-separator"></div>
                                    
                                    <span class=""> Wordpress</span>
                                    <div class="progress mb-3 mt-2">
                                        <div class="progress-bar bg-primary" role="progressbar" style="width: 10%" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100">10%</div>
                                    </div>

                                    <span class=""> HTML 5</span>
                                    <div class="progress mb-3 mt-2">
                                        <div class="progress-bar bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div>
                                    </div>

                                    <span>React.js</span>
                                    <div class="progress mb-3 mt-2">
                                        <div class="progress-bar bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">50%</div>
                                    </div>

                                    <span>Photoshop</span>
                                    <div class="progress mb-3 mt-2">
                                        <div class="progress-bar bg-warning" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">75%</div>
                                    </div>
                                </div>

                            </div>
                        </div>
                        <div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab">
                                <form >
                                    
                                    {{ csrf_field() }}
                                        <div class="form-group row">
                                            <label for="inputEmail3" class="col-sm-2 col-form-label">ایمیل</label>
                                            <div class="col-sm-10">
                                                <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
                                            </div>
                                        </div>
                                        <div class="form-group row">
                                            <label for="inputPassword3" class="col-sm-2 col-form-label">رمز عبور</label>
                                            <div class="col-sm-10">
                                                <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
                                            </div>
                                        </div>
                                        <fieldset class="form-group">
                                            <div class="row">
                                                <div class="col-form-label col-sm-2 pt-0">Radios</div>
                                                <div class="col-sm-10">
                                                    <div class="form-check">
                                                        <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios1" value="option1" checked="">
                                                        <label class="form-check-label ml-3" for="gridRadios1">
                                                            First radio
                                                        </label>
                                                    </div>
                                                    <div class="form-check">
                                                        <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios2" value="option2">
                                                        <label class="form-check-label ml-3" for="gridRadios2">
                                                            Second radio
                                                        </label>
                                                    </div>
                                                    <div class="form-check disabled ">
                                                        <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios3" value="option3" disabled="">
                                                        <label class="form-check-label ml-3" for="gridRadios3">
                                                            Third disabled radio
                                                        </label>
                                                    </div>
                                                </div>
                                            </div>
                                        </fieldset>
                                        <div class="form-group row">
                                            <div class="col-sm-2">صندوق ورودی</div>
                                            <div class="col-sm-10">
                                                <div class="form-check">
                                                    <input class="form-check-input" type="checkbox" id="gridCheck1">
                                                    <label class="form-check-label ml-3" for="gridCheck1">
                                                    صندوق تأیید نمونه
                                                    </label>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="form-group row">
                                            <div class="col-sm-10">
                                                <button type="submit" class="btn btn-primary">ورود</button>
                                            </div>
                                        </div>
                                    </form>
                        </div>
                    </div>
                </div>
            </div>
            <!-- end::basic-tab -->
        </div>
    </div>
</section>


@endsection

@section('page-js')



@endsection