@extends('layout.app')

@section('title')
{!! Translation::transText('faq.breadcrumbs.order', 'Order') !!}
@endsection

@section('content')

<div class="toast">
    <div class="toast-content">
        <i class="fas fa-solid fa-check check"></i>

        <div class="message">
            <span class="text text-1">
                {!! Translation::trans('toast.title', 'Дякуємо за замовлення') !!}
            </span>
            <span class="text text-2">{!! Translation::trans('toast.text', 'В найкоротший термін наш менеджер звяжеться з вами') !!}</span>
        </div>
    </div>
    <i class="fa-solid fa-xmark close"></i>

    <div class="progress"></div>
</div>

<div class="wrapper" style="
        background-image: url(img/order-bg.png);
        background-position: top left;
      ">
    <!-- <picture><source srcset="img/home-header-bg.webp" type="image/webp"><img class="home-header-bg" src="img/home-header-bg.png" loading="lazy" /></picture> -->
    <main>
        @include('parts.header-panel')
        @include('parts.header')

        <div class="breadcrumbs">
            <div class="container">
                <div class="breadcrumbs__inner">
                    <ul class="breadcrumbs__list">
                        <li><a href="/">{!! Translation::trans('breadcrumbs.home', 'Home') !!}</a></li>
                        <li><span>{!! Translation::trans('faq.breadcrumbs.order', 'Order') !!}</span></li>
                    </ul>
                </div>
            </div>
        </div>
        <section class="order">
            <div class="container">
                <div class="order__inner">
                    <div class="order__inner-head">
                        <h1>{!! Translation::trans('order.title', 'Złożyć zamówienie') !!}</h1>
                        <p>
                            {!! Translation::trans('order.description', 'Wypełnij niezbędne pola i dokonaj wyboru kierując się rodzajem
                            produktu, ilością, szerokością rolki i długością nawinięcia
                            rolki. A nasi specjaliści skontaktują się z Tobą w ciągu 5
                            minut.') !!}
                        </p>
                    </div>
                </div>
                <div class="order__inner-form">
                    <form action="{{ route('order.store') }}" method="post" data-component="order-form">
                        <div class="order__inner-form-box">
                            <div class="order__inner-form-items-wrapper">
                                <h3>{!! Translation::trans('order.form.title', 'Szczegóły Produktu') !!}</h3>
                                <div class="order__inner-form-items">
                                    <div class="order__inner-form-item">
                                        <label>{!! Translation::trans('order.product', 'Rodzaj produktu') !!}</label>
                                        <div class="custom-select global-select">
                                            <select name="items[0][product]" data-role="product-select">
                                                @foreach($products as $product)
                                                <option value="{{ $product->id }}" {{ $product->id == $active_product ? 'selected=""' : ''  }}>{{ $product->title }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                    <div class="order__inner-form-item">
                                        <label>{!! Translation::trans('order.length', 'Długość w rolce, metry') !!}</label>
                                        <div class="custom-select global-select">
                                            <select name="length" data-role="length-select">
                                                @foreach($params['length'] as $length)
                                                <option value="{{ $length['id'] }}" {{ !empty($input['length']) && $length['id'] == $input['length'] ? 'selected=""' : ''  }}>{{ $length['length'] }}</option>
                                                @endforeach
                                                <option value="other" {{ empty($input['length']) || $input['length'] == 'other' ? 'selected' : '' }}>{{ Translation::transText('choices.other', 'Other') }}</option>
                                            </select>
                                        </div>
                                    </div>
                                    <input class="order__inner-form-item global-input blue-input" type="text" name="custom_length" data-role="length-input" value="{{ $input['custom_length'] ?? '' }}">
                                    <div class="order__inner-form-item">
                                        <label>{!! Translation::trans('order.width', 'Szerokość rolki, mm') !!}</label>
                                        <div class="custom-select global-select">
                                            <select name="width" data-role="width-select">
                                                @foreach($params['width'] as $width)
                                                <option value="{{ $width['id'] }}" {{ !empty($input['width']) && $width['id'] == $input['width'] ? 'selected=""' : ''  }}>{{ $width['width'] }}</option>
                                                @endforeach
                                                <option value="" {{ empty($input['width']) ? 'selected' : '' }}>{{ Translation::transText('choices.other', 'Other') }}</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="order__inner-form-item">
                                        <label>{!! Translation::trans('order.thickness', 'MKM') !!}</label>
                                        <div class="custom-select global-select">
                                            <select name="thickness" data-role="thickness-select">
                                                @foreach($params['thickness'] as $thickness)
                                                <option value="{{ $thickness['id'] }}" {{ !empty($input['thickness']) && $thickness['id'] == $input['thickness'] ? 'selected=""' : ''  }}>{{ $thickness['thickness'] }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                    <div class="order__inner-form-item">
                                        <label>{!! Translation::trans('catalog.filter.adhesive-layer', 'Adhesive layer') !!}</label>
                                        <div class="custom-select global-select">
                                            <select name="glue" data-role="glue-select">
                                                @foreach($params['glue'] as $glue)
                                                <option value="{{ $glue->id }}" {{ !empty($input['glue']) && $glue->id == $input['glue'] ? 'selected=""' : ''  }}>{{ $glue->value }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                    <div class="order__inner-form-item">
                                        <label>{!! Translation::trans('catalog.filter.color', 'Kolor') !!}</label>
                                        <div class="custom-select global-select">
                                            <select name="color" data-role="color-select">
                                                @foreach($params['colors'] as $color)
                                                <option value="{{ $color['id'] }}" {{ !empty($input['color']) && $color['id'] == $input['color'] ? 'selected=""' : ''  }}>{{ $color['title'] }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                    <div class="order__inner-form-item">
                                        <label>{!! Translation::trans('order.packs', 'Ilość w zamówieniu, pudełka') !!}</label>
                                        <input name="items[0][quantity]" class="global-input blue-input" type="number" value="{{ $input['count'] ?? '1' }}">
                                    </div>
                                </div>
                                <div class="checkbox-items">
                                    <div class="checkbox-item">

                                        {!! Translation::trans('order.check1', 'Potwierdzam, że zapoznałem się i akceptuję ogólne
                                        warunki korzystania ze strony internetowej
                                        epat.pl/polityka-prywatnosci') !!}
                                    </div>
                                    <div class="checkbox-item">
                                        <input class="checkbox-radio" id="two" type="checkbox" />
                                        <label for="two">{!! Translation::trans('order.check2', 'Potwierdzam,że zapoznałem się z polityką prywatności
                                            strony internetowej
                                            epat.pl/polityka-prywatnosci') !!}</label>
                                    </div>

                                </div>
                            </div>
                            <div class="order__inner-form-items-wrapper">
                                <h3>{!! Translation::trans('order.clientData', 'Dane klienta') !!}</h3>
                                <div class="order__inner-form-items">
                                    <div class="order__inner-form-item">
                                        <label>{!! Translation::trans('order.clientData.name', 'Imię i Nazwisko') !!}</label>
                                        <input name="name" type="text" class="global-input blue-input" placeholder="{!! Translation::transText('home.contact-us.name.placeholder', 'Wpisz swoje imię i Nazwisko') !!}" />
                                    </div>
                                    <div class="order__inner-form-item">
                                        <label>{!! Translation::trans('order.clientData.email', 'E-mail') !!}</label>
                                        <input type="email" name="email" class="global-input blue-input" placeholder="{!! Translation::transText('home.contact-us.email.placeholder', 'Wpisz swój adres e-mail') !!}" />
                                    </div>
                                    <div class="order__inner-form-item">
                                        <label>{!! Translation::trans('order.clientData.phone', 'Telefon') !!}</label>
                                        <input type="tel" name="phone" class="global-input blue-input" placeholder="{!! Translation::transText('home.contact-us.phone.placeholder', 'Wpisz swój telefon') !!}" />
                                    </div>
                                    <!-- <div class="order__inner-form-item">
                                        <label>{!! Translation::trans('order.clientData.address', 'Adres dostawy') !!}</label>
                                        <input type="text" name="address" class="global-input blue-input" placeholder="{!! Translation::transText('order.clientData.address.placeholder', '54-325, Wroclaw, ul. Smardzowska 12a/25') !!}" />
                                    </div>

                                    <div class="order__inner-form-item">
                                        <label>{!! Translation::trans('order.clientData.shipping', 'Firma przewoźnika') !!}</label>
                                        <div class="custom-select global-select">
                                            <select name="shipment">
                                                @foreach($shipments as $index => $shipment)
                                                <option value="{{ $shipment->id }}" {{ !$index ? 'selected' : '' }}>{{ $shipment->title }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div> -->
                                </div>
                            </div>
                        </div>
                        <button type="submit" class="golden-btn arrow order-btn">
                            {!! Translation::trans('order.clientData.submit', 'Wysłać wiadomość') !!}
                        </button>
                    </form>
                </div>
            </div>
        </section>
    </main>
</div>
@endsection
@section('javascript')
<script src="/front/dist/files/js/custom-select.js"></script>
<script>
    // const button = document.querySelector(".order-btn"),
    //     toast = document.querySelector(".toast")
    // closeIcon = document.querySelector(".close"),
    //     progress = document.querySelector(".progress");
    //
    // let timer1, timer2;
    //
    // button.addEventListener("click", () => {
    //     toast.classList.add("active");
    //     progress.classList.add("active");
    //
    //     timer1 = setTimeout(() => {
    //         toast.classList.remove("active");
    //     }, 5000); //1s = 1000 milliseconds
    //
    //     timer2 = setTimeout(() => {
    //         progress.classList.remove("active");
    //     }, 5300);
    // });
    //
    // closeIcon.addEventListener("click", () => {
    //     toast.classList.remove("active");
    //
    //     setTimeout(() => {
    //         progress.classList.remove("active");
    //     }, 300);
    //
    //     clearTimeout(timer1);
    //     clearTimeout(timer2);
    // });
</script>

@stop