@extends('layouts.app')
@section('content')
<!-- Ionicons CSS dosyası -->
<link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">

<!-- Ionicons JS dosyası -->
<script src="https://code.ionicframework.com/ionicons/2.0.1/js/ionicons.min.js"></script>


<style>
    .barMenu {
        overflow-x: auto;
        overflow-y: hidden;
    }

    .barMenu a {
        display: block;
        text-decoration: none;
        color: #333;
        height: 60px;
        display: flex;
        align-items: center;
        padding: 0px 6px;
        text-align: center;
        font-size: 14px;
        -webkit-transition: all .5s ease-in-out;
        -moz-transition: all .5s ease-in-out;
        -o-transition: all .5s ease-in-out;
        transition: all .5s ease-in-out;
        border-right: 1px solid #eeeeeec4;
        color: #333;
    }

    .barMenu a:last-child {
        border: none;
    }

    .barMenu a:hover {
        color: #fff;
        background-color: #333;
    }


    .brcrumb {

        height: 250px;
        background-color: #000 !important;
        background-size: cover;

        background-position: center center;
        background-image: url('/assets/images/ucretsiz-ekspertiz.jpg');
    }

    .brcrumb_content {
        position: absolute;
        bottom: 20px;
        left: 1%;

        height: 30px;
        background-color: #fff;
        padding: 10px;
        border-radius: 2px;
        display: flex;
        align-items: center;
        font-weight: 500;
        border: 1px solid #ddd;
        -webkit-transition: all .5s ease-in-out;
        -moz-transition: all .5s ease-in-out;
        -o-transition: all .5s ease-in-out;
        transition: all .5s ease-in-out;
    }

    .brcrumb_content:hover {
        background-color: #fff;
        border: 1px solid #fff;
    }

    .brcrumb_content ul {
        padding: 0;
        margin: 0;
        display: flex;
        align-items: center;
        justify-content: center;

    }

    .brcrumb_content ul li {
        display: block;
        margin-right: 5px;
        position: relative;
    }

    .brcrumb_content ul li::after {
        content: '/';
        height: 15px;
        width: 20px;
        display: block;
        position: absolute;
        z-index: 2;
        right: -13px;
        top: 1px;
        background-repeat: no-repeat;
        color: #adadad;

    }

    .brcrumb_content ul li:last-child::after {
        content: ' ';
        background-image: none;
        height: 15px;
        width: 20px;
        display: block;
        position: absolute;
        z-index: 2;
        right: -10px;
        top: 5px;

    }

    .brcrumb_content ul li a {
        margin-right: 10px;
        text-decoration: none;
        color: #333;
        font-weight: 400;
        font-size: 13px
    }


    .brcrumb_content li:last-child a {
        color: #f22613;
    }

    @media only screen and (max-width: 600px) {
        ._icerik {
            min-height: 100px;
        }

        .brcontainer {
            margin-bottom: 120px;
        }

        .brcrumb_content {
            width: 100%;
            height: auto;
            justify-content: center;
            align-items: center;
            bottom: -40%;
            background: transparent;
            border: 1px solid #eee;
            left: 0px;

        }

        .brcrumb_content ul {


            width: 100%;
            align-items: unset;
            flex-wrap: wrap;
            justify-content: flex-start
        }

        .brcrumb_content ul li {}

        .brcrumb_content ul li:last-child {
            border-bottom: none;
        }


        .brcrumb_content ul li::after {
            top: -1px;
            right: -14px;

        }

        ._content {
            margin-top: 120px !important;
        }
    }
</style>

@if (App::getLocale() == 'tr')
<div style="min-height:600px">
    <div class="mb-5">


        <div class="container-fluid">
            <div class="row">
                <div class="col-12 brcrumb">
                    <div class="container" style="position: relative;height:100%;">
                        <div class="brcrumb_content">
                            <div itemscope="" itemtype="http://schema.org/BreadcrumbList" style="width:100%">
                                <ul class="brul">

                                    <li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem"><a itemprop="item" href="/"><span itemprop="name">Anasayfa</span></a>
                                        <meta itemprop="position" content="0">
                                    </li>

                                    <li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem"><a itemprop="item" href="#"><span itemprop="name">{{ (App::getLocale() == 'tr')  ? 'Ücretsiz Ekspertiz' : 'Free Approsial' }}</span></a>
                                        <meta itemprop="position" content="1">
                                    </li>


                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>




        {{-- <iframe
                    src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d7274.038362913563!2d32.523940882049295!3d39.95578389599414!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x14d3252f90764439%3A0xb1ba73aac64e71d0!2sNETELSAN!5e0!3m2!1str!2str!4v1677569130887!5m2!1str!2str"
                    width="100%" height="300" style="border:0;" allowfullscreen="" loading="lazy"
                    referrerpolicy="no-referrer-when-downgrade"></iframe> --}}
        <div class="container-fluid d-flex align-items-center shadow d-none d-md-block mb-4" style="background-color: #fff;height:60px;margin-top:-5px;">
            <div class="container">
                <div class="col-12 d-flex justify-content-start barMenu">
                    <a class="active" style="{{ $page->target == 'iletisim' ? 'background-color:red; color:#fff' : '' }}" href="/page/iletisim" aria-current="true">
                        İletişim Bilgileri
                    </a>
                    <a class="active" style="{{ $page->target == 'iletisimFormu' ? 'background-color:red; color:#fff' : '' }}" href="/page/iletisimFormu" aria-current="true">
                        İletişim Formu
                    </a>
                    <a class="active" style="{{ $page->target == 'ucretsizEkspertiz' ? 'background-color:red; color:#fff' : '' }}" href="/page/ucretsizEkspertiz" aria-current="true">
                        Ücretsiz Ekspertiz
                    </a>

                </div>
            </div>
        </div>
        <div class="_content container">
            <div class="row mb-5">
                <div class="col-12">
                    <div class="master_title">
                        <h1>Ücretsiz Ekpertiz</h1>
                    </div>
                </div>

            </div>
        </div>

        <!-- İletişim formu başlangıç  -->
        <div class="row  px-3 mx-0 px-md-0 d-flex justify-content-center mt-5">
            <div class="col-12 col-md-6 col-lg-6 mt-5">
                @if (!empty(session('success')))
                    <div class="alert alert-success text-center mb-4">
                        <strong>{{ session('success') }}</strong>
                    </div>
                    @php session(['success' => '']); @endphp
                @endif

                <form id="ekspertizForm" action="/ekspertiz-form-submit" method="post">
                    @csrf
                    <div class="row justify-content-between">
                        <!-- Name Text Box -->
                        <div class=" col-md-6 col-lg-6 col-12">
                            <div class="row">
                                <div class="col-md-4 col-lg-4 col-sm-12 col-12 no-pad mt-1"><strong style="color:#f22613;">Adınız :</strong></div>
                                <div class="col-md-8 col-lg-8 mcare-field control-group control-odd"><input id="ad" class="form-control" name="ad" type="text" placeholder="Adınızı giriniz..." required></div>
                            </div>
                        </div>
                        <!-- Email Text Box -->
                        <div class="col-md-6 col-lg-6 col-12">
                            <div class="row mt-4 mt-md-0">
                                <div class="col-md-4 col-lg-4 col-sm-12 col-12 no-pad mt-1"><strong style="color:#f22613;">Soyadınız :</strong>
                                </div>
                                <div class="col-md-8 col-lg-8 mcare-field control-group"><input id="soyad" class="form-control" name="soyad" type="text" placeholder="Soyadınızı giriniz..." required></div>
                            </div>
                        </div>
                    </div>

                    <!-- Subject Text Box -->
                    <div class="row mt-4">
                        <div class="col-md-2 col-lg-2 col-sm-12 col-12 no-pad mt-1"><strong style="color:#f22613;">Telefon Numarası:</strong></div>
                        <div class="mcare-field control-group col-md-10 col-lg-10"><input id="tel2" class="form-control" name="tel" type="text" placeholder="Telefonunuzu giriniz..." required></div>
                    </div>

                    <div class="row mt-4">
                        <div class="col-md-2 col-lg-2 col-sm-12 col-12 no-pad mt-1"><strong style="color:#f22613;">Adresiniz :</strong></div>
                        <div class="mcare-field control-group col-md-10 col-lg-10">
                            <textarea id="adres" class="form-control tarea" name="adres" placeholder="Adresinizi giriniz..." required></textarea>
                        </div>
                    </div>
                    <div class="row mt-4">
                        <div class="col-md-2 col-lg-2 col-sm-12 col-xs-12 no-pad mt-1" style="margin-bottom: 20px;">
                            <strong style="color:#f22613;">Talep Edilen Ürün:</strong>
                        </div>
                        <div class="mcare-field control-group col-md-10 col-lg-10"><select id="anakategori" class="form-control" name="talep">
                                <option selected="selected" value="0" required>Lütfen Ana Kategoriyi Seçiniz</option>
                                <option value="Bina İletişim Sistemleri">Bina İletişim Sistemleri</option>
                                <option value="Sensörler">Sensörler</option>
                                <option value="Aydınlatma Armatürleri">Aydınlatma Armatürleri</option>
                                <option value="Acil Aydınlatma ve Yönlendirme Sistemleri">Acil Aydınlatma ve
                                    Yönlendirme Sistemleri</option>
                            </select></div>
                    </div>

                    <div class="row justify-content-between">
                        <!-- Name Text Box -->
                        <div class=" col-md-6 col-lg-6 col-12  mt-4">
                            <div class="row">
                                <div class="col-md-4 col-lg-4 col-sm-12 col-12 no-pad mt-1"><strong style="color:#f22613;">Daire Sayısı :</strong></div>
                                <div class="col-md-8 col-lg-8 mcare-field control-group control-odd"><input id="ad" class="form-control" name="dsayisi" type="number" placeholder="Daire Sayısı giriniz..." ></div>
                            </div>
                        </div>
                        <!-- Email Text Box -->
                        <div class="col-md-6 col-lg-6 col-12  mt-4">
                            <div class="row">
                                <div class="col-md-4 col-lg-4 col-sm-12 col-12 no-pad mt-1"><strong style="color:#f22613;">Blok Sayısı :</strong>
                                </div>
                                <div class="col-md-8 col-lg-8 mcare-field control-group"><input id="soyad" class="form-control" name="bsayisi" type="number" placeholder="Blok Sayısı giriniz..."></div>
                            </div>
                        </div>
                    </div>

                    <div class="row  mt-4">
                        <div class="col-md-2 col-lg-2 col-sm-12 col-12 no-pad mt-1"><strong style="color:#f22613;">E-Posta :</strong></div>
                        <div class="mcare-field control-group col-md-10 col-lg-10"><input id="email" class="form-control" name="eposta" type="text" placeholder="E-Postanıızı giriniz..." required></div>
                    </div>


                    <div class="row  mt-4">
                        <div class="col-md-2 col-lg-2 col-sm-12 col-12 no-pad mt-1"><strong style="color:#f22613;">Mesajınız :</strong></div>
                        <div class="mcare-field control-group col-md-10 col-lg-10">
                            <textarea id="mesaj" class="form-control tarea" onkeydown="validatelimit(this,2000)" cols="20" rows="2" name="mesaj" placeholder="Mesajınızı giriniz..." required></textarea>
                            <div class="count">2000 karakter sınırınız var!</div>
                        </div>

                    </div>
                    <div class="col-md-12 col-lg-12 col-sm-12 col-12 no-pad d-flex justify-content-end">
                        <div class="mt-2">
                            <div class="inner-out-button"><button type="submit" class="btn btn-danger">Gönder</button>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>




        <!-- İletişim formu Son -->


    </div>
</div>
<script>
    function validatelimit(textarea, limit) {
        var remaining = limit - textarea.value.length;
        var count = textarea.parentNode.parentNode.querySelector('.count');
        count.innerHTML = remaining + ' Kalan karakter sayısı';
        if (remaining < 0) {
            count.classList.add('text-danger');
        } else {
            count.classList.remove('text-danger');
        }
    }
</script>
@else
<div style="min-height:600px">
    <div class="mb-5">
       <div class="container-fluid">
            <div class="row">
                <div class="col-12 brcrumb">
                    <div class="container" style="position: relative;height:100%;">
                        <div class="brcrumb_content">
                            <div itemscope="" itemtype="http://schema.org/BreadcrumbList" style="width:100%">
                                <ul class="brul">

                                    <li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem"><a itemprop="item" href="/"><span itemprop="name">Anasayfa</span></a>
                                        <meta itemprop="position" content="0">
                                    </li>

                                    <li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem"><a itemprop="item" href="#"><span itemprop="name">{{ (App::getLocale() == 'tr')  ? 'Ücretsiz Ekspertiz' : 'Free Approsial' }}</span></a>
                                        <meta itemprop="position" content="1">
                                    </li>


                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
        {{-- <iframe
                    src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d7274.038362913563!2d32.523940882049295!3d39.95578389599414!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x14d3252f90764439%3A0xb1ba73aac64e71d0!2sNETELSAN!5e0!3m2!1str!2str!4v1677569130887!5m2!1str!2str"
                    width="100%" height="300" style="border:0;" allowfullscreen="" loading="lazy"
                    referrerpolicy="no-referrer-when-downgrade"></iframe> --}}
        <div class="container-fluid d-flex align-items-center shadow d-none d-md-block mb-4" style="background-color: #fff;height:60px;margin-top:-5px;">
            <div class="container">
                <div class="col-12 d-flex justify-content-start barMenu">
                    <a class="active" style="{{ $page->target == 'iletisim' ? 'background-color:red; color:#fff' : '' }}" href="/page/iletisim" aria-current="true">
                        Contact information
                    </a>
                    <a class="active" style="{{ $page->target == 'İletisimFormu' ? 'background-color:red; color:#fff' : '' }}" href="/page/İletisimFormu" aria-current="true">
                        Contact Form
                    </a>
                    <a class="active" style="{{ $page->target == 'ucretsizEkspertiz' ? 'background-color:red; color:#fff' : '' }}" href="/page/ucretsizEkspertiz" aria-current="true">
                        Free Appraisal
                    </a>

                </div>
            </div>
        </div>
        <div class="_content container">
            <div class="row mb-5">
                <div class="col-12">
                    <div class="master_title">
                        <h1> Free Approsial</h1>
                    </div>
                </div>

            </div>
        </div>

        <!-- İletişim formu başlangıç  -->
        <div class="row px-3 mx-0 px-md-0  d-flex justify-content-center mt-5">
            <div class="col-12 col-md-6 col-lg-6 mt-5">

                @if (!empty(session('success')))
                    <div class="alert alert-success text-center mb-4">
                        <strong>{{ session('success') }}</strong>
                    </div>
                    @php session(['success' => '']); @endphp
                @endif

                <form id="ekspertizForm" action="/ekspertiz-form-submit" method="post">
                    @csrf
                    <div class="row justify-content-between">
                        <!-- Name Text Box -->
                        <div class=" col-md-6 col-lg-6 col-12">
                            <div class="row">
                                <div class="col-md-4 col-lg-4 col-sm-12 col-12 no-pad mt-1"><strong style="color:#f22613;">Name :</strong></div>
                                <div class="col-md-8 col-lg-8 mcare-field control-group control-odd"><input id="ad" class="form-control" name="ad" type="text" placeholder="enter your name..." required></div>
                            </div>
                        </div>
                        <!-- Email Text Box -->
                        <div class="col-md-6 col-lg-6 col-12">
                            <div class="row mt-4 mt-md-0">
                                <div class="col-md-4 col-lg-4 col-sm-12 col-12 no-pad mt-1"><strong style="color:#f22613;">Surname :</strong>
                                </div>
                                <div class="col-md-8 col-lg-8 mcare-field control-group"><input id="soyad" class="form-control" name="soyad" type="text" placeholder="Enter your last name..." required></div>
                            </div>
                        </div>
                    </div>

                    <!-- Subject Text Box -->
                    <div class="row mt-4">
                        <div class="col-md-2 col-lg-2 col-sm-12 col-12 no-pad mt-1"><strong style="color:#f22613;">Phone :</strong></div>
                        <div class="mcare-field control-group col-md-10 col-lg-10"><input id="tel2" class="form-control" name="tel" type="text" placeholder="Enter your phone..." required></div>
                    </div>

                    <div class="row mt-4">
                        <div class="col-md-2 col-lg-2 col-sm-12 col-12 no-pad mt-1"><strong style="color:#f22613;">Address :</strong></div>
                        <div class="mcare-field control-group col-md-10 col-lg-10">
                            <textarea id="adres" class="form-control tarea" name="adres" placeholder="Enter your address..." required></textarea>
                        </div>
                    </div>
                    <div class="row mt-4">
                        <div class="col-md-2 col-lg-2 col-sm-12 col-xs-12 no-pad mt-1" style="margin-bottom: 20px;">
                            <strong style="color:#f22613;">Requested Product:</strong>
                        </div>
                        <div class="mcare-field control-group col-md-10 col-lg-10"><select id="anakategori" class="form-control" name="talep">
                                <option selected="selected" value="0" required>Please Select Main Category</option>
                                <option value="Bina İletişim Sistemleri">Building Communication Systems</option>
                                <option value="Sensörler">Sensors</option>
                                <option value="Aydınlatma Armatürleri">Lighting Fixtures</option>
                                <option value="Acil Aydınlatma ve Yönlendirme Sistemleri">Emergency Lighting and
                                    Guidance Systems</option>
                            </select></div>
                    </div>

                    <div class="row justify-content-between ">
                        <!-- Name Text Box -->
                        <div class=" col-md-6 col-lg-6 col-12 mt-4">
                            <div class="row">
                                <div class="col-md-4 col-lg-4 col-sm-12 col-12 no-pad mt-1"><strong style="color:#f22613;">Number of Flats :</strong></div>
                                <div class="col-md-8 col-lg-8 mcare-field control-group control-odd"><input id="ad" class="form-control" name="dsayisi" type="number" placeholder="Enter Number of Flats..."></div>
                            </div>
                        </div>
                        <!-- Email Text Box -->
                        <div class="col-md-6 col-lg-6 col-12 mt-4">
                            <div class="row">
                                <div class="col-md-4 col-lg-4 col-sm-12 col-12 no-pad mt-1"><strong style="color:#f22613;">Number of Blocks :</strong>
                                </div>
                                <div class="col-md-8 col-lg-8 mcare-field control-group"><input id="soyad" class="form-control" name="bsayisi" type="number" placeholder="Enter Number of Blocks..."></div>
                            </div>
                        </div>
                    </div>

                    <div class="row  mt-4">
                        <div class="col-md-2 col-lg-2 col-sm-12 col-12 no-pad mt-1"><strong style="color:#f22613;">E-Mail :</strong></div>
                        <div class="mcare-field control-group col-md-10 col-lg-10"><input id="email" class="form-control" name="eposta" type="text" placeholder="Enter your e-mail..." required></div>
                    </div>


                    <div class="row  mt-4">
                        <div class="col-md-2 col-lg-2 col-sm-12 col-12 no-pad mt-1"><strong style="color:#f22613;">Message :</strong></div>
                        <div class="mcare-field control-group col-md-10 col-lg-10">
                            <textarea id="mesaj" class="form-control tarea" onkeydown="validatelimit(this,2000)" cols="20" rows="2" name="mesaj" placeholder="Enter your message..." required></textarea>
                            <div class="count">2000 characters remaining!</div>
                        </div>

                    </div>
                    <div class="col-md-12 col-lg-12 col-sm-12 col-12 no-pad d-flex justify-content-end">
                        <div class="mt-2">
                            <div class="inner-out-button"><button type="submit" class="btn btn-danger">SEND</button>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>




        <!-- İletişim formu Son -->


    </div>
</div>
<script>
    function validatelimit(textarea, limit) {
        var remaining = limit - textarea.value.length;
        var count = textarea.parentNode.parentNode.querySelector('.count');
        count.innerHTML = remaining + ' Remaining number of characters';
        if (remaining < 0) {
            count.classList.add('text-danger');
        } else {
            count.classList.remove('text-danger');
        }
    }
</script>
</div>
</div>
@endif
@endsection