@extends('dashboard.layout.app')
@section('css')

<style type="text/css">
    #mapCanvas{
        width: 100%;
        height: 300px;
    }
</style>

@endsection
@section('content')
<div class="box-tebal bg-white">
    <div class="row">
        <div class="col-md-12">
            <form class="form-horizontal m-b-30" action="" method="post" enctype="multipart/form-data">
                @csrf
                <div class="card">
                    <div class="card-body">
                        <ul class="nav nav-tabs" role="tablist">
                            <li class="nav-item">
                                <a class="nav-link active" id="pages-tab" data-toggle="tab" href="#pages"
                                    aria-controls="pages" role="tab" aria-selected="true">المحتوي </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" id="book1-tab" data-toggle="tab" href="#book1"
                                    aria-controls="book1" role="tab" aria-selected="false"> الكتاب الاول </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" id="book2-tab" data-toggle="tab" href="#book2" aria-controls="book2"
                                    role="tab" aria-selected="false"> الكتاب الثاني </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" id="book3-tab" data-toggle="tab" href="#book3" aria-controls="book3"
                                    role="tab" aria-selected="false"> الكتاب الثالث </a>
                            </li>
                        </ul>
                        <div class="tab-content">
                            <div class="tab-pane active" id="pages" aria-labelledby="pages-tab" role="tabpanel">

                                <div class="form-group margin-top-15 row">
                                    <label class="control-label col-md-2">
                                        محتوي الصفحة
                                    </label>
                                    <div class="col-md-12">
                                        {!! Form::textarea("setting[compitation]",(isset($setting['compitation']))? $setting['compitation'] :
                                        null,['class'=>'form-control mytextarea', 'style' => 'width: 100%; height: 150px; border: 1px solid
                                        #E3E3E3;border-radius: 4px;color: #565656;padding: 7px 12px;'])!!}
                                    </div>
                                </div>
                                <div class="form-group margin-top-15 row">
                                    <label class="control-label col-md-2">
                                        التنبية
                                    </label>
                                    <div class="col-md-12">
                                        {!! Form::textarea("setting[com_warning]",(isset($setting['com_warning']))? $setting['com_warning'] :
                                        null,['class'=>'form-control mytextarea'])!!}
                                    </div>
                                </div>

                            </div>
                            <div class="tab-pane" id="book1" aria-labelledby="book1-tab" role="tabpanel">

                                
                                <div class="form-group margin-top-15 row">
                                    <label class="control-label col-md-2">
                                        اسم الكتاب
                                    </label>
                                    <div class="col-md-8">
                                        {!! Form::text("setting[book1_title]",(isset($setting['book1_title']))? $setting['book1_title'] :
                                        null,['class'=>'form-control'])!!}
                                    </div>
                                </div>
                                <div class="form-group margin-top-15 row">
                                    <label class="control-label col-md-2">
                                        الصورة
                                    </label>
                                    <div class="col-md-8">
                                        <input class="form-control" type="file" class="file" name="book1_img" />
                                        <br>
                                        @if(isset($setting['book1_img']))
                                        <img src="{{getImage(getSettingValue('book1_img'))}}" width="160" height="60">
                                        @endif
                                    </div>
                                </div>
                                
                                <div class="form-group margin-top-15 row">
                                    <label class="control-label col-md-2">
                                        النص
                                    </label>
                                    <div class="col-md-8">
                                        {!! Form::textarea("setting[book1_txt]",(isset($setting['book1_txt']))? $setting['book1_txt'] :
                                        null,['class'=>'form-control mytextarea', 'style' => 'width: 100%; height: 150px; border: 1px solid
                                        #E3E3E3;border-radius: 4px;color: #565656;padding: 7px 12px;'])!!}
                                    </div>
                                </div>

                                <div class="form-group margin-top-15 row">
                                    <label class="control-label col-md-2">
                                        ملف الكتاب
                                    </label>
                                    <div class="col-md-8">
                                        <input class="form-control" type="file" class="file" name="book1_file" />
                                        <br>
                                        @if(isset($setting['book1_file']))
                                        <a target="_blank" href="{{getImage(getSettingValue('book1_file'))}}" > تحميل </a>
                                        @endif
                                    </div>
                                </div>
                                <div class="form-group margin-top-15 row">
                                    <label class="control-label col-md-2">
                                        نموذج الاجابة
                                    </label>
                                    <div class="col-md-8">
                                        <input class="form-control" type="file" class="file" name="book1_ans_template" />
                                        <br>
                                        @if(isset($setting['book1_ans_template']))
                                        <a target="_blank" href="{{getImage(getSettingValue('book1_ans_template'))}}" > تحميل </a>
                                        @endif
                                    </div>
                                </div>

                            </div>
                            <div class="tab-pane" id="book2" aria-labelledby="book2-tab" role="tabpanel">

                                
                                <div class="form-group margin-top-15 row">
                                    <label class="control-label col-md-2">
                                        اسم الكتاب
                                    </label>
                                    <div class="col-md-8">
                                        {!! Form::text("setting[book2_title]",(isset($setting['book2_title']))? $setting['book2_title'] :
                                        null,['class'=>'form-control'])!!}
                                    </div>
                                </div>
                                <div class="form-group margin-top-15 row">
                                    <label class="control-label col-md-2">
                                        الصورة
                                    </label>
                                    <div class="col-md-8">
                                        <input class="form-control" type="file" class="file" name="book2_img" />
                                        <br>
                                        @if(isset($setting['book2_img']))
                                        <img src="{{getImage(getSettingValue('book2_img'))}}" width="160" height="60">
                                        @endif
                                    </div>
                                </div>
                                
                                <div class="form-group margin-top-15 row">
                                    <label class="control-label col-md-2">
                                        النص
                                    </label>
                                    <div class="col-md-8">
                                        {!! Form::textarea("setting[book2_txt]",(isset($setting['book2_txt']))? $setting['book2_txt'] :
                                        null,['class'=>'form-control mytextarea', 'style' => 'width: 100%; height: 150px; border: 1px solid
                                        #E3E3E3;border-radius: 4px;color: #565656;padding: 7px 12px;'])!!}
                                    </div>
                                </div>

                                <div class="form-group margin-top-15 row">
                                    <label class="control-label col-md-2">
                                        ملف الكتاب
                                    </label>
                                    <div class="col-md-8">
                                        <input class="form-control" type="file" class="file" name="book2_file" />
                                        <br>
                                        @if(isset($setting['book2_file']))
                                        <a target="_blank" href="{{getImage(getSettingValue('book2_file'))}}" > تحميل </a>
                                        @endif
                                    </div>
                                </div>
                                <div class="form-group margin-top-15 row">
                                    <label class="control-label col-md-2">
                                        نموذج الاجابة
                                    </label>
                                    <div class="col-md-8">
                                        <input class="form-control" type="file" class="file" name="book2_ans_template" />
                                        <br>
                                        @if(isset($setting['book2_ans_template']))
                                        <a target="_blank" href="{{getImage(getSettingValue('book2_ans_template'))}}" > تحميل </a>
                                        @endif
                                    </div>
                                </div>

                            </div>
                            <div class="tab-pane" id="book3" aria-labelledby="book3-tab" role="tabpanel">

                                
                                <div class="form-group margin-top-15 row">
                                    <label class="control-label col-md-2">
                                        اسم الكتاب
                                    </label>
                                    <div class="col-md-8">
                                        {!! Form::text("setting[book3_title]",(isset($setting['book3_title']))? $setting['book3_title'] :
                                        null,['class'=>'form-control'])!!}
                                    </div>
                                </div>
                                <div class="form-group margin-top-15 row">
                                    <label class="control-label col-md-2">
                                        الصورة
                                    </label>
                                    <div class="col-md-8">
                                        <input class="form-control" type="file" class="file" name="book3_img" />
                                        <br>
                                        @if(isset($setting['book3_img']))
                                        <img src="{{getImage(getSettingValue('book3_img'))}}" width="160" height="60">
                                        @endif
                                    </div>
                                </div>
                                
                                <div class="form-group margin-top-15 row">
                                    <label class="control-label col-md-2">
                                        النص
                                    </label>
                                    <div class="col-md-8">
                                        {!! Form::textarea("setting[book3_txt]",(isset($setting['book3_txt']))? $setting['book3_txt'] :
                                        null,['class'=>'form-control mytextarea', 'style' => 'width: 100%; height: 150px; border: 1px solid
                                        #E3E3E3;border-radius: 4px;color: #565656;padding: 7px 12px;'])!!}
                                    </div>
                                </div>

                                <div class="form-group margin-top-15 row">
                                    <label class="control-label col-md-2">
                                        ملف الكتاب
                                    </label>
                                    <div class="col-md-8">
                                        <input class="form-control" type="file" class="file" name="book3_file" />
                                        <br>
                                        @if(isset($setting['book3_file']))
                                        <a target="_blank" href="{{getImage(getSettingValue('book3_file'))}}" > تحميل </a>
                                        @endif
                                    </div>
                                </div>
                                <div class="form-group margin-top-15 row">
                                    <label class="control-label col-md-2">
                                        نموذج الاجابة
                                    </label>
                                    <div class="col-md-8">
                                        <input class="form-control" type="file" class="file" name="book3_ans_template" />
                                        <br>
                                        @if(isset($setting['book3_ans_template']))
                                        <a target="_blank" href="{{getImage(getSettingValue('book3_ans_template'))}}" > تحميل </a>
                                        @endif
                                    </div>
                                </div>

                            </div>
                        </div>

                        <div class="panel-footer">
                            <div class="clearfix">
                                <div class="col-md-12 text-center">
                                    <button type="submit" class="btn btn-success">
                                        {{__('translation.save')}}
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </form>
        </div>
    </div>
</div>
@endsection

@section('script')

<script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false&libraries=places&key=AIzaSyDJ4bLvLsQ35BAibm-rrEd8QUs1uxB2NAc&language=ar"></script>
    <script type="text/javascript">
        var map;
        var marker;
        var autocomplete;
        var geocoder = new google.maps.Geocoder();

        function geocodePosition(pos) {
            geocoder.geocode({
                latLng: pos
            }, function(responses) {
                if (responses && responses.length > 0) {
                    updateMarkerAddress(responses[0].formatted_address);
                } else {
                    updateMarkerAddress('Cannot determine address at this location.');
                }
            });
        }

        function updateMarkerStatus(str) {
            document.getElementById('markerStatus').innerHTML = str;
        }

        function updateMarkerPosition(latLng) {
            document.getElementById('info').innerHTML = [
                latLng.lat(),
                latLng.lng()
            ].join(', ');
            document.getElementById('lat').value = latLng.lat();
            document.getElementById('lng').value = latLng.lng();
        }

        function updateMarkerAddress(str) {
            document.getElementById('autocomplete').value = str;
        }

        function initialize() {
            var latLng = new google.maps.LatLng(parseFloat('{{getSettingValue("latitude") ?? "24.5166623"}}'), parseFloat('{{getSettingValue("longitude") ?? "46.77485"}}'));
            map = new google.maps.Map(document.getElementById('mapCanvas'), {
                zoom: 8,
                center: latLng,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            });
            marker = new google.maps.Marker({
                position: latLng,
                title: 'Point A',
                map: map,
                draggable: true
            });

            // Update current position info.
            updateMarkerPosition(latLng);
            geocodePosition(latLng);

            // Add dragging event listeners.
            google.maps.event.addListener(marker, 'dragstart', function() {
                updateMarkerAddress('Dragging...');
            });

            google.maps.event.addListener(marker, 'drag', function() {
                updateMarkerStatus('Dragging...');
                updateMarkerPosition(marker.getPosition());
            });

            google.maps.event.addListener(marker, 'dragend', function() {
                updateMarkerStatus('Drag ended');
                geocodePosition(marker.getPosition());
            });

            // Initialize autocomplete.
            var inputField = document.getElementById('autocomplete');
            autocomplete = new google.maps.places.Autocomplete(inputField);
            google.maps.event.addListener(
                autocomplete, 'place_changed',
                function() {
                    var place = autocomplete.getPlace();
                    if (place.geometry) {
                        var location = place.geometry.location;
                        map.panTo(location);
                        map.setZoom(12);
                        marker.setMap(map);
                        marker.setPosition(location);
                        updateMarkerPosition(marker.getPosition());
                    }
                });

            google.maps.event.addListener(map, 'idle', function() {
                autocomplete.setBounds(map.getBounds());
            });
        }
        // Updates autocomplete object.
        function updateOptions() {
            // Set types, if any.
            var desired_types = [];
            var types = document.controls.type;
            for (var i = 1; i < types.length; i++) {
                if (types[i].checked) {
                    desired_types = [types[i].value];
                    break;
                }
            }
            autocomplete.setTypes(desired_types);

            // Set country, if any.
            var country = document.controls.country.value;
            if (country) {
                autocomplete.setComponentRestrictions({
                    'country': country
                });
            } else {
                autocomplete.setComponentRestrictions({});
            }
        }

        // Onload handler to fire off the app.
        google.maps.event.addDomListener(window, 'load', initialize);
    </script>
@endsection