@extends("Front::Layout.master")
@section("title")
    @if(isset($page->post_meta_array["meta_title"])){{ $page->post_meta_array["meta_title"] }}@else{{ $page->title }}@endif
@endsection

@section("meta")
    <meta name="robots" content="@if(isset($page->post_meta_array["meta_follow"])){{ $page->post_meta_array["meta_follow"] }}@endif, @if(isset($page->post_meta_array["meta_index"])){{ $page->post_meta_array["meta_index"] }}@endif">
    <link rel="canonical" href="{{ url()->current() }}/">
    <meta property="og:locale" content="fa_IR">
    <meta property="og:type" content="page">
    <meta property="og:description" content="{{ $page->post_meta_array["meta_description"] }}">
    <meta name="twitter:description" content="{{ $page->post_meta_array["meta_description"] }}">

    <meta property="og:title" content="@if(isset($page->post_meta_array["meta_title"])){{ $page->post_meta_array["meta_title"] }}@else{{ $page->title }}@endif">
    <meta property="og:url" content="{{ $page->url }}">
    <meta property="og:site_name" content="{{ get_site_title() }}">
    <meta property="og:updated_time" content="{{ $page->updated_at }}">
    <meta name="twitter:title" content="@if(isset($page->post_meta_array["meta_title"])){{ $page->post_meta_array["meta_title"] }}@else{{ $page->title }}@endif">
@endsection

@section('content')

    <!-- breadcrumb -->
    <div class="breadcrumbSection marginX my-md-3 my-3">
        <div class="breadcrumb_contanier">
            <ul class="d-flex">
                <li class="ml-2"><a href="/" class="font_size_2">تاسیسات اول</a></li>
                <li class="ml-2"><a href="" class="font_size_2">تماس با ما</a></li>
            </ul>
        </div>
    </div>
    <!-- end breadcrumb -->


    <!-- start detail -->
    <div class="detail_contact  mt-3 mt-md-5 d-md-flex justify-content-between marginX mt-5">
        <div class="col-sm-5">
            <div class="title_normal mb-4">
                <div class="style_header"></div>
                <span>
                    تماس با ما
                </span>
            </div>
            <div class="list_conract mt-sm-4 ">
                <div class="list_conract_row  mr-md-4 mr-5 mb-4 d-flex align-items-center">
                    <div class="list_conract_icon ml-md-4 ml-3">
                        <i class="fa fa-phone "></i>
                    </div>
                    <div class="list_conract_data d-flex flex-column justify-content-between">
                        <div dir="ltr" style="
    white-space: pre;
">{{ $data["contact_us_mobile"] }}</div>

                    </div>
                </div>
                <div class="list_conract_row  mr-md-4 mr-5 mb-4 d-flex align-items-center">
                    <div class="list_conract_icon ml-md-4 ml-3">
                        <i class="fa fa-tablet "></i>
                    </div>
                    <div class="list_conract_data d-flex flex-column justify-content-between">
                        <div dir="ltr" style="
    white-space: pre;
">{{ $data["contact_us_phone"] }}</div>
                    </div>
                </div>
                <div class="list_conract_row  mr-md-4 mr-5 mb-4 d-flex align-items-center">
                    <div class="list_conract_icon ml-md-4 ml-3">
                        <i class="fa fa-envelope-o "></i>
                    </div>
                    <div class="list_conract_data d-flex flex-column justify-content-between">
                        <div dir="ltr" style="
    white-space: pre;
">{{ $data["contact_us_email"] }}</div>
                    </div>
                </div>
                <div class="list_conract_row  mr-md-4 mr-5 mb-4 d-flex align-items-center">
                    <div class="list_conract_icon ml-md-4 ml-3">
                        <i class="fa fa-map-marker "></i>
                    </div>
                    <div class="list_conract_data d-flex flex-column justify-content-between">
                        <div>{{ $data["contact_us_address"] }}</div>
                    </div>
                </div>

            </div>
        </div>
        <div class="col-sm-7 my-5 my-md-0">
            <div id="mapAddress" style="height: 200px"></div>
        </div>
    </div>

    <div class="send_form_contact marginX my-5">
        <div class="title_normal">
            <div class="style_header"></div>
            <span>
                ارسال پیام
            </span>
        </div>
        <div
            class="alert alert-secondary mt-5 mx-auto col-md-8 mx-1 mb-2  @if( $errors->any() || session()->has('status')) @else d-none @endif "
            role="alert">
            @if($errors->any())
                @foreach ($errors->all() as $error)
                    {{ $error }}<br>
                @endforeach
            @endif
            @if(session()->has('status'))
                {{session()->get('status')}}
            @endif
        </div>
        <form action="{{route('contactUs.store')}}" method="post" class="mt-5 mx-auto col-md-8 d-flex mb-5 flex-wrap align-items-center justify-content-center">
            @csrf
            <div class="col-sm-6">
                <div id="extra_number_tab" class="custom_form">
                    <div class="floating-label">
                        <input type="text" class="floating-input" value="{{old('name')}}" id="name" name="name" placeholder=" ">
                        <label class="main">نام شما</label>
                    </div>
                </div>
            </div>
            <div class="col-sm-6">
                <div id="extra_number_tab" class="custom_form">
                    <div class="floating-label">
                        <input type="number" class="floating-input" value="{{old('mobile')}}" id="mobile" name="mobile" placeholder=" ">
                        <label class="main">شماره تماس</label>
                    </div>
                </div>
            </div>
            <div class="col-12">
                <div id="extra_number_tab" class="custom_form">
                    <div class="floating-label">
                        <input type="text" class="floating-input" value="{{old('title')}}" id="title" name="title" placeholder=" ">
                        <label class="main">عنوان پیام</label>
                    </div>
                </div>
            </div>
            <div id="tab1" class="col-12 custom_form">
                <div class="floating-label">
                    <textarea type="message" class="floating-input" name="content" placeholder=" "
                              autocomplete="off" cols="8" rows="7"
                              style="height: unset !important;padding-top: 0.9rem;">{{old('content')}}</textarea>
                    <label class="main">متن پیام</label>
                </div>
            </div>
            <div class="col-12 d-flex justify-content-end btn_send_contact">
                <button class="btn px-5">
                    ارسال پیام
                </button>
            </div>
        </form>
    </div>

    <!-- end main section -->
    @push("js")
        <script src="{{asset('front/leaflet/leaflet.js')}}"></script>
        <script>
            if($('#mapAddress').length){
                var mapAddress = L.map('mapAddress', {
                    center: [200, 0],
                    zoom: 13,
                }).setView([{{ $data["contact_us_map_y"] }}, {{ $data["contact_us_map_x"] }}], 10.5);

                L.tileLayer('https://{s}.tile.osm.org/{z}/{x}/{y}.png', {
                    attribution: '&copy; <a href="https://osm.org/copyright">OpenStreetMap</a> contributors'
                }).addTo(mapAddress);

                L.marker([35.736993,51.516278]).addTo(mapAddress);

            }
        </script>
    @endpush
@endsection
