@extends('layouts.app')
@section('title',$Title)
@section('content')

<main>
    <div class="container">
        <div class="row">
            <div class="col-12">
                <nav aria-label="breadcrumb">
                    <ul class="breadcrumb list-unstyled d-flex flex-row gap-2 align-items-center m-0 ps-0 py-4">
                        <li class="breadcrumb-item"><a href="{{url('/')}}" class="text-600 fs-7 hover-dark">Home</a></li>
                        <li class="breadcrumb-item">
                            <span class="icon-shape icon-xxs">
                                <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 15 15" fill="none">
                                    <path d="M6.125 4.5625L9.5625 7.84375L6.125 11.125" stroke="#626568" stroke-width="0.9375" stroke-linecap="round" stroke-linejoin="round" />
                                </svg>
                            </span>
                        </li>
                        <li class="breadcrumb-item active text-dark fs-7" aria-current="page">{{$Title}}</li>
                    </ul>
                </nav>
            </div>
        </div>
        <div class="row py-5">
            <div class="col-md-10 mx-auto">
                <div class="row">
                    <div class="col-md-4">
                        <h5 class="mb-2">Address</h5>
                        <p class="m-0">{{$settingSingle->top_address ?? "null"}}</p>
                    </div>
                    <div class="col-md-4">
                        <h5 class="mb-2">Contact</h5>
                        <p class="m-0">{{$settingSingle->top_mobile ?? "null"}}</p>
                    </div>
                    <div class="col-md-4">
                        <h5 class="mb-2">Email</h5>
                        <p class="m-0">{{$settingSingle->top_email ?? "null"}}</p>
                    </div>
                </div>

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

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

                <form action="{{ route('contact.us') }}" method="POST">
                    @csrf
                    <div class="row mb-4">
                        <div class="col-12">
                            <h4 class="mt-5 mb-2 pb-4 pt-3">Get in touch</h4>
                            <div class="row wow img-custom-anim-left g-3 border-top">

                                {{-- Name --}}
                                <div class="col-md-6 col-lg-4">
                                    <div class="input-group d-flex align-items-center">
                                        <div class="icon-input ps-3">
                                            <svg class="dark-mode-invert" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none">
                                                <path d="M12 11.25C13.79 11.25 15.25 9.79 15.25 8C15.25 6.21 13.79 4.75 12 4.75C10.21 4.75 8.75 6.21 8.75 8C8.75 9.79 10.21 11.25 12 11.25Z" stroke="black" stroke-width="1.5" />
                                                <path d="M6.85 19.25H17.15C18.29 19.25 19.17 18.27 18.64 17.26C17.86 15.77 16.07 14 12 14C7.93 14 6.14 15.77 5.36 17.26C4.83 18.27 5.7 19.25 6.85 19.25Z" stroke="black" stroke-width="1.5" />
                                            </svg>
                                        </div>
                                        <input type="text" class="form-control ms-0" name="name" placeholder="Your name *" value="{{ old('name') }}" />
                                    </div>
                                    @error('name')
                                    <div class="text-danger small mt-1">{{ $message }}</div>
                                    @enderror
                                </div>

                                {{-- Email --}}
                                <div class="col-md-6 col-lg-4">
                                    <div class="input-group d-flex align-items-center">
                                        <div class="icon-input ps-3">
                                            <svg class="dark-mode-invert" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none">
                                                <path d="M4.75 7.75C4.75 6.65 5.65 5.75 6.75 5.75H17.25C18.35 5.75 19.25 6.65 19.25 7.75V16.25C19.25 17.35 18.35 18.25 17.25 18.25H6.75C5.65 18.25 4.75 17.35 4.75 16.25V7.75Z" stroke="black" stroke-width="1.5" />
                                                <path d="M5.5 6.5L12 12.25L18.5 6.5" stroke="black" stroke-width="1.5" />
                                            </svg>
                                        </div>
                                        <input type="email" class="form-control ms-0" name="email" placeholder="info@webmail.com" value="{{ old('email') }}" />
                                    </div>
                                    @error('email')
                                    <div class="text-danger small mt-1">{{ $message }}</div>
                                    @enderror
                                </div>

                                {{-- Mobile --}}
                                <div class="col-md-6 col-lg-4">
                                    <div class="input-group d-flex align-items-center">
                                        <div class="icon-input ps-3">
                                            <svg class="dark-mode-invert" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none">
                                                <path d="M6 2H18C19.1 2 20 2.9 20 4V20C20 21.1 19.1 22 18 22H6C4.9 22 4 21.1 4 20V4C4 2.9 4.9 2 6 2Z" stroke="black" stroke-width="1.5" />
                                                <path d="M12 18H12.01" stroke="black" stroke-width="1.5" stroke-linecap="round" />
                                            </svg>
                                        </div>
                                        <input type="text" class="form-control ms-0" name="mobile" placeholder="Mobile *" value="{{ old('mobile') }}" />
                                    </div>
                                    @error('mobile')
                                    <div class="text-danger small mt-1">{{ $message }}</div>
                                    @enderror
                                </div>

                                {{-- Message --}}
                                <div class="col-12">
                                    <div class="input-group d-flex">
                                        <div class="icon-input pt-2 ps-3 border border-end-0 rounded-1 rounded-end-0">
                                            <i class="bi bi-chat-dots"></i>
                                        </div>
                                        <textarea class="form-control" name="message" placeholder="Your message....">{{ old('message') }}</textarea>
                                    </div>
                                </div>

                                <div class="col-12">
                                    <button type="submit" class="btn btn-dark rounded-8 mt-3">Send Message</button>
                                </div>

                            </div>
                        </div>
                    </div>
                </form>

            </div>
        </div>
    </div>
    <!--Home 1 Section 11-->

    <div class="bg-50 pb-70"></div>
</main>

<script>
    setTimeout(() => {
        document.querySelectorAll('.alert-success, .alert-danger').forEach(el => {
            el.style.transition = 'opacity 0.6s ease';
            el.style.opacity = '0';
            setTimeout(() => el.remove(), 600);
        });
    }, 4000);
</script>


@endsection