@extends('layouts.app')
@section('content')
    <link href="{!! env('APP_ASSETS') !!}/vendor_components/dropzone/dropzone.css" rel="stylesheet"/>
    <link href="{!! env('APP_ASSETS') !!}/vendor_components/bootstrap-tagsinput/dist/bootstrap-tagsinput.css" rel="stylesheet"/>
    <link href="{!! env('APP_ASSETS') !!}/css/jquery.timepicker.min.css" rel="stylesheet"/>
    <style>
        .btn-toggle.switch[aria-pressed="false"]{
            background-color: #cb4b18 !important;
            border-color: #cb4b18 !important;
            box-shadow: none !important;
        }
        .btn-toggle.switch[aria-pressed="true"]{
            background-color: #3fd642!important;
            border-color: #3fd642!important;
            box-shadow: none !important;
        }
        .hours-action {
            font-size: 12px;
            display: flex;
            align-items: center;
        }
        .hours-action a i{
            font-size: 14px;
            margin-right: 5px;
        }
        html[dir="rtl"] .hours-action a i{
            font-size: 14px;
            margin-right: 0px;
            margin-left: 5px;
        }
        .flex-items{
            display: flex;
            align-items: center;
            height: 100%;
        }
        .vtabs .tabs-vertical {
            width: 229px;
        }
        .bootstrap-tagsinput {
            min-height: 60px; width: 100%;
        }
        h4{ margin-top: 40px}
        .bootstrap-timepicker-widget table td input{ width: 46px}
        .blockquote{
            font-style: normal;
            font-weight: bolder;
            margin-left: 0;
            border-left: 0rem solid #f3f6f9 !important;
        }
        .blockquote-footer::before{
            content:"";
        }
        .content{
            padding: 0;
        }
        .form-control, .form-select {
            height: 46px !important;
            border-color: #E4E6EB !important;
            border-radius: 7px !important;
        }
        .payout-details{
            background-color: #fff4de;
            border-radius: 3px;
            padding: 15px;
            outline: #ffab00 2px solid;
        }
        .theme-primary [type=checkbox].filled-in:checked.chk-col-primary + label:after {
            border: 2px solid #ffab00;
            background-color: #ffab00;
        }

        .theme-primary .btn-success:hover, .theme-primary .btn-success:active, .theme-primary .btn-success:focus, .theme-primary .btn-success.active {
            background-color:#017d53 !important;
            border-color:#017d53 !important;
            color: #ffffff !important;
        }
        .sm-mr-pr-0{
            margin-left: 0px;
            padding-left: 0px;
        }
        html[dir="rtl"] .sm-mr-pr-0{
            margin-right: 0px;
            padding-right: 0px;
        }
        @media (min-width: 820px) and (max-width: 1024px){
            html[dir="rtl"] .content-wrapper {
                width: 100% !important;
                margin-right: 0px !important;
                padding-left: 20px;
                padding-right: 10px;
            }
            html[dir="rtl"] .sidebar_div_main{
              padding-left: 0px;
            }
        }
        @media (device-width: 854px) and (device-height: 534px) {
            .btn-toggle.btn-sm.update-hour-status{
                margin: 0 !important;
            }
            html[dir="rtl"] .content-wrapper{
                margin-right: 270px !important;
                width: calc(100% - 271px) !important;
            }
        }
        @media (device-width: 1024px) and (device-height: 768px) and (orientation: landscape) {
           html[dir="rtl"] .content-wrapper{
                width: calc(100% - 272px) !important;
           }

        }
    </style>

@php
        $resto = \Illuminate\Support\Facades\Auth::user()->restaurants;

$lang = $resto->default_lang;

app()->setLocale($lang);
if(session('app_lang') !==null){
$lang = session('app_lang');
app()->setLocale($lang);
}
@endphp
    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper">
        <div class="container-full">
            <!-- Content Header (Page header) -->
           {{-- <div class="content-header">
                <div class="d-flex align-items-center">
                    <div class="me-auto">
                        <h4 class="page-title">{{__('label.outlets')}}</h4>
                        <div class="d-inline-block align-items-center">
                            <nav>
                                <ol class="breadcrumb">
                                    <li class="breadcrumb-item"><a href="{!! env('APP_URL') !!}dashboard"><i
                                                    class="mdi mdi-home-outline"></i></a></li>

                                    <li class="breadcrumb-item active" aria-current="page">{{__('label.outlets')}}</li>
                                </ol>
                            </nav>
                        </div>
                    </div>

                </div>
            </div>--}}

            <!-- Main content -->
            <section class="content">
                <div class="row">

                    <div class="col-12 col-sm-4 sidebar_div_main" style="padding-right: 0;background-color: #F5F5F5">
                        @include('outlets.outlet-sidebar')
                    </div>

                    <div class="col-12 col-sm-8 p-15 sm-plr-30">
                        <form id="save-outlet" method="POST" action="{!! env('APP_URL') !!}save/features/outlet" enctype="multipart/form-data">
                            @csrf
                            <input type="hidden" name="feature_type" value="delivery" />
                            <input type="hidden" name="id" value="{!! $outlet->id !!}" />
                            <div class="p-15">

                                <div class="row mb-3">
                                    <div class="d-flex bd-highlight p-0">
                                        <div class="flex-grow-1 bd-highlight">
                                            <h4 style="margin-top: 0; margin-bottom: 5px">{{__('label.delivery')}}</h4>
                                            <p>{{__('label.customers_can_request_orders_to_be_delivered')}}</p>
                                        </div>
                                        <div class="bd-highlight">
                                            <button type="button" class="btn btn-lg btn-toggle  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">
                                                <div class="handle"></div>
                                            </button>
                                        </div>
                                    </div>
                                </div>


                                <div class="row">
                                    <div class="col-md-12 payout-details">
                                        <p class="fw-bold">{{__('label.recieve_your_payouts')}}</p>
                                        <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>
                                        </p>
                                    </div>
                                </div>

                                <div class="row">
                                    <div id="main" @if($outlet->is_delivery=="1") class="active p-0" @endif>
                                        <div class="disabled"></div>
                                        <h4>{{__('label.payment_methods')}}</h4>
                                        <p>{{__('label.select_all_payment_methods_accepted_on_delivery')}}</p>
                                        @php
                                            $payment_methods = [];
                                            if(isset($features) && !empty($features->payment_methods)){
                                                $payment_methods = explode(',',$features->payment_methods);
                                            }

                                        @endphp
                                        <div class="row">
                                            <div class="col-sm-12">
                                                <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" />
                                                <label for="card_on_delivery">{{__('label.card_on_delivery')}}</label>           <br />
                                                <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" />
                                                <label for="cash_on_delivery">{{__('label.cash_on_delivery')}}</label>
                                            </div>
                                        </div>


                                        <h4> {{__('label.opening_hours')}}</h4>
                                        <p>{{__('label.select_all_payment_methods_accepted_on_delivery')}} </p>

                                        @php
                                            $days = ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'];
                                        $existing_days = \App\Models\BranchHours::where('branch_id',$outlet->id)->where('hours_for','delivery')->get();
                                        $day_exists = [];

                                        @endphp

                                        <div class="row mb-3 sm-d-none">
                                            <div class="col-sm-2">
                                                <p class="fw-bold">{{__('label.day')}}</p>
                                            </div>

                                            <div class="col-sm-3"><p  class="fw-bold">{{__('label.from')}}</p></div>
                                            <div class="col-sm-3">
                                                <p  class="fw-bold">{{__('label.to')}}</p>
                                            </div>
                                        </div>

                                        @if(isset($existing_days) && $existing_days->count() > 0)
                                            @foreach($existing_days as $d)
                                                <div class="row mb-3 hour-section">
                                                    <div class="flex-items-wrap">
                                                        <p class="fw-bold m-0 lg-d-none">{{__('label.day')}}:</p><div class="col-sm-2 sm-pr-15"> @if(!in_array($d->day_name,$day_exists)){{__('label.'.trim(strtolower($d->day_name)))}}@endif</div>
                                                    </div>


                                                    <div class="col-sm-3 time-show start_time" @if($d->status=="close") style="display: none" @endif >
                                                        <div class="bootstrap-timepicker">
                                                            <div class="flex-items-wrap">
                                                                <p  class="fw-bold m-0 lg-d-none">{{__('label.from')}}:</p>
                                                                <input type="text" name="start_time[{!! strtolower($d->day_name) !!}][]" value="{!! $d->start_time !!}" class=" form-control timepicker sm-mb-10">
                                                            </div>

                                                        </div>
                                                    </div>

                                                    <div class="col-sm-3 time-show end_time position-relative" @if($d->status=="close") style="display: none" @endif>
                                                        <div class="bootstrap-timepicker position-relative">
                                                            <div class="flex-items-wrap">
                                                                <p class="fw-bold m-0 lg-d-none">{{__('label.to')}}:</p>
                                                                <input type="text" name="end_time[{!! strtolower($d->day_name) !!}][]" value="{!! date('H:i a',strtotime($d->end_time)) !!}"  class="form-control timepicker ">
                                                            </div>

                                                        </div>
                                                    </div>
                                                    <div class="col-sm-2 col-md-4 p-0 time-show  hours-action" @if($d->status=="close") style="display: none" @endif>
                                                        @if(!in_array($d->day_name,$day_exists))
                                                            <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>
                                                        @endif
                                                            @if(in_array($d->day_name,$day_exists))
                                                            <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>
                                                                @endif
                                                    </div>
                                                    <div class="col-sm-2">
                                                        @if(!in_array($d->day_name,$day_exists))
                                                            @php
                                                               $bstatus=($d->status=="open")? 'active' :'';
                                                               $bflag=($d->status=="open")? true :false;
                                                               $bclass=($d->status=="open")?'success':'secondary';
                                                            @endphp
                                                            <div class="flex-items sm-justify-end">
                                                                <button type="button"  data-on-text="Open"  data-off-text="Closed" class="btn sm-mlr-5  btn-toggle btn-sm btn-{{$bclass}} update-hour-status {{$bstatus}}" data-bs-toggle="button" aria-pressed="{!! $bflag !!}" autocomplete="off">
                                                                <div class="handle"></div>
                                                                </button>
                                                                <input type="checkbox" name="is_open[{!! strtolower($d->day_name) !!}]" @if($d->status=="open") checked @endif />
                                                            </div>
                                                        @endif
                                                    </div>
                                                </div>
                                                @php
                                                    $day_exists[] = $d->day_name;
                                                @endphp
                                            @endforeach
                                        @else
                                            @foreach($days as $d)
                                                <div class="row mb-3 hour-section">
                                                    <div class="col-sm-2 sm-pr-15">{{__('label.'.trim(strtolower($d)))}}</div>

                                                    <div class="col-sm-3 time-show start_time">
                                                        <div class="bootstrap-timepicker">
                                                            <input type="text" name="start_time[{!! strtolower($d) !!}][]" class="form-control timepicker time sm-mb-10">
                                                        </div>
                                                    </div>
                                                    <div class="col-sm-3 time-show end_time position-relative">
                                                        <div class="bootstrap-timepicker">
                                                            <input type="text" name="end_time[{!! strtolower($d) !!}][]" class="form-control timepicker  time">
                                                        </div>
                                                    </div>
                                                    <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>
                                                    <div class="col-sm-2">
                                                        <div class="flex-items">
                                                            <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">
                                                            <div class="handle"></div>
                                                            </button>
                                                            <input type="checkbox" name="is_open[{!! strtolower($d) !!}]" checked />
                                                        </div>
                                                    </div>
                                                </div>
                                            @endforeach
                                        @endif

                                        <h4>{{__('label.operation_settings')}} </h4>
                                        <p>{{__('label.set_the_default_time_needed_for_preparing_and_delivering_orders')}}</p>

                                        <div class=" mt-3 mb-3 row">
                                            <div class="col-sm-3">
                                                <div class="form-group">
                                                    <label>{{__('label.slot_length')}}</label>
                                                    <select class="form-control" name="slot_length" required>
                                                        <option @if(isset($features) && $features->slot_length=="15") selected @endif value="15">15 min</option>
                                                        <option @if(isset($features) && $features->slot_length=="30") selected @endif value="30">30 min</option>
                                                        <option @if(isset($features) && $features->slot_length=="60") selected @endif value="60">1 hour</option>
                                                        <option @if(isset($features) && $features->slot_length=="120") selected @endif value="120">2 hours</option>
                                                        <option @if(isset($features) && $features->slot_length=="180") selected @endif value="180">3 hours</option>
                                                        <option @if(isset($features) && $features->slot_length=="240") selected @endif value="240">4 hours</option>
                                                        <option @if(isset($features) && $features->slot_length=="300") selected @endif value="300">5 hours</option>
                                                        <option @if(isset($features) && $features->slot_length=="360") selected @endif value="360">6 hours</option>
                                                    </select>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="row">
                                            <div class="col-sm-3">
                                                <div class="form-group">
                                                    <label>{{__('label.preparation_minutes')}}</label>
                                                    <input type="text" name="preparation_time" class="form-control" value="{!! isset($features)?$features->preparation_timing:15 !!}"  />
                                                </div>
                                            </div>

                                            <div class="col-sm-6 col-md-6">
                                                <div class="form-group">
                                                    <label>{{__('label.preparation_delivery_minutes')}}    </label>
                                                    <input type="number"  name="preperation_delivery" class="form-control" value="{!! isset($features)?$features->preparation_delivery_time:40 !!}"  />
                                                    <small class="text-danger">(How much time it will take to Prepare and Deliver order after receiving order).</small>
                                                </div>
                                            </div>
    										@php
    										$preparation_delivery_type = isset($features)?$features->preparation_delivery_type:"";

    									@endphp
    										<div class="col-sm-3">
                                                <div class="form-group">
                                                    <label>{{__('label.type')}}</label>
                                                    <select class="form-control" name="preparation_delivery_type" required>
    													<option @if($preparation_delivery_type=="MINUTES") selected @endif value="MINUTES">{{__('label.minutes')}}</option>
    													<option  @if($preparation_delivery_type=="HOURS") selected @endif value="HOURS">{{__('label.hours')}}</option>
    													<option  @if($preparation_delivery_type=="DAYS") selected @endif value="DAYS">{{__('label.days')}}</option>
    												</select>
                                                </div>
                                            </div>
    									</div>






                                        <figure>
                                            <blockquote class="blockquote sm-mr-pr-0">
                                                <p>{{__('label.estimated_time_settings')}}</p>
                                            </blockquote>
                                            <figcaption class="blockquote-footer">
                                                {{__('label.set_the_estimated_time_needed_for_delivering-orders')}}
                                            </figcaption>
                                        </figure>

    									@php
    										$estimated_time = isset($features)?$features->estimated_time:"";

    									$time_from = $time_to = $time_type = "";

    										if($estimated_time!=""){
    											$time = explode(":",$estimated_time);

    											if(count($time) > 1){

    												$e_time = explode(' - ',$time[0]);

    												$time_from = isset($e_time[0])?$e_time[0]:0;
    												$time_to = isset($e_time[1])?$e_time[1]:0;

    												$time_type = $time[1];

    											}

    										}
    									@endphp

    									<div class="row">
                                             <div class="col-sm-3 col-md-4">
                                                <div class="form-group">
                                                    <label>{{__('label.time_from')}}</label>
                                                    <input type="number"  name="time_from" class="form-control" value="{!! $time_from !!}" required  />
                                                </div>
                                            </div>
    										<div class="col-sm-3">
                                                <div class="form-group">
                                                    <label>{{__('label.time_to')}}</label>
                                                    <input type="number"  name="time_to" class="form-control" value="{!! $time_to !!}" required  />
                                                </div>
                                            </div>

    										<div class="col-sm-3">
                                                <div class="form-group">
                                                    <label>{{__('label.type')}}</label>
                                                    <select class="form-control" name="estimated_time_type" required>
    													<option @if($time_type=="MINUTES") selected @endif value="MINUTES">{{__('label.minutes')}}</option>
    													<option  @if($time_type=="HOURS") selected @endif value="HOURS">{{__('label.hours')}}</option>
    													<option  @if($time_type=="DAYS") selected @endif value="DAYS">{{__('label.days')}}</option>
    												</select>
                                                </div>
                                            </div>

                                        </div>

                                        <div class="row">
                                            <div class="col-sm-12">
                                                <a href="#!" class="btn btn-primary save-changes mt-4">{{__('label.save_changes')}}</a>
                                            </div>
                                        </div>


                                    </div>
                                </div>

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


                </div>
            </section>
            <!-- /.content -->

        </div>
    </div>
    <!-- /.content-wrapper -->



@endsection

@section('js')
    <script src="{!! env('APP_ASSETS') !!}js/jquery.timepicker.min.js"></script>
<script>
    $(function () {

        $("body").on("click",".remove-hours",function () {
            var _id = $(this).data('id');
            var _this = $(this);

            $.ajax({
                url:"{!! env('APP_URL') !!}remove/hour",
                type:"POST",
                data:{
                    id:_id,
                    "_token":"{!! csrf_token() !!}"
                },
                success:function (response) {
                    response = $.parseJSON(response);

                    if(response.type=="success"){
                        $.toast({
                            heading: 'Hours',
                            text: response.message,
                            position: 'top-right',
                            loaderBg: '#ff6849',
                            icon: 'success',
                            hideAfter: 3000,
                            stack: 6
                        });
                    }else{
                        $.toast({
                            heading: 'Hours',
                            text: response.message,
                            position: 'top-right',
                            loaderBg: '#ff6849',
                            icon: 'danger',
                            hideAfter: 3000,
                            stack: 6
                        });
                    }
                }
            });

            _this.parents('.hour-section').remove();
        });


        $("body").on("click",".add-more-hours",function () {
            var _hour_section = $(this).parents(".hour-section");
            var day = $(this).data('day');
            var start_time='<div class="bootstrap-timepicker mt-2 flex-items-wrap">\n' +
                '<p class="lg-d-none"></p><input type="text" name="start_time['+day+'][]" class="form-control timepicker time sm-mb-10">\n' +
                '                                                                </div><i class="fa fa-ban delete-hour visiblity-none"></i>';
            var end_time='<div class="bootstrap-timepicker mt-2 flex-items-wrap">\n' +
                '<p class="lg-d-none"></p><input type="text" name="end_time['+day+'][]" class="form-control timepicker time">\n' +
                '                                                                </div><i class="fa fa-ban delete-hour"></i>';
            var input_start_time = _hour_section.find('.col-sm-3.time-show.start_time').append(start_time);

            var input_end_time = _hour_section.find('.col-sm-3.time-show.end_time').append(end_time);
           /* 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>');
*/
            $(".timepicker").timepicker({ step:5});
            $('.timepicker').on('showTimepicker',function(){
                $("#li-11-59").remove();
                $("body").find(".ui-timepicker-list").append('<li id="li-11-59" class="ui-timepicker-pm" data-time="86340">11:59pm</li>');


            });

        });

        $("body").on("click",".update-hour-status",function () {
            var is_active = $(this).attr("aria-pressed");
            is_active = $.trim(is_active);

            if(is_active=="false"){
            //    alert('off');
                $(this).parents('.hour-section').find('input[type=checkbox]').prop('checked',false);
                $(this).parents('.hour-section').find('.time-show').hide();
            }else{
                $(this).parents('.hour-section').find('input[type=checkbox]').prop('checked','checked');
                $(this).parents('.hour-section').find('.time-show').show();
            }

        })

        /*$("body").on("click",".action-on-off",function () {
            var unique_key =
        });*/


        $(".timepicker").timepicker({ step:5});
        $('.timepicker').on('showTimepicker',function(){
            $("#li-11-59").remove();
            $("body").find(".ui-timepicker-list").append('<li id="li-11-59" class="ui-timepicker-pm" data-time="86340">11:59pm</li>');


        });
        $("body").on("click",".switch",function () {
            var is_active = $(this).attr("aria-pressed");
            is_active = $.trim(is_active);
            if(is_active=="false"){
                $("#main").removeClass('active');
            }else{
                $("#main").addClass('active');
            }

            $.ajax({
                url:"{!! env('APP_URL') !!}update/outlet/feature/status",
                data:{
                    outletId:"{!! $outlet->id !!}",
                    feature:'is_delivery',
                    is_active:is_active,
                    "_token":"{!! csrf_token() !!}"
                },
                type:"POST",
                success:function () {

                }
            });
        });

        $("body").on("click",".save-changes",function () {

            /*$.toast({
                heading: 'Welcome to my Riday Admin',
                text: 'Use the predefined ones, or specify a custom position object.',
                position: 'top-right',
                loaderBg: '#ff6849',
                icon: 'info',
                hideAfter: 3000,
                stack: 6
            });*/

            if($("#save-outlet").valid()){
                $("#save-outlet").ajaxForm(function (response) {

                    response = $.parseJSON(response);

                    if(response.type=="success"){
                        $.toast({
                            heading: 'Outlet Update.',
                            text: response.message,
                            position: 'top-right',
                            loaderBg: '#ff6849',
                            icon: 'success',
                            hideAfter: 3000,
                            stack: 1
                        });

                        setTimeout(function () {
                            location.reload();
                        },2000);
                    }else{
                        $.toast({
                            heading: 'Outlet Update.',
                            text: response.message,
                            position: 'top-right',
                            loaderBg: '#ff6849',
                            icon: 'error',
                            hideAfter: 3000,
                            stack: 1
                        });
                    }

                }).submit();
            }
        });

    })
</script>
@endsection