@extends("layout.app")
@section("styles")
    <style>
        .image-icon-block {
            width: 60px;
            margin: 0px;
            padding: 0;
            height: 60px;
            margin-bottom: 0px;
        }

        .icon-about-us {
            color: #4a90e2;
            font-size: medium
        }

        .nav-tabs {
            border-bottom: none;
        }

        .nav-tabs .nav-link {
            border: 2px solid #dfe1ea;

        }

        .nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
            border: 2px solid #141414 !important
        }
    </style>
@endsection

@section("content")
    <section class="text-center mt-20">
        <div class="container">
            <div class="row">
                <div class="col-md-8 col-lg-6">
                    <h1>إتصل بنا</h1>
                </div>
            </div>
            <!--end of row-->
        </div>
        <!--end of container-->
    </section>

    <section>
        <div class="container">
            <div class="row justify-content-between text-right">

                <div class="col-md-5 col-12 text-right">
                    @if(session()->has("message"))
                        <div class="alert alert-success">
                            <h4 style="margin-bottom: 0px"> {{session()->get("message")}}</h4>
                        </div>
                    @else
                        @if($errors->any())
                            <div class="alert alert-danger">
                                <ul>
                                    @foreach ($errors->all() as $error)
                                        <li>{{ $error }}</li>
                                    @endforeach
                                </ul>
                            </div>
                        @endif
                        <form method="post" class="row" action="{{ route('contact-send-mail') }}"
                              data-success="شكرا، تم ارسال طلبك بنجاح" data-error="الرجاء إدخال جميع البيانات">
                            {{ csrf_field() }}
                            <div class="col-md-6 col-12">
                                <label>الإسم:</label>
                                <input type="text" name="Name" class="validate-required"/>
                            </div>
                            <div class="col-md-6 col-12">
                                <label>البريد الإلكتروني:</label>
                                <input type="email" name="email" class="validate-required validate-email"/>
                            </div>
                            <div class="col-md-6 col-6">
                                <label>الهاتف</label>
                                <input type="text" name="mobile" class="validate-required"/>
                            </div>
                            <div class="col-md-6 col-6">
                                <label>موضوع الاستفسار</label>
                                <select name="to" id="to">
                                    <option value="general">عام</option>
                                    <option value="support">صيانه</option>
                                    <option value="prices">الاسعار</option>
                                </select>
                            </div>
                            <div id="serial" style="display: none">
                                <div class="col-md-12">
                                    <label>السيريال</label>
                                    <input type="text" name="serial"/>
                                    <span>
                                            للعثور على الرقم التسلسلي <a href="https://support.apple.com/ar-ae/HT201581"
                                                                         target="_blank">إضغط هنا </a>
                                    </span>
                                </div>
                            </div>
                            <div class="col-md-12 col-12">
                                <label>الرسالة</label>
                                <textarea rows="4" name="Message" class="validate-required"></textarea>
                            </div>
                            <div class="col-md-12 col-12 col-xs-12">
                                {!! NoCaptcha::display(['data-theme' => 'light']) !!}
                            </div>
                            <div class="col-md-5 col-lg-4 col-6 col-xs-12">
                                <button type="submit" class="btn btn--primary type--uppercase">ارسال</button>
                            </div>
                        </form>
                    @endif
                </div>
                <div class="col-md-7 col-12 text-right">
                    <nav>
                        <div class="nav nav-tabs" id="nav-tab" role="tablist">
                            @foreach(\App\facades\IHouseFacade::getWarehouses() as $key => $warehouse)
                                @if($warehouse->is_online!==1)
                                    <button style="color: #4a90e2"
                                            class="nav-link {{$loop->iteration ==1?'active ':''}}"
                                            id="nav-{{$warehouse->code}}-tab" data-toggle="tab"
                                            data-target="#nav-{{$warehouse->code}}"
                                            type="button" role="tab" aria-controls="nav-{{$warehouse->code}}"
                                            aria-selected="true">{!!' <i class="fa fa-map-marker-alt"> </i> '. $warehouse->title .' - '. $warehouse->short_address !!}</button>
                                @endif

                            @endforeach
                        </div>
                    </nav>
                    <div class="tab-content" id="nav-tabContent">
                        @foreach(\App\facades\IHouseFacade::getWarehouses() as $key => $warehouse)
                            <div class="tab-pane fade show {{$loop->iteration ==1?'active':''}}"
                                 id="nav-{{$warehouse->code}}" role="tabpanel"
                                 aria-labelledby="nav-{{$warehouse->code}}-tab">
                                <br>
                                @if(!$warehouse->is_online&&!empty($warehouse->imageWarehouses))
                                    <section class="container-fluid p-0 m-0">
                                        <div id="demo" class="carousel slide" data-ride="carousel">
                                            <div class="carousel-inner">
                                                @foreach($warehouse->imageWarehouses as $image)

                                                    <div class="carousel-item {{$loop->iteration==1?'active':""}}">
                                                        <a href="{{ url('https://cdn.ihouse.ps/' . $image->file) }}" data-lightbox="gallery">
                                                        <img
                                                            src="{{url('https://cdn.ihouse.ps/' . $image->file)}}"
                                                            alt="{{$warehouse->title}}" width="1100" height="300">
                                                        </a>
                                                    </div>
                                                @endforeach

                                            </div>
                                        </div>

                                    </section>
                                @endif


                                <div class="row mt-3">
                                    <div class="col-md-6">
                                        {!!$warehouse->working_hours!!}
                                        @if(!empty($warehouse->map))
                                            <a class="btn btn-default no-underline"
                                               href="{{$warehouse->map}}"
                                               target="_blank"><i class="fa fa-map-marked-alt"></i> اظهار
                                                على
                                                الخارطة </a>
                                        @endif
                                    </div>
                                    <div class="col-md-6">
                                        {{--                                        <h4 class="mb-2">{{$warehouse->title}}</h4>--}}
                                        {!!  $warehouse->address !!}
                                        <label><strong>الهاتف:</strong> <span dir="ltr"><a
                                                    href="tel:{{$warehouse->phone}}">{{$warehouse->phone}}</a></span></label><br>
                                        <label><strong>الرقم المجاني:</strong> <span dir="ltr"><a
                                                    href="tel:{{\App\Models\Settings::where("key",'tollfree')->first()->value}}">{{\App\Models\Settings::where("key",'tollfree')->first()->value}}</a></span></label><br>
                                        <label><strong>الفاكس:</strong> <span
                                                dir="ltr">{{\App\Models\Settings::where("key",'fax')->first()->value}}</span></label><br>
                                        <label><strong>رقم الواتساب:</strong> <span dir="ltr"><a target="_blank"
                                                                                                 dir="ltr"
                                                                                                 href="https://wa.me/{{\App\Models\Settings::where("key",'whatsapp')->first()->value}}">{{\App\Models\Settings::where("key",'whatsapp')->first()->value}}</a></span></label>

                                    </div>

                                </div>
                            </div>

                        @endforeach
                    </div>
                </div>
            </div>
            <!--end of row-->
        </div>
        <!--end of container-->
    </section>
@endsection
@section("scripts")
    <script>
        $("#demo").carousel(  {
            interval: 2000,
        });
    </script>

    {!! NoCaptcha::renderJs() !!}
    <script>
        $("#to").change(function (e) {
            if ($(this).val() == "support") {
                $("#serial").slideDown();
            } else {
                $("#serial").slideUp();

            }
        });
    </script>

@endsection