outlet-delivery.blade.php 25 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497
  1. @extends('layouts.app')
  2. @section('content')
  3. <link href="{!! env('APP_ASSETS') !!}/vendor_components/dropzone/dropzone.css" rel="stylesheet"/>
  4. <link href="{!! env('APP_ASSETS') !!}/vendor_components/bootstrap-tagsinput/dist/bootstrap-tagsinput.css" rel="stylesheet"/>
  5. <link href="{!! env('APP_ASSETS') !!}/css/jquery.timepicker.min.css" rel="stylesheet"/>
  6. <style>
  7. .vtabs .tabs-vertical {
  8. width: 229px;
  9. }
  10. .bootstrap-tagsinput {
  11. min-height: 60px; width: 100%;
  12. }
  13. h4{ margin-top: 40px}
  14. .bootstrap-timepicker-widget table td input{ width: 46px}
  15. .content{
  16. padding: 0;
  17. }
  18. .form-control, .form-select {
  19. height: 46px !important;
  20. border-color: #E4E6EB !important;
  21. border-radius: 7px !important;
  22. }
  23. .payout-details{
  24. background-color: #fff4de;
  25. border-radius: 3px;
  26. padding: 15px;
  27. }
  28. .theme-primary [type=checkbox].filled-in:checked.chk-col-primary + label:after {
  29. border: 2px solid #ffab00;
  30. background-color: #ffab00;
  31. }
  32. .theme-primary .btn-success:hover, .theme-primary .btn-success:active, .theme-primary .btn-success:focus, .theme-primary .btn-success.active {
  33. background-color: #3fd642!important;
  34. border-color: #3fd642!important;
  35. color: #ffffff !important;
  36. }
  37. </style>
  38. @php
  39. $resto = \Illuminate\Support\Facades\Auth::user()->restaurants;
  40. $lang = $resto->default_lang;
  41. app()->setLocale($lang);
  42. if(session('app_lang') !==null){
  43. $lang = session('app_lang');
  44. app()->setLocale($lang);
  45. }
  46. @endphp
  47. <!-- Content Wrapper. Contains page content -->
  48. <div class="content-wrapper">
  49. <div class="container-full">
  50. <!-- Content Header (Page header) -->
  51. {{-- <div class="content-header">
  52. <div class="d-flex align-items-center">
  53. <div class="me-auto">
  54. <h4 class="page-title">{{__('label.outlets')}}</h4>
  55. <div class="d-inline-block align-items-center">
  56. <nav>
  57. <ol class="breadcrumb">
  58. <li class="breadcrumb-item"><a href="{!! env('APP_URL') !!}dashboard"><i
  59. class="mdi mdi-home-outline"></i></a></li>
  60. <li class="breadcrumb-item active" aria-current="page">{{__('label.outlets')}}</li>
  61. </ol>
  62. </nav>
  63. </div>
  64. </div>
  65. </div>
  66. </div>--}}
  67. <!-- Main content -->
  68. <section class="content">
  69. <div class="row">
  70. <div class="col-3" style="padding-right: 0;background-color: #F5F5F5">
  71. @include('outlets.outlet-sidebar')
  72. </div>
  73. <div class="col-9 p-15">
  74. <form id="save-outlet" method="POST" action="{!! env('APP_URL') !!}save/features/outlet" enctype="multipart/form-data">
  75. @csrf
  76. <input type="hidden" name="feature_type" value="delivery" />
  77. <input type="hidden" name="id" value="{!! $outlet->id !!}" />
  78. <div class="p-15">
  79. <div class="d-flex bd-highlight">
  80. <div class="p-2 flex-grow-1 bd-highlight">
  81. <h4 style="margin-top: 0; margin-bottom: 5px">{{__('label.delivery')}}</h4>
  82. <p>{{__('label.customers_can_request_orders_to_be_delivered')}}</p>
  83. </div>
  84. <div class="p-2 bd-highlight">
  85. <button type="button" class="btn btn-lg btn-toggle btn-success switch @if($outlet->is_delivery=="1") active @endif switch" data-bs-toggle="button" aria-pressed="@if($outlet->is_delivery=="1") true @else false @endif" autocomplete="off">
  86. <div class="handle"></div>
  87. </button>
  88. </div>
  89. </div>
  90. <div class="row">
  91. <div class="col-md-12 payout-details">
  92. <p class="fw-bold">{{__('label.recieve_your_payouts')}}</p>
  93. <p>{{__('label.fill_up_your_bank_details_here_so_we_can_transfer_your_money_learn_more_about_payout_cycles_here')}} <a href="#!" class="fw-bold">{{__('label.here')}}</a>
  94. </p>
  95. </div>
  96. </div>
  97. <div id="main" @if($outlet->is_delivery=="1") class="active" @endif>
  98. <div class="disabled"></div>
  99. <h4>{{__('label.payment_methods')}}</h4>
  100. <p>{{__('label.select_all_payment_methods_accepted_on_delivery')}}</p>
  101. @php
  102. $payment_methods = [];
  103. if(isset($features) && !empty($features->payment_methods)){
  104. $payment_methods = explode(',',$features->payment_methods);
  105. }
  106. @endphp
  107. <div class="row">
  108. <div class="col-sm-12">
  109. <input type="checkbox" id="card_on_delivery" name="payment_methods[]" @if(in_array('card',$payment_methods)) checked @endif value="card" class="filled-in chk-col-primary" />
  110. <label for="card_on_delivery">{{__('label.card_on_delivery')}}</label> <br />
  111. <input type="checkbox" id="cash_on_delivery" name="payment_methods[]" @if(in_array('cash',$payment_methods)) checked @endif value="cash" class="filled-in chk-col-primary" />
  112. <label for="cash_on_delivery">{{__('label.cash_on_delivery')}}</label>
  113. </div>
  114. </div>
  115. <h4> {{__('label.opening_hours')}}</h4>
  116. <p>{{__('label.select_all_payment_methods_accepted_on_delivery')}} </p>
  117. @php
  118. $days = ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'];
  119. $existing_days = \App\BranchHours::where('branch_id',$outlet->id)->where('hours_for','delivery')->get();
  120. $day_exists = [];
  121. @endphp
  122. <div class="row mb-3">
  123. <div class="col-sm-2">
  124. <p class="fw-bold">{{__('label.day')}}</p>
  125. </div>
  126. <div class="col-sm-3"><p class="fw-bold">{{__('label.from')}}</p></div>
  127. <div class="col-sm-3">
  128. <p class="fw-bold">{{__('label.to')}}</p>
  129. </div>
  130. </div>
  131. @if(isset($existing_days) && $existing_days->count() > 0)
  132. @foreach($existing_days as $d)
  133. <div class="row mb-3 hour-section">
  134. <div class="col-sm-2"> @if(!in_array($d->day_name,$day_exists)){!! ucwords($d->day_name) !!}@endif</div>
  135. <div class="col-sm-3 time-show start_time" @if($d->status=="close") style="display: none" @endif >
  136. <div class="bootstrap-timepicker">
  137. <input type="text" name="start_time[{!! strtolower($d->day_name) !!}][]" value="{!! $d->start_time !!}" class=" form-control timepicker">
  138. </div>
  139. </div>
  140. <div class="col-sm-3 time-show end_time position-relative" @if($d->status=="close") style="display: none" @endif>
  141. <div class="bootstrap-timepicker position-relative">
  142. <input type="text" name="end_time[{!! strtolower($d->day_name) !!}][]" value="{!! date('H:i a',strtotime($d->end_time)) !!}" class="form-control timepicker ">
  143. </div>
  144. </div>
  145. <div class="col-sm-2 time-show hours-action" @if($d->status=="close") style="display: none" @endif>
  146. @if(!in_array($d->day_name,$day_exists))
  147. <a href="#!" class="text-primary add-more-hours" data-day="{!! strtolower($d->day_name) !!}"> <i class="fa fa-plus-square-o"></i>{{__('label.add_hours')}}</a>
  148. @endif
  149. @if(in_array($d->day_name,$day_exists))
  150. <a href="#!" class="text-mute remove-hours" data-id="{!! $d->id !!}" data-day="{!! strtolower($d->day_name) !!}"> <i class="fa fa-ban"></i>{{__('label.remove_hours')}}</a>
  151. @endif
  152. </div>
  153. <div class="col-sm-2">
  154. @if(!in_array($d->day_name,$day_exists))
  155. <button type="button" data-on-text="Open" data-off-text="Closed" class="btn btn-toggle btn-sm btn-success update-hour-status @if($d->status=="open") active @endif" data-bs-toggle="button" aria-pressed="@if($d->status=="open") true @else false @endif" autocomplete="off">
  156. <div class="handle"></div>
  157. </button>
  158. <input type="checkbox" name="is_open[{!! strtolower($d->day_name) !!}]" @if($d->status=="open") checked @endif />
  159. @endif
  160. </div>
  161. </div>
  162. @php
  163. $day_exists[] = $d->day_name;
  164. @endphp
  165. @endforeach
  166. @else
  167. @foreach($days as $d)
  168. <div class="row mb-3 hour-section">
  169. <div class="col-sm-2">{!! $d !!}</div>
  170. <div class="col-sm-3 time-show start_time">
  171. <div class="bootstrap-timepicker">
  172. <input type="text" name="start_time[{!! strtolower($d) !!}][]" class="form-control timepicker time">
  173. </div>
  174. </div>
  175. <div class="col-sm-3 time-show end_time position-relative">
  176. <div class="bootstrap-timepicker">
  177. <input type="text" name="end_time[{!! strtolower($d) !!}][]" class="form-control timepicker time">
  178. </div>
  179. </div>
  180. <div class="col-sm-2 time-show hours-action"><a href="#!" class="text-primary add-more-hours" data-day="{!! strtolower($d) !!}"> <i class="fa fa-plus-square-o"></i> {{__('label.add_hours')}}</a></div>
  181. <div class="col-sm-2">
  182. <button type="button" data-on-text="Open" data-off-text="Closed" class="btn btn-toggle btn-sm btn-success active update-hour-status" data-bs-toggle="button" aria-pressed="true" autocomplete="off">
  183. <div class="handle"></div>
  184. </button>
  185. <input type="checkbox" name="is_open[{!! strtolower($d) !!}]" checked />
  186. </div>
  187. </div>
  188. @endforeach
  189. @endif
  190. <h4>{{__('label.operation_settings')}} </h4>
  191. <p>{{__('label.set_the_default_time_needed_for_preparing_and_delivering_orders')}}</p>
  192. <div class="row">
  193. <div class="col-sm-3">
  194. <div class="form-group">
  195. <label>{{__('label.preparation_minutes')}}</label>
  196. <input type="text" name="preparation_time" class="form-control" value="{!! isset($features)?$features->preparation_timing:15 !!}" />
  197. </div>
  198. </div>
  199. <div class="col-sm-3">
  200. <div class="form-group">
  201. <label>{{__('label.preparation_delivery_minutes')}} </label>
  202. <input type="number" name="preperation_delivery" class="form-control" value="{!! isset($features)?$features->preparation_delivery_time:40 !!}" />
  203. </div>
  204. </div>
  205. @php
  206. $preparation_delivery_type = isset($features)?$features->preparation_delivery_type:"";
  207. @endphp
  208. <div class="col-sm-3">
  209. <div class="form-group">
  210. <label>{{__('label.type')}}</label>
  211. <select class="form-control" name="preparation_delivery_type" required>
  212. <option @if($preparation_delivery_type=="MINUTES") selected @endif value="MINUTES">{{__('label.minutes')}}</option>
  213. <option @if($preparation_delivery_type=="HOURS") selected @endif value="HOURS">{{__('label.hours')}}</option>
  214. <option @if($preparation_delivery_type=="DAYS") selected @endif value="DAYS">{{__('label.days')}}</option>
  215. </select>
  216. </div>
  217. </div>
  218. </div>
  219. <h4>{{__('label.estimated_time_settings')}}</h4>
  220. <p>{{__('label.set_the_estimated_time_needed_for_delivering-orders')}}</p>
  221. @php
  222. $estimated_time = isset($features)?$features->estimated_time:"";
  223. $time_from = $time_to = $time_type = "";
  224. if($estimated_time!=""){
  225. $time = explode(":",$estimated_time);
  226. if(count($time) > 1){
  227. $e_time = explode(' - ',$time[0]);
  228. $time_from = isset($e_time[0])?$e_time[0]:0;
  229. $time_to = isset($e_time[1])?$e_time[1]:0;
  230. $time_type = $time[1];
  231. }
  232. }
  233. @endphp
  234. <div class="row">
  235. <div class="col-sm-3">
  236. <div class="form-group">
  237. <label>{{__('label.time_from')}}</label>
  238. <input type="number" name="time_from" class="form-control" value="{!! $time_from !!}" required />
  239. </div>
  240. </div>
  241. <div class="col-sm-3">
  242. <div class="form-group">
  243. <label>{{__('label.time_to')}}</label>
  244. <input type="number" name="time_to" class="form-control" value="{!! $time_to !!}" required />
  245. </div>
  246. </div>
  247. <div class="col-sm-3">
  248. <div class="form-group">
  249. <label>{{__('label.type')}}</label>
  250. <select class="form-control" name="estimated_time_type" required>
  251. <option @if($time_type=="MINUTES") selected @endif value="MINUTES">{{__('label.minutes')}}</option>
  252. <option @if($time_type=="HOURS") selected @endif value="HOURS">{{__('label.hours')}}</option>
  253. <option @if($time_type=="DAYS") selected @endif value="DAYS">{{__('label.days')}}</option>
  254. </select>
  255. </div>
  256. </div>
  257. </div>
  258. <div class="row">
  259. <div class="col-sm-12">
  260. <a href="#!" class="btn btn-primary save-changes mt-4">{{__('label.save_changes')}}</a>
  261. </div>
  262. </div>
  263. </div>
  264. </div>
  265. </form>
  266. </div>
  267. </div>
  268. </section>
  269. <!-- /.content -->
  270. </div>
  271. </div>
  272. <!-- /.content-wrapper -->
  273. @endsection
  274. @section('js')
  275. <script src="{!! env('APP_ASSETS') !!}js/jquery.timepicker.min.js"></script>
  276. <script>
  277. $(function () {
  278. $("body").on("click",".remove-hours",function () {
  279. var _id = $(this).data('id');
  280. var _this = $(this);
  281. $.ajax({
  282. url:"{!! env('APP_URL') !!}remove/hour",
  283. type:"POST",
  284. data:{
  285. id:_id,
  286. "_token":"{!! csrf_token() !!}"
  287. },
  288. success:function (response) {
  289. response = $.parseJSON(response);
  290. if(response.type=="success"){
  291. $.toast({
  292. heading: 'Hours',
  293. text: response.message,
  294. position: 'top-right',
  295. loaderBg: '#ff6849',
  296. icon: 'success',
  297. hideAfter: 3000,
  298. stack: 6
  299. });
  300. }else{
  301. $.toast({
  302. heading: 'Hours',
  303. text: response.message,
  304. position: 'top-right',
  305. loaderBg: '#ff6849',
  306. icon: 'danger',
  307. hideAfter: 3000,
  308. stack: 6
  309. });
  310. }
  311. }
  312. });
  313. _this.parents('.hour-section').remove();
  314. });
  315. $("body").on("click",".add-more-hours",function () {
  316. var _hour_section = $(this).parents(".hour-section");
  317. var day = $(this).data('day');
  318. var start_time='<div class="bootstrap-timepicker mt-1">\n' +
  319. ' <input type="text" name="start_time['+day+'][]" class="form-control timepicker time">\n' +
  320. ' </div>';
  321. var end_time='<div class="bootstrap-timepicker mt-1">\n' +
  322. ' <input type="text" name="end_time['+day+'][]" class="form-control timepicker time">\n' +
  323. ' </div><i class="fa fa-ban delete-hour"></i>';
  324. var input_start_time = _hour_section.find('.col-sm-3.time-show.start_time').append(start_time);
  325. var input_end_time = _hour_section.find('.col-sm-3.time-show.end_time').append(end_time);
  326. /* var hour_sections = _hour_section.find('.col-sm-2.time-show.hours-action').append('<div style="margin-top: 37px"><a href="#!" class="text-mute remove-hours" data-id="60" data-day="sunday"> <i class="fa fa-ban"></i> Remove hours</a></div>');
  327. */
  328. $(".timepicker").timepicker({ step:5});
  329. $('.timepicker').on('showTimepicker',function(){
  330. $("#li-11-59").remove();
  331. $("body").find(".ui-timepicker-list").append('<li id="li-11-59" class="ui-timepicker-pm" data-time="86340">11:59pm</li>');
  332. });
  333. });
  334. $("body").on("click",".update-hour-status",function () {
  335. var is_active = $(this).attr("aria-pressed");
  336. is_active = $.trim(is_active);
  337. if(is_active=="false"){
  338. // alert('off');
  339. $(this).parents('.hour-section').find('input[type=checkbox]').prop('checked',false);
  340. $(this).parents('.hour-section').find('.time-show').hide();
  341. }else{
  342. $(this).parents('.hour-section').find('input[type=checkbox]').prop('checked','checked');
  343. $(this).parents('.hour-section').find('.time-show').show();
  344. }
  345. })
  346. /*$("body").on("click",".action-on-off",function () {
  347. var unique_key =
  348. });*/
  349. $(".timepicker").timepicker({ step:5});
  350. $('.timepicker').on('showTimepicker',function(){
  351. $("#li-11-59").remove();
  352. $("body").find(".ui-timepicker-list").append('<li id="li-11-59" class="ui-timepicker-pm" data-time="86340">11:59pm</li>');
  353. });
  354. $("body").on("click",".switch",function () {
  355. var is_active = $(this).attr("aria-pressed");
  356. is_active = $.trim(is_active);
  357. if(is_active=="false"){
  358. $("#main").removeClass('active');
  359. }else{
  360. $("#main").addClass('active');
  361. }
  362. $.ajax({
  363. url:"{!! env('APP_URL') !!}update/outlet/feature/status",
  364. data:{
  365. outletId:"{!! $outlet->id !!}",
  366. feature:'is_delivery',
  367. is_active:is_active,
  368. "_token":"{!! csrf_token() !!}"
  369. },
  370. type:"POST",
  371. success:function () {
  372. }
  373. });
  374. });
  375. $("body").on("click",".save-changes",function () {
  376. /*$.toast({
  377. heading: 'Welcome to my Riday Admin',
  378. text: 'Use the predefined ones, or specify a custom position object.',
  379. position: 'top-right',
  380. loaderBg: '#ff6849',
  381. icon: 'info',
  382. hideAfter: 3000,
  383. stack: 6
  384. });*/
  385. if($("#save-outlet").valid()){
  386. $("#save-outlet").ajaxForm(function (response) {
  387. response = $.parseJSON(response);
  388. if(response.type=="success"){
  389. $.toast({
  390. heading: 'Outlet Update.',
  391. text: response.message,
  392. position: 'top-right',
  393. loaderBg: '#ff6849',
  394. icon: 'success',
  395. hideAfter: 3000,
  396. stack: 1
  397. });
  398. setTimeout(function () {
  399. location.reload();
  400. },2000);
  401. }else{
  402. $.toast({
  403. heading: 'Outlet Update.',
  404. text: response.message,
  405. position: 'top-right',
  406. loaderBg: '#ff6849',
  407. icon: 'error',
  408. hideAfter: 3000,
  409. stack: 1
  410. });
  411. }
  412. }).submit();
  413. }
  414. });
  415. })
  416. </script>
  417. @endsection