@extends('layouts.app')
@section('content')

<main class="main" style="background-color: #f7f1e8;">
    <nav aria-label="breadcrumb" class="breadcrumb-nav">
        <div class="container">
            <ol class="breadcrumb">
                <li class="breadcrumb-item">
                    <a href="{{ url('/') }}"><i class="icon-home"></i></a>
                </li>
                <li class="breadcrumb-item active" aria-current="page">
                    Contact Us
                </li>
            </ol>
        </div>
    </nav>


    <div class="container contact-us-container">
        
        <div class="contact-info">
            <div class="row">
                <div class="col-12">
                    <h2 class="ls-n-25 m-b-1">
                        {{ $contactPage->title }}
                    </h2>

                    <p>
                        {{ $contactPage->description }}
                    </p>
                </div>

                <div class="col-sm-6 col-lg-3">
                    <div class="feature-box text-center">
                        <i class="sicon-location-pin"></i>
                        <div class="feature-box-content">
                            <h3>Address</h3>
                            <h5>{{ $contactPage->address }}</h5>
                        </div>
                    </div>
                </div>

                <div class="col-sm-6 col-lg-3">
                    <div class="feature-box text-center">
                        <i class="fa fa-mobile-alt"></i>
                        <div class="feature-box-content">
                            <h3>Phone Number</h3>
                            <h5>{{ $contactPage->phone }}</h5>
                        </div>
                    </div>
                </div>

                <div class="col-sm-6 col-lg-3">
                    <div class="feature-box text-center">
                        <i class="far fa-envelope"></i>
                        <div class="feature-box-content">
                            <h3>E-mail Address</h3>
                            <h5>
                                <a href="mailto:{{ $contactPage->email }}">
                                    {{ $contactPage->email }}
                                </a>
                            </h5>
                        </div>
                    </div>
                </div>

                <div class="col-sm-6 col-lg-3">
                    <div class="feature-box text-center">
                        <i class="far fa-calendar-alt"></i>
                        <div class="feature-box-content">
                            <h3>Working Days/Hours</h3>
                            <h5>{{ $contactPage->working_days }}</h5>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-lg-12">
                <h2 class="mt-6 mb-2">Send Us a Message</h2>

                @if(session('success'))
                    <div class="alert alert-success">
                        {{ session('success') }}
                    </div>
                @endif

                @if($errors->any())
                    <div class="alert alert-danger">
                        <ul class="mb-0">
                            @foreach($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                @endif

                <form class="mb-0" action="{{ route('contact.submit') }}" method="POST">
                    @csrf

                    <div class="form-group">
                        <label class="mb-1" for="contact-name">
                            Your Name <span class="required">*</span>
                        </label>
                        <input type="text" class="form-control" id="contact-name" name="name" value="{{ old('name') }}" required>
                    </div>

                    <div class="form-group">
                        <label class="mb-1" for="contact-email">
                            Your E-mail <span class="required">*</span>
                        </label>
                        <input type="email" class="form-control" id="contact-email" name="email" value="{{ old('email') }}" required>
                    </div>

                    <div class="form-group">
                        <label class="mb-1" for="contact-message">
                            Your Message <span class="required">*</span>
                        </label>
                        <textarea cols="30" rows="5" id="contact-message" class="form-control" name="message" required>{{ old('message') }}</textarea>
                    </div>

                    <div class="form-footer mb-0">
                        <button type="submit" class="btn btn-dark font-weight-normal">
                            Send Message
                        </button>
                    </div>
                </form>
            </div>

        </div>
    </div>

    <div class="mb-8"></div>
    
    <div id="map">
        {!! $contactPage->map_embed !!}
    </div>
</main>
<style>
    /* ============================
   Contact Info Section
============================ */

/* Form container shadow */
form {
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.12);
    padding: 25px;
    border-radius: 10px;
    background: #fff;
}

/* Input, textarea shadow */
.form-control {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    border: 1px solid #ddd;
}

/* Focus effect */
.form-control:focus {
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
    border-color: #333;
}

.contact-info{
    margin:40px 0 60px;
}

.contact-info .row>.col-12{
    text-align:center;
    margin-bottom:45px;
}

.contact-info h2{
    font-size:42px;
    font-weight:700;
    color:#2b2b2b;
    margin-bottom:20px;
    position:relative;
}

.contact-info h2:after{
    content:"";
    width:90px;
    height:3px;
    background:#8B1E3F;
    display:block;
    margin:18px auto 0;
    border-radius:30px;
}

.contact-info p{
    max-width:900px;
    margin:auto;
    color:#666;
    font-size:16px;
    line-height:1.9;
}

/* ============================
   Feature Cards
============================ */

.feature-box{
    background:#fff;
    border-radius:18px;
    padding:40px 25px;
    box-shadow:0 12px 35px rgba(0,0,0,.08);
    transition:.35s ease;
    position:relative;
    overflow:hidden;
    height:100%;
    border:1px solid #f2f2f2;
}

.feature-box:before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:4px;
    background:linear-gradient(90deg,#8B1E3F,#D4AF37);
}

.feature-box:hover{
    transform:translateY(-8px);
    box-shadow:0 20px 45px rgba(0,0,0,.15);
}

.feature-box i{
    width:80px;
    height:80px;
    line-height:80px;
    text-align:center;
    font-size:34px;
    color:#fff;
    background: linear-gradient(135deg, #FFC107, #FBC02D);
    border-radius:50%;
    margin-bottom:25px;
    transition:.35s;
}

.feature-box:hover i{
    transform:rotate(12deg) scale(1.08);
}

.feature-box-content h3{
    font-size:20px;
    font-weight:700;
    color:#222;
    margin-bottom:12px;
}

.feature-box-content h5{
    font-size:15px;
    line-height:1.8;
    color:#666;
    font-weight:500;
    margin:0;
    word-break:break-word;
}

.feature-box-content a{
    color:#8B1E3F;
    text-decoration:none;
    transition:.3s;
}

.feature-box-content a:hover{
    color:#D4AF37;
    text-decoration:none;
}

/* ============================
   Responsive
============================ */

@media(max-width:991px){

.contact-info h2{
    font-size:34px;
}

.feature-box{
    margin-bottom:25px;
}

}

@media(max-width:767px){

.contact-info h2{
    font-size:28px;
}

.contact-info p{
    font-size:15px;
}

.feature-box{
    padding:30px 20px;
}

.feature-box i{
    width:70px;
    height:70px;
    line-height:70px;
    font-size:28px;
}

}
</style>
@endsection