@extends('web.layouts.layout')
@section('content')

    <main>

        <!-- Start section -->
        @include('web.layouts.header')


        <section class="serviceDet_pg login_pg section">
            <div class="container">
                <img src="{{asset($service->image)}}" class="sec-img mb-5" alt=""/>
                <div class="row justify-content-between">
                    <div class="col-lg-6 m-auto">
                        <form method="post" action="{{route('service.demand',$service->id)}}" onsubmit="formAction(this)">
                            @CSRF
                            <div class="form_box mb-4">
                                <h2 class="sec_title bb fw-bold mb-4"> {{$service->name}} </h2>
                                <div class="form-group mb-4">
                                    <label class="inputLabel">  {{__('demands.email')}}   </label>
                                    <input type="email" name="email" class="form-control" placeholder="{{__('demands.email')}}">
                                </div>
                                <div class="form-group mb-4">
                                    <label class="inputLabel"> {{__('demands.name_company')}}  </label>
                                    <input type="text" name="name" class="form-control" placeholder="{{__('demands.name_company')}}">
                                </div>
                                <div class="form-group mb-4">
                                    <label class="inputLabel"> {{__('demands.tax_number')}} </label>
                                    <input type="number" name="tax_number" class="form-control" placeholder="{{__('demands.tax_number')}}">
                                </div>
                                <div class="form-group mb-4">
                                    <label class="inputLabel">    {{__('demands.phone')}}    </label>
                                    <div class="phone_group">
                                        <select class="form-control form-select codeSelect">
                                            <option>+966</option>
                                        </select>
                                        <input type="number" name="phone" class="form-control numInput" placeholder="{{__('demands.phone')}}">
                                    </div>
                                </div>
                            </div>
                            <div class="form_box">
                                <h2 class="sec_title bb fw-bold mb-4"> {{__('web.site')}}      </h2>
                                <div class="form-group mb-4">
                                    <label class="inputLabel"> {{__('demands.site')}} </label>
                                    <input type="text" name="site" class="form-control" placeholder="{{__('demands.site')}}">
                                </div>
                                <div class="map_box mb-4">
                                    <label class="inputLabel"> {{__('demands.latlng')}}    </label>
                                    <input type="hidden" name="latlng" id="latlng" value="">
                                    <div id="map" style="width:100%;display: block;position: relative;overflow: hidden;height: 15pc;">
                                    </div>
                                </div>
                                <div class="form-group mb-4">
                                    <label class="inputLabel"> {{__('demands.option_1')}}  </label>
                                    <select name="option_id" class="form-control form-select" id="buildTypeSelect">
                                        @foreach($options as $row)
                                            <option value="{{$row->id}}">  {{$row->name}}   </option>
                                        @endforeach
                                        <option value=""> {{__('web.other')}}    </option>
                                    </select>
                                </div>
                                <div class="form-group mb-4" id="buildTypeInput">
                                    <label class="inputLabel"> {{__('demands.option_1')}} {{__('web.other')}}   </label>
                                    <input type="text" name="option_other" class="form-control" placeholder="{{__('demands.option_1')}} {{__('web.other')}}">
                                </div>
                                <div class="form-group mb-4">
                                    <label class="inputLabel"> {{__('demands.area_lang')}} ({{__('demands.mt')}})</label>
                                    <input type="number" min="0"  step=".01" name="area_lang" class="form-control" placeholder="{{__('demands.area_lang')}} ({{__('demands.mt')}})">
                                </div>
                                <div class="form-group mb-4">
                                    <label class="inputLabel"> {{__('demands.count_floor')}}</label>
                                    <input type="number" min="0"  name="count_floor" class="form-control" placeholder="{{__('demands.count_floor')}}">
                                </div>
                                <div class="form-group mb-4">
                                    <label class="inputLabel">{{__('demands.description')}}</label>
                                    <textarea rows="5" name="description" class="form-control" placeholder="{{__('demands.description')}}"></textarea>
                                </div>
                                <div class="form-group mb-4">
                                    <label class="inputLabel">{{__('demands.date')}}</label>
                                    <input type="date" min="{{date('Y-m-d')}}"  name="date" class="form-control" placeholder="{{__('demands.date')}}">
                                </div>
                            </div>
                            <button type="submit" class="butn primary_butn m-auto  mt-5"> {{__('web.send')}}  </button>

                        </form>
                    </div>

                </div>
            </div>
        </section>
    </main>
@section('inject_js')
    <script>
        // Ahwaz 91
        const buildInput = document.getElementById('buildTypeInput');
        const buildSelect = document.getElementById('buildTypeSelect');
        $(buildInput).hide()
        buildSelect.addEventListener('change', function handleChange(event) {
            if (event.target.value === '') {
                $(buildInput).show()
            } else {
                $(buildInput).hide()
            }
        });
    </script>

    <script type="text/javascript">

        var latlng = new google.maps.LatLng({!! $user ?? ''  && $user->id ? $user->latlng : '21.4989, 39.2509' !!});
        var map = new google.maps.Map(document.getElementById('map'), {
            center: latlng,
            zoom: 11,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        });
        var marker = new google.maps.Marker({
            position: latlng,
            map: map,
            title: 'Set lat/lon values for this property',
            draggable: true
        });
        google.maps.event.addListener(marker, 'dragend', function(a) {
            console.log(a);
            var div = document.createElement('div');
            div.innerHTML = a.latLng.lat().toFixed(4) + ', ' + a.latLng.lng().toFixed(4);
            document.getElementsByTagName('body')[0].appendChild(div);
            $("#latlng").val(function() {
                return  div.innerHTML;
            });
        });

    </script>
@endsection
@stop