@extends('includes.main')

@section('pageSpecificStyles')
    <style type="text/css">
        .fileUploaders{
            cursor: pointer;
            width: 100%;
            height: 440px;
            color: rgba(78, 75, 75, 0.267);
        }

        #fileUploader {
            background: url("{{ isset($settings) ? $settings->getGeneralImage() : ''}}") no-repeat center center;
            -webkit-background-size: contain;
            -moz-background-size: contain;
            -o-background-size: contain;
            background-size: contain;

        }

        #fileWrapper{
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            background-color: #E9ECEF;
            padding: 2em;
        }

        #saveBtn{
            background: #70B600;
            box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.16);
            border-radius: 12px;
            color: white;
            width:150px;
        }

    </style>
@endsection
@section('pageSpecificContent')

<div class="card m-b-20 ">
    <div class="card-body">

        <div class="row pb-2 mt-3">
            <div class="col-md-12">

                <form id="saveForm"  enctype="multipart/form-data">
                    <input type="hidden" name="company" value="{{ isset($_REQUEST['company']) ? $_REQUEST['company']  : '' }}" class="noClear" id="selectedCompany">
                    <div class="row">

                        <div class="form-group col-md-3 ">
                            <div class="row">
                                <div class="form-group col-md-12 mb-5">
                                <h4 style="font-weight: 700;"> <img src="{{ asset('myAssets/images/english_view.png') }}"> General Content English</h4>
                                </div>
                                <div class="form-group col-md-12">
                                    <label for="content_first_en"> 1st Paragragh</label>
                                    <textarea class="form-control"  placeholder="Enter some content in englush language"  id="content_first_en" name="content_first_en" rows="7">{{ isset($settings) && $settings->content_first_en != null ? $settings->content_first_en  : '' }}</textarea>
                                </div>

                                <div class="form-group col-md-12">
                                    <label for="content_second_en">2nd Paragragh</label>
                                    <textarea class="form-control"  placeholder="Enter some content in englush language"  id="content_second_en" name="content_second_en" rows="7">{{ isset($settings) && $settings->content_second_en != null ? $settings->content_second_en  : '' }}</textarea>
                                </div>

                                <div class="form-group col-md-12">
                                    <label for="contact_en">Contact Informations</label>
                                    <textarea class="form-control" placeholder="Enter some content in english language" id="contact_en" name="contact_en" rows="6">{{ isset($settings) && $settings->contact_en != null ? $settings->contact_en  : '' }}</textarea>
                                </div>
                            </div>
                        </div>

                        <div class="form-group col-md-3 mx-2">
                            <div class="row">

                                <div class="form-group col-md-12 mb-5">
                                    <h4 style="font-weight: 700;"> <img src="{{ asset('myAssets/images/german_view.png') }}"> General Content German</h4>
                                </div>

                                <div class="form-group col-md-12">
                                    <label for="content_de">1st Paragragh</label>
                                    <textarea class="form-control" placeholder="Enter some content in german language" id="content_first_de" name="content_first_de" rows="7">{{ isset($settings) && $settings->content_first_de != null ? $settings->content_first_de  : '' }}</textarea>
                                </div>

                                <div class="form-group col-md-12">
                                    <label for="content_de">2nd Paragragh</label>
                                    <textarea class="form-control" placeholder="Enter some content in german language" id="content_second_de" name="content_second_de" rows="7">{{ isset($settings) && $settings->content_second_de != null ? $settings->content_second_de  : '' }}</textarea>
                                </div>

                                <div class="form-group col-md-12">
                                    <label for="contact">Contact Informations</label>
                                    <textarea class="form-control" placeholder="Enter some content in german language" id="contact_de" name="contact_de" rows="6">{{ isset($settings) && $settings->contact_de != null ? $settings->contact_de  : '' }}</textarea>
                                </div>

                            </div>
                        </div>

                        <div class="form-group col-md-5">
                            <div class="row">

                                <div class="form-group col-md-12  mb-5">
                                    <h4 style="font-weight: 700;"> General Image</h4>
                                </div>

                                <div id="fileWrapper" class="col-md-12 mt-4">
                                    <div id="fileUploader" class="jumbotron jumbotron-fluid fileUploaders"  onclick="$('#image').click()">
                                        {{-- <h1 class="display-4">Background Image</h1> --}}
                                        {{-- <p id="selection_pending_text_english_file" class="lead selection_pending_text">Click here to upload your background image</p> --}}
                                        {{-- <p id="selection_completed_text_english_file" class="lead hide selection_completed_text"><i class="fa fa-check-circle text-success"></i> Uploaded<p> --}}
                                    </div>
                                    <p>Click image or button to upload your image<p>
                                    <button onclick="event.preventDefault();event.stopPropagation();$('#image').click()" class="btn btn-secondary">Upload Image</button>
                                </div>

                            </div>

                        </div>
                    </div>
                    <div class="row">
                    <div class="col-md-12 form-group">
                        <input type="file" style="display:none;" id="image" accept="image/*"  onchange="readURL(this);"  name="image">
                        <button id="saveBtn" type="submit" style="margin: 0px;"  class="btn btn-lg"> <i class="fa fa-spinner fa-spin" style="display: none;"  id="uploadingIcon"></i> Submit</button>
                    </div>
                    </div>

                </form>

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



@endsection
@section('pageSpecificScript')
    <script language="JavaScript" type="text/javascript">
    setBackgroundImage("http://127.0.0.1:8000/storage/uploads/settings/image/5f61dd5230216.jpg");
      $(document).ready(function () {
        $('#saveForm').on('submit', function(event){
            event.preventDefault();
                $('#saveBtn').attr('disabled',true);//disable button till ajax response for prevent form double submit
                $('#uploadingIcon').show();

                //initialize alert and variables
                clearAlerts();
                //initialize alert and variables end

                $.ajax({
                    url: "{{route('setting.store')}}",
                    type: 'POST',
                    data:  new FormData(this),
                    contentType: false,
                    cache: false,
                    processData:false,
                    success: function (data) {
                        $('#saveBtn').attr('disabled',false);//reactivate button
                        $('#uploadingIcon').hide();
                        showControllerErrors(data);
                        if (data.success != null) {
                            showSuccess(data.success);//show success alert
                        }
                    },
                    error: function (data) {
                        $('#saveBtn').attr('disabled',false);//reactivate button
                        $('#uploadingIcon').hide();
                        showRequestErrors(data);
                    }
                })
        });

    });

    function readURL(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();

            reader.onload = function (e) {
                $('#fileUploader')
                .css('background', 'url("' +  e.target.result + '")')
                .css('background-repeat', 'no-repeat')
                .css('background-position', 'center')
                .css('background-size', 'contain');
            };

            reader.readAsDataURL(input.files[0]);
        }
    }

    function setBackgroundImage(url){
        $('#fileUploader')
        .css('background', 'url("' +  url + '")')
        .css('background-repeat', 'no-repeat')
        .css('background-position', 'center')
        .css('background-size', 'contain');
    }

    </script>
@endsection