@section('meta')
<title>{{ __('message.contact us') }}</title>
    <meta property="og:title" content="{{__('message.contact us')}}" />
    <meta property="og:description" content="{{__('message.contact us desc')}}" />
    <meta name="twitter:title" content="{{__('message.contact us')}}" />
    <meta name="twitter:description" content="{{__('message.contact us desc')}}" />
@endsection

@push('header')
    <x-header />
@endpush

<div>
    <section class="bg-contact">
        <div class="text-center d-flex justify-content-center flex-column align-items-center">
            <div class="jumbotron">
                <h1 class="display-5 text-be font-title p-1 text-uppercase">{{__('message.contact us')}}</h1>
                <p class="text-center">{{__('message.contact us desc')}}</p>
            </div>
        </div>
    </section>

    <section class="contact-via">
        <div class="container">
            <div class="row">
                <div class="col-md-6 col-lg-4 my-2 my-lg-0">
                    <div class="card h-100 bg-switch shadow">
                        <div class="card-body">
                            <div class="d-flex align-items-center">
                                <i class='bx bxl-whatsapp text-success display-1'></i>
                                <span class="fw-bold">Whatsapp</span>
                            </div>
                            <p>{{__('message.whatapp desc')}}</p>
                            <a href="#" class="text-decoration-none fw-bold">{{__('message.let chat')}} <i class='bx bx-right-arrow-alt' ></i></a>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 col-lg-4 my-2 my-lg-0">
                    <div class="card h-100 bg-switch shadow">
                        <div class="card-body">
                            <div class="d-flex align-items-center">
                                <i class='bx bxl-messenger display-1'></i>
                                <span class="fw-bold">Messanger</span>
                            </div>
                            <p>{{__('message.messenger desc')}}</p>
                            <a href="https://m.me/PhkayMediaOfficials" target="_blank" class="text-decoration-none fw-bold">{{__('message.let chat')}} <i class='bx bx-right-arrow-alt' ></i></a>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 col-lg-4 my-2 my-lg-0">
                    <div class="card h-100 bg-switch shadow">
                        <div class="card-body">
                            <div class="d-flex align-items-center">
                                <i class='bx bxl-telegram text-primary display-1'></i>
                                <span class="fw-bold">Telegram</span>
                            </div>
                            <p>{{__('message.telegram desc')}}</p>
                            <a href="https://t.me/phkaymedia" target="_blank" class="text-decoration-none fw-bold">{{__('message.let chat')}} <i class='bx bx-right-arrow-alt' ></i></a>
                        </div>
                    </div>
                </div>
                <div class="col-12">
                    <br>
                </div>
                <div class="col-md-6 col-lg-4 my-2 my-lg-0">
                    <div class="card shadow h-100">
                        <div class="card-body d-flex">
                            <div class="align-self-center">
                                <i class='bx bx-phone-incoming h1 text-warning'></i>
                            </div>
                            <div class="ms-3">
                                <h5 class="fw-bold text-warning text-capitalize">{{__('message.contact us')}}</h5>
                                <h6>+855 (66) 29 99 69 ({{__('message.khmer')}})</h6>
                                <h6>+855 (78) 29 99 62 ({{__('message.khmer')}})</h6>
                                <h6>+66 (98) 30 555 97 ({{__('message.thai')}})</h6>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 col-lg-4 my-2 my-lg-0">
                    <div class="card shadow h-100">
                        <div class="card-body d-flex">
                            <div class="align-self-center">
                                <i class='bx bx-mail-send h1 text-warning'></i>
                            </div>
                            <div class="ms-3">
                                <h5 class="fw-bold text-warning">{{__('message.mail us')}}</h5>
                                <h4>{{__('message.customer service')}}</h4>
                                <a href="mailto:phkaymedia@gmail.com" class="h5 text-decoration-none text-bg">phkaymedia@gmail.com</a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 col-lg-4 my-2 my-lg-0">
                    <a href="https://bit.ly/3FENLBj" target="_blank" class="card shadow h-100 text-decoration-none text-bg">
                        <div class="card-body d-flex">
                            <div class="align-self-center">
                                <i class='bx bx-current-location h1 text-warning'></i>
                            </div>
                            <div class="ms-3">
                                <h5 class="fw-bold text-warning">{{__('message.location')}}</h5>
                                {{__('message.address')}}
                            </div>
                        </div>
                    </a>
                </div>
            </div>
        </div>
    </section>

    <section class="py-50 position-relative">
        <img src="{{ asset('img/call-center2.jpg') }}" alt="call center" class="position-absolute call-center d-none d-lg-block">
        <div class="container">
            <div class="row">
                <div class="col-lg-7 px-1">
                    <div class="card shadow bg-switch">
                        <h5 class="card-header py-4 text-capitalize text-center text-warning fw-bolder border-warning">{{__('message.get touch us')}}</h5>
                        <div class="card-body">
                            <form wire:submit.prevent="send" action="#" class="needs-validation">
                                <div class="row mb-3">
                                    <label for="name" class="col-lg-2 col-form-label">{{__('message.name')}}</label>
                                    <div class="col-lg-10">
                                        <input wire:model="name" type="text" class="form-control @error('name') is-invalid @enderror" id="name" placeholder="{{__('message.pname')}}">
                                        @error('name')
                                        <div class="invalid-feedback">
                                            {{ $message }}
                                        </div>
                                        @enderror
                                    </div>
                                </div>
                                <div class="row mb-3">
                                    <label for="email" class="col-lg-2 col-form-label">{{__('message.email')}}</label>
                                    <div class="col-lg-10">
                                        <input wire:model="email" type="email" class="form-control @error('email') is-invalid @enderror" id="email" placeholder="{{__('message.pemail')}}">
                                        @error('email')
                                        <div class="invalid-feedback">
                                            {{ $message }}
                                        </div>
                                        @enderror
                                    </div>
                                </div>
                                <div class="row mb-3">
                                    <label for="subject" class="col-lg-2 col-form-label">{{__('message.subject')}}</label>
                                    <div class="col-lg-10">
                                        <input wire:model="subject" type="text" class="form-control @error('subject') is-invalid @enderror" id="subject" placeholder="{{__('message.psubject')}}">
                                        @error('subject')
                                        <div class="invalid-feedback">
                                            {{ $message }}
                                        </div>
                                        @enderror
                                    </div>
                                </div>
                                <div class="row mb-3">
                                    <label for="description" class="col-lg-2 col-form-label">{{__('message.description')}}</label>
                                    <div class="col-lg-10">
                                        <textarea wire:model="description" name="description" id="description" cols="30" rows="5" class="form-control @error('description') is-invalid @enderror" placeholder="{{__('message.pdescription')}}"></textarea>
                                        @error('description')
                                        <div class="invalid-feedback">
                                            {{ $message }}
                                        </div>
                                        @enderror
                                    </div>
                                </div>
                                <div class="row mb-3">
                                    <div class="col-lg-8 offset-lg-2">
                                        <button type="submit" class="btn btn-success rounded-0 d-flex align-items-center text-white"><i class='bx bx-check-shield'></i> {{__('message.send')}}</button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    {{-- <x-phkay-maps /> --}}
</div>