@extends('admin.layout.master')

@section('content')

<style>
      /* The message box is shown when the user clicks on the password field */
#message {
  display:none;
  background: #f1f1f1;
  color: #000;
  position: relative;
  padding: 10px;
  margin-top: 10px;
}

#message p {
    padding: 0px 10px;
    font-size: 14px;
}

/* Add a green text color and a checkmark when the requirements are right */
.valid {
  color: green;
}

.valid:before {
  position: relative;
  left: -10px;
  content: "✔";
}

/* Add a red text color and an "x" when the requirements are wrong */
.invalid {
  color: red;
}

.invalid:before {
  position: relative;
  left: -10px;
  content: "✖";
}
</style>
    <!-- Content Header (Page header) -->
<div class="content-header">
    <div class="container-fluid">
        <div class="row mb-2">
            <div class="col-sm-6">
                <h1 class="m-0">Detail - {{ $SubscriberList->name }}</h1>
            </div><!-- /.col -->

        </div><!-- /.row -->
    </div><!-- /.container-fluid -->
</div>
<!-- /.content-header -->

<!-- Main content -->
<section class="content">
    <div class="container-fluid">
        @if ($errors->any())
            <div class="alert alert-danger">
                <ul>
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif
        <div class="row">
            <div class="col-md-12">
                <div class="card card-primary">

                    <div class="card-header">
                        <h3 class="card-title">Detail</h3>
                    </div>

                    <div class="row mt-2 p-2">
                        <div class="col-md-1">
                            <p class="ml-3" style="font-size:22px; font-weight:700;">Name</p>
                        </div>
                        <div class="col-md-4">
                            <p class="ml-3" style="font-size:22px; font-weight:700;">{{ $SubscriberList->name   }}</p>
                        </div>
                    </div>

                    <div class="row mt-2 p-2">
                        <div class="col-md-1">
                            <p class="ml-3 mt-2">Description</p>
                        </div>
                        <div class="col-md-4">
                            <p class="ml-3 mt-2"><span>{{ !empty($SubscriberList->description) ? $SubscriberList->description : "no description"   }}</span>  </p>
                        </div>
                    </div>

                    <div class="row mt-2 p-2">
                        <div class="col-md-1">
                            <p class="ml-3 mt-2">Subscribers</p>
                        </div>
                        <div class="col-md-4">
                            <p class="ml-3 mt-2"><span><b>{{ $subscriber_subscriber_list_count   }}</b></span>  Subscribers</p>
                        </div>
                    </div>
                    
                    
                    <div class="row mt-2 ml-2 mb-2">
                    
                        <div class="col-12 col-sm-6 col-md-2 mt-4">
                            <p class="ml-3"><span style="font-size:22px; font-weight:700;"> 7,979 </span> Mails sent </p>
                        </div>
                        
                        <div class="col-12 col-sm-6 col-md-2">
                            <div class="col-6 text-center">
                                <input type="text" class="knob" data-readonly="true" value="35" data-width="80" data-height="80" data-fgColor="#03458f">
                                <div class="text-black">open rate</div>
                            </div>
                        </div>
                    
                    
                        <div class="col-12 col-sm-6 col-md-2">
                            <div class="col-6 text-center">
                                <input type="text" class="knob" data-readonly="true" value="57" data-width="80" data-height="80" data-fgColor="#03458f">
                                <div class="text-black">click rate</div>
                            </div>
                        </div>
                    
                    
                        <div class="col-12 col-sm-6 col-md-2">
                            <div class="col-6 text-center">
                                <input type="text" class="knob" data-readonly="true" value="2" data-width="80" data-height="80" data-fgColor="#03458f">
                                <div class="text-black">unsubscribe rate</div>
                            </div>
                        </div>

                        <div class="col-12 col-sm-6 col-md-2">
                            <div class="col-6 text-center">
                                <input type="text" class="knob" data-readonly="true" value="0" data-width="80" data-height="80" data-fgColor="#03458f">
                                <div class="text-black">bounce rate</div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<script src="{{ asset('assets/admin') }}/dist/js/jquery.knob.min.js"></script>
<script>
    $(function () {

        $('#subscriber_id').select2({
                theme: 'bootstrap4',
                placeholder: "Please select Subscriber",
            });

      $('#subscriberListAddForm').validate({
          rules: {

              name: {
                  required: true,
              },
              "subscriber_id[]": {
                  required: true,
              },
             
          },
          messages: {

                name: {
                  required: "Please enter a name"
                },
                "subscriber_id[]": {
                  required: "Please select a subscriber"
                },
                

          },
          errorElement: 'span',
          errorPlacement: function (error, element) {
              error.addClass('invalid-feedback');
              element.closest('.form-group').append(error);
          },
          highlight: function (element, errorClass, validClass) {
              $(element).addClass('is-invalid');
          },
          unhighlight: function (element, errorClass, validClass) {
              $(element).removeClass('is-invalid');
          }
      });
    });
</script>

@endsection