@extends('includes.main')

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

        .nav nav-tabs{
            padding:1rem;
        }

        .companyLogos{
            min-height: 100vh;
        }

        .logoViewer{
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .companyLogo{
            padding: 3em;
            width: 100%;
        }

        .companyBtn{
            background: #70B600;
            box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.16);
            border-radius: 12px;
            color: white;
            padding: 12px;
            width: calc(1/30vw);
            font-size: 20px;
            font-style: normal;
            font-weight: 600;
            line-height: 26px;
            letter-spacing: 0px;
            text-align: center;

        }

        .companyBtn:hover{
            color: white;
            -webkit-box-shadow: 0px 0px 14px -2px rgba(0,0,0,0.75);
            -moz-box-shadow: 0px 0px 14px -2px rgba(0,0,0,0.75);
            box-shadow: 0px 0px 14px -2px rgba(0,0,0,0.75);
        }

        .nav-pills .nav-item{
            background-color: #E2E2E2;
        }

        .nav-pills .nav-item{
            background-color: #E2E2E2;
        }

        .nav-pills .nav-item .active{
            background-color: #222222;
            border-radius: 10px 10px 0px 0px;
        }

        .tab-content{
            margin-top: 3em;
        }

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

        .selection_completed_text{
            margin-top: 2em;
        }

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

<div class="card m-b-20 ">
    <div class="card-body">
        @if(!isset($_REQUEST['company']))
        <div class="row companyLogos">

                <div class="col-md-6">
                    <a href="{{ route('pdf.create',['company'=>1]) }} " >
                        <div data-companyId="1" class="jumbotron text-center logoViewer" >
                            <img class="companyLogo"  src="{{ asset('myAssets/images/Logo_Roundtrips.png') }}">
                            <a class="btn companyBtn" href="{{ route('pdf.create',['company'=>1]) }}" role="button">Add New PDF</a>
                        </div>
                    </a>
                </div>

                <div class="col-md-6">
                    <a href="{{ route('pdf.create',['company'=>2]) }} " >
                        <div data-companyId="1" class="jumbotron text-center logoViewer" >
                            <img class="companyLogo"  src="{{ asset('myAssets/images/Logo_TagesFahrten_Global.png') }}">
                            <a class="btn companyBtn" href="{{ route('pdf.create',['company'=>2]) }}" role="button">Add New PDF</a>
                        </div>
                    </a>
                </div>

        </div>
        @else
        <div class="row pb-2 mt-3 mainContent">
            <div class="col-md-6 col-sm-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-12">
                            <label for="exampleInputEmail1">Categoies</label>
                            <br/>
                            <select class="js-example-basic-multiple select2" name="categories[]" multiple="multiple">
                                @if(isset($categories))
                                    @foreach($categories as $category)
                                     <option value="{{$category->idcategory}}">{{$category->full_breadcrump}}</option>
                                    @endforeach
                                @endif
                            </select>
                            <small id="catgoriesHelp" class="form-text text-muted">You can select one or multiple categories.</small>
                        </div>

                        <div class="form-group col-md-6">
                            <label for="price">Price</label>
                            <input class="form-control"  id="price" name="price" placeholder="0.00 $"/>
                            <span id="price_error" class="text-danger"></span>
                        </div>
                        <div class="form-group col-md-3">
                            <label for="price">Priority</label>
                            <input class="form-control" type="number" id="priority" name="priority" placeholder="Priority number"/>
                            <span id="priority_error" class="text-danger"></span>
                        </div>

                        <div class="col-md-12">
                            <div class="row">
                                <div class="col-md-6  text-center"  >
                                    <div  class="jumbotron fileUploaders jumbotron-fluid"  onclick="$('#image').click()">
                                        <div  class="container">
                                            <img id="preview" src="{{asset('myAssets/images/300.png')}}" width="100" height="100" >

                                        <p  class="lead ">300px X 300px</p>
                                            <button onclick="event.preventDefault();event.stopPropagation();$('#image').click()" class="btn btn-secondary">Upload Image</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>


                        <div class="col-md-12">
                            <br/>
                            <ul class="nav nav-pills">
                                <li class="nav-item">
                                  <a class="nav-link  active" data-toggle="pill" href="#english">English &nbsp; <img src="{{ asset('myAssets/images/english_small.png') }}"><a>
                                </li>
                                <li class="nav-item">
                                  <a class="nav-link" data-toggle="pill" href="#german">German  &nbsp;  <img src="{{ asset('myAssets/images/german_small.png') }}"></a>
                                </li>
                              </ul>

                              <div class="tab-content">
                                <div id="english" class="tab-pane active row">
                                    <div class="form-group col-md-12">
                                        <label for="heading">Heading</label>
                                        <textarea class="form-control" id="heading_en" name="heading_en" placeholder="Enter heading in english"></textarea>
                                        <span id="heading_error_en" class="text-danger"></span>
                                    </div>
                                    <div class="form-group col-md-12">
                                        <label for="sub_heading_en">Sub Heading</label>
                                        <textarea class="form-control" id="sub_heading_en" rows="10"  name="sub_heading_en" placeholder="Enter sub heading in english"></textarea>
                                        <span id="sub_error_en" class="text-danger"></span>
                                    </div>

                                    <div class="form-group col-md-12">
                                        <label for="pricing_text_en">Pricing Text</label>
                                        <input class="form-control" id="pricing_text_en"  name="pricing_text_en" placeholder="Eg: Per Person"/>
                                        <span id="error_pricing_text_en" class="text-danger"></span>
                                    </div>

                                    <div class="col-md-12 text-center">
                                        <div class="jumbotron jumbotron-fluid fileUploaders"  onclick="$('#english_file').click()">
                                        <div class="container">
                                            <img src="{{ asset('myAssets/images/english_large.png') }}">
                                            <p class="lead selection_pending_text selection_pending_text_english_file">Click here to upload PDF</p>
                                            <button onclick="event.preventDefault();event.stopPropagation();$('#english_file').click()" class="btn btn-secondary selection_pending_text selection_pending_text_english_file">Upload PDF</button>
                                            <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>
                                        </div>
                                    </div>

                                </div>
                                <div id="german" class="tab-pane fade row">

                                    <div class="form-group col-md-12">
                                        <label for="heading_de">Heading</label>
                                        <textarea class="form-control" id="heading_de" name="heading_de" placeholder="Enter heading in german"></textarea>
                                        <span id="heading_error_de" class="text-danger"></span>
                                    </div>

                                    <div class="form-group col-md-12">
                                        <label for="sub_heading_de">Sub Heading</label>
                                        <textarea class="form-control" id="sub_heading_de" rows="10"  name="sub_heading_de" placeholder="Enter sub heading in german"></textarea>
                                        <span id="sub_error_de" class="text-danger"></span>
                                    </div>

                                    <div class="form-group col-md-12">
                                        <label for="pricing_text_de">Pricing Text</label>
                                        <input class="form-control" id="pricing_text_de" name="pricing_text_de" placeholder="Eg: Per Person"/>
                                        <span id="error_pricing_text_de" class="text-danger"></span>
                                    </div>

                                    <div class="col-md-12  text-center"  >
                                        <div class="jumbotron jumbotron-fluid fileUploaders"  onclick="$('#german_file').click()">
                                            <div class="container">
                                                <img src="{{ asset('myAssets/images/german_large.png') }}">
                                              <p  class="lead selection_pending_text selection_pending_text_german_file">Click here to upload PDF</p>
                                                <button onclick="event.preventDefault();event.stopPropagation();$('#german_file').click()" class="btn btn-secondary selection_pending_text selection_pending_text_german_file">Upload PDF</button>
                                              <p id="selection_completed_text_german_file" class="lead hide selection_completed_text"><i class="fa fa-check-circle text-success"></i> Uploaded<p>
                                            </div>
                                          </div>
                                    </div>
                                </div>
                        </div>

                    </div>
                    <div class="col-md-12 form-group">
                        <input type="file" style="display:none;" id="english_file" accept="application/pdf" name="english_file">
                        <input type="file" style="display:none;" id="german_file" accept="application/pdf" name="german_file">
                        <input type="file" style="display:none;" id="image" accept="image/*" name="image">
                        <button id="saveBtn" type="submit" class="btn btn-lg"> <i class="fa fa-spinner fa-spin" style="display: none"  id="uploadingIcon"></i> Submit</button>
                    </div>

                </form>

            </div>
        </div>
        @endif
    </div>
</div>



@endsection
@section('pageSpecificScript')
    <script language="JavaScript" type="text/javascript">
    let table;
      $(document).ready(function () {

        $('input[type="file"]').change(function(e){
            let id = this.id;
            if(e.target.files.length){
                $('.selection_pending_text_'+id).addClass('hide');
                $('#selection_completed_text_'+id).removeClass('hide');
            }
            else{
                $('.selection_pending_text_'+id).removeClass('hide');
                $('#selection_completed_text_'+id).addClass('hide');
            }
        });

        $('#saveForm').on('submit', function(event){
            event.preventDefault();

                clearAlerts(); //initialize alert and variables
                $('#saveBtn').attr('disabled',true);//disable button till ajax response for prevent form double submit
                $('#uploadingIcon').show();

                $.ajax({
                    url: "{{route('pdf.store')}}",
                    type: 'POST',
                    data:  new FormData(this),
                    contentType: false,
                    cache: false,
                    processData:false,
                    success: function (data) {
                        $('#uploadingIcon').hide();

                        showControllerErrors(data);
                        if (data.success != null) {
                            clearAll();
                            $('#image').val("");
                            $('#preview').attr('src',"{{asset('myAssets/images/300.png')}}");
                            showSuccess(data.success);//show success alert
                            resetFileUpload();
                        }
                        $('#saveBtn').attr('disabled',false);//reactivate button

                    },
                    error: function (data) {
                        $('#saveBtn').attr('disabled',false);//reactivate button
                        $('#uploadingIcon').hide();

                        showRequestErrors(data);
                    }
                })
        });


        $('#heading_en').on('keyup',function(){
            var keys = this.value.length;
            if(keys > 250){
                $('#heading_error_en').html('Heading should be lower than 250 characters');
            }
            else{
                $('#heading_error_en').html('');
            }
        });

        $('#sub_heading_en').on('keyup',function(){
            var keys = this.value.length;
            if(keys > 1000){
                $('#sub_error_en').html('Sub heading should be lower than 1000 characters');
            }
            else{
                $('#sub_error_en').html('');
            }
        });

        $('#heading_de').on('keyup',function(){
            var keys = this.value.length;
            if(keys > 250){
                $('#heading_error_de').html('Heading should be lower than 250 characters');
            }
            else{
                $('#heading_error_de').html('');
            }
        });


        $('#sub_heading_de').on('keyup',function(){
            var keys = this.value.length;
            if(keys > 1000){
                $('#sub_error_de').html('Sub heading should be lower than 1000 characters');
            }
            else{
                $('#sub_error_de').html('');
            }
        });
        

        $("#image").change(function(){
            readURL(this);
        });

    });

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

                reader.onload = function (e) {
                    $('#preview').attr('src', e.target.result);
                }

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


    function resetFileUpload(){
        $('.selection_pending_text').removeClass('hide');
        $('.selection_completed_text').addClass('hide');
    }

    </script>
@endsection