@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.height_road')}} ({{__('demands.m')}}) </label>
                                    <input type="number" min="0" step=".01" name="height_road" class="form-control" placeholder="{{__('demands.height_road')}} ({{__('demands.m')}})">
                                </div>
                                <div class="form-group mb-4">
                                    <label class="inputLabel"> {{__('demands.width_road')}} ({{__('demands.m')}}) </label>
                                    <input type="number" min="0"  step=".01" name="width_road" class="form-control" placeholder="{{__('demands.width_road')}} ({{__('demands.m')}})">
                                </div>
                                <div class="form-group mb-4">
                                    <label class="inputLabel">{{__('demands.thick_road')}}  ({{__('demands.cm')}})</label>
                                    <input type="number" step=".01" min="0" name="thick_road" class="form-control" placeholder="{{__('demands.thick_road')}}  ({{__('demands.cm')}})">
                                </div>
                                <div class="form-group mb-4">
                                    <label class="inputLabel">{{__('demands.description')}}</label>
                                    <textarea rows="5" name="desciption" 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 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