@extends('layouts.main')

@section('title', 'Other Settings')

@section('breadcrumb')
  <!-- Page-Title -->
  <div class="row">
      <div class="col-sm-12">
          <div class="page-title-box">
              <h4 class="page-title">Other Settings</h4>
              <ol class="breadcrumb float-right">
                  <li class="breadcrumb-item"><a href="/">Home</a></li>
                  <li class="breadcrumb-item active">Settings</li>
                  <li class="breadcrumb-item active">Other Settings</li>
              </ol>
              <div class="clearfix"></div>
          </div>
      </div>
  </div>

@endsection

@section('content')

    <div class="content-body">
        <div class="row" id="setting-cards">
        <div class="clearfix"></div>

        @include('flash::message')

        <div class="clearfix"></div>
        @if(\App\Models\GmpRoles::canSeeLink([\App\Models\GmpRoles::LOGO]))
          <div class="col-md-6">
              <div class="card bg-card">
                  <div class="card-header">
                      <h4 class="card-title m-t-5">Company Logo</h4>
                  </div>
                  <div class="card-body" style="min-height:220px;">
                      <div class="card-block">
                          <form class="form logo_upload_form" action="{{ url('/settings/other-settings-logo') }}" method="POST">
                              {{ csrf_field() }}
                              <div class="form-body">
                                  <div class="row">
                                    <div class="image_source col-md-6">
                                        <div class="col-md-12 form-group">
                                          @if($account->logo)
                                              <img style="max-width:100%;max-height:120px;" src="/update_files/{{$account->logo}}" alt="">
                                          @else
                                            <img style="max-width:100%;" src="/theme/company-logo.png" alt="">
                                          @endif
                                        </div>

                                    </div>

                                      <div class="col-md-16">
                                        <div class="form-group">
                                            <input class="inputfile" name="file" type="file" id="files" accept="image/jpeg, image/png" required="required">
                                              {!! Form::label('files', 'No file selected',['class' => 'control-label']) !!}
                                            <div>
                                            <span class="sm-size">JPEG or PNG formats only. The maximum file size is 4Mb</span>
                                            </div>
                                            <button class="btn btn-success logo_upload_btn" type="submit" name="button">Upload</button>
                                        </div>
                                      </div>
                                      <!-- <div class="col-md-12">
                                        <div class="form-group col-md-12">
                                             <button class="btn btn-primary logo_upload_btn" type="submit" name="button">Upload</button>
                                        </div>
                                      </div> -->
                                  </div>

                              </div>
                          </form>
                      </div>
                  </div>
              </div>
          </div>
        @endif
        {{--@if(\App\Models\GmpRoles::canSeeLink([\App\Models\GmpRoles::ESCALATION]))
            <div class="col-md-6">
                <div class="card bg-card">
                    <div class="card-header">
                        <h4 class="card-title m-t-5">Escalation Mechanism</h4>
                    </div>
                    <div class="card-body" style="min-height:220px;">
                        <div class="card-block">
                            <form autocomplete="off" id="form-escalation"  class="form" action="{{ url('/settings/other-settings') }}" method="POST">
                                {{ csrf_field() }}
                                <div class="form-body">
                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <div class="custom-control custom-checkbox">
                                                          <input name="turn_escalation" type="checkbox" {{($account->turn_escalation=='Yes')?'checked="checked"':''}}  value="on" class="custom-control-input" id="customCheck1">
                                                          <label class="custom-control-label" for="customCheck1">Turn Escalation On/Off</label>
                                                </div>

                                            </div>
                                        </div>

                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
          @endif--}}
        </div>
    </div>
    <style type="text/css">
        .card-title{
              margin-bottom: 0;
              color:#686b70;
              text-transform: uppercase;
        }
        button.btn{
          width:155px;
        }
    </style>

      <div id="file-catch" class="modal-demo">
            <div class="custom-modal-text" style="overflow:hidden;">
               <p class="text-center info-exc"></p>
               <button type="button" class="btn-sm btn-success btn-onf-ex" onclick="Custombox.modal.close();">Close</button>
            </div>
      </div>

      <style type="text/css">

          label[for="files"]::after, label[for="files"]::before{
              top: -50px;
          }
          .btn-onf-ex{
            float: none;
            margin: 0px auto;
            display: table;
            cursor: pointer;
          }
          .sm-size {
            display:block;
            font-size: 12px;
            width: 165px;
            margin: 25px 0;
            opacity: .5;
          }
          .info-exc{
            padding-top: 30px;
            margin-bottom: 22px;
          }
      </style>
@endsection

@section('scripts')
  <script type="text/javascript">
      $(document).on('submit','.logo_upload_form',function(e){
        e.preventDefault();
        var formData = new FormData();
        formData.append('_token', $('meta[name="csrf-token"]').attr('content'));
        formData.append('file', $('.logo_upload_form input[type=file]')[0].files[0]);

        $.ajax({
            url: '/settings/other-settings-logo',
            data:formData,
            type: "POST",
            dataType: "json",
            contentType: false,
             processData: false,
            success: function (resp) {
               if(resp.status){
                 $('.image_source').empty();
                 $('.image_source').html('<div class="col-md-12 form-group"><img style="max-width:100%;max-height:120px;" src="'+resp.file+'" alt=""></div>');
               }else{
                 $('.info-exc').text(resp.message);
                 var modal_file = new Custombox.modal({
                               content: {
                                 effect: 'fadein',
                                 target: '#file-catch'
                               }
                             });
                             modal_file.open();
               }
            }
        });
      });

      $(document).on('change','input[name="turn_escalation"]',function(e){
        e.preventDefault();
        var formData = new FormData();
        formData.append('_token', $('meta[name="csrf-token"]').attr('content'));
            if($(this).is(":checked")) {
               formData.append('turn_escalation', 'on');
           }
          $.ajax({
              url: '{{ url('/settings/other-settings') }}',
              data:formData,
              type: "POST",
              dataType: "json",
              contentType: false,
               processData: false,
              success: function (resp) {

              }
          });
      });
  </script>
@endsection