d2d.emegrendeles.hu/resources/views/modules/order/indexStepper.blade.php

@extends('modules.order.index')
@section('content')
<div class="moduleContent adminProductGroup ui-widget-content">


    <div class="container padding-bottom-0x mb-1 mw-100" >
        <div class="card mb-3 containerStepper" >
            <div class="d-flex flex-wrap flex-sm-nowrap justify-content-between py-3 px-2 bg-dark text-white rounded-top">
                <div class="w-100 text-center py-1 px-2"><span class="text-medium">Beszállító:</span> <span class="supplierNamePlace"> - </span></div>
                <div class="w-100 text-center py-1 px-2"><span class="text-medium">Státusz:</span> <span class="statusNamePlace statusBlink">Nincs elkülve </span> </div>
                <div class="w-100 text-center py-1 px-2"><span class="text-medium">Szállítási dátum:</span>  <span class="deliveryDatePlace">-</span></div>
            </div>

            <div class="card-body ">
                <div class="steps d-flex flex-wrap flex-sm-nowrap justify-content-between padding-top-2x padding-bottom-1x">

                    <div class="step " data-stepName="supplier">

                        <div class="step-icon-wrap">
                            <div class="step-icon"><i class="pe-7s-box2"></i></div>
                        </div>
                        <h4 class="step-title">Beszállító kiválasztása</h4>

                    </div>

                    <div class="step" data-stepName="parameter">
                        <div class="step-icon-wrap">
                            <div class="step-icon"><i class="pe-7s-config"></i></div>
                        </div>
                        <h4 class="step-title">Szállítási adatok megadása</h4>
                    </div>
                    <div class="step" data-stepName="productSelect">
                        <div class="step-icon-wrap">

                            <div class="step-icon"><i class="pe-7s-cart"></i></div>
                        </div>
                        <h4 class="step-title">Termékek kiválasztása</h4>
                    </div>
                    <div class="step possible" data-stepName="invoice">

                        <div class="step-icon-wrap">
                            <div class="step-icon"><i class="pe-7s-search"></i></div>
                        </div>
                        <h4 class="step-title">Megrendelés áttekintése</h4>

                    </div>
                    <div class="step" data-stepName="send">
                        <div class="step-icon-wrap">
                            <div class="step-icon"><i class="pe-7s-up-arrow"></i></div>
                        </div>
                        <h4 class="step-title">Elküldés</h4>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="container padding-bottom-3x mb-1 stepContainer SCSupplier" >
        stepContainerSupplier
    </div>
    <div class="container padding-bottom-3x mb-1 stepContainer SCParameter" >
        stepContainerParameter
    </div>
    <div class="container padding-bottom-3x mb-1 stepContainer SCProductSelect"
         style="max-width: 1500px;"
    >
        stepContainerProductSelect
    </div>
    <div class="container padding-bottom-3x mb-1 stepContainer SCInvoice" >
        stepContainerInvoice
    </div>
    <div class="container padding-bottom-3x mb-1 stepContainer SCSend" >
        stepContainerSend
    </div>

</div>

<style>
    .containerStepper{
        margin-bottom: 0px;
    }
    .containerStepper.activeSideBar{
        margin-left: 250px;
    }
    .steps .step {
        display: block;
        width: 100%;
        margin-bottom: 0px;
        text-align: center
    }

    .steps .step .step-icon-wrap {
        display: block;
        position: relative;
        width: 100%;
        height: 80px;
        text-align: center
    }

    .steps .step .step-icon-wrap::before,
    .steps .step .step-icon-wrap::after {
        display: block;
        position: absolute;
        top: 50%;
        width: 50%;
        height: 3px;
        margin-top: -1px;
        background-color: #e1e7ec;
        content: '';
        z-index: 1
    }

    .steps .step .step-icon-wrap::before {
        left: 0
    }

    .steps .step .step-icon-wrap::after {
        right: 0
    }

    .steps .step .step-icon {
        display: inline-block;
        position: relative;
        width: 80px;
        height: 80px;
        border: 1px solid #e1e7ec;
        border-radius: 50%;
        background-color: #f5f5f5;
        color: #374250;
        font-size: 38px;
        line-height: 81px;
        z-index: 5
    }

    .steps .step .step-title {
        margin-top: 16px;
        margin-bottom: 0;
        color: #606975;
        font-size: 14px;
        font-weight: 500
    }

    .steps .step:first-child .step-icon-wrap::before {
        display: none
    }

    .steps .step:last-child .step-icon-wrap::after {
        display: none
    }

    .steps .step.completed .step-icon-wrap::before,
    .steps .step.completed .step-icon-wrap::after {
        background-color: #0da9ef
    }

    .steps .step.completed .step-icon {
        border-color: #0da9ef;
        background-color: #0da9ef;
        color: #fff
    }


    .steps .step.possible .step-icon {
        border-color: #bbf183;
        background-color: #bbf183;
        color: #fff
    }

    .statusBlink{
        color: coral;
        font-weight: bold;
        animation: blinker 0.7s cubic-bezier(.5, 0, 1, 1) infinite alternate;
    }
    @keyframes blinker { to { opacity: 0; } }

    @media (max-width: 576px) {
        .flex-sm-nowrap .step .step-icon-wrap::before,
        .flex-sm-nowrap .step .step-icon-wrap::after {
            display: none
        }
    }

    @media (max-width: 768px) {
        .flex-md-nowrap .step .step-icon-wrap::before,
        .flex-md-nowrap .step .step-icon-wrap::after {
            display: none
        }
    }

    @media (max-width: 991px) {
        .flex-lg-nowrap .step .step-icon-wrap::before,
        .flex-lg-nowrap .step .step-icon-wrap::after {
            display: none
        }
    }

    @media (max-width: 1200px) {
        .flex-xl-nowrap .step .step-icon-wrap::before,
        .flex-xl-nowrap .step .step-icon-wrap::after {
            display: none
        }
    }

    .bg-faded, .bg-secondary {
        background-color: #f5f5f5 !important;
    }

    .stepContainer{
        display: none;
    }
</style>
<script>

    $(document).ready(function() {
        @if(isset($orderData))
            debug('{!!json_encode($orderData['productSelected'])!!}');
            APP.OrderModule.initOrder({!!json_encode($orderData)!!});
        @else
            APP.OrderModule.initOrder(new DataModelOrder());
        @endif

        APP.OrderModule.initStepper();
    });
</script>
@endsection