@extends('layouts.app')
@section('page_title', __('products.title'))
@section('page_description', __('products.description'))
@section('page_keywords', __('products.keywords'))
@section('og_title', __('products.title'))
@section('og_description', __('products.description'))
@section('twitter_title', __('products.title'))
@section('twitter_description', __('products.description'))
@section('page_content')
    <div class="page-content bg-white">
        <div class="dlab-bnr-inr bg-pt" style="background-image:url({{ asset('assets/images/about/banner.jpg') }});">
            <div class="container">
                <div class="dlab-bnr-inr-entry">
                    <h1 class="text-white">{{ isset($service) ? $service->name : __('products.all_products') }}</h1>
                    <div class="breadcrumb-row">
                        <ul class="list-inline">
                            <li><a href="{{ route('static.home') }}">@lang('home.title')</a></li>
                            <li>@lang('products.title')</li>
                            <li>{{ isset($service) ? $service->name : __('products.all_products') }}</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <div class="section-full content-inner">
            <div class="dlab-quik-search">
                <form action="#">
                    <input name="search" value="" type="text" class="form-control" placeholder="@lang('products.search')" aria-label="Search">
                    <span id="quik-search-remove"><i class="ti-close"></i></span>
                </form>
            </div>
            <div class="container">
                <div class="row">
                    <div class="col-lg-12 col-md-12 m-b30">
                        <div class="row">
                            @forelse($results as $result)
                                <div class="col-lg-4 col-md-4 col-sm-6 product-list">
                                    <div id="{{ $result->slug }}" class="item-box m-b10">
                                        <div class="item-img">
                                            <img src="{{ $result->main_image_url }}" alt=""/>
                                            <div class="item-info-in center">
                                                <ul>
                                                    <li>
                                                        <a class="order" data-id="{{ $result->id }}" href="javascript:void(0);"><i class="ti-shopping-cart"></i></a></li>
                                                </ul>
                                            </div>
                                        </div>
                                        <div class="item-info text-left text-black p-a10">
                                            <h6 class="item-title font-weight-500" id="product-{{ $result->id }}">{{ $result->name }}</h6>
                                            <p class="product-description">{!! $result->description !!}</p>
                                        </div>
                                    </div>
                                </div>
                            @empty
                                <div style="margin: auto;">
                                    <h5>@lang('partials.product_not_exist')</h5>
                                </div>
                            @endforelse
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="section-full bg-img-fix" id="apply" style="background-image:url({{ asset('assets/images/background.png') }}); background-color:#003c77;">
            <div class="container">
                <div class="row">
                    <div class="col-lg-5 col-md-12 content-inner chosesus-content text-white">
                        <h3 class="font-weight-300 m-b50 op6 wow fadeInLeft" data-wow-delay="0.6s">@lang('products.order.call')</h3>
                        <h4 class="font-weight-300 wow fadeInLeft" data-wow-delay="0.8s">@lang('products.order.heading2')</h4>
                        <ul class="list-checked primary wow fadeInLeft" data-wow-delay="1s">
                            <li><span>@lang('products.order.reason1')</span></li>
                            <li><span>@lang('products.order.reason2')</span></li>
                            <li><span>@lang('products.order.reason3')</span></li>
                        </ul>
                    </div>
                    <div class="col-lg-7 col-md-12 m-b30">
                        <form enctype="multipart/form-data" class="order-form inquiry-form contact-project bg-white box-shadow wow fadeInUp" id="order-form" data-wow-delay="0.2s" method="POST" action="{{ route('static.order.post') }}">
                            <x-honeypot></x-honeypot>
                            @csrf
                            <h3 class="title-box font-weight-300 m-t0 m-b10">@lang('products.order.title')<span class="bg-primary"></span></h3>
                            <div class="row">
                                <div class="col-lg-6 col-sm-6">
                                    <div class="form-group">
                                        <div class="input-group">
                                            <span class="input-group-addon"><i class="ti-user text-primary"></i></span>
                                            <input name="name" id="name" type="text" class="form-control" placeholder="@lang('contact.messages.name')" value="">
                                            <span class="invalid-feedback"></span>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-6 col-sm-6">
                                    <div class="form-group">
                                        <div class="input-group">
                                            <span class="input-group-addon"><i class="ti-mobile text-primary"></i></span>
                                            <input name="phone" id="phone" type="tel" class="form-control" placeholder="@lang('contact.messages.tel')">
                                            <span class="invalid-feedback"></span>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-6 col-sm-6">
                                    <div class="form-group">
                                        <div class="input-group">
                                            <select name="product" id="prod">
                                                <option value="">@lang('contact.messages.product')</option>
                                                @foreach($results as $result)
                                                    <option value="{{ $result->name }}">{{ $result->name }}</option>
                                                @endforeach
                                            </select>
                                            <span class="invalid-feedback"></span>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-6 col-sm-6">
                                    <div class="form-group">
                                        <div class="input-group">
                                            <span class="input-group-addon"></span>
                                            <input name="quantity" id="quantity" type="text" class="form-control" placeholder="@lang('contact.messages.quantity')">
                                            <span class="invalid-feedback"></span>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-12 col-sm-12">
                                    <div class="form-group">
                                        <div class="input-group">
                                            <span class="input-group-addon"><i class="ti-agenda text-primary"></i></span>
                                            <textarea name="address" id="address" rows="4" class="form-control" placeholder="@lang('contact.messages.add')"></textarea>
                                            <span class="invalid-feedback"></span>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-12 col-sm-12">
                                    <button name="submit" type="submit" value="Submit" class="order-btn site-button button-lg"> <span>@lang('contact.messages.order-btn')</span> </button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('scripts')
    <script>
        $(document).ready(function () {
            $('.order').click(function () {
                $('#prod').val($(`#product-${$(this).data('id')}`).text()).change();
                $('html, body').animate({
                    scrollTop: $('#apply').offset().top - 150
                }, 500);
            });
        });
    </script>
    <script>
        $(document).ready(function () {
            $('form.order-form').submit(function (e) {
                e.preventDefault();
                let $form = $(this),
                    $btn = $form.find('.order-btn'),
                    $spinner = $form.find('.fa-spin');

                $.ajax({
                    url: $form.attr('action'),
                    type: 'POST',
                    data: new FormData($form[0]),
                    dataType: 'JSON',
                    contentType: false,
                    cache: false,
                    processData: false,
                    beforeSend: function() {
                        $form.find('span.invalid-feedback').html('');
                        $form.find('.is-invalid').removeClass('is-invalid');
                        $btn.attr('disabled', true);
                        $spinner.show();
                    },
                    success: function(data){
                        $form[0].reset();
                        $spinner.hide();

                        if (data.success) {
                            $form.prepend('<div class="alert alert-success" role="alert">'+data.message+'</div>');
                        } else {
                            $form.prepend('<div class="alert alert-danger" role="alert">'+data.message+'</div>');
                        }

                        setTimeout(function () {
                            location.reload();
                        }, 5000);
                    },
                    error: function(data){
                        if(data.status === 422) {
                            $.each(data.responseJSON.errors, function(inputName, errorMessage){
                                let $input = $('[name=' + inputName + ']');
                                $input.addClass('is-invalid');
                                $input.siblings('span.invalid-feedback').text(errorMessage[0]);
                            });
                        }
                        $btn.attr('disabled', false);
                        $spinner.hide();
                    }
                });
            });
        });
    </script>
@endsection