@extends('layouts.app_discussion')

@section('content')

<div class="container">
    <div class="row">
        <div class="col-md-3">
            @include('includes/dashboard/left_menu')
        </div>
        <div class="col-md-9 h-100">
            <div class="wrapper wrapper-content animated fadeInRight mt-1" style="min-height: 625px">
                <div class="ibox-content forum-container h-100">
                    <div class="col-lg-12">
                        <div class="forum-title">
                            <h3 class="text-primary">Tools</h4>
                            {{ Breadcrumbs::render('tools' ) }}<hr>
                            <div class="row">
                                <div class="col-12"><h4>Organizational Alignment</h4></div>
                                <div class="col-md-6 mb-4">
                                    <div class="card  h-100">
                                        <div class="card-body h-100">
                                            <div class="row">
                                                <div class="col-auto"><div class="circle"> <p>1</p></div> </div>
                                                <div class="col px-0 my-auto"><a class="faLink text-dark h5">Founder/Owner/Senior Leader Alignment</a></div>
                                            </div>
                                         
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6 mb-4">
                                    <div class="card  h-100">
                                        <div class="card-body h-100">
                                            <div class="row">
                                                <div class="col-auto"><div class="circle"> <p>2</p></div> </div>
                                                <div class="col px-0 my-auto"><a class="faLink text-dark h5">Senior Leadership Alignment</a></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>


                            <div class="row">
                                <div class="col-12"><h4>HR Business Partner</h4></div>
                                <div class="col-md-6 mb-4">
                                    <div class="card  h-100">
                                        <div class="card-body h-100">
                                            <div class="row">
                                                <div class="col-auto"><div class="circle"> <p>3</p></div> </div>
                                                <div class="col px-0 my-auto"><a class="faLink text-dark h5" href="{{url('tools/self-assessment')}}">Self Assessment</a></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6 mb-4">
                                    <div class="card  h-100">
                                        <div class="card-body h-100">
                                            <div class="row">
                                                <div class="col-auto"><div class="circle"> <p>4</p></div> </div>
                                                <div class="col px-0 my-auto"><a class="faLink text-dark h5">HR Leader Development Plan</a></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6 mb-4">
                                    <div class="card  h-100">
                                        <div class="card-body h-100">
                                            <div class="row">
                                                <div class="col-auto"><div class="circle"> <p>5</p></div> </div>
                                                <div class="col px-0 my-auto"><a class="faLink text-dark h5">HR Business Alignment OGSM</a></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6 mb-4">
                                    <div class="card  h-100">
                                        <div class="card-body h-100">
                                            <div class="row">
                                                <div class="col-auto"><div class="circle"> <p>6</p></div> </div>
                                                <div class="col px-0 my-auto"><a class="faLink text-dark h5">Performance Management</a></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6 mb-4">
                                    <div class="card  h-100">
                                        <div class="card-body h-100">
                                            <div class="row">
                                                <div class="col-auto"><div class="circle  disabled-tool"> <p>7</p></div> </div>
                                                <div class="col px-0 my-auto"><a class="faLink text-muted h5">Models, Tools and Templates to Support HRBP facilitation</a></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-12"><h4>HR Functional Partner</h4></div>
                                <div class="col-md-6 mb-4">
                                    <div class="card  h-100">
                                        <div class="card-body h-100">
                                            <div class="row">
                                                <div class="col-auto"><div class="circle"> <p>8</p></div> </div>
                                                <div class="col px-0 my-auto"><a class="faLink text-dark h5" href="{{url('tools/hrf-urgency-impact-assesment')}}">HR Functional Maturity Assessment</a></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6 mb-4">
                                    <div class="card  h-100">
                                        <div class="card-body h-100">
                                            <div class="row">
                                                <div class="col-auto"><div class="circle"> <p>9</p></div> </div>
                                                <div class="col px-0 my-auto"><a class="faLink text-dark h5" href="{{url('tools/maturity-development-plan')}}">HR Functional Maturity Development Plan</a></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6 mb-4">
                                    <div class="card  h-100">
                                        <div class="card-body h-100">
                                            <div class="row">
                                                <div class="col-auto"><div class="circle disabled-tool"> <p>10</p></div> </div>
                                                <div class="col px-0 my-auto"><a class="faLink text-muted h5" href="#">HR Strategy, Policy, Process, Practices, and Action Planning</a></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            {{-- <div class="row">
                                <div class="col-md-6 mb-4">
                                    <div class="card  h-100">
                                        <div class="card-body h-100">
                                            <div class="row">
                                                <div class="col-auto"><div class="circle"> <p>1</p></div> </div>
                                                <div class="col px-0 my-auto"><a class="faLink text-dark h4" href="#">Self-Assesment against HR Accountabilities</a></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-md-6 mb-4">
                                    <div class="card  h-100">
                                        <div class="card-body h-100">
                                            <div class="row">
                                                <div class="col-auto"><div class="circle"> <p>2</p></div> </div>
                                                <div class="col px-0 my-auto"><a class="faLink text-dark h4">Tools</a></div>
                                            </div>
                                         
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6 mb-4">
                                    <div class="card  h-100">
                                        <div class="card-body h-100">
                                            <div class="row">
                                                <div class="col-auto"><div class="circle"> <p>3</p></div> </div>
                                                <div class="col px-0 my-auto"><a class="faLink text-dark h4">Tools</a></div>
                                            </div>
                                         
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6 mb-4">
                                    <div class="card  h-100">
                                        <div class="card-body h-100">
                                            <div class="row">
                                                <div class="col-auto"><div class="circle"> <p>4</p></div> </div>
                                                <div class="col px-0 my-auto"><a class="faLink text-dark h4">Tools</a></div>
                                            </div>
                                         
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6 mb-4">
                                    <div class="card  h-100">
                                        <div class="card-body h-100">
                                            <div class="row">
                                                <div class="col-auto"><div class="circle"> <p>5</p></div> </div>
                                                <div class="col px-0 my-auto"><a class="faLink text-dark h4">Tools</a></div>
                                            </div>
                                         
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6 mb-4">
                                    <div class="card  h-100">
                                        <div class="card-body h-100">
                                            <div class="row">
                                                <div class="col-auto"><div class="circle"> <p>6</p></div> </div>
                                                <div class="col px-0 my-auto"><a class="faLink text-dark h4">Tools</a></div>
                                            </div>
                                         
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6 mb-4">
                                    <div class="card  h-100">
                                        <div class="card-body h-100">
                                            <div class="row">
                                                <div class="col-auto"><div class="circle"> <p>7</p></div> </div>
                                                <div class="col px-0 my-auto"><a class="faLink text-dark h4">Tools</a></div>
                                            </div>
                                         
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6 mb-4">
                                    <div class="card  h-100">
                                        <div class="card-body h-100">
                                            <div class="row">
                                                <div class="col-auto"><div class="circle"> <p>8</p></div> </div>
                                                <div class="col px-0 my-auto"><a class="faLink text-dark h4" href="{{url('tools/business-impact')}}">
                                                   HR Function Urgency and Impact Assesment
                                                </a></div>
                                            </div>
                                         
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6 mb-4">
                                    <div class="card  h-100">
                                        <div class="card-body h-100">
                                            <div class="row">
                                                <div class="col-auto"><div class="circle"> <p>9</p></div> </div>
                                                <div class="col px-0 my-auto"><a class="faLink text-dark h4">Tools</a></div>
                                            </div>
                                         
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6 mb-4">
                                    <div class="card  h-100">
                                        <div class="card-body h-100">
                                            <div class="row">
                                                <div class="col-auto"><div class="circle"> <p>10</p></div> </div>
                                                <div class="col px-0 my-auto"><a class="faLink text-dark h4">Tools</a></div>
                                            </div>
                                         
                                        </div>
                                    </div>
                                </div>

                            </div> --}}
                          
                            



                            <div class="row">
                                <div class="col-12">
                                    {{-- <div class="arrow-container w-100 m-0">
                                        <div class="arrow-text p-4 text-white w-100">Organizational Alignment</div>
                                        <div class="arrow"></div>
                                    </div>
                                   
                                </div> --}}
                                <div class="col-md-12 col-lg-4">
                                    <ul class="border bg-light">
                                        <li>AE</li>
                                        <li>Seniore Ledaer</li>
                                    </ul>    
                                </div>
                                <div class="col-md-12 col-lg-8">
                                    <div class="arrow-text p-4 text-white border">Organizational Alignment</div>
                                </div>
                                <div class="col-md-12 col-lg-6">
                                    <ul class="border bg-light">
                                        <li>AE</li>
                                        <li>Seniore Ledaer</li>
                                    </ul>  
                                </div>
                                <div class="col-md-12 col-lg-6">
                                    <div class="arrow-text p-4 text-white border">Organizational Alignment</div>
                                </div>
                                <div class="col-md-12 col-lg-8">
                                    <ul class="border bg-light">
                                        <li>AE</li>
                                        <li>Seniore Ledaer</li>
                                    </ul>
                                 </div>
                                <div class="col-md-12 col-lg-4"><div class="arrow-text p-4 text-white">Organizational Alignment</div></div>
                                <div class="col-md-12 col-lg-12">
                                    <ul class="border bg-light">
                                        <li>AE</li>
                                        <li>Seniore Ledaer</li>
                                    </ul>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col">
                                    <div class="card border-radius-none bg-white pe-5" style="border-radius: 0 !important; background : white;">
                                        <p class="text-end"><div class="arrow" style="position:absolute;right:-15; top:0;"></div></p>
                                        <div class="arrow-text p-4 text-white">Organizational Alignment</div>
                                        <div class="card-body border-radius-0 py-0 ps-0">
                                            {{-- <div class="arrow" style="position:absolute; margin: -120"></div> --}}
                                            <ul class="border bg-light">
                                                <li>AE</li>
                                                <li>Seniore Ledaer</li>
                                            </ul>
                                        </div>
                                    </div>
                                  

                                    <div class="card border-radius-none bg-white pe-5 w-75" style="border-radius: 0 !important; background : white;">
                                        <p class="text-end"><div class="arrow" style="position:absolute;right:-15; top:0;"></div></p>
                                        <div class="arrow-text p-4 text-white">Organizational Alignment</div>
                                        <div class="card-body border-radius-0 py-0 ps-0">
                                            {{-- <div class="arrow" style="position:absolute; margin: -120"></div> --}}
                                            <ul class="border bg-light">
                                                <li>AE</li>
                                                <li>Seniore Ledaer</li>
                                            </ul>
                                        </div>
                                    </div>

                                  
        
                                </div>
                            </div>

                           
                             


                            {{-- <div class="arrow-container mb-4">
                                <div class="arrow">See More</div>
                          </div> --}}
                        </div>
                    </div>  
                </div>
              </div>                 
          </div>
        </div>

          
@endsection


<style>
.arrow-container {
  display: inline-flex;
  align-items: center;
  margin: 10px;
}

.arrow {
    width: 0; 
    height: 0; 
    border-top: 70px solid transparent;
    border-bottom: 70px solid transparent;
    border-left: 70px solid rgb(69, 125, 181);
    margin-right: 10px;
}

.arrow-text {
    background-color: rgb(69, 125, 181);
    font-size: 18px;
}

/* .arrow-container {
  display: flex;
  justify-content: flex-end;
}

.arrow {
  background-color: #ccc;
  color: #fff;
  padding: 10px;
  position: relative;
}

.arrow::after {
  content: "";
  position: absolute;
  right: -20px;
  top: 0;
  width: 0;
  height: 0;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
  border-left: 20px solid #ccc;
} */


.circle {
    /* border: 0.1em solid #0b9d9e; */
    border-radius: 100%;
    height: 3em;
    width: 3em;
    line-height: 3em;
    text-align: center;
    background: rgb(34,193,195);
    background: linear-gradient(0deg, rgb(46, 219, 221) 0%, rgba(37, 115, 102, 0.89) 100%);
    /* box-shadow: 1px 1px 5px; */
}

.circle:hover {
    /* border: 0.1em solid #0b9d9e;  */
    box-shadow: 0 0 5px 0px rgb(184, 184, 184);
}
.circle p {
    font-size: 1.2em;
    font-weight: bold;
    color: #fff !important;

}
        
.card {
    border: none !important;
    background: linear-gradient(150deg, #e0e0e0, #c3c3c3 100%);
    border-radius: 3em !important;
    /* padding: 0 5; */
}

.disabled-tool {
    background: rgb(67, 67, 67);
    background: linear-gradient(0deg, rgb(133, 134, 134) 0%, rgba(148, 149, 149, 0.89) 100%) !important;
}
</style>