@section('style')
    @parent
    <style>
        ul.step-progress {
            list-style: none;
            position: relative;
            padding: 0;
            margin: 1.5rem 0;
            color: #6c757d;
            font-size:.85rem;
        }

        .step-progress li {
            position: relative;
            width: auto;
            height: 2.5rem;
            text-align:center;
        }

        .step-progress li:after {
            content: "";
            position: absolute;
            display: block;
            bottom: -5px;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 10px;
            height: 10px;
            margin: 0.3em auto 0;
            background-color: #fff;
            border: 1px solid #ced4da;
            border-radius: 50px;
            z-index: 1;
        }
        .step-progress li.active:after {
            background-color: #ced4da;
        }
        .step-progress li:not(:first-child):before {
            content: "";
            position: absolute;
            display: block;
            bottom: 4px;
            left: -50%;
            width: 100%;
            height: 1px;
            background-color: #ced4da;
        }
    </style>
@endsection

<!-- Main content -->
<div class="content">
    <div class="container">
        <div class="row">
            <div class="col-12 mx-auto">

                <form class="form-horizontal" action="{{ $post_url }}" method="{{$post_url?'POST':''}}" enctype="multipart/form-data">
                    @csrf

                    @if($type == 'voucher')
                    <div class="card card-outline shadow overflow-hidden">

                        <ul class="step-progress row">
                            <li class="{{ $step=='1'?'active':'' }} col">Details</li>
                            <li class="{{ $step=='2'?'active':'' }} col">Download</li>
                            <li class="{{ $step=='3'?'active':'' }} col">Redemption</li>
                            <li class="{{ $step=='4'?'active':'' }} col">Settings</li>
                        </ul>
                        @if($voucher_series)
                            <small class="bg-muted border-top py-1 px-2 text-muted text-center w-100">
                                <span class="mr-1">Voucher ID:</span><span class="text-bold">
                                    <a href="{{ route('edit_voucher_series_summary',$voucher_series['series_id']) }}"
                                       data-toggle="tooltip" title="View Summary">
                                        {{$voucher_series->series_id}}
                                    </a></span>
                                <span class="ml-2 mr-1">Title:</span><span class="text-bold">
                                    {{$voucher_series->title}}
                                </span>
                            </small>
                        @endif
                    </div>

                    @else
                        @if(isset($all_pages) && isset($step) && count($all_pages)>0)
                            <div class="card card-outline shadow overflow-hidden">
                                <ul class="step-progress row">
                                    @foreach($all_pages as $i=>$page)
                                        <li class="{{ $step==$i+1?'active':'' }} col">{{$page}}</li>
                                    @endforeach
                                </ul>
                            </div>
                        @endif
                        @if($edit_data ?? '')
                                <small class="bg-muted border-top py-1 px-2 text-muted text-center w-100">
                                    <span class="mr-1">{{$edit_data['type'] ??''}} ID:</span><span class="text-bold">
                                    <a href="{{ $edit_data['summary_url'] ?? '' }}"
                                       data-toggle="tooltip" title="View Summary">
                                         {{ $edit_data['form_id'] ?? ''}}
                                    </a></span>
                                    @isset($edit_data['name'])
                                    <span class="ml-2 mr-1">Title:</span><span class="text-bold">
                                    {{$edit_data['name']}}
                                    </span>
                                    @endif
                                </small>
                        @endif
                    @endif

                    @if($type == 'blast')
                    <div class="card card-outline shadow">
                        <ul class="step-progress row">
                            <li class="{{ $step=='1'?'active':'' }} col">Target Users</li>
                            <li class="{{ $step=='2'?'active':'' }} col">Blast Details</li>
                        </ul>
                    </div>
                    @endif

                    <div class="card card-outline shadow">

                        <div class="card-header text-center border-0 pt-4 h5 text-muted">
                            <div>{{ $title }}</div>
                        </div>
                        <!-- /.card-header -->
                        <div class="card-body row">
                        {{ $slot }}
                        </div>

                        <div class="card-footer">
                            {{ $footer_back ?? '' }}
                            {{ $footer_next ?? '' }}
                        </div>
                    </div>


                </form>
            </div>


        </div>
    </div>

    <!-- /.row -->
</div>
<!-- /.content -->