@extends('layouts.website_layout')
@section('meta_title', $meta_data->meta_title)
@section('meta_description', $meta_data->meta_description)
@section('canonical_tag', $meta_data->canonical_tag)
@section('banner_image', "banners/".$banner->banner_image)
@section('content')
<main>
    <article class="container-fluid list">
        @if(!empty(count($product_lists)))
        <section class="row custom__row">
            <div class="col-12 list__title">
                <h1 class="paragraph"><span>Your List:</span> Make your selection for detailed enquiry by clicking on one of the given options.</h1>
            </div>
            <div class="col-12 col-md-12 col-lg-7 list__items">
                <div class="list__items__filter">
                    <ol>
                        <li id="select_all_product">Select All</li>
                        <li id="remove__all__product">Clear All</li>
                    </ol>
                </div>
                <form id="product_list_form">
                    <ul>
                        @foreach($product_lists as $product_list_row)
                        <li>
                            <span class="list__select">
                                <label class="label">
                                    <input type="checkbox" class="checkbox product_list_selection" name="product_list_ids[{{$product_list_row->product_list_id}}]" value="{{$product_list_row->product_list_id}}" checked>
                                    <span class="checkmark"></span>
                                </label>
                            </span>
                            <div class="list__image">
                                <img src="{{url('/')}}/assets/images/products/{{$product_list_row->product_thumbnail}}" alt="{{$product_list_row->product_name}}" class="img-fluid">
                            </div>
                            <div class="list__name">
                                <a href="{{url('/')}}/{{$product_list_row->product_url_slug}}">{{$product_list_row->product_name}}</a>
                                @if(!empty($product_list_row->product_variant))
                                <span>{!!nl2br($product_list_row->product_variant)!!}</span>
                                @endif
                                <span>{{$product_list_row->product_category_name}}</span>
                                <p class="paragraph">{{Str::limit($product_list_row->product_description, 100)}}</p>
                                <div class="quantity">
                                    <p class="paragraph">
                                        Quantity
                                    </p>
                                    <div class="quantity__field">
                                        <span class="minus minus_quantity" @if($product_list_row->product_quantity < 2) style="pointer-events: none; opacity: 0.6" @endif><i class="fa fa-caret-left" aria-hidden="true"></i></span>
                                        <input type="text" name="product_quantities[{{$product_list_row->product_list_id}}]" class="quantity__input product_quantity" value="{{$product_list_row->product_quantity}}" readonly>
                                        <span class="plus add_quantity"><i class="fa fa-caret-right" aria-hidden="true"></i></span>
                                    </div>
                                </div>
                            </div>
                            <div class="list__remove remove_from_list" data-id="{{$product_list_row->product_list_id}}">
                                <span><img src="{{url('/')}}/assets/images/product-list/trash.png" alt="Remove Item" class="img-fluid"></span>
                            </div>
                        </li>
                        @endforeach
                    </ul>
                </form>
            </div>
            <div class="col-12 col-md-12 col-lg-5 list__tab">
                <ul>
                    <li data-list-tab-name="enquiry" class="@if(isset($form_type) && $form_type == "enquiry") active @endif @if(!isset($form_type)) active @endif">Enquiry</li>
                    <li data-list-tab-name="emailus" class="@if(isset($form_type) && $form_type == "email") active @endif">Email</li>
                    <li data-list-tab-name="download" class="@if(isset($form_type) && $form_type == "download") active @endif">Download</li>
                </ul>
                <div class="list__tab__content">
                    <div class="list__tab__content__block @if(isset($form_type) && $form_type == "enquiry") active @endif @if(!isset($form_type)) active @endif" id="enquiry">
                        <form class="row" id="enquiry_product_list_form">
                            @csrf
                            <div class="col-12 title mb-3">
                                <h3 class="secondary-heading">Please share your particulars for our representative to connect with you.</h3>
                            </div>
                            <div class="col-12 col-md-6 form-group">
                                <input type="text" class="form-control" placeholder="First Name" id="enquiry_first_name" name="enquiry_first_name">
                                <div class="error">
                                    <span id="enquiry_first_name_err"></span>
                                </div>
                            </div>
                            <div class="col-12 col-md-6 form-group">
                                <input type="text" class="form-control" placeholder="Last Name" id="enquiry_last_name" name="enquiry_last_name">
                                <div class="error">
                                    <span id="enquiry_last_name_err"></span>
                                </div>
                            </div>
                            <div class="col-12 form-group">
                                <input type="email" class="form-control" placeholder="Email Address" id="enquiry_email_id" name="enquiry_email_id">
                                <div class="error">
                                    <span id="enquiry_email_id_err"></span>
                                </div>
                            </div>
                            <div class="col-12 form-group">
                                <input type="tel" class="form-control" placeholder="Phone Number" id="enquiry_phone_number" name="enquiry_phone_number" inputmode="numeric">
                                <div class="error">
                                    <span id="enquiry_phone_number_err"></span>
                                </div>
                            </div>
                            <div class="col-12 form-group">
                                <select class="form-control" id="enquiry_country_name" name="enquiry_country_name">
                                    <option value="">Select Country</option>
                                    @foreach($countries as $country_row)
                                    <option value="{{$country_row->country_name}}">{{$country_row->country_name}}</option>
                                    @endforeach
                                </select>
                                <div class="error">
                                    <span id="enquiry_country_name_err"></span>
                                </div>
                            </div>
                            <div class="col-12 form-group">
                                <input type="text" class="form-control" placeholder="Company Name" id="enquiry_company_name" name="enquiry_company_name">
                                <div class="error">
                                    <span id="enquiry_company_name_err"></span>
                                </div>
                            </div>
                            <div class="col-12 form-group">
                                <textarea class="form-control" id="enquiry_comments" name="enquiry_comments" placeholder="Your Requirement" rows="3"></textarea>
                                <div class="error">
                                    <span id="enquiry_comments_err"></span>
                                </div>
                            </div>
                            <div class="col-12 submit__btn">
                                <button type="submit" class="btn white__btn">Submit</button>
                            </div>
                        </form>
                    </div>
                    <div class="list__tab__content__block @if(isset($form_type) && $form_type == "email") active @endif" id="emailus">
                        <form class="row" id="email_product_list_form">
                            @csrf
                            <div class="col-12 title mb-3">
                                <h3 class="secondary-heading">You may email your selected product list details to yourself/multiple persons by furnishing names and email IDs</h3>
                            </div>
                            <div class="col-12 col-md-6 form-group">
                                <input type="text" class="form-control" placeholder="First Name" id="email_first_name" name="email_first_name">
                                <div class="error">
                                    <span id="email_first_name_err"></span>
                                </div>
                            </div>
                            <div class="col-12 col-md-6 form-group">
                                <input type="text" class="form-control" placeholder="Last Name" id="email_last_name" name="email_last_name">
                                <div class="error">
                                    <span id="email_last_name_err"></span>
                                </div>
                            </div>
                            <div class="col-12 form-group">
                                <input type="text" class="form-control" placeholder="Email Address (separated by comma)" id="email_email_ids" name="email_email_ids">
                                <div class="error">
                                    <span id="email_email_ids_err"></span>
                                </div>
                            </div>
                            <div class="col-12 submit__btn">
                                <button type="submit" class="btn white__btn">Submit</button>
                            </div>
                        </form>
                    </div>
                    <div class="list__tab__content__block @if(isset($form_type) && $form_type == "download") active @endif" id="download">
                        <form class="row" id="download_product_list_form">
                            @csrf
                            <div class="col-12 title mb-3">
                                <h3 class="secondary-heading">Download your selection and save them on your personal laptop/computer.</h3>
                            </div>
                            <div class="col-12 col-md-6 form-group">
                                <input type="text" class="form-control" placeholder="First Name" id="download_first_name" name="download_first_name">
                                <div class="error">
                                    <span id="download_first_name_err"></span>
                                </div>
                            </div>
                            <div class="col-12 col-md-6 form-group">
                                <input type="text" class="form-control" placeholder="Last Name" id="download_last_name" name="download_last_name">
                                <div class="error">
                                    <span id="download_last_name_err"></span>
                                </div>
                            </div>
                            <div class="col-12 form-group">
                                <input type="email" class="form-control" placeholder="Email Address" id="download_email_id" name="download_email_id">
                                <div class="error">
                                    <span id="download_email_id_err"></span>
                                </div>
                            </div>
                            <div class="col-12 form-group">
                                <input type="tel" class="form-control" placeholder="Phone Number" id="download_phone_number" name="download_phone_number" inputmode="numeric">
                                <div class="error">
                                    <span id="download_phone_number_err"></span>
                                </div>
                            </div>
                            <div class="col-12 submit__btn">
                                <button type="submit" class="btn white__btn">Submit</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </section>
        @else
        <p>Cart empty</p>
        @endif
    </article>
</main>
@endsection