@extends('Client.layouts.layout')
@section('title', __('trans.contact_us')  )
@section('content')

    <style>
        .form-control-up {
            padding: 6px;
            border: none;
            width: 100%;
            outline: none;
            font-size: 16px;
            border-radius: 5px
        }

        .input-label {
            display: block;
            position: relative;
            margin-top: 2%;
            margin-left: 2%;
            border-bottom: 1px solid rgb(42, 42, 42);
            margin: 35px;
        }

        .placeholder-text {
            position: absolute;
            @if(lang('en'))
            left: 12px;
            @else
            right: 12px;
            @endif
            top: 10px;
            padding: 0px 4px;
            color: rgb(42, 42, 42);
            transform-origin: top left;
            transition: all 120ms ease-in;
        }

        .form-control-up:focus+.placeholder-text,
        .form-control-up:not(:placeholder-shown)+.placeholder-text {
            top: -20px;
            transform: scale(1);
            font-weight: bold;
            background-color: #fff;
        }
    </style>


    <div class="container" style="min-height: 200px;">
        <div class="row py-5">
            <div class="col-12">
                <ul class="breadcrumb wizard">
                  <li class="completed"><a href="{{ route('client.home') }}">@lang('trans.home')</a></li>
                  <li class="not-completed"><a href="javascript:void(0);">{{ __('trans.contact_us')  }}</a></li>
                </ul>
            </div>
        </div>

    
        <div class="container">
            <div class="row">
                @foreach ($Branches as $Branch)
                    <div class="col-12 col-md-6">
                        <div class="my-4">
                            <div class="row">
                                <iframe height="300px" src="https://www.google.com/maps/embed?pb=!1m17!1m12!1m3!1d231.96639369753444!2d39.256897369934904!3d21.52877149081382!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m2!1m1!2zMjHCsDMxJzQzLjciTiAzOcKwMTUnMjUuNiJF!5e0!3m2!1sen!2sbh!4v1724836113087!5m2!1sen!2sbh"></iframe>
                            </div>
                        </div>
                    </div>
                    <div class="col-12 col-md-6 d-flex align-items-center">
                        <div class="row my-4">
                            <div class="col-12">
                                <h5 class="more_bold">
                                    <img src="{{ asset($Branch->Country->image ?? setting('logo')) }}" class="img-fluid mx-2" style="max-height: 20px;" alt="{{ $Branch->title() }}">
                                    {{ $Branch->title() }}
                                </h5>
                                <div class="d-flex align-items-center">
                                    <i class="fa-solid fa-phone-flip main_color h6 mx-2"></i>
                                    <span class="tiny_font point my-0" onclick="window.location.href = 'tel:{{ $Branch->phone }}';">{{ $Branch->phone }}</span>
                                </div>
                                @if($Branch->mobile)
                                <div class="d-flex align-items-center">
                                    <i class="fa-solid fa-phone-flip main_color h6 mx-2"></i>
                                    <span class="tiny_font point my-0" onclick="window.location.href = 'tel:{{ $Branch->mobile }}';">{{ $Branch->mobile }}</span>
                                </div>
                                @endif
                                <div class="d-flex align-items-center">
                                    <i class="fa-brands fa-whatsapp main_color mx-2"></i>
                                    <span class="tiny_font point my-0" onclick="window.open('https://wa.me/{{ setting('whatsapp') }}')">{{ str_replace("+973", "", setting('whatsapp')) }}</span>
                                </div>
                                @if(basename(parse_url(setting('instagram'), PHP_URL_PATH)))
                                <div class="d-flex align-items-center">
                                    <i class="fa-brands fa-instagram main_color mx-2"></i>
                                    <span class="tiny_font point my-0" onclick="window.open('{{ setting('instagram') }}');">{{ basename(parse_url(setting('instagram'), PHP_URL_PATH)) }}</span>
                                </div>
                                @endif
                                @if($Branch->email)
                                <div class="d-flex align-items-center">
                                    <i class="fa-solid fa-envelope main_color mx-2"></i>
                                    <span class="tiny_font point my-0" onclick="window.location.href = 'mailto:{{ $Branch->email }}';">{{ $Branch->email }}</span>
                                </div>
                                @endif
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
        

        <div class="row py-5">
            <div class="col-md-8 mx-auto">
                <div class="m-2 wrapper">
                    <p style="margin: 35px;">@lang('trans.ContactMessage')</p>

                    <form method="POST" action="{{ route('client.contact') }}">
                        @csrf

                        <div class="input-label">
                            <input required type="text" class="form-control-up" name="name" autocomplete="off" placeholder=" " >
                            <span class="placeholder-text" for="">@lang('trans.name')</span>
                        </div>
                        <div class="input-label">
                            <input required type="text" class="form-control-up" name="email" autocomplete="off" placeholder=" " >
                            <span class="placeholder-text" for="">@lang('trans.email')</span>
                        </div>
                        <div class="input-label">
                            <input required type="text" class="form-control-up" name="phone" autocomplete="off" placeholder=" " >
                            <span class="placeholder-text" for="">@lang('trans.phone')</span>
                        </div>
                        <div class="input-label">
                            <input required type="text" class="form-control-up" name="subject" autocomplete="off" placeholder=" " >
                            <span class="placeholder-text" for="">@lang('trans.subject')</span>
                        </div>
                        <div class="input-label">
                            <input required type="text" class="form-control-up" name="message" autocomplete="off" placeholder=" " >
                            <span class="placeholder-text" for="">@lang('trans.message')</span>
                        </div>
                        <div class="my-3 p-2 mx-1 text-center">
                            <button type="submit" class="btn main_bt px-5">@lang('trans.Send Message')</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

    </div>
@endsection