@extends('layouts.app')

@section('content')
    <div class="container position-relative">
        <form class="form" action="#">
            <input type="hidden" name="mode" value="{{$mode->id}}"/>
            <input type="hidden" name="surface"/>
            <input type="hidden" name="product"/>
            <input type="hidden" name="size"/>
        </form>

        <ul class="progressbar">
            <li class="active" data-field="surface">
                @if($mode->slug === 'stripping')
                    <span class="d-none d-md-block">{{__('app.surface')}}</span>
                @else
                    <span class="d-none d-md-block">{{__('app.application')}}</span>
                @endif
            </li>
            <li data-field="product"><span class="d-none d-md-block">{{__('app.machine')}}</span></li>
            <li data-field="size"><span class="d-none d-md-block">{{__('app.size')}}</span></li>
            <li><span class="d-none d-md-block">{{__('app.result')}}</span></li>
        </ul>
        <fieldset class="surfaces">
            <x-loader />
            @if($mode->slug === 'stripping')
                <h3 class="d-block d-md-none mb-2">{{__('app.surface')}}</h3>
            @else
                <h3 class="d-block d-md-none mb-2">{{__('app.application')}}</h3>
            @endif
            <x-toggle :items="$surfaces" />
            <x-button type="next" />
            <div class="row mt-5">
                <div class="col-12 col-sm-6">
                    <x-button type="restart" />
                </div>
            </div>
        </fieldset>
        <fieldset class="areaMachines">
            <x-loader />
            <h3 class="d-block d-md-none mb-2">{{__('app.machine')}}</h3>
            @if($mode->slug === 'stripping')
                <x-machine :products="$machines" type="1" />
            @else
                <div class="accordion mb-4" id="accordionMachines">
                    <div class="card mb-2">
                        <div class="card-header" id="areaMachines">
                            <h2 class="mb-0">
                                <button class="btn btn-accordion btn-block" type="button" data-toggle="collapse" data-target="#collapseAreaMachines" aria-expanded="false" aria-controls="collapseAreaMachines">
                                    {{ trans('app.type_1') }}
                                </button>
                            </h2>
                        </div>
                        <div id="collapseAreaMachines" class="collapse" aria-labelledby="collapseAreaMachines" data-parent="#accordionMachines">
                            <div class="card-body">
                                <x-machine :products="$machines" type="1" />
                            </div>
                        </div>
                    </div>
                    <div class="card mb-2">
                        <div class="card-header" id="edgeMachines">
                            <h2 class="mb-0">
                                <button class="btn btn-accordion btn-block" type="button" data-toggle="collapse" data-target="#collapseEdgeMachines" aria-expanded="false" aria-controls="collapseEdgeMachines">
                                    {{ trans('app.type_2') }}
                                </button>
                            </h2>
                        </div>
                        <div id="collapseEdgeMachines" class="collapse" aria-labelledby="collapseEdgeMachines" data-parent="#accordionMachines">
                            <div class="card-body">
                                <x-machine :products="$machinesEdge" type="2" />
                            </div>
                        </div>
                    </div>
                </div>
            @endif
            <div class="row">
                <div class="col-12 col-sm-6">
                    <x-button type="previous" />
                </div>
                <x-button type="next" />
            </div>
            <div class="row mt-5">
                <div class="col-12 col-sm-6">
                    <x-button type="restart" />
                </div>
            </div>
        </fieldset>
        <x-size />
        <fieldset class="result">
            <div class="ajaxContainer"></div>
            <div class="row mt-5">
                <div class="col-12 col-sm-6">
                    <x-button type="restart" />
                </div>
            </div>
        </fieldset>
    </div>
@endsection