@extends('home.layouts.index')

@section('title')
    تماس با ما  
@endsection

@section('description')

@endsection

@section('keywords')

@endsection

@section('style')
    <style>
        .w-icon-mobile{
            font-size: 50px !important;
        }
        .border-error{
            border:2px solid red;
        }
        .card-header i{
            left:10px;
            position: absolute;
            transition: all .3s ease ;

        }
        .collapse i{
            transform: rotate(-90deg);
        }
        .title{
            font-size:1.8rem;
        }
        .header-transparent{
            position: static !important;
            background-color: #222;
        }
.grey-section{
    padding: 10px;
}

        .card {
            background-color: transparent;
        }
        .accordion-border .card {
            border-width: 1px 1px 0;
            border-style: solid;
            border-color: #e1e1e1;
        }
        .accordion-border .card {
            padding: 0 1.3rem;
        }
        .faq .card {
            border-width: 1px 0 0 0;
            border-color: #ebebeb;
        }
        .card-header {
            text-transform: capitalize;
            font-size: 1.8rem;
            font-weight: 600;
            line-height: 1;
            color: #222;
        }
        .faq .card-header {
            font-size: 1.6rem;
            text-transform: none;
            letter-spacing: -0.025em;
        }
        .faq .card-header a {
            padding: 1.7rem 1rem;
        }
        .card-header .collapse {
            color: #26c;
        }
        .card-header a {
            display: flex;
            align-items: center;
            position: relative;
            padding: 1.8rem 0.5rem;
        }
        .card-header .collapse {
            color: #26c;
        }
    </style>
@endsection

@section('script')
    <script>
        function arrowopen(tag){
            $(tag).find('i').toggleClass('active-arrow')
        }
    </script>
@endsection

@section('content')

    <main class="main">
        <nav class="breadcrumb-nav">
            <div class="container">
                <ul class="breadcrumb">
                    <li><a href="{{route('home.index')}}"><i class="d-icon-home"></i></a></li>
                    <li>تماس با ما</li>
                </ul>
            </div>
        </nav>
        @if($page->banner_is_active==1)
        <div class="page-header" style="background-image: url('{{imageExist(env('BANNER_PAGES_UPLOAD_PATH'),$page->image)}}')">
            <h1 class="page-title font-weight-bold text-capitalize ls-l"> {!! $page->title !!}</h1>
        </div>
        @endif
        <div class="page-content mt-10 pt-7">
            <section class="contact-section">
                <div class="container">
                    <div class="row">
                        <div class="col-lg-3 col-md-4 col-sm-6 ls-m mb-4">
                            <div class="grey-section d-flex align-items-center h-100">
                                <div>
                                    <h4 class="mb-2 text-capitalize">{{$setting->contact_4}}</h4>
                                    <p>{{ $setting->address }}</p>
                                    <h4 class="mb-2 text-capitalize">{{$setting->contact_1}}</h4>
                                    <p>
                                        @if($setting->tel!=null)
                                        <a href="tel:{{ $setting->tel }}">{{ $setting->tel }}</a>
                                            <br>
                                        @endif
                                            @if($setting->cellphone!=null)
                                            <a href="tel:{{ $setting->cellphone }}">{{ $setting->cellphone }}</a>
                                            @endif
                                    </p>
                                    <h4 class="mb-2 text-capitalize">{{$setting->contact_3}} </h4>
                                    <p class="mb-4">
                                        <a href="mailto:{{$setting->email}}">{{ $setting->email }}</a>
                                    </p>

                                    <h4 class="mb-2 text-capitalize">{{$setting->contact_2}} </h4>
                                    <p class="mb-4">
                                        @if($setting->tel3!=null)
                                            <a href="tel:{{ $setting->tel3 }}">{{ $setting->tel3 }}</a>
                                        @endif
                                            @if($setting->tel4!=null)
                                                <a href="tel:{{ $setting->tel4 }}">{{ $setting->tel4 }}</a>
                                            @endif
                                    </p>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-9 col-md-8 col-sm-6 d-flex align-items-center mb-4">
                            <div class="w-100">
                                <form class="pl-lg-2" action="{{ route('home.contact') }}" method="post">
                                    @csrf
                                    <h4 class="ls-m font-weight-bold">ارتباط با ما</h4>

                                    <div class="row mb-2">

                                        <div class="col-md-6 mb-4">
                                            <input  name="name" class="form-control" type="text" placeholder="نام و نام خانوادگی:" required>
                                            @error('name')
                                            <p class="input-error-validation">{{ $message }}</p>
                                            @enderror
                                        </div>
                                        <div class="col-md-6 mb-4">
                                            <input name="email" class="form-control" type="email" placeholder="ایمیل:" required>
                                            @error('email')
                                            <p class="input-error-validation">{{ $message }}</p>
                                            @enderror
                                        </div>
                                        <div class="col-12 mb-4">
                                            <textarea name="message" class="form-control" required placeholder="متن پیام:"></textarea>
                                            @error('message')
                                            <p class="input-error-validation">{{ $message }}</p>
                                            @enderror
                                        </div>
                                    </div>
                                    <button class="btn btn-primary btn-rounded">
                                                      <i class="d-icon-arrow-left"> </i>
                                        ارسال پیام
                          
                                    </button>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            <section class="mb-3">
                <div class="container">
                    <div class="row">
                        <div class="col-md-12 mt-10">
                            <h2 class="title pl-2 pr-2 ls-m text-left">پاسخ به پرسش های متداول</h2>
                            <div class="accordion accordion-border accordion-boxed accordion-plus">
                                @foreach($faqs as $key=> $faq)
                                <div class="card">
                                    <div class="card-header">
                                        <a href="#collapse1-{{$key}}" class="collapse">
                                           {{$faq->title}}
                                        </a>
                                    </div>
                                    <div id="collapse1-{{$key}}" class="expanded">
                                        <div class="card-body">
                                            <p class="mb-0">
                                                                      {{$faq->text}}
                                            </p>
                                        </div>
                                    </div>
                                </div>
                                @endforeach

                            </div>
                        </div>

                    </div>
                </div>
            </section>




        </div>
    </main>
    <!-- Start of Main -->

    <!-- End of Main -->
@endsection