@extends('includes.main')

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

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

        .companyLogos{
            min-height: 100vh;
        }

        .uploadComponents{
            display: none;
        }

        .fileUploaders{
            cursor: pointer;
            color: rgba(78, 75, 75, 0.267);
        }

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

        .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
        }
    </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-6">

                <form id="updateForm"  enctype="multipart/form-data">
                    {!! method_field('PUT') !!}

                    <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[]" id="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" value="{{$pdf->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" value="{{$pdf->priority}}"  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('storage/uploads/images/'.$pdf->image) }}" 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">
                            <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">{{$pdf->heading_en}}</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">{{$pdf->sub_en}}</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" value="{{$pdf->small_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">
                                        <div class="container">
                                            <img src="{{ asset('myAssets/images/english_large.png') }}">
                                            <p id="selection_pending_text_english_file" class="lead selection_pending_text">Upload your english language document here</p>
                                            <p id="selection_completed_text_english_file" class="lead hide selection_completed_text updated_en"><i class="fa fa-check-circle text-info"></i> Updated<p>

                                            <p id="selection_initialized_text_english_file" class="lead selection_completed_text uploadComponents uploadComponents_en  existIcon fileExistComponent_en"><i class="fa fa-check-circle text-success"></i> File Exist </p>
                                            <button onclick="event.preventDefault();$('#english_file').click()" class="btn btn-info btn-sm uploadComponents uploadComponents_en fileExistComponent_en">Change Existing File</button>
                                            <button onclick="event.preventDefault();deleteImage('en')" class="btn btn-danger btn-sm uploadComponents uploadComponents_en fileExistComponent_en">Delete Existing File</button>

                                            <p id="selection_initialized_text_english_file" class="lead noFile selection_completed_text uploadComponents uploadComponents_en fileEmptyComponent_en"><i class="fa fa-check-circle text-secondary"></i> No file<p>
                                            <button id="uploadBtn_en"  onclick="event.preventDefault();$('#english_file').click()" class="btn btn-info btn-sm uploadComponents_en  uploadComponents fileEmptyComponent_en">Upload New File</button>

                                        </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">{{$pdf->heading_de}}</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">{{$pdf->sub_de}}</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" value="{{$pdf->small_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">
                                            <div class="container">
                                                <img src="{{ asset('myAssets/images/german_large.png') }}">
                                              <p id="selection_pending_text_german_file" class="lead election_pending_text">Upload your german language document here</p>
                                              <p id="selection_completed_text_german_file" class="lead hide selection_completed_text updated_de"><i class="fa fa-check-circle text-info"></i> Updated<p>

                                              <p style="display: inline" id="selection_initialized_text_german_file" class="lead  selection_completed_text uploadComponents uploadComponents_de existIcon fileExistComponent_de"><i class="fa fa-check-circle text-success"></i> File Exist<p>
                                              <button onclick="event.preventDefault();$('#german_file').click()" class="btn btn-info btn-sm uploadComponents uploadComponents_de  fileExistComponent_de">Change Existing File</button>
                                              <button onclick="event.preventDefault();deleteImage('de')" class="btn btn-danger btn-sm uploadComponents uploadComponents_de  fileExistComponent_de">Delete Existing File</button>

                                              <p id="selection_initialized_text_german_file" class="lead noFile selection_completed_text uploadComponents uploadComponents_de  fileEmptyComponent_de"><i class="fa fa-check-circle text-secondary"></i> No file<p>
                                              <button id="uploadBtn_de" onclick="event.preventDefault();$('#german_file').click()" class="btn btn-secondary btn-sm uploadComponents_de  uploadComponents fileEmptyComponent_de">Upload New File</button>

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


                    </div>
                    <div class="col-md-12 form-group">
                        <input type="file" style="display:none;" data-lang="en" id="english_file" accept="application/pdf" name="english_file">
                        <input type="file" style="display:none;" data-lang="de" 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>
    </div>
</div>



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

        selectCatagories();

        @if($pdf->path_de != null)
            showUploadSection(1,'de');
        @else
            showUploadSection(0,'de');
        @endif

        @if($pdf->path_en != null)
            showUploadSection(1,'en');
        @else
            showUploadSection(0,'en');
        @endif

        $('input[type="file"]').change(function(e){
            let lang = $(this).data('lang');
            if(e.target.files.length){
                showUpdated(lang);
            }
            else{
                showInitialFileComponents(lang);

            }
        });

        $('#updateForm').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.update',['pdf'=>$pdf->idpdf])}}",
                    type: 'POST',
                    data:  new FormData(this),
                    contentType: false,
                    cache: false,
                    processData:false,
                    success: function (data) {
                        $('#uploadingIcon').hide();

                        showControllerErrors(data);
                        if (data.success != null) {
                            showSuccess(data.success);//show success alert
                           window.location.href = "{{ route('pdf.index',['company'=>$pdf->idcompany]) }}";
                        }
                        $('#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 selectCatagories(){
        $.ajax({
            url: '{{ route('pdf.getCategories', ['pdf'=>$pdf->idpdf] ) }}',
            type: 'POST',
            success: function (data) {
                let categories = [];
                $.each(data, function (key, value) {
                    // categories.push(value.category.idcategory);
                    $('#categories option[value=' + value.category.idcategory + ']').attr('selected', true);
                });
                $('#categories').trigger('change');
                // $('#categories').val([categories]).trigger('change');
            },
            error: function (data) {
                showRequestErrors(data);
            }
        });
    }

    function deleteImage(language){

        swal.fire({
            title: '{{__('common.Delete')}}?',
            icon: 'warning',
            showCancelButton: true,
            confirmButtonText: `Delete`,
            confirmButtonClass: `deleteBtn`,
            buttonsStyling: true,
            }).then((result) => {
                /* Read more about isConfirmed, isDenied below */
            if (result.isConfirmed) {
                $.ajax({
                    url: '{{ route('pdf.deletePdfFile', ['pdf'=>$pdf->idpdf] ) }}',
                    data:{language:language},
                    type: 'POST',
                    success: function (data) {
                        changeInitialClass(language);
                        showInitialFileComponents(language);
                    },
                    error: function (data) {
                        showRequestErrors(data);
                    }
                });
            } else if (result.isDenied) {
                Swal.fire('Process terminated', '', 'info')
            }
            });


    }

    function showUploadSection(isExist,lang){

        if(isExist){
            $('.fileExistComponent_'+lang).show().addClass('initializeShow_'+lang);
            $('.fileEmptyComponent_'+lang).hide().addClass('initializeHide_'+lang);
        }
        else{
            $('.fileEmptyComponent_'+lang).show().addClass('initializeShow_'+lang);
            $('.fileExistComponent_'+lang).hide().addClass('initializeHide_'+lang);

        }

    }

    function showUpdated(lang){

        $('.uploadComponents_'+lang).hide();
        $('.updated_'+lang).show();
        $('#uploadBtn_'+lang).show();

    }

    function showInitialFileComponents(lang){

        $('.uploadComponents_'+lang).hide();
        $('.updated_'+lang).hide();
        $('.initializeShow_'+lang).show();

    }

    function changeInitialClass(lang){

        $( ".initializeShow_"+lang ).each(function() {
            $( this ).removeClass( "initializeShow_"+lang );
        });

        $( ".fileEmptyComponent_"+lang ).each(function() {
            $( this ).addClass( "initializeShow_"+lang );
        });
    }

    </script>
@endsection