outlet-delivery.blade.php 26 KB

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