@extends('storefront.layouts.main')

@section('title', 'Contact Us')

@section('content')
<!-- Hero -->
<div class="row">
    <div class="col-md-12">
        <div class="portlet box green">
            <div class="portlet-title">
                <div class="caption"><h2 class="no-margin">Contact Us</h2></div>
            </div>
            <div class="portlet-body" style="padding: 30px;">
                <h4 class="text-center">Have a question? We'd love to hear from you.</h4>
            </div>
        </div>
    </div>
</div>

<div class="row">
        <!-- Contact Form -->
        <div class="col-md-8">
            <div class="portlet light">
                <div class="portlet-title">
                    <div class="caption"><span class="caption-subject theme-font bold uppercase">Send us a Message</span></div>
                </div>
                <div class="portlet-body">
                    @if(session('success'))
                        <div class="alert alert-success">
                            <i class="fa fa-check-circle"></i> {{ session('success') }}
                        </div>
                    @endif

                    <form action="{{ route('storefront.contact.send') }}" method="POST">
                        @csrf
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="control-label">Full Name <span class="text-danger">*</span></label>
                                    <input type="text" name="name" class="form-control" value="{{ old('name') }}" placeholder="Your name" required>
                                    @if ($errors->has('name'))<span class="help-block text-danger">{{ $errors->first('name') }}</span>@endif
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="control-label">Email Address <span class="text-danger">*</span></label>
                                    <input type="email" name="email" class="form-control" value="{{ old('email') }}" placeholder="your@email.com" required>
                                    @if ($errors->has('email'))<span class="help-block text-danger">{{ $errors->first('email') }}</span>@endif
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="control-label">Phone Number</label>
                                    <input type="text" name="phone" class="form-control" value="{{ old('phone') }}" placeholder="Your phone number">
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="control-label">Subject <span class="text-danger">*</span></label>
                                    <input type="text" name="subject" class="form-control" value="{{ old('subject') }}" placeholder="How can we help?" required>
                                    @if ($errors->has('subject'))<span class="help-block text-danger">{{ $errors->first('subject') }}</span>@endif
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label">Message <span class="text-danger">*</span></label>
                            <textarea name="message" class="form-control" rows="6" placeholder="Your message..." required>{{ old('message') }}</textarea>
                            @if ($errors->has('message'))<span class="help-block text-danger">{{ $errors->first('message') }}</span>@endif
                        </div>
                        <button type="submit" class="btn btn-primary">
                            <i class="fa fa-paper-plane"></i> Send Message
                        </button>
                    </form>
                </div>
            </div>
        </div>

        <!-- Contact Info Sidebar -->
        <div class="col-md-4">
            <div class="portlet light">
                <div class="portlet-title">
                    <div class="caption"><span class="caption-subject theme-font bold uppercase">Contact Information</span></div>
                </div>
                <div class="portlet-body">
                    <div style="margin-bottom:20px;">
                        <h5><i class="fa fa-envelope" style="margin-right:8px; color:#3598dc;"></i> Email</h5>
                        <p class="font-grey-mint">support@whms.com</p>
                    </div>
                    <div style="margin-bottom:20px;">
                        <h5><i class="fa fa-phone" style="margin-right:8px; color:#3598dc;"></i> Phone</h5>
                        <p class="font-grey-mint">+880 1700-000000</p>
                    </div>
                    <div style="margin-bottom:20px;">
                        <h5><i class="fa fa-map-marker" style="margin-right:8px; color:#3598dc;"></i> Address</h5>
                        <p class="font-grey-mint">House 12, Road 5, Block C<br>Banani, Dhaka 1213<br>Bangladesh</p>
                    </div>
                    <div>
                        <h5><i class="fa fa-clock-o" style="margin-right:8px; color:#3598dc;"></i> Business Hours</h5>
                        <p class="font-grey-mint">Sat - Thu: 9:00 AM - 6:00 PM<br>Friday: Closed</p>
                    </div>
                </div>
            </div>

            <div class="portlet light">
                <div class="portlet-title">
                    <div class="caption"><span class="caption-subject theme-font bold uppercase">Quick Links</span></div>
                </div>
                <div class="portlet-body">
                    <ul class="list-unstyled">
                        <li style="padding:5px 0;"><a href="{{ route('storefront.page', 'knowledge-base') }}"><i class="fa fa-book" style="margin-right:8px;"></i> Knowledge Base</a></li>
                        <li style="padding:5px 0;"><a href="{{ route('storefront.page', 'terms-of-service') }}"><i class="fa fa-file-text" style="margin-right:8px;"></i> Terms of Service</a></li>
                        <li style="padding:5px 0;"><a href="{{ route('storefront.page', 'privacy-policy') }}"><i class="fa fa-lock" style="margin-right:8px;"></i> Privacy Policy</a></li>
                    </ul>
                </div>
            </div>
        </div>
</div>
@endsection