@extends('admin.layouts.app')
@section('page_tab_title' ,"Slider Messages") 
@section('css')
<style type="text/css">
    .auto_select_height {
      height: auto !important;
    }
    .lvc-logo-img {
      display: inline-block !important;
      margin: 0;
      width: 90px;
      height: 60px;
      object-fit: cover;
  }
    .parent-gallery-img {
      position: relative;
      margin-right: 15px;
      display: inline-block;
      margin-top: 30px;
  }
  .remove-image {
      position: absolute;
      right: -8px;
      top: -12px;
      background-color: #fff;
      display: block;
      padding: 3px;
      border-radius: 100%;
      width: 20px;
      height: 20px;
      font-size: 12px;
      text-align: center;
      box-shadow: 0 0 3px #999;
      line-height: 12px;
      z-index: 1;
  }
  .mt-10{
    margin-top:10rem;
  }
  .mt-2{
    margin-top:2rem;
  }
  .mt-5{
    margin-top:5rem;
  }
  .profile-margin{
    margin-left:1.5rem;
  }
  .ml-10{
    margin-left:10rem;
  }
  .ml-2{
    margin-left:2rem;
  }
  .ml-5{
    margin-left:5rem;
  }

  .select2-container .select2-selection--multiple {
  font-family: 'Arial', Verdana;
  font-size: 12px;
  box-sizing: border-box;
  display: block;
  min-height: 40px;
  border-color: #d2d6de;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: #808080;
    border: 1px solid #aaa;
    cursor: default;
    float: left;
    margin-right: 5px;
    margin-top: 5px;
    padding: 0 5px;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: #fffdfd;
    cursor: pointer;
    display: inline-block;
    font-weight: bold;
    margin-right: 2px;
}

.select2-container--default .select2-selection--multiple .select2-selection__rendered {
    box-sizing: border-box;
    list-style: none;
    margin: 0;
    padding: 0 5px;
    width: 100%;
    padding: 6px 12px;
}

#dropList1+.select2 .select2-selection--multiple {
  height: auto !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__clear {
  position: absolute;
  right: 0;
  top: 7px;
}
.select2-container--default .select2-selection--multiple {
    border-radius: 0;
}

.select2-container .select2-selection--single {
    height: 42px;
    font-family: 'Arial', Verdana;
}

/* add select 2 */
.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 26px;
    position: absolute;
    top: 7px;
    right: 1px;
    width: 20px;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #666666;
    /* line-height: 34px; */
    padding: 4px;
}

.select2-container--default .select2-selection--single {
    background-color: #fff;
    border: 1px solid #aaa;
    border-radius: 0;
    /* border-radius: 4px; */
}

.select2-container .select2-selection--single {
  font-family: 'Arial', Verdana;
  font-size: 12px;
  box-sizing: border-box;
  display: block;
  min-height: 40px;
  border-color: #d2d6de;
  color: #666666 !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  color: #666666 !important;
    font-size: 13px;
}

.select2-container--default .select2-selection--single .select2-selection__placeholder {
  color: #666666 !important;
  font-family: 'Arial', Verdana !important;
  font-size: 13px;
  
}

.fit-image{
object-fit: cover;
height: 100px; /* only if you want fixed height */
}

</style>
@endsection
@section('content')
<section class="content">
  <div class="row">
    <div class="col-md-12">
      <div class="box box-success">
        <div class="box-header">
          <h1>@if(empty($sliderMessage->id)) Create New Slider Message  @else Edit Slider Message @endif </h1>
          <hr class="bdr-partition">
        </div>
        <form method="POST" id="create-slider-message" class="form-horizontal" enctype="multipart/form-data" @if(empty($sliderMessage->id)) action="{{ route('slidermessage.store') }}" @else action="{{ route('slidermessage.update', $sliderMessage->id) }}" @endif >
          @csrf
          <div class="box-body">

            <div class="row">
               @if(isset($sliderMessage->image))
                <div class="col-md-2">
                    <img class="fit-image"  src="{{asset('storage/'.$sliderMessage->image)}}">
                </div>
              @endif
            </div>

            <div class="row">
              <div class="col-md-6">
                <div class="form-group">
                    <div class="col-sm-12">
                      <label class=" control-label">Title <span class="required_span">*</span></label>
                      <input type="text" name="title" maxlength="255"  class="form-control" value="{{$sliderMessage->title ?? old('title') }}" placeholder="Title" required>
                      @if ($errors->has('title'))
                      <span class="invalid-feedback text-danger" role="alert">
                        {{ $errors->first('title') }}
                      </span>
                      @endif
                    </div>
                  </div>
                </div>
                <div class="col-md-6">
                    <div class="form-group">
                    <div class="col-sm-12">
                        <label class="control-label">Status</label>
                        <select name="status"  class="form-control">
                        <option value="active" @if($sliderMessage->status == "active") selected @endif>Active</option>
                        <option value="inactive" @if($sliderMessage->status == "inactive") selected @endif>Inactive</option>
                        </select>
                        @if ($errors->has('active'))
                        <span class="invalid-feedback text-danger" role="alert">
                            {{ $errors->first('active') }}
                        </span>
                        @endif
                    </div>
                </div>
              </div>
            </div>
            <div class="row">
                <div class="col-md-6">
                    <div class="form-group">
                    <div class="col-sm-12">
                        <label class="control-label">Description</label>
                        <textarea name="description" class="form-control h-100 w-100" rows="10" placeholder="Description">{{$sliderMessage->description ?? old('description') }}</textarea>
                        @if ($errors->has('description'))
                        <span class="invalid-feedback text-danger" role="alert">
                        {{ $errors->first('description') }}
                        </span>
                        @endif
                    </div>
                    </div>
                </div>


              <div class="col-md-6 file-custome-profile">
                <div class="form-group ">
                  <label class="control-label profile-margin">Upload Image
                     {{-- <span style="color: red;">( 358px W x 358px H )</span> --}}
                    </label>
                  <div class="file-upload">
                    <div class="file-select profile-margin">
                      <div class="file-select-button" id="fileName">Choose File</div>
                      <div class="file-select-name" id="noFile">No file chosen...</div>
                      <input type="file" name="image" id="chooseFile" accept="image/jpeg, image/png, image/gif,">
                    </div>
                  </div>
                  <span class="invalid-feedback text-danger" role="alert">
                      {{ $errors->first('image') }}
                  </span>
                </div>
              </div>

            </div>
            <div class="row">
              <div class="col-sm-6 mt-5">
                <div class="form-group">
                    <div class="col-sm-12">
                        <label class="radio-inline">
                          <input type="radio" name="to" value="all"  @if($sliderMessage->to == "all" || empty($sliderMessage->to) ) checked @endif>All
                        </label>
                        <label class="radio-inline">
                          <input type="radio" name="to" value="practitioner_only" @if($sliderMessage->to == "practitioner_only") checked @endif>Practitioners Only
                        </label>
                        <label class="radio-inline">
                          <input type="radio" name="to" value="patient_only" @if($sliderMessage->to == "patient_only") checked @endif>Patient Only
                        </label>
                        <label class="radio-inline">
                          <input type="radio" name="to" value="specific_profession"  @if($sliderMessage->to == "specific_profession") checked @endif>Specific Profession
                        </label>
                        </div>
                  </div>
              </div>
                
              <div class="col-md-6 mt-2">
                  <div class="form-group">
                    <div class="col-sm-12 @if($sliderMessage->to != "specific_profession") invisible @endif"  id="profession_container">
                    {{-- <div class="col-sm-12 @if($sliderMessage->to != "specific_profession") d-none @endif"  id="profession_container"> --}}
                        <label class="control-label">Profession</label>
                        <select name="profession_id" id="profession_id"  class="form-control single-select2" data-placeholder="Select Profession" >
                          <option value="">Select Profession</option>
                          @foreach ($professions as $profession)
                            <option value="{{$profession->id}}" @if($sliderMessage->profession_id == $profession->id) selected @endif>{{$profession->name}}</option>
                          @endforeach 
                        </select>
                        @if ($errors->has('profession_id'))
                        <span class="invalid-feedback text-danger" role="alert">
                            {{ $errors->first('profession_id') }}
                        </span>
                        @endif
                    </div>
                </div>
              </div>
            </div>
            <div class="button-area">
                <button type="submit" class="btn btn-info ">Submit</button>
                <a href="{{route('slidermessage.index')}}" class="btn btn-default">Cancel</a>
            </div>
        </form>
      </div>
    </div>
  </div>
</section>

<script type="text/javascript">
  $('#create-slider-message').parsley();
  $(document).ready(function() {
    $("input[name=to]").on('change',function(event){
      if($(this).val() == "specific_profession"){
        $("#profession_container").removeClass('invisible').addClass('visible');
      }else{
        $("#profession_container").removeClass('visible').addClass('invisible');
      }
    });
  });
   $('#chooseFile').change(function() {
      var i = $(this).prev('div').clone();
      var file = $('#chooseFile')[0].files[0].name;
      $(this).prev('div').text(file);
    });
</script>
@endsection