@extends('front.layout.app')
@section('title', 'Contact Us')
@section('extra-css')
    <style>
        .main .contact-main h1 {
            text-transform: uppercase;
            font-size: 20px;
            font-weight: 700;
            color: #2a439a;
            margin-top: 15px;
            text-align: center;
        }
        .main .contact-main .contact-box {
            background: #ededed;
            padding: 15px 10px;
            width: 100%;
            margin-top: 15px;
            border: 1px solid #d7d7d7;
        }

        .main .contact-main .contact-box h3 {
            text-transform: capitalize;
            font-size: 18px;
            font-weight: 500;
            color: #251f1f;
            padding: 5px 0 0;
            line-height: 26px;
            margin-top: 0;
        }

        .main .contact-main p {
            color: #666;
            font-size: 14px;
            font-weight: 500;
            margin: 10px 0;
            line-height: 22px;
        }

        .main .contact-main p a {
            color: #4660c2;
            font-size: 14px;
            text-decoration: underline;
            font-weight: 500;
            line-height: 22px;
            text-align: left;
            padding: 20px 0;
        }

        .main .contact-main h4 {
            color: #251f1f;
            font-size: 16px;
            font-weight: 600;
            line-height: 24px;
            padding-bottom: 10px;
        }

        .main .contact-main form {
            margin-top: 20px;
        }

        .main .contact-main label {
            color: #000;
            font-size: 14px;
            font-weight: 200;
            text-transform: capitalize;
        }

        .form-group {
            margin-bottom: 15px;
        }

        .main .contact-main .form-control {
            display: block;
            width: 100%;
            height: 40px;
            padding: 6px 12px;
            font-size: 14px;
            line-height: 1.42857143;
            color: #666666;
            background-color: #fff;
            background-image: none;
            border: 1px solid #d7d7d7;
            border-radius: 0px;
            -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
            box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
            -webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
            -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
            -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
            transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
            transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
            transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
        }

        .main .contact-main textarea {
            width: 100%;
            height: 135px;
            font-size: 14px;
            border: 1px solid #d7d7d7;
            padding: 6px 12px;
        }

        .main .contact-main .con-btn .c-btn {
            color: #fff;
            font-size: 12px;
            padding: 10px 30px;
            border: 1px solid #ce1729;
            border-radius: 20px;
            background: #ce1729;
            float: right;
            margin-bottom: 20px;
        }

        .main .contact-main .con-btn .c-btn:hover {
            color: #ce1729;
            font-size: 12px;
            padding: 10px 30px;
            border: 1px solid #ce1729;
            border-radius: 20px;
            background: #fff;
            float: right;
            margin-bottom: 20px;
            -webkit-transition: all 500ms ease-in-out;
            -moz-transition: all 500ms ease-in-out;
            -ms-transition: all 500ms ease-in-out;
            -o-transition: all 500ms ease-in-out;
            transition: all 500ms ease-in-out;
        }

        .col-form-label span{
            color: #ff0000;
        }

        span.error-message {
            color: red;
            font-style: italic;
        }

        .main .contact-main h1{
            text-align: left !important;
        }

    </style>
@endsection
@section('content')



    <section class="main">
        <div class="container">

            <div class="row">
                @include('front.partials.sidemenu')
                <div class="col-md-9 col-sm-12">
                    <div class="contact-main">
                        <h1>Contact</h1>
                        <div class="contact-box">
                            <h3>Call today!</h3>
                        </div>
                        <p class="pt-3"><b>NAG Forms &amp; Supplies</b> provides business supplies for online shoppers.
                            Contact us today to place an order or for more information. </p>
                        <p>Toll Free: 1-888-624-1973 </p>
                        <p>Phone: (631) 472-6764 </p>
                        <p>Fax: (631) 472-4918 </p>
                        <p class="pb-3">Email:<a href="#">nagforms@optonline.net</a></p>
                        <h4>Fill out the form below to request a free catalog or samples!</h4>


                        @if(Session::has('msg'))
                            <div class="alert alert-success">{{Session::get('msg')}}</div>
                        @endif
                        <form action="{{route('contact')}}" method="post">
                            @csrf
                            <div class="row">
                                <div class="col-md-4">
                                    <label for="colFormLabelLg" class="col-form-label col-form-label-lg">Name: <span>*</span></label>
                                </div>
                                <div class="col-md-8">
                                    <div class="form-group row">
                                        <div class="col-12">
                                            <input type="text" class="form-control form-control-lg @error('name') is-invalid @enderror" id="name" placeholder="" name="name" value="{{old('name')}}">
                                            @error('name')
                                            <span class="invalid-feedback" role="alert">
                                                <strong>{{ $message }}</strong>
                                             </span>
                                            @enderror
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!--row-->

                            <div class="row">
                                <div class="col-md-4">
                                    <label for="colFormLabelLg" class="col-form-label col-form-label-lg">Company Name:</label>
                                </div>
                                <div class="col-md-8">
                                    <div class="form-group row">
                                        <div class="col-12">
                                            <input type="text" class="form-control form-control-lg" id="c-name" placeholder="" name="cmp_name" value="{{old('cmp_name')}}">
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!--row-->
                            <div class="row">
                                <div class="col-md-4">
                                    <label for="colFormLabelLg" class="col-form-label col-form-label-lg">Address:</label>
                                </div>
                                <div class="col-md-8">
                                    <div class="form-group row">
                                        <div class="col-12">
                                            <input type="text" class="form-control form-control-lg" id="address" placeholder="" name="address" value="{{old('address')}}">
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!--row-->

                            <div class="row">
                                <div class="col-md-4">
                                    <label for="colFormLabelLg" class="col-form-label col-form-label-lg">city:</label>
                                </div>
                                <div class="col-md-8">
                                    <div class="form-group row">
                                        <div class="col-12">
                                            <input type="text" class="form-control form-control-lg" id="city" placeholder="" name="city" value="{{old('city')}}">
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!--row-->

                            <div class="row">
                                <div class="col-md-4">
                                    <label for="colFormLabelLg" class="col-form-label col-form-label-lg">State:</label>
                                </div>
                                <div class="col-md-8">
                                    <div class="form-group row">
                                        <div class="col-12">
                                            <input type="text" class="form-control form-control-lg" id="state" placeholder="" name="state" value="{{old('state')}}">
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!--row-->
                            <div class="row">
                                <div class="col-md-4">
                                    <label for="colFormLabelLg" class="col-form-label col-form-label-lg">Zip Code:</label>
                                </div>
                                <div class="col-md-8">
                                    <div class="form-group row">
                                        <div class="col-12">
                                            <input type="text" class="form-control form-control-lg" id="code" placeholder="" name="zip_code" value="{{old('zip_code')}}">
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!--row-->

                            <div class="row">
                                <div class="col-md-4">
                                    <label for="colFormLabelLg" class="col-form-label col-form-label-lg">Email: <span>*</span></label>
                                </div>
                                <div class="col-md-8">
                                    <div class="form-group row">
                                        <div class="col-12">
                                            <input type="email" class="form-control form-control-lg @error('email') is-invalid @enderror" id="email" placeholder="" name="email" value="{{old('email')}}">
                                            @error('email')
                                            <span class="invalid-feedback" role="alert">
                                                <strong>{{ $message }}</strong>
                                             </span>
                                            @enderror
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!--row-->
                            <div class="row">
                                <div class="col-md-4">
                                    <label for="colFormLabelLg" class="col-form-label col-form-label-lg">Phone:</label>
                                </div>
                                <div class="col-md-8">
                                    <div class="form-group row">
                                        <div class="col-12">
                                            <input type="number" onkeypress="return isNumberKey(event)" class="form-control form-control-lg" id="phone" placeholder="" name="phone" value="{{old('phone')}}">
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!--row-->
                            <div class="row">
                                <div class="col-md-4">
                                    <label for="colFormLabelLg" class="col-form-label col-form-label-lg">Fax:</label>
                                </div>
                                <div class="col-md-8">
                                    <div class="form-group row">
                                        <div class="col-12">
                                            <input type="text" class="form-control form-control-lg" id="fax" placeholder="" name="fax" value="{{old('fax')}}">
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!--row-->
                            <div class="row">
                                <div class="col-md-4">
                                    <label for="colFormLabelLg" class="col-form-label col-form-label-lg">Subject: <span>*</span></label>
                                </div>
                                <div class="col-md-8">
                                    <div class="form-group row">
                                        <div class="col-12">
                                            <input type="text" class="form-control form-control-lg @error('subject') is-invalid @enderror" id="subject" placeholder="" name="subject" value="{{old('subject')}}">
                                            @error('subject')
                                            <span class="invalid-feedback" role="alert">
                                                <strong>{{ $message }}</strong>
                                             </span>
                                            @enderror
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!--row-->
                            <div class="row">
                                <div class="col-md-4">
                                    <label for="colFormLabelLg" class="col-form-label col-form-label-lg">Comments or Questions: <span>*</span></label>
                                </div>
                                <div class="col-md-8">
                                    <div class="form-group row">
                                        <div class="col-12">
                                            <textarea class="textarea @error('message') is-invalid @enderror" name="message">{{old('message')}}</textarea>
                                            @error('message')
                                            <span class="invalid-feedback" role="alert" style="display: block !important;">
                                                <strong>{{ $message }}</strong>
                                             </span>
                                            @enderror
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!--row-->
                            <div class="con-btn">
                                <button class="c-btn" type="submit">Send</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </section>


@endsection