@extends('layout')
@section('content')
<style type="text/css">
.timeline-steps {
    display: flex;
    /*    justify-content: center;*/
    /*    flex-wrap: wrap*/
}

.timeline-steps .timeline-step {
    align-items: center;
    display: flex;
    flex-direction: column;
    position: relative;
    margin:20px 0px 0px 0px;
/*    margin: 1rem*/
}

@media (min-width:768px) {
    .timeline-steps .timeline-step:not(:last-child):after {
        content: "";
        display: block;
        border-top: .25rem dotted #3b82f6;
        width: 3.46rem;
        position: absolute;
        left: 7.5rem;
        top: .3125rem
    }

    .timeline-steps .timeline-step:not(:first-child):before {
        content: "";
        display: block;
        border-top: .25rem dotted #3b82f6;
        width:1.8125rem;
/*        width: 3.8125rem;*/
        position: absolute;
        right: 7.5rem;
        top: .3125rem
    }
}

.timeline-steps .timeline-content {
    width: 10rem;
    text-align: center
}

.timeline-steps .timeline-content .inner-circle {
    border-radius: 1.5rem;
    height: 1rem;
    width: 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #3b82f6
}

.timeline-steps .timeline-content .inner-circle:before {
    content: "";
    background-color: #3b82f6;
    display: inline-block;
    height: 3rem;
    width: 3rem;
    min-width: 3rem;
    border-radius: 6.25rem;
    opacity: .5
}

.timeline-steps .timeline-content .inner-circle-red {
    border-radius: 1.5rem;
    height: 1rem;
    width: 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #FF0000
}

.timeline-steps .timeline-content .inner-circle-red:before {
    content: "";
    background-color: #FF0000;
    display: inline-block;
    height: 3rem;
    width: 3rem;
    min-width: 3rem;
    border-radius: 6.25rem;
    opacity: .5
}

.text-muted {
    font-size: 12px !important;
}

.blink {
    animation: blinker 0.6s linear infinite;
    color: #1c87c9;
    font-size: 30px;
    font-weight: bold;
    font-family: sans-serif;
}

@keyframes blinker {
    50% {
        opacity: 0;
    }
}

.blink-one {
    animation: blinker-one 1s linear infinite;
}

@keyframes blinker-one {
    0% {
        opacity: 0;
    }
}

.blink-two {
    animation: blinker-two 1.4s linear infinite;
}

@keyframes blinker-two {
    100% {
        opacity: 0;
    }
}

.processing {
    color:red;
    font-weight:bold;
}


</style>
<div class="main-content">

    <div class="body-content">

        @if(Auth::user()->getRoleNames()[0]=='Marketing')

        <div class="row">

            <div class="col-xl-6 col-lg-6 col-md-6 col-sm-6">
                <div class="card mb-4 mt-4">
                    <img src="assets/congratulations-png.png" alt="congratulations" class="card-img-top" style="height:150px;">
                    <div class="card-body text-center">
                        <a href="#" class="avatar avatar-xl card-avatar card-avatar-top mb-4">
                            @if($maxTopUser!='')
                            <img src="{{ URL('assets/kam/'.$kamImage) }}" class="avatar-img rounded-circle border-card" alt="{{ $maxUser }}">
                            @else
                            <img src="{{ URL('assets/kam/kam.jpg') }}" class="avatar-img rounded-circle border-card" alt="{{ $maxUser }}">
                            @endif
                        </a>
                        <h5 class="card-title font-weight-600 mb-2">
                            <a href="#"> {{ $maxTopUser }}</a>
                        </h5>
                        <p class="card-text blink blink-two">
                            <span class="badge badge-pill badge-secondary bg-warning" style="font-size:20px;">
                               <span class="text-success">●</span> Highest seller of last month
                            </span>
                        </p>
                        <p class="card-text ">
                            <span class="badge badge-pill badge-secondary bg-primary" style="padding:10px;">
                                Sales amount : <b> {{ number_format($maxTopFinalValue).' Tk' }} </b>
                            </span>
                        </p>
                    </div>
                </div>
            </div>

             @foreach($kamUsersMonthlySales as $key => $data)
                <div class="col-xl-6 col-lg-6 col-md-6 col-sm-6">
                    <div class="card card-stats statistic-box mb-4">
                        <div class="card-header card-header-success card-header-icon position-relative border-0 text-right px-3 py-0">
                            <div class="card-icon d-flex align-items-center justify-content-center">
                                <i class="typcn typcn-starburst-outline d-block"></i>
                            </div>
                            <p class="card-category text-uppercase fs-10 font-weight-bold text-muted">
                                <span style="color:#da3a36;"> {{ $key }} </span>
                                <br />
                                Monthly Sales Amount
                            </p>
                            <p class="mb-0" style="color:#da3a36;">
                                <strong>New Sale:</strong> {{ $data['upgrade'] }} TK <br>
                                <strong>Current month Upgrade:</strong> {{ $data['diffupgrade'] }} TK <br>
                                <strong>Current month Downgrade:</strong> {{ $data['downgrade'] }} TK
                            </p>
                        </div>
                    </div>
                </div>
            @endforeach

        </div>


        <div class="row">
            <div class="col-xl-6 col-lg-6 col-md-6 col-sm-6">
                <div class="card card-stats statistic-box mb-4">
                    <div class="card-header card-header-success card-header-icon position-relative border-0 text-right px-3 py-0">
                        <div class="card-icon d-flex align-items-center justify-content-center">
                            <i class="typcn typcn-star-full-outline d-block"></i>
                        </div>
                        <p class="card-category text-uppercase fs-10 font-weight-bold text-muted">
                            <span style="color:#003366;"> {{ Auth::user()->name }} </span>
                            <br />
                        Total Sales Amount
                    </p>
                        <h3 class="card-title fs-18 font-weight-bold">
                            <span class="count" style="color:#003366;">{{ $salesAmount }}</span>
                            <small>TK</small>
                        </h3>
                    </div>
                    <div class="card-footer p-3">
                        <div class="stats">
                            <i class="typcn typcn-tick text-success mr-2"></i>
                            <a href="{{ URl('sales-report') }}" class="warning-link">Report</a>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-xl-6 col-lg-6 col-md-6 col-sm-6">
                <div class="card card-stats statistic-box mb-4">
                    <div class="card-header card-header-success card-header-icon position-relative border-0 text-right px-3 py-0">
                        <div class="card-icon d-flex align-items-center justify-content-center">
                            <i class="typcn typcn-star-full-outline d-block"></i>
                        </div>
                        <p class="card-category text-uppercase fs-10 font-weight-bold text-muted">
                            <span style="color:#ff9800;"> {{ Auth::user()->name }} </span>
                            <br />
                        Monthly Sales Profit ( {{ date('F')}} )
                    </p>
                        <h3 class="card-title fs-18 font-weight-bold">
                            <span class="count" style="color:#ff9800;">
                                {{$loginUserAmount}}
                            </span>
                            <small>TK</small>
                        </h3>
                    </div>
                    <div class="card-footer p-3">
                        <div class="stats">
                            <i class="typcn typcn-tick text-success mr-2"></i>
                            <a href="{{ URl('sales-report') }}" class="warning-link">Report</a>
                        </div>
                    </div>
                </div>
            </div>

        </div>
        @endif

        @if(Auth::user()->getRoleNames()[0]=='Super Admin' || Auth::user()->getRoleNames()[0]=='Admin' || Auth::user()->getRoleNames()[0]=='Account')
        <div class="row">

            <div class="col-xl-6 col-lg-6 col-md-6 col-sm-6">
                <div class="card mb-4 mt-4">
                    <img src="assets/congratulations-png.png" alt="congratulations" class="card-img-top" style="height:150px;">
                    <div class="card-body text-center">
                        <a href="#" class="avatar avatar-xl card-avatar card-avatar-top mb-4">
                            @if($maxTopUser!='')
                            <img src="{{ URL('assets/kam/'.$kamImage) }}" class="avatar-img rounded-circle border-card" alt="{{ $maxUser }}">
                            @else
                            <img src="{{ URL('assets/kam/kam.jpg') }}" class="avatar-img rounded-circle border-card" alt="{{ $maxUser }}">
                            @endif
                        </a>
                        <h5 class="card-title font-weight-600 mb-2">
                            <a href="#"> {{ $maxTopUser }}</a>
                        </h5>
                        <p class="card-text blink blink-two">
                            <span class="badge badge-pill badge-secondary bg-warning" style="font-size:20px;">
                               <span class="text-success">●</span> Highest seller of last month
                            </span>
                        </p>
                        <p class="card-text ">
                            <span class="badge badge-pill badge-secondary bg-primary" style="padding:10px;">
                                Sales amount : <b> {{ number_format($maxTopFinalValue).' Tk' }} </b>
                            </span>
                        </p>
                    </div>
                </div>
            </div>

             @foreach($kamUsersMonthlySales as $key => $data)
                <div class="col-xl-6 col-lg-6 col-md-6 col-sm-6">
                    <div class="card card-stats statistic-box mb-4">
                        <div class="card-header card-header-success card-header-icon position-relative border-0 text-right px-3 py-0">
                            <div class="card-icon d-flex align-items-center justify-content-center">
                                <i class="typcn typcn-starburst-outline d-block"></i>
                            </div>
                            <p class="card-category text-uppercase fs-10 font-weight-bold text-muted">
                                <span style="color:black;"> {{ $key }} </span>
                                <br />
                                Monthly Sales Amount
                            </p>
                            <p class="mb-0">
                                <strong>New Sale:</strong> {{ $data['upgrade'] }} TK <br>
                                <strong>Current month Upgrade:</strong> {{ $data['diffupgrade'] }} TK <br>
                                <strong>Current month Downgrade:</strong> {{ $data['downgrade'] }} TK
                            </p>
                        </div>
                    </div>
                </div>
            @endforeach

        </div>

        @endif

        <div class="row">
            <div class="col-lg-12">
                <div class="card">
                    <div class="card-header">
                        <div class="d-flex justify-content-between align-items-center">
                            <div>
                                <h6 class="fs-17 font-weight-600 mb-0"> Work Order ( Live Tracking ) </h6>
                            </div>
                        </div>
                    </div>
                    <div class="card-body">
                        <div class=table-responsive>
                            <div class="container" style="height: 400px; overflow-y: auto; text-align: center;">
                                @if($result->isNotEmpty())
                                @foreach($result as $data)

                                @if(Auth::user()->getRoleNames()[0]=="Account")
                                <a href="javaScript:void(0)" onClick="active_customer({{$data->id}});" title="Work Order Details">
                                    <h5>{{ $data->company_name }}</h5>
                                </a>
                                @else
                                <h5>{{ $data->company_name }}</h5>
                                @endif

                                <div class="row">
                                    <div class="col">
                                        <div class="timeline-steps aos-init aos-animate" data-aos="fade-up">
                                            <div class="timeline-step">
                                                <div class="timeline-content" data-toggle="popover" data-trigger="hover" data-placement="top" title="" data-content="And here's some amazing content. It's very engaging. Right?" data-original-title="2003">
                                                    <div class="inner-circle"></div>
                                                    <p class="h6 mt-3 mb-1">Marketing</p>
                                                    <p class="h6 text-muted mb-0 mb-lg-0">
                                                        {{ date('d-m-y h:i A', strtotime($data->created_at)) }} <br />
                                                        {{ $data->marketingUser }}
                                                    </p>
                                                </div>

                                            </div>

                                            <div class="timeline-step">
                                                <div class="timeline-content" data-toggle="popover" data-trigger="hover" data-placement="top" title="" data-content="And here's some amazing content. It's very engaging. Right?" data-original-title="2004">
                                                    <div @if($data->approval_level=='accounts') class="inner-circle-red blink blink-two" @else class="inner-circle" @endif></div>
                                                    <p class="h6 mt-3 mb-1">Accounts</p>
                                                    <p class="h6 text-muted mb-0 mb-lg-0">
                                                        @if($data->accounts_approved_date!='')
                                                        {{ date('d-m-y h:i A', strtotime($data->accounts_approved_date)) }}
                                                        <br />
                                                        {{ $data->accountsUser }}
                                                        @endif

                                                        @if($data->review=='review')
                                                        <span class="blink" style="color:red; font-size: 12px !important;">
                                                        <i class="typcn typcn-chevron-left-outline" style="color:red;"></i>
                                                        <i class="typcn typcn-chevron-left" style="color:red;"></i>
                                                        <i class="typcn typcn-chevron-left-outline" style="color:red;"></i> </span> <span class="processing"> On Review </span>
                                                        @endif


                                                    </p>
                                                </div>
                                            </div>
                                            <div class="timeline-step">
                                                <div class="timeline-content" data-toggle="popover" data-trigger="hover" data-placement="top" title="" data-content="And here's some amazing content. It's very engaging. Right?" data-original-title="2005">
                                                    <div @if($data->approval_level=='md') class="inner-circle-red blink blink-two" @else class="inner-circle" @endif></div>
                                                    <p class="h6 mt-3 mb-1">Management</p>
                                                    <p class="h6 text-muted mb-0 mb-lg-0">
                                                        @if($data->management_approved_date!='')
                                                        {{ date('d-m-y h:i A', strtotime($data->management_approved_date)) }}
                                                        <br />
                                                        {{ $data->managementUser }}
                                                        @endif
                                                    </p>
                                                </div>
                                            </div>
                                            <div class="timeline-step">
                                                <div class="timeline-content" data-toggle="popover" data-trigger="hover" data-placement="top" title="" data-content="And here's some amazing content. It's very engaging. Right?" data-original-title="2010">
                                                    <div @if($data->approval_level=='infrastructure') class="inner-circle-red blink blink-two" @else class="inner-circle" @endif></div>
                                                    <p class="h6 mt-3 mb-1">Infrastructure</p>
                                                    @if($data->approval_level=='infrastructure' && $data->infrastructure_processing=='Yes')
                                                    <p class="h6 mb-1">
                                                        <b class="processing blinker-one"> (Processing) <br />
                                                        {{ $data->infrastructureProcessingUser }}</b>
                                                    </p>
                                                    @endif

                                                    <p class="h6 text-muted mb-0 mb-lg-0">
                                                        @if($data->infrastructure_approved_date!='')
                                                        {{ date('d-m-y h:i A', strtotime($data->infrastructure_approved_date)) }}
                                                        <br />
                                                        {{ $data->infrastructureUser }}
                                                        @endif
                                                    </p>
                                                </div>
                                            </div>
                                            <div class="timeline-step">
                                                <div class="timeline-content" data-toggle="popover" data-trigger="hover" data-placement="top" title="" data-content="And here's some amazing content. It's very engaging. Right?" data-original-title="2010">
                                                    <div @if($data->approval_level=='support') class="inner-circle-red blink blink-two" @else class="inner-circle" @endif></div>
                                                    <p class="h6 mt-3 mb-1">Support</p>
                                                    @if($data->approval_level=='support' && $data->support_processing=='Yes')
                                                    <p class="h6 mb-1">
                                                        <b class="processing blinker-one"> (Processing) <br />
                                                        {{ $data->supportProcessingUser }}</b>
                                                    </p>
                                                    @endif

                                                    <p class="h6 text-muted mb-0 mb-lg-0">
                                                        @if($data->support_approved_date!='')
                                                        {{ date('d-m-y h:i A', strtotime($data->support_approved_date)) }}
                                                        <br />
                                                        {{ $data->supportUser }}
                                                        @endif
                                                    </p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <p style="margin-top:30px;"></p>
                                @endforeach
                                @else
                                <img src="{{ asset('assets/dist/img/notfound.png') }}" class="img-responsive" style="width:50%">
                                @endif

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <p></p>
        <div class="row">
            <div class="col-lg-12">
                <div class="card">
                    <div class="card-header">
                        <div class="d-flex justify-content-between align-items-center">
                            <div>
                                <h6 class="fs-17 font-weight-600 mb-0"> UDD ( Live Tracking )</h6>
                            </div>
                        </div>
                    </div>
                    <div class="card-body">
                        <div class=table-responsive>
                            <div class="container" style="height: 400px; overflow-y: auto; text-align: center;">
                                @if($resultUpDown->isNotEmpty())
                                @foreach($resultUpDown as $data)
                                <h5>{{ $data->company_name }} <span style="text-transform: capitalize; "> ( {{ $data->flag}} ) </span></h5>
                                <div class="row">
                                    <div class="col">
                                        <div class="timeline-steps aos-init aos-animate" data-aos="fade-up">
                                            <div class="timeline-step">
                                                <div class="timeline-content" data-toggle="popover" data-trigger="hover" data-placement="top" title="" data-content="And here's some amazing content. It's very engaging. Right?" data-original-title="2003">
                                                    <div class="inner-circle"></div>
                                                    <p class="h6 mt-3 mb-1">Marketing</p>
                                                    <p class="h6 text-muted mb-0 mb-lg-0">
                                                        {{ date('d-m-y h:i A', strtotime($data->create_dt)) }}
                                                        <br />
                                                        {{ $data->marketingUser }}
                                                    </p>
                                                </div>
                                            </div>
                                            <div class="timeline-step">
                                                <div class="timeline-content" data-toggle="popover" data-trigger="hover" data-placement="top" title="" data-content="And here's some amazing content. It's very engaging. Right?" data-original-title="2004">
                                                    <div @if($data->status==0) class="inner-circle-red blink blink-two" @else class="inner-circle" @endif></div>
                                                    <p class="h6 mt-3 mb-1">Accounts</p>
                                                    <p class="h6 text-muted mb-0 mb-lg-0">
                                                        @if($data->accounts_approved_date!='')
                                                        {{ date('d-m-y h:i A', strtotime($data->accounts_approved_date)) }}
                                                        <br />
                                                        {{ $data->accountsUser }}
                                                        @endif
                                                    </p>
                                                </div>
                                            </div>
                                            <div class="timeline-step">
                                                <div class="timeline-content" data-toggle="popover" data-trigger="hover" data-placement="top" title="" data-content="And here's some amazing content. It's very engaging. Right?" data-original-title="2010">
                                                    <div @if($data->status==1) class="inner-circle-red blink blink-two" @else class="inner-circle" @endif></div>
                                                    <p class="h6 mt-3 mb-1">Support</p>
                                                    <p class="h6 text-muted mb-0 mb-lg-0">

                                                        @if($data->processing=='Yes')
                                                        <span class="processing"> Start
                                                            <span class="blink" style="color:red; font-size: 12px !important;">
                                                                <i class="typcn typcn-chevron-right-outline" style="color:red;"></i>
                                                                <i class="typcn typcn-chevron-right-outline" style="color:red;"></i>
                                                                <i class="typcn typcn-chevron-right-outline" style="color:red;"></i>
                                                            </span>
                                                        </span> <span style="color: #000">End</span>
                                                        @endif

                                                        @if($data->processing=='Yes')
                                                        <br />
                                                        {{ date('d-m-y h:i A', strtotime($data->processing_date)) }}
                                                        <br />
                                                        {{ $data->managementUser }}
                                                        @endif

                                                    </p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <p></p>
                                @endforeach

                                @else
                                <img src="{{ asset('assets/dist/img/notfound.png') }}" class="img-responsive" style="width:50%">

                                @endif
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--/.body content-->
</div>
<!--/.main content-->

<div class="modal fade" id="serveyDetails" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-body">
        <div class="modal-dialog modal-xl" role="document">
            <div class="modal-content" style="padding: 15px;">
                <div id="modalContent"></div>
            </div>
        </div>
    </div>
</div>



<script type="text/javascript">
// active customer list data view
function active_customer(cu_id)
{
    $.ajax({
        url:'{{ url('details') }}',
        type: 'GET',
        data: { id:cu_id },
        success: function(data)
        {
            $("#serveyDetails").modal('show');
            $("#modalContent").html(data);
        }
    });
}






</script>
@endsection