@extends('layouts.app')

@section('title')
    Add Package
@stop

@section('breadcrumb')
    
    <ol class="breadcrumb pull-right">
        <li><a href="{{ route('home') }}"><i class="fa fa-dashboard"></i> Home</a></li>
       
            <li><a href="{{ route('email-sms.index') }}"> Email Sms Type</a></li>
            <li><a href="{{ route('email-sms.view-type',$type->id) }}"> View Type</a></li>
            <li class="active">Update</li>
    </ol>
@stop

@section('css')

    <link href="{{ asset('plugins/components/bootstrap-daterangepicker/daterangepicker.css') }}" rel="stylesheet">

    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />

    <style type="text/css">
.placeholder-box {
  border: 2px solid #ccc;
  background-color: #f5f5f5;
  padding: 10px;
  margin: 10px 0;
  display: flex;
  flex-wrap: wrap;
}

.placeholder {
  border: 1px solid #ccc;
  background-color: #fff;
  padding: 5px 10px;
  margin: 5px;
  cursor: move;
}

.placeholder-non-editable {
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}
.placeholder-box h2 {
  font-size: 24px;
  font-weight: bold;
  margin: 0 0 10px;
}
.placeholder-non-editable {
  display: inline-block;
  background-color: yellow;
  color: black;
  pointer-events: none;
}

        .h30 {
            /* height: 30px;*/
        }

        .table>tbody>tr>td,
        .table>tbody>tr>th {
            font-size: 14px;
            text-align: left;
        }
        




        .swal2-popup {
            font-size: 2.0rem !important;
        }

        .bg-color {
            background-color: #1c3752;
        }

        .anchor-link {
            display: none;
        }

        body {
            font-weight: bold;
        }

        #slider {
            height: 34px;
            -webkit-appearance: none;
            appearance: none;
            background-color: #ddd;
            outline: none;
            padding: 0;
            margin: 0;
            border-radius: 0px;
        }

        #slider::-webkit-slider-thumb {
            -webkit-appearance: none;
            appearance: none;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background-color: #555;
            cursor: pointer;
            box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
        }

        #slider::-moz-range-thumb {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background-color: #555;
            cursor: pointer;
            box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
        }

        #switch {
            position: relative;
            display: inline-block;
            width: 60px;
            height: 34px;
        }

        #switch input {
            opacity: 0;
            width: 0;
            height: 0;
        }

        #slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #ccc;
            -webkit-transition: .4s;
            transition: .4s;
        }

        #slider:before {
            position: absolute;
            content: "";
            height: 26px;
            width: 26px;
            left: 4px;
            bottom: 4px;
            background-color: white;
            -webkit-transition: .4s;
            transition: .4s;
        }

        input:checked+#slider {
            background-color: #2196F3;
        }

        input:focus+#slider {
            box-shadow: 0 0 1px #2196F3;
        }

        input:checked+#slider:before {
            -webkit-transform: translateX(26px);
            -ms-transform: translateX(26px);
            transform: translateX(26px);
        }

        /* Rounded sliders */
        #slider.round {
            border-radius: 34px;
        }

        #slider.round:before {
            border-radius: 50%;
        }
    </style>

@endsection

@section('content')

 

    <div class="container-fluid">
        <!--.row-->
        <div class="row">
            <div class="col-md-12">
                @if ($errors->any())
                    <div class="white-box">
                        <h2>Errors</h2>
                        <ul>
                            {!! implode('', $errors->all('<li><span class="help-block"><strong>:message</strong></span></li>')) !!}
                        </ul>


                    </div>
                @endif
                <div class="white-box">
                    <div class="pull-right">
                       
                       
                    

                </div>
                    <h3 class="box-title m-b-0"><i class="icon-layers fa-fw"></i>Update Template</h3>
                    <p class="text-muted m-b-30 font-13" style= "height: 5px;"> Update the information </p>
                    <hr>
                    <div class="panel-wrapper collapse in" aria-expanded="true">
                        <div class="panel-body" style="    margin-bottom: 36px;">
                            {{-- <h3>Add Detail</h3> --}}
                            {{-- <hr> --}}
                            <form id="form-div" method="post" action="{{ route('email-sms.store-type-detail') }}" class="form-horizontal"  onsubmit="disableSubmitButton()"> 
                                @csrf
                                <input type='hidden' value="{{$type->id}}" name='id'>
                                <div class="form-horizontal">
                                    <div class="form-group">
                                        <label class="col-sm-2 control-label" style='font-size:medium'>Name:</label>
                                        <div class="col-sm-6">
                                            <input class="form-control" id="name" type="text" name='name'
                                                placeholder="Add..." value="{{$type->name}}" readonly>
                                        </div>
                                    </div>
                                 
                                    <div class="form-group">
                                       
                                        <label class="col-sm-2 control-label" style='font-size:medium'>Content Type:</label>
                                        <div class="col-sm-6">
                                            <select class='form-control ' id="name"  name='contenttype'>
                                                @if($email == 1)
                                                <option value='{{\App\EmailSms::content_type_email}}'>Email</option>
@endif
@if($sms == 1)
                                                <option value='{{\App\EmailSms::content_type_sms}}'>SMS</option>
     @endif
                                            </select>
                                             

                                        </select>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-sm-2 control-label" style='font-size:medium'>Content:</label>
                                        <div class="col-sm-6">
                                             <textarea class="form-control" id="content_box"  name='content' style="height: 108px;" placeholder="Add Content..."></textarea>
                                             @if ($errors->has('content'))
                                             <span class="help-block">
                                                 <strong>{{ $errors->first('content') }}</strong>
                                             </span>
                                         @endif
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <label class="col-sm-2 control-label" style='font-size:medium'>Placeholders:</label>
                                        <div class="col-sm-6">
                                            <p class="text-muted"><span style="color: red">Note*</span>: Please drag and drop placeholders on the places in Content where you want to show them </p>
                                        <div class="placeholder-box" >
                                        
                                        <div id="placeholder1" draggable="true"   class="placeholder"  data-value="name"><span class="label label-success">Customer Name</span></div>
                                        <div id="placeholder2" draggable="true"   class="placeholder " data-value="receivedamount"><span class="label label-success">Received Amount</span></div>
    
                                        <div id="placeholder3" draggable="true"   class="placeholder " data-value="unitnumber"><span class="label label-success">Unit Number</span></div>
                                        <div id="placeholder4" draggable="true"   class="placeholder " data-value="balance"><span class="label label-success">Remaining Balance</span></div>
    
                                        <div id="placeholder5" draggable="true"   class="placeholder " data-value="membership"><span class="label label-success">Membership Number</span></div>
    

                                      </div>
                                        </div>
                                    </div>
                                      
                                
                                   
                                   
                                    <div class="form-group">
                                        <label class="col-sm-2 control-label" style='font-size:medium'>Status:</label>
                                        <div class="col-sm-10"    >
                                            <label class="switch" id='switch'>
                                                <input type="checkbox" id='status' name='status'  >
                                                <span class="slider round" id='slider'></span>
                                            </label>
                                            @if ($errors->has('status'))
                                                <span class="help-block">
                                                    <strong>{{ $errors->first('status') }}</strong>
                                                </span>
                                            @endif
                                        </div>
                                    </div>

                                   
                                   

                                </div>
                                
                                <div class="form-actions">
                                    <button style="width: 20%; margin-left: 400px;" type="submit"
                                        class="btn btn-success search-customer" id="submit_button"  > <i
                                            class="fa fa-check"></i> Save </button>


                                </div>
                            </form>


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

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

@stop

@section('js')

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.2/jquery-confirm.min.js"></script>

    <script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
 
    <script>
       
       @if ($errors->any())
       var submitButton = document.getElementById('submit_button');
  submitButton.disabled = false;
       @endif
       function disableSubmitButton() {
  var submitButton = document.getElementById('submit_button');
  submitButton.disabled = true;
}




        var placeholders = document.querySelectorAll('.placeholder');

placeholders.forEach(function(placeholder) {
  placeholder.addEventListener('dragstart', function(e) {
    e.dataTransfer.setData('text/plain', e.target.id);
  });
});

var inputBox = document.getElementById('content_box');

inputBox.addEventListener('dragover', function(e) {
  e.preventDefault();
  inputBox.classList.add('drag-over');
});
inputBox.addEventListener('dragleave', function(e) {
  inputBox.classList.remove('drag-over');
});
 

inputBox.addEventListener('drop', function(e) {
  e.preventDefault();
  inputBox.classList.remove('drag-over');
  var placeholderId = e.dataTransfer.getData('text/plain');
  var placeholderValue = document.getElementById(placeholderId).getAttribute('data-value');
  var cursorPosition = inputBox.selectionStart;
  var inputValue = inputBox.value;
  var newValue = inputValue.slice(0, cursorPosition) + ':' + placeholderValue + inputValue.slice(cursorPosition);
  inputBox.value = newValue;
});

 



        </script>
@stop