@extends('web.layouts.layout')
@section('content')


    <style>
        .contact-pg .contact-info-card {
            background-color: #f8f9fa;
            padding: 30px;
            border-radius: 12px;
            height: 100%;
        }
        .contact-pg .contact-info-card .icon {
            width: 50px;
            height: 50px;
            background-color: #0b50bd;
            color: #fff;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            font-size: 20px;
            margin-bottom: 15px;
        }
        .contact-pg .contact-info-card h4 {
            font-size: 18px;
            font-weight: bold;
            margin-bottom: 10px;
        }
        .contact-pg .contact-info-card p, .contact-pg .contact-info-card a {
            color: #666;
            text-decoration: none;
            font-size: 15px;
            display: block;
            margin-bottom: 5px;
        }
        .contact-pg .form-card {
            background-color: #fff;
            padding: 40px;
            border-radius: 12px;
            border: 1px solid #eee;
        }
        .contact-pg .form-card .form-control {
            padding: 12px 20px;
            border-radius: 8px;
            border: 1px solid #ddd;
            margin-bottom: 5px;
            font-size: 15px;
            background: #f9f9f9;
        }
        .contact-pg .form-card .form-control:focus {
            border-color: #0b50bd;
            box-shadow: 0 0 0 0.25rem rgba(11, 80, 189, 0.25);
            background: #fff;
        }
        .contact-pg .form-card .submit-btn {
            background-color: #0b50bd;
            color: #fff;
            padding: 12px 30px;
            border-radius: 8px;
            border: none;
            font-weight: bold;
            font-size: 16px;
            transition: all 0.3s;
            width: 100%;
        }
        .contact-pg .form-card .submit-btn:hover {
            background-color: #083c8f;
            color: #fff;
        }
        .contact-pg .social-links a {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 40px;
            height: 40px;
            background-color: #e9ecef;
            color: #333;
            border-radius: 50%;
            margin-inline-end: 10px;
            transition: all 0.3s;
        }
        .contact-pg .social-links a:hover {
            background-color: #0b50bd;
            color: #fff;
        }
        .contact-pg .alert {
            display: none;
            margin-bottom: 20px;
            border-radius: 8px;
        }
        .contact-pg .invalid-feedback {
            margin-bottom: 15px;
        }

    </style>


    <main>


        <!-- ---------- Start breadcrumb ----------- -->
        @include('web.pages.components.header.header')


        <!-- ---------- contact page ----------- -->
        <section class="contact-pg pb-5 pt-5">
            <div class="container">
                <div class="row align-items-stretch">
                    <div class="col-lg-4 mb-4 mb-lg-0">
                        <div class="contact-info-card text-center text-md-start text-lg-start">
                            <h3 class="mb-4 fw-bold">{{__('web.contact_info')}}</h3>
                            
                            <div class="d-flex align-items-start mb-4 text-start">
                                <div class="icon me-3 flex-shrink-0">
                                    <i class="fal fa-map-marker-alt"></i>
                                </div>
                                <div class="flex-grow-1">
                                    <h4>{{__('web.address')}}</h4>
                                    <p>{{$settings['site_address_'.getCurrentLocale()] ?? ''}}</p>
                                </div>
                            </div>

                            <div class="d-flex align-items-start mb-4 text-start">
                                <div class="icon me-3 flex-shrink-0">
                                    <i class="fal fa-phone"></i>
                                </div>
                                <div class="flex-grow-1">
                                    <h4>{{__('web.phone')}}</h4>
                                    <a href="tel:+966126338540" dir="ltr" class="text-start d-inline-block">{{$settings['site_phone'] ?? ''}}</a>
                                </div>
                            </div>

                            <div class="d-flex align-items-start mb-4 text-start">
                                <div class="icon me-3 flex-shrink-0">
                                    <i class="fal fa-envelope"></i>
                                </div>
                                <div class="flex-grow-1">
                                    <h4>{{__('web.email')}}</h4>
                                    <a href="mailto:care@alnaghi.com"> {{$settings['site_email'] ?? ''}} </a>
                                </div>
                            </div>

                            <hr class="my-4">
                            
                            <h4 class="mb-3 text-start">{{__('web.follow_us')}}</h4>
                            <div class="social-links d-flex justify-content-center justify-content-md-start">
                                @if(isset($settings['facebook']) && $settings['facebook'])
                                    <a href="{{$settings['facebook']}}" target="_blank"><i class="fab fa-facebook-f"></i></a>
                                @endif
                                @if(isset($settings['x']) && $settings['x'])
                                    <a href="{{$settings['x']}}" target="_blank"><i class="fab fa-x-twitter"></i></a>
                                @endif
                                @if(isset($settings['linkedin']) && $settings['linkedin'])
                                    <a href="{{$settings['linkedin']}}" target="_blank"><i class="fab fa-linkedin-in"></i></a>
                                @endif
                                @if(isset($settings['instagram']) && $settings['instagram'])
                                    <a href="{{$settings['instagram']}}" target="_blank"><i class="fab fa-instagram"></i></a>
                                @endif
                            </div>
                        </div>
                    </div>
                    
                    <div class="col-lg-8">
                        <div class="form-card">
                            <h3 class="mb-2 fw-bold">{{__('web.send_us_message')}}</h3>
                            <p class="text-muted mb-4">{{__('web.send_us_message_desc')}}</p>
                            


                            <form action="{{route('web.contactus.store')}}" method="POST" onsubmit="formAction(this)" id="contact-form" novalidate>
                                @CSRF
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-group mb-3">
                                            <label class="mb-2 fw-bold form-label">{{__('web.fullname')}} <span class="text-danger">*</span></label>
                                            <input type="text" class="form-control" id="cf-name" name="name" placeholder="{{__('web.enter_fullname')}}" >
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group mb-3">
                                            <label class="mb-2 fw-bold form-label"> {{__('web.email')}} <span class="text-danger">*</span></label>
                                            <input type="email" class="form-control" id="cf-email" name="email" placeholder="{{__('web.enter_email')}}" >
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group mb-3">
                                            <label class="mb-2 fw-bold form-label">{{__('web.phone')}} <span class="text-muted">({{__('web.optional')}})</span></label>
                                            <input type="tel" class="form-control" id="cf-phone" name="phone" placeholder="{{__('web.enter_phone')}}">
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group mb-3">
                                            <label class="mb-2 fw-bold form-label">{{__('web.subject')}} <span class="text-muted">({{__('web.optional')}})</span></label>
                                            <input type="text" class="form-control" id="cf-subject" name="subject" placeholder="{{__('web.enter_subject')}} ">
                                        </div>
                                    </div>
                                    <div class="col-12">
                                        <div class="form-group mb-3">
                                            <label class="mb-2 fw-bold form-label">{{__('web.message')}} <span class="text-danger">*</span></label>
                                            <textarea class="form-control" id="cf-message" rows="5" name="message" placeholder="{{__('web.write_your_message')}}" ></textarea>
                                        </div>
                                    </div>
                                    <div class="col-12 mt-2">
                                        <button type="submit" class="submit-btn" id="cf-submit">
                                            {{__('web.send_message')}} <i class="fal fa-paper-plane ms-2"></i>
                                        </button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </section>




        
    </main>
@stop