@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 px-5">
                                {{-- <div class="col-md-4 col-lg-4 col-sm-12 pe-lg-0 px-sm-0 h-100">
                                    <div class="p-3 w-100 text-white" style="background: rgb(69, 125, 181);">Organizational Alignment</div>
                                    <div class="arrow-container w-100 m-0">
                                        <div class="arrow"></div>
                                    </div>
                                    <div class="w-100 border menu-tool">
                                        <ul class="list-group list-group-flush">
                                            <li class="list-group-item"><a>1. Founder/Owner/Most Senior Leader Alignment (A3)</a></li>
                                            <li class="list-group-item"><a>2. Senior Leadership Alignment (A5)</a></li>
                                        </ul>
                                    </div>
                                </div>

                                

                                <div class="col-md-4 col-lg-4 col-sm-12 px-0 h-100" style="padding-top: 4em ">
                                    
                                    <div class="p-3 w-100 text-white" style="background: rgb(69, 125, 181);">HR Business Partner</div>
                                    <div class="arrow-container w-100 m-0">
                                        <div class="arrow"></div>
                                    </div>
                                    <div class="w-100 border menu-tool">
                                        <ul class="list-group list-group-flush">
                                            <li class="list-group-item"><a href="{{url('tools/self-assessment')}}">3. HR Leader Self Assessment (A1)</a></li>
                                            <li class="list-group-item"><a>4. HR Leader Development Plan (A2) </a></li>
                                            <li class="list-group-item"><a>5. HR Business Alignment OGSM (A4)</a></li>
                                            <li class="list-group-item"><a>6. Performance Management (A6)</a></li>
                                            <li class="list-group-item text-muted"><a>7. Models, Tools and Templates to support HRBP facilitation (A7)</a></li>
                                            
                                        </ul>
                                    </div>
                                </div>
                               
                                <div class="col-md-4 col-lg-4 col-sm-12 ps-lg-0 px-sm-0 h-100" style="padding-top: 8em ">
                                    <div class="triangle"></div>
                                    
                                    <div class="p-3 w-100 text-white" style="background: rgb(69, 125, 181);">HR Functional Partner</div>
                                    <div class="arrow-container w-100 m-0">
                                        <div class="arrow"></div>
                                    </div>
                                    <div class="w-100 border  menu-tool">
                                        <ul class="list-group list-group-flush">
                                            <li class="list-group-item"><a href="{{url('tools/hrf-urgency-impact-assesment')}}">8. HR Functional Maturity Assessment (A8)</a></li>
                                            <li class="list-group-item"><a href="{{url('tools/maturity-development-plan')}}">9. HR Functional Maturity Development Plan (A9)</a></li>
                                            <li class="list-group-item text-muted"><a>10. HR Strategy, Policy, Process, Practices, and Action Planning (A10)</a></li>
                                        </ul>
                                    </div>
                                </div> --}}
                            </div>

                            <style>
                                .tools-header {
                                    background: rgb(69, 125, 181);
                                    border-bottom: 1px solid #fff;
                                    /* background-image: url({{ asset('assets/images/arrow-right.PNG') }});
                                    background-attachment: relative;
                                    background-position: right bottom; 
                                    background-repeat: no-repeat; */
                                   
                                }
                                .tools-header::after{
                                    width:100px;
                                   
                                   
                                   
                                }
                                .tool-menus{
                                    border-left: 1px solid #0c0c0c;
                                    border-bottom: 1px solid #0c0c0c;
                                    min-height: 350px; 
                                    background-color: aliceblue
                                }
                            </style>
                            <div class="row px-2 id="">
                                <div class="col-md-12">
                                    <div class="row pe-4">
                                        <div class="p-3 w-100 text-white" style="background: rgb(69, 125, 181);">HR Business Partner </div>
                                        <div class="arrow-container w-100 m-0">
                                            <div class="arrow"></div>
                                        </div>
                                        {{-- <div class="p-3 w-100 text-white tools-header">HR Business Partner </div> --}}
                                        
                                        <div class="col-md-4 px-0" style="position: relative;top: -80;">
                                            <div class="d-flex flex-column border-primary tool-menus">
                                                <div class="p-2"><span class="fw-bold"></span> <a href="{{url('tools/self-assessment')}}">{{config('tools.A1')}} </a></div>
                                                <div class="p-2"><span class="fw-bold"></span> <a href="{{url('tools/personal-development-plan')}}">{{config('tools.A2')}}  </a></div>
                                            </div>
                                        </div>
                                        <div class="col-md-8" style="position: relative;top: -79;">
                                            <div class="row">
                                                <div class="p-3 w-100 text-white" style="background: rgb(69, 125, 181);">Organizational Alignment </div>
                                                <div class="arrow-container w-100 m-0">
                                                    <div class="arrow"></div>
                                                </div>
                                                {{-- <div class="p-3 w-100 text-white tools-header">
                                                    Organizational Alignment
                                                </div> --}}
                                                <div class="col-md-6 p-0" style="position: relative;top: -80;">
                                                    <div class="d-flex flex-column border-primary tool-menus">
                                                        <div class="p-2"><span class="fw-bold"></span> <a href="{{url('tools/leader-assessment')}}">{{config('tools.A3')}} </a></div>
                                                        <div class="p-2"><span class="fw-bold"></span> <a href="{{url('tools/hr-business-alignment-ogsm')}}">{{config('tools.A4')}}</a></div>
                                                        <div class="p-2"><span class="fw-bold"></span> <a href="{{url('tools/senior-leadership-alignment')}}">{{config('tools.A5')}}</a></div>
                                                        <div class="p-2"><span class="fw-bold"></span> <a href="{{url('tools/performance-management-alignment')}}">{{config('tools.A6')}}</a></div>
                                                        <div class="p-2"><span class="fw-bold"></span> <a href="{{url('tools/hrbp-facilitation')}}">{{config('tools.A7')}}</a></div>
                                                        
                                                    </div>
                                                </div>
                                                <div class="col-md-6" style="position: relative;top: -79;">
                                                    <div class="row">
                                                        <div class="p-3 w-100 text-white" style="background: rgb(69, 125, 181);">HR Functional Partner</div>
                                                        <div class="arrow-container w-100 m-0" style="z-index:100">
                                                            <div class="arrow"></div>
                                                        </div>
                                                        {{-- <div class="p-3 w-100 text-white tools-header">HR Functional Partner</div> --}}
                                                        <div class="col p-0" style="position: relative;top: -80;">
                                                            <div class="d-flex flex-column border-primary border tool-menus">
                                                                <div class="p-2"><span class="fw-bold"></span> <a href="{{url('tools/hrf-urgency-impact-assesment')}}">{{config('tools.A8')}}</a></div>
                                                                <div class="p-2"><span class="fw-bold"></span> <a href="{{url('tools/maturity-development-plan')}}">{{config('tools.A9')}}</a></div>
                                                                <div class="p-2"><span class="fw-bold"></span> <a href="{{url('tools/action-planning')}}">{{config('tools.A9')}}</a></div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                   
                                </div>
                            </div>
                        </div>
                    </div>  
                </div>
              </div>                 
          </div>
        </div>

          
@endsection


<style>

    .menu-tool {
        position: relative;
        top: -81;
    }
    .menu-tool ul li {
       font-weight: bolder
    }
    .arrow-container {
        display: inline-flex;
        align-items: center;
        /* margin: 10px; */
        position: relative;
        bottom: 69;
        right: -93;

    }

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

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

    .arrow-container {
    display: flex;
    justify-content: flex-end;
    }
/* 
.arrow {
  background-color: rgb(69, 125, 181);;
  color: #fff;
  padding: 10px;
  position: relative;
}

.arrow::after {
  content: "";
  position: absolute;
  right: -20px;
  top: 0;
  width: 0;
  height: 0;
  border-top: 37px solid transparent;
  border-bottom: 37px solid transparent;
  border-left: 37px solid rgb(69, 125, 181);
} */


.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>