Advertisement
Guest User

Untitled

a guest
Jul 21st, 2017
115
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 16.17 KB | None | 0 0
  1. @extends('layouts.admin')
  2.  
  3. @section('style')
  4.  
  5. // this css messes up the top navbar by few pixels up..
  6. <link href="{{asset('dashboard/plugins/dropify/dist/css/dropify.min.css')}}" rel="stylesheet">
  7. {{--<!-- Custom CSS -->--}}
  8. {{--<link href="{{ asset('dashboard/css/style.css') }}" rel="stylesheet">--}}
  9. {{--<meta name="csrf-token" content="{{ csrf_token() }}" />--}}
  10. @endsection
  11.  
  12. @section('content')
  13. <div class="page-wrapper">
  14. <!-- ============================================================== -->
  15. <!-- Container fluid -->
  16. <!-- ============================================================== -->
  17. <div class="container-fluid">
  18. <!-- ============================================================== -->
  19. <!-- Bread crumb and right sidebar toggle -->
  20. <!-- ============================================================== -->
  21. <div class="row page-titles">
  22. <div class="col-md-5 col-8 align-self-center">
  23. <h3 class="text-themecolor m-b-0 m-t-0">Forms</h3>
  24. <ol class="breadcrumb">
  25. <li class="breadcrumb-item"><a href="javascript:void(0)">Home</a></li>
  26. <li class="breadcrumb-item active">Form</li>
  27. </ol>
  28. </div>
  29. <div class="col-md-7 col-4 align-self-center">
  30. <div class="d-flex m-t-10 justify-content-end">
  31. <div class="d-flex m-r-20 m-l-10 hidden-md-down">
  32. <div class="chart-text m-r-10">
  33. <h6 class="m-b-0"><small>THIS MONTH</small></h6>
  34. <h4 class="m-t-0 text-info">$58,356</h4></div>
  35. <div class="spark-chart">
  36. <div id="monthchart"></div>
  37. </div>
  38. </div>
  39. <div class="d-flex m-r-20 m-l-10 hidden-md-down">
  40. <div class="chart-text m-r-10">
  41. <h6 class="m-b-0"><small>LAST MONTH</small></h6>
  42. <h4 class="m-t-0 text-primary">$48,356</h4></div>
  43. <div class="spark-chart">
  44. <div id="lastmonthchart"></div>
  45. </div>
  46. </div>
  47. <div class="">
  48. <button class="right-side-toggle waves-effect waves-light btn-success btn btn-circle btn-sm pull-right m-l-10"><i class="ti-settings text-white"></i></button>
  49. </div>
  50. </div>
  51. </div>
  52. </div>
  53. <!-- ============================================================== -->
  54. <!-- End Bread crumb and right sidebar toggle -->
  55. <!-- ============================================================== -->
  56. <!-- ============================================================== -->
  57. <!-- Start Page Content -->
  58. <!-- ============================================================== -->
  59. <div class="row">
  60. <div class="col-12">
  61. <div class="card">
  62. <div class="card-block">
  63. <h4 class="card-title">Animated Line Inputs Form With Floating Labels</h4>
  64. <h6 class="card-subtitle">Just add <code>floating-labels</code> class to the form.</h6>
  65.  
  66. <form class="floating-labels m-t-40" id="createHost" action='#'>
  67. {{--{{ csrf_field() }}--}}
  68.  
  69. <div class="form-group m-b-40">
  70. <input type="text" name="name" class="form-control" id="name" required>
  71. <span class="bar"></span>
  72. <label for="input1">Name</label>
  73. </div>
  74.  
  75. <div class="form-group m-b-40">
  76. <input type="text" name="address" class="form-control" id="address" required>
  77. <span class="bar"></span>
  78. <label for="input3">Adress</label>
  79. </div>
  80.  
  81. <div class="form-group m-b-40">
  82. <input type="text" name="city" class="form-control" id="city" required>
  83. <span class="bar"></span>
  84. <label for="input3">City</label>
  85. </div>
  86.  
  87. <div class="form-group m-b-40">
  88. <input type="text" name="state" class="form-control" id="state" required>
  89. <span class="bar"></span>
  90. <label for="input3">State</label>
  91. </div>
  92.  
  93. <div class="form-group m-b-40">
  94. <input type="number" name="phone" class="form-control" id="phone" required>
  95. <span class="bar"></span>
  96. <label for="input3">Phone</label>
  97. </div>
  98.  
  99. <div class="form-group m-b-40">
  100. <input type="number" name="mobile_phone" class="form-control" id="mobile" required>
  101. <span class="bar"></span>
  102. <label for="input3">Mobile Phone</label>
  103. </div>
  104.  
  105. <div class="form-group m-b-40">
  106. <input type="email" name="email" class="form-control" id="email" required>
  107. <span class="bar"></span>
  108. <label for="input3">Email</label>
  109. </div>
  110. <div class="form-group m-b-40">
  111. <input type="url" name="website" class="form-control" id="website" required>
  112. <span class="bar"></span>
  113. <label for="input3">Website</label>
  114. </div>
  115.  
  116. <div class="form-group m-b-5">
  117. <textarea class="form-control" name="description" rows="4" id="description" required></textarea>
  118. <span class="bar"></span>
  119. <label for="input7">Description</label>
  120. </div>
  121. {{--<div class="card-block">--}}
  122. {{--<input type="file" id="input-file-now-custom-1" name="photo" class="dropify" data-default-file="" />--}}
  123. {{--</div>--}}
  124. <div class="form-actions">
  125. <button type="submit" class="btn btn-success"> <i class="fa fa-check"></i> Save</button>
  126. <button type="button" class="btn btn-inverse">Cancel</button>
  127. </div>
  128. </form>
  129. @include('layouts.errors')
  130. </div>
  131. </div>
  132. </div>
  133. </div>
  134. <!-- ============================================================== -->
  135. <!-- End PAge Content -->
  136. <!-- ============================================================== -->
  137. <!-- ============================================================== -->
  138. <!-- Right sidebar -->
  139. <!-- ============================================================== -->
  140. <!-- .right-sidebar -->
  141. <div class="right-sidebar">
  142. <div class="slimscrollright">
  143. <div class="rpanel-title"> Service Panel <span><i class="ti-close right-side-toggle"></i></span> </div>
  144. <div class="r-panel-body">
  145. <ul id="themecolors" class="m-t-20">
  146. <li><b>With Light sidebar</b></li>
  147. <li><a href="javascript:void(0)" data-theme="default" class="default-theme">1</a></li>
  148. <li><a href="javascript:void(0)" data-theme="green" class="green-theme">2</a></li>
  149. <li><a href="javascript:void(0)" data-theme="red" class="red-theme">3</a></li>
  150. <li><a href="javascript:void(0)" data-theme="blue" class="blue-theme working">4</a></li>
  151. <li><a href="javascript:void(0)" data-theme="purple" class="purple-theme">5</a></li>
  152. <li><a href="javascript:void(0)" data-theme="megna" class="megna-theme">6</a></li>
  153. <li class="d-block m-t-30"><b>With Dark sidebar</b></li>
  154. <li><a href="javascript:void(0)" data-theme="default-dark" class="default-dark-theme">7</a></li>
  155. <li><a href="javascript:void(0)" data-theme="green-dark" class="green-dark-theme">8</a></li>
  156. <li><a href="javascript:void(0)" data-theme="red-dark" class="red-dark-theme">9</a></li>
  157. <li><a href="javascript:void(0)" data-theme="blue-dark" class="blue-dark-theme">10</a></li>
  158. <li><a href="javascript:void(0)" data-theme="purple-dark" class="purple-dark-theme">11</a></li>
  159. <li><a href="javascript:void(0)" data-theme="megna-dark" class="megna-dark-theme ">12</a></li>
  160. </ul>
  161. <ul class="m-t-20 chatonline">
  162. <li><b>Chat option</b></li>
  163. <li>
  164. <a href="javascript:void(0)"><img src="{{asset('dashboard/images/users/1.jpg')}}" alt="user-img" class="img-circle"> <span>Varun Dhavan <small class="text-success">online</small></span></a>
  165. </li>
  166. <li>
  167. <a href="javascript:void(0)"><img src="{{asset('dashboard/images/users/2.jpg')}}" alt="user-img" class="img-circle"> <span>Genelia Deshmukh <small class="text-warning">Away</small></span></a>
  168. </li>
  169. <li>
  170. <a href="javascript:void(0)"><img src="{{asset('dashboard/images/users/3.jpg')}}" alt="user-img" class="img-circle"> <span>Ritesh Deshmukh <small class="text-danger">Busy</small></span></a>
  171. </li>
  172. <li>
  173. <a href="javascript:void(0)"><img src="{{asset('dashboard/images/users/4.jpg')}}" alt="user-img" class="img-circle"> <span>Arijit Sinh <small class="text-muted">Offline</small></span></a>
  174. </li>
  175. <li>
  176. <a href="javascript:void(0)"><img src="{{asset('dashboard/images/users/5.jpg')}}" alt="user-img" class="img-circle"> <span>Govinda Star <small class="text-success">online</small></span></a>
  177. </li>
  178. <li>
  179. <a href="javascript:void(0)"><img src="{{asset('dashboard/images/users/6.jpg')}}" alt="user-img" class="img-circle"> <span>John Abraham<small class="text-success">online</small></span></a>
  180. </li>
  181. <li>
  182. <a href="javascript:void(0)"><img src="{{asset('dashboard/images/users/7.jpg')}}" alt="user-img" class="img-circle"> <span>Hritik Roshan<small class="text-success">online</small></span></a>
  183. </li>
  184. <li>
  185. <a href="javascript:void(0)"><img src="{{asset('dashboard/images/users/8.jpg')}}" alt="user-img" class="img-circle"> <span>Pwandeep rajan <small class="text-success">online</small></span></a>
  186. </li>
  187. </ul>
  188. </div>
  189. </div>
  190. </div>
  191. <!-- ============================================================== -->
  192. <!-- End Right sidebar -->
  193. <!-- ============================================================== -->
  194. </div>
  195. <!-- ============================================================== -->
  196. <!-- End Container fluid -->
  197. <!-- ============================================================== -->
  198. @endsection
  199.  
  200. @section('script')
  201.  
  202. <script>
  203. $.ajaxSetup({
  204. headers: {
  205. 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
  206. }
  207. });
  208.  
  209. $('#createHost ').submit(function(ev){
  210. ev.preventDefault();
  211.  
  212. // var name = $('#name').val();
  213. // var address = $('#address').val();
  214. // var city = $('#city').val();
  215. // var state = $('#state').val();
  216. // var phone = $('#phone').val();
  217. // var mobile = $('#mobile').val();
  218. // var email = $('#email').val();
  219. // var website = $('#website').val();
  220. // var description = $('#description').val();
  221. //
  222. // var dataString = "name="+name+"&address="+address+"&city="+city+"&state="+state+"&phone="+phone
  223. // +"&mobile="+mobile+"&email="+email+"&website="+website+"&description"+description;
  224. $.ajax({
  225. type:"POST",
  226. url:"/host",
  227. contentType: "application/json",
  228. data: $('#createHost').serialize(),
  229. beforeSend: function (request) {
  230. request.setRequestHeader("X-CSRF-TOKEN", '{{ csrf_token() }}');
  231. },
  232. success: function(data){
  233. console.log(data);
  234. },
  235. error: function(xhr, status, error) {
  236. // alert("smth went wrong");
  237. console.log(data);
  238. }
  239. })
  240. })
  241. </script>
  242. <!-- jQuery file upload -->
  243. <script src="{{asset('dashboard/plugins/dropify/dist/js/dropify.min.js')}}"></script>
  244. <script>
  245. $(document).ready(function() {
  246. // Basic
  247. $('.dropify').dropify();
  248.  
  249. // Translated
  250. $('.dropify-fr').dropify({
  251. messages: {
  252. default: 'Glissez-déposez un fichier ici ou cliquez',
  253. replace: 'Glissez-déposez un fichier ou cliquez pour remplacer',
  254. remove: 'Supprimer',
  255. error: 'Désolé, le fichier trop volumineux'
  256. }
  257. });
  258.  
  259. // Used events
  260. var drEvent = $('#input-file-events').dropify();
  261.  
  262. drEvent.on('dropify.beforeClear', function(event, element) {
  263. return confirm("Do you really want to delete \"" + element.file.name + "\" ?");
  264. });
  265.  
  266. drEvent.on('dropify.afterClear', function(event, element) {
  267. alert('File deleted');
  268. });
  269.  
  270. drEvent.on('dropify.errors', function(event, element) {
  271. console.log('Has Errors');
  272. });
  273.  
  274. var drDestroy = $('#input-file-to-destroy').dropify();
  275. drDestroy = drDestroy.data('dropify')
  276. $('#toggleDropify').on('click', function(e) {
  277. e.preventDefault();
  278. if (drDestroy.isDropified()) {
  279. drDestroy.destroy();
  280. } else {
  281. drDestroy.init();
  282. }
  283. })
  284. });
  285. </script>
  286. @endsection
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement