@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="{{ route('static.search') }}" method="GET" onsubmit="return (document.getElementById('top-search-keyword').value.length > 0);">
                    <input name="search" type="text" id="top-search-keyword" class="form-control" value="{{ request()->get('search') }}" 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="text-lg-right">
                    <button id="quik-search-btn" type="button" class="site-button-link"><i class="la la-search"></i></button>
                </div>
                <div class="row">
                    <div class="col-lg-3 col-md-4 m-b30">
                        <aside class="side-bar shop-categories sticky-top">

                            <div class="widget">
                                <div class="dlab-accordion advanced-search toggle" id="accordion1">
                                    <div class="panel">
                                        <div class="acod-head">
                                            <h5 class="acod-title">
                                                <a data-toggle="collapse" href="#categories">
                                                    @lang('products.categories')
                                                </a>
                                            </h5>
                                        </div>
                                        <div id="categories" class="collapse show">
                                            <div class="acod-content">
                                                <div class="widget widget_services">
                                                    <a class="all-filter" href="{{ route('static.products') }}">@lang('products.all')</a>
                                                    <div class="dlab-accordion box-sort-in m-b30 primary space active-bg" id="accordion005">
                                                        @foreach($sectors as $sector)
                                                            <div class="panel">
                                                                <div class="acod-head">
                                                                    <h6 class="acod-title">
                                                                        <a href="javascript:void(0);" data-toggle="collapse" aria-expanded="true" data-target="#{{ $sector->slug }}">
                                                                            {{ $sector->name }}
                                                                        </a>
                                                                    </h6>
                                                                </div>
                                                                <div id="{{ $sector->slug }}" class="acod-body collapse {{ in_array(request()->route('slug'), $sector->services->pluck('slug')->toArray()) ? 'show' : '' }}" data-parent="#accordion005">
                                                                    <div class="acod-content">
                                                                        <ul>
                                                                            @foreach($sector->first_level_services as $sectorService)
                                                                                <li class="{{ request()->is("*/products/{$sectorService->slug}*") ? 'active-category' : '' }}">
                                                                                    <a href="{{ route('static.products', ['slug' => $sectorService->slug]) }}">
                                                                                        {{ $sectorService->name }}
                                                                                    </a>
                                                                                </li>
                                                                            @endforeach
                                                                        </ul>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        @endforeach
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </aside>
                    </div>
                    <div class="col-lg-9 col-md-8 m-b30">
                        @if(isset($service))
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="site-filters clearfix center m-b40 m-t20">
                                        <ul>
{{--                                            <li class="btn {{ ($service !== null && $childService === null) ? 'active' : '' }}">--}}
{{--                                                <a href="{{ route('static.products', ['slug' => $service->slug]) }}" class="site-button-secondry button-sm radius-xl">--}}
{{--                                                    <span>@lang('products.all')</span>--}}
{{--                                                </a>--}}
{{--                                            </li>--}}
                                            @foreach($service->children as $nestedService)
                                                <li class="btn {{ ($childService !== null && $childService->id == $nestedService->id) ? 'active' : '' }}">
                                                    <a href="{{ route('static.products', ['slug' => $service->slug, 'nested_slug' => $nestedService->slug]) }}" class="site-button-secondry button-sm radius-xl">
                                                        {{ $nestedService->name }}
                                                    </a>
                                                </li>
                                            @endforeach
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        @endif
                        <div class="row">
                            @forelse($products as $product)
                                <div class="col-lg-6 col-md-6 col-sm-6 product-list">
                                    <div id="{{ $product->slug }}" class="item-box m-b10">
                                        <div class="item-img">
                                        <img src="{{ $product->main_image_url }}" alt=""/>
                                        <div class="item-info-in center">
                                            <ul>
                                                <li>
                                                    <a class="order" data-id="{{ $product->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-{{ $product->id }}">{{ $product->name }}</h6>
                                        <p class="product-description">{!! $product->description !!}</p>
                                    </div>
                                    </div>
                                </div>
                                @empty
                                <div style="margin: auto;">
                                    <h5>@lang('partials.no_products')</h5>
                                </div>
                            @endforelse

                        </div>
                        <div class="row pagination">
                            {{ $products->links('pagination::bootstrap-4') }}
                        </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($products as $product)
                                                    <option value="{{ $product->name }}">{{ $product->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