@extends('Website.Layout.App')

@push('css')
    <link href="{{ asset('assets/css/custom/contactus.css') }}" rel="stylesheet">
    <link href="{{ asset('assets/css/custom/common.css') }}" rel="stylesheet">
@endpush
@section('content')
<div class="jumbotron text-center bg-body-tertiary">
    <div class="container">
        <h1 class="text-body-emphasis">Contact Us</h1>
    </div>
</div>

<div class="container-fluid contact-details-div">
    <div class="container">
        <div class="row">
            <div class="col-12 col-md-6 mt-5">
                <h1>Contact Details</h1>

                <div class="row  contact-details">
                    <div class="col-2 col-md-2 d-flex align-items-center justify-content-end">
                        <div class="contact-icon">
                            <i class="fas fa-map-marker-alt"></i>
                        </div>
                    </div>
                    <div class="col-10 col-md-9 d-flex justify-content-start align-items-center ml-2 contact-details-text">
                        15 Bhande Plot, Umred Road, Near Sheetla Mata Mandir, Nagpur - 440 024
                    </div>
                </div>   

                <div class="row  contact-details">
                    <div class="col-2 col-md-2 d-flex align-items-center justify-content-end">
                        <div class="contact-icon">
                            <i class="fas fa-envelope"></i>
                        </div>
                    </div>
                    <div class="col-10 col-md-8 d-flex justify-content-start align-items-center ml-2 contact-details-text">
                        info@taxoreo.com
                    </div>
                </div>   


                <div class="row contact-details">
                    <div class="col-2 col-md-2 d-flex align-items-center justify-content-end">
                        <div class="contact-icon">
                            <i class="fas fa-phone"></i>
                        </div>
                    </div>
                    <div class="col-9 col-md-8 d-flex justify-content-start align-items-center ml-2 contact-details-text">
                        +91 9404088555
                    </div>
                </div>   
            </div>

            <div class="col-12 contact-form-col col-md-5 card shadow-lg p-5">
                <h1>Contact Form</h1>
                <div class="flash-message">
                    @foreach (['danger', 'warning', 'success', 'info'] as $msg)
                        @if (Session::has('alert-' . $msg))
                            <p class="alert alert-{{ $msg }} d-flex justify-content-between p-2">
                                <b>{{ Session::get('alert-' . $msg) }}</b>
                                <i class="fa fa-times-circle close" aria-hidden="true" data-dismiss="alert" aria-label="close"></i>
                            </p>
                            {{ session()->forget('alert-' . $msg) }}
                        @endif
                    @endforeach
                </div>
                
                <form action="{{ url('contact-us') }}" method="post">
                    @csrf
                    <div class="form-group">
                        <label for="contact_name">Your Name:</label>
                        <input type="text" class="form-control nameInput" id="contact_name" name="name" value="{{ old('name') }}" minlength="3" maxlength="20" required>
                        @error('name')
                            <small class="text-danger">{{ $message }}</small>
                        @enderror
                    </div>
                
                    <div class="form-group mt-4">
                        <label for="contact_email">Your Email:</label>
                        <input type="email" class="form-control emailInput" id="contact_email" name="email" value="{{ old('email') }}" minlength="5" maxlength="50" required>
                        @error('email')
                            <small class="text-danger">{{ $message }}</small>
                        @enderror
                    </div>
                
                    <div class="form-group mt-4">
                        <label for="contact_mobile">Your Mobile No:</label>
                        <input type="text" class="form-control mobileNoInput" id="contact_mobile" name="mobile" value="{{ old('mobile') }}" minlength="10" maxlength="10" required>
                        @error('mobile')
                            <small class="text-danger">{{ $message }}</small>
                        @enderror
                    </div>
                
                    <div class="form-group mt-4">
                        <label for="contact_message">Your Message:</label>
                        <textarea class="form-control messageInput" id="contact_message" name="message" cols="10" minlength="10" maxlength="255" required>{{ old('message') }}</textarea>
                        @error('message')
                            <small class="text-danger">{{ $message }}</small>
                        @enderror
                    </div>
                
                    <div class="form-group mt-4 d-flex align-items-center justify-content-end">
                        <button type="submit" class="submit-button">Submit</button>
                    </div>
                </form>
                
            </div>
        </div>

    </div>
</div>

@endsection