@extends('layouts.public-base', ['title' => 'Project Stages'])
@section('css')
<style>
    @import url(http://fonts.googleapis.com/css?family=Roboto+Condensed:400,700);

    .board .nav-tabs {
        position: relative;
        /* border-bottom: 0; */
        /* width: 80%; */
        margin: 40px auto;
        margin-bottom: 0;
        box-sizing: border-box;
    }

    .liner {
        height: 2px;
        background: #ddd;
        position: absolute;
        width: 100%;
        margin: 0 auto;
        left: 0;
        right: 0;
        top: 50%;
        /* z-index: 1; */
    }

    .nav-tabs>li.active>a,
    .nav-tabs>li.active>a:hover,
    .nav-tabs>li.active>a:focus {
        color: #555555;
        cursor: default;
        /* background-color: #ffffff; */
        border: 0;
        border-bottom-color: transparent;
    }

    span.round-tabs {
        width: 90px;
        height: 90px;
        line-height: 70px;
        display: inline-block;
        border-radius: 100px;
        background: white;
        z-index: 2;
        /* position: absolute; */
        left: 0;
        text-align: center;
        font-size: 25px;
        margin-left: 50px;
    }

    span.round-tabs i {
        margin-top: 16px
    }

    span.round-tabs img {
        height: 50px;
        width: 50px;
        margin-top: 15px;
    }

    span.round-tabs {
        border: 2px solid #3e5e9a;
    }

    .nav-tabs>li.active>a span.round-tabs {
        background: #3e5e9a;
    }

    .nav-tabs>li {
        width: 16.6%;
    }

    .nav-tabs>li:after {
        content: " ";
        position: absolute;
        left: 45%;
        opacity: 0;
        margin: 0 auto;
        bottom: 0px;
        border: 5px solid transparent;
        border-bottom-color: #ddd;
        transition: 0.1s ease-in-out;

    }

    .nav-tabs>li.active:after {
        content: " ";
        position: absolute;
        left: 45%;
        opacity: 0;
        margin: 0 auto;
        bottom: 0px;
        border: 10px solid transparent;
        border-bottom-color: #ddd;

    }

    .nav-tabs>li a {
        width: 70px;
        height: 70px;
        margin: 20px auto;
        border-radius: 100%;
        padding: 0;
        position: relative;
    }

    .nav-tabs>li a:hover {
        background: transparent;
    }

    .tab-pane {
        position: relative;
        padding-top: 50px;
    }

    .tab-content .head {
        font-family: 'Roboto Condensed', sans-serif;
        font-size: 25px;
        text-transform: uppercase;
        padding-bottom: 10px;
    }

    .btn-outline-rounded {
        padding: 10px 40px;
        margin: 20px 0;
        border: 2px solid transparent;
        border-radius: 25px;
    }

    .btn.green {
        background-color: #5cb85c;
        /*border: 2px solid #5cb85c;*/
        color: #ffffff;
    }

    @media(max-width : 585px) {

        .board {
            width: 90%;
            height: auto !important;
        }

        span.round-tabs {
            font-size: 16px;
            width: 50px;
            height: 50px;
            line-height: 50px;
        }

        .tab-content .head {
            font-size: 20px;
        }

        .nav-tabs>li a {
            width: 50px;
            height: 50px;
            line-height: 50px;
        }

        .nav-tabs>li.active:after {
            content: " ";
            position: absolute;
            left: 35%;
        }

        .btn-outline-rounded {
            padding: 12px 20px;
        }
    }
</style>
@endsection
@section('content')

<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header">
                    {{ __('Project Flows') }}

                </div>

                <div class="card-body">
                    <div class="board">
                        <!-- <h2>Welcome to IGHALO!<sup>™</sup></h2>-->
                        <div class="board-inner">
                            <ul class="nav nav-tabs" id="myTab">
                                <div class="liner"></div>
                                <li class="active">
                                    <a href="#home" data-toggle="tab" title="welcome">
                                        <span class="round-tabs one">
                                            <img src="{{asset('icon/work.svg')}}">
                                        </span>
                                    </a>
                                    <h5 class="head text-center">Graphicszoo</h5>
                                </li>
                                @foreach($project_stages as $key => $project)
                                <li><a href="#flow_{{$key}}" data-toggle="tab" title="#flow_{{$key}}">
                                        <span class="round-tabs">
                                            @if($project->StageAssignment->role_name == 'Designer')
                                            <img src="{{asset('icon/graphic-designer.svg')}}">
                                            @else
                                            <img src="{{asset('icon/task.svg')}}">
                                            @endif
                                        </span>
                                    </a>
                                    <h5 class="head text-center">{{$project->stage_name ?? ''}}</h5>
                                </li>
                                @endforeach

                                <li><a href="#doner" data-toggle="tab" title="completed">
                                        <span class="round-tabs five">
                                            <img src="{{asset('icon/prize.svg')}}">
                                        </span> </a>
                                    <h5 class="head text-center">Final Product</h5>
                                </li>

                            </ul>
                        </div>

                        <div class="tab-content">
                            <div class="tab-pane fade in active show" id="home">

                                <h3 class="head text-center">Welcome to Graphicszoo<sup>™</sup> <span style="color:#f48260;">♥</span></h3>
                                <p class="narrow text-center">
                                    This is Your Project Flow Template. The First and last STEPs are will we fixed always. Middle ones are that you choose.
                                </p>

                            </div>
                            @foreach($project_stages as $key => $project)
                            <div class="tab-pane fade text-center" id="flow_{{$key}}">
                                <h3 class="head text-center">Specification</h3>
                                <div class="row">
                                    <div class="col-md-6 text-right">
                                        Assigned Role :
                                    </div>
                                    <div class="col-md-6 text-left">
                                        {{$project->StageAssignment->role_name ?? ''}}
                                    </div>
                                    <div class="col-md-6 text-right">
                                        Description :
                                    </div>
                                    <div class="col-md-6 text-left">
                                        {{$project->stage_description ?? ''}}
                                    </div>
                                    <div class="col-md-6 text-right">
                                        Minimum Approval :
                                    </div>
                                    <div class="col-md-6 text-left">
                                        {{$project->StageAssignment->min_approval ?? ''}}
                                    </div>
                                    <div class="col-md-6 text-right">
                                        Is Require to Upload File :
                                    </div>
                                    <div class="col-md-6 text-left">
                                        {{$project->StageAssignment->require_file_upload == 1 ? 'Yes' : 'No'}}
                                    </div>
                                </div>
                            </div>
                            @endforeach
                            <div class="tab-pane fade" id="doner">
                                <div class="text-center">
                                    <i class="img-intro icon-checkmark-circle"></i>
                                </div>
                                <h3 class="head text-center">thanks for staying tuned! <span style="color:#f48260;">♥</span> Grahpicszoo</h3>

                            </div>
                            <div class="clearfix"></div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection
@section('script')
<script>
    jQuery(document).ready(function() {
        jQuery("#myTab li").on("click", function() {
            jQuery("#myTab li").removeClass("active");
            jQuery(this).addClass("active");
        });
    });
</script>
@endsection