@extends('layout.app')

@section('page-title', $title)

@section('breadcrumb')
    <div class="tf-breadcrumb">
        <div class="container">
            <div class="tf-breadcrumb-wrap d-flex justify-content-between flex-wrap align-items-center">
                <div class="tf-breadcrumb-list">
                    <a href="{{ url('/new-design/home.php') }}" class="text">Home</a>
                    <i class="icon icon-arrow-right"></i>
                    <span class="text">Custom products</span>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('content')
    <div id="custom-products" class="custom-products">
        <section class="flat-spacing-3 pb-0">
            <div class="container">
                <div class="tf-grid-layout md-col-1-2">
                    <div class="tf-content-wrap wow fadeInUp" data-wow-delay="0s" style="visibility: visible; animation-delay: 0s; animation-name: fadeInUp;">
                        <div class="heading">Custom products</div>
                    </div>
                    <div class="tf-content-wrap wow fadeInUp" data-wow-delay="0s" style="visibility: visible; animation-delay: 0s; animation-name: fadeInUp;">
                        <p class="description">
                            <strong>Replacement Parts</strong> - used for parts <span style='color:red; font-weight: bold'>ONLY</span>. Adds a "PARTS ORDER" line to the WTCA PO subject. Creates both PO and QB emails..
                        </p>
                        <p class="description">
                            <strong>Non-database Product</strong> - could be used for everything else that is not in the database as a product and is not a CP or RP order. Creates PO &amp; QB as well. Can be used when shipping charges only need to be charged or any other charge where there is no product id to use in the database.
                        </p>
                        <p class="description">* Required</p>
                    </div>
                </div>
            </div>
        </section>

        <!-- Form -->
        <section class="flat-spacing-wt form-background">
            <div class="container">
                <div id="error-message" class="tf-grid-layout text-center alert alert-danger" style="display: none;">
                    <div class="tf-content-wrap wow shake" data-wow-delay="1s">
                        Please, fix the following errors.
                        <div class="error-message-detail"></div>
                    </div>
                </div>
                @if($show_success_message)
                    <div id="success-message" class="tf-grid-layout text-center alert alert-success">
                        <div class="tf-content-wrap wow shake" data-wow-delay="1s">
                            Thank you for contacting us!.<br>
                            We will respond as quickly as we can!
                        </div>
                    </div>
                @endif
                <form id='custom-products-form' class="tf-contact-us" name='form' method='POST'>
                    <input type="hidden" name="action_name" value="add_to_cart"/>
                    <div class="tf-grid-layout md-col-3">
                        <div id="qty_wrapper" class="tf-content-wrap wow fadeInUp" data-wow-delay="0s" style="visibility: visible; animation-delay: 0s; animation-name: fadeInUp;">
                            <label for="qty" class="input-label">Quantity *</label>
                            <p class="input msg-wrapper">
                                <input id="qty" type="text" name="qty">
                            </p>
                        </div>
                        <div id="type_wrapper" class="tf-content-wrap wow fadeInUp" data-wow-delay="0s" style="visibility: visible; animation-delay: 0s; animation-name: fadeInUp;">
                            <label for="type" class="input-label">Type *</label>
                            <p class="input msg-wrapper">
                                <select class="tf-select w-100" id="type" name="type">
                                    <option value="">Select type</option>
                                    <option value="NP">Non-database Product</option>
                                    <option value="RP">Replacement Parts</option>
                                </select>
                            </p>
                        </div>
                        <div id="description_wrapper" class="tf-content-wrap wow fadeInUp" data-wow-delay="0s" style="visibility: visible; animation-delay: 0s; animation-name: fadeInUp;">
                            <label for="qty" class="input-label">Description *</label>
                            <p class="input msg-wrapper">
                                <input id="description" type="text" name="description">
                            </p>
                        </div>
                    </div>
                    <div class="tf-grid-layout md-col-3">
                        <div id="price_wrapper" class="tf-content-wrap wow fadeInUp" data-wow-delay="0s" style="visibility: visible; animation-delay: 0s; animation-name: fadeInUp;">
                            <label for="price" class="input-label">Price *</label>
                            <p class="input msg-wrapper">
                                <input id="price" type="text" name="price" placeholder="100.00">
                            </p>
                        </div>
                        <div id="non_sale_price_wrapper" class="tf-content-wrap wow fadeInUp" data-wow-delay="0s" style="visibility: visible; animation-delay: 0s; animation-name: fadeInUp;">
                            <label for="non_sale_price" class="input-label">Retail Price</label>
                            <p class="input msg-wrapper">
                                <input id="non_sale_price" type="text" name="non_sale_price" placeholder="200.00">
                            </p>
                        </div>
                        <div id="vendor_wrapper" class="tf-content-wrap wow fadeInUp" data-wow-delay="0s" style="visibility: visible; animation-delay: 0s; animation-name: fadeInUp;">
                            <label for="vendor" class="input-label">Vendor</label>
                            <p class="input msg-wrapper">
                                <select class="tf-select w-100" id="vendor" name="vendor">
                                    <option value="">Select vendor</option>
                                    @foreach($vendors as $vendor)
                                        <option value="{{ $vendor }}">{{ $vendor }}</option>
                                    @endforeach
                                </select>
                            </p>
                        </div>
                    </div>
                    <div class="tf-grid-layout send-wrap">
                        <div class="tf-content-wrap wow fadeInUp" data-wow-delay="0s" style="visibility: visible; animation-delay: 0s; animation-name: fadeInUp;">
                            <button class="tf-btn btn-fill justify-content-center fw-6 fs-16 flex-grow-1 animate-hover-btn">
                                <span class="text text-uppercase">Add to cart</span>
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </section>
        <!-- /Form -->
    </div>
@endsection

@push('after-foot-js')
    <!-- Add reCAPTCHA script -->
    <script src="https://www.google.com/recaptcha/api.js" async defer></script>
    <script type="text/javascript" src="{{ asset('new-design/js/custom-products.js') }}"></script>
@endpush