@extends('layouts.app')
@section('css')
    <link href="{!! env('APP_ASSETS') !!}css/dashboard.css" rel="stylesheet" type="text/css">
    <style type="text/css">
        .btn-toggle.btn-sm,.btn-toggle.btn-sm > .handle{
            border-radius: 16px;
        }
         .btn-toggle.btn-sm:focus, .btn-toggle.btn-sm.focus, .btn-toggle.btn-sm:focus.active, .btn-toggle.btn-sm.focus.active{
            box-shadow: none;
        }

        .btn-outlet{

        }

        .btn-toggle.active{
            color: white !important;
            background: #ffa505;
        }
         .fixed .content-wrapper{
            margin-left: 275px !important;
        }
        .margin-left-20{
            margin-left: 20px;
        }
        .margin-left-30{
            margin-left: 30px;
        }
        .margin-left-40{
            margin-left: 40px;
        }


        table.dataTable {
            clear: both;
            margin-top: 6px !important;
            margin-bottom: 6px !important;
            max-width: none !important;
            border-collapse: collapse !important;
            font-family: 'Open Sans';
        }
        /*table.dataTable td{
            border-width: 1px;
        }*/
        .theme-primary .pagination li a:hover {

            background-color: #000 !important;
        }
        .table > :not(:last-child) > :last-child > * {
            border-bottom-color: transparent;
        }
        table.dataTable th{font-weight: 700 !important;}
        .dataTables_paginate {
            width: 100%;
            text-align: center;
        }
        div.dataTables_wrapper div.dataTables_paginate ul.pagination{
            justify-content: center !important;
        }
        .table > thead > tr > td[class*="sort"]:before,
        .table > thead > tr > td[class*="sort"]:after {
            content: "" !important;
        }

    /*table tr:hover{
        background: #FFD684;
    }*/
    #recipe-lists_wrapper{
        padding: 0 15px;
    }
    .text-align-ar-adjust{
        text-align: right;
    }
    #outlets{
        margin-top:8px;
    }
    html[dir="rtl"] .text-align-ar-adjust{
        text-align: left;
        margin-left:33px;
    }
    html[dir="rtl"] #recipe-lists_paginate ul{
      direction: ltr;
    }
    </style>
    @endsection
    @php
    $resto = \App\Models\Restaurants::find(\App\Helpers\CommonMethods::getRestuarantID());
    $lang = $resto->default_lang;

    app()->setLocale($lang);
if(session('app_lang') !==null){
$lang = session('app_lang');
app()->setLocale($lang);
}
    @endphp
@section('content')
    @php
      //$resto = \App\Models\Restaurants::find(\App\Helpers\CommonMethods::getRestuarantID());

        $outlets = \App\Models\Outlets::whereNull('deleted_at')->where('resto_id',$resto->id)->get();
        $o = NULL;
        if(isset($outlets) && $outlets->count() > 0){
        foreach($outlets as $outlet){
        $o[] = array(
            'outlet_name' => $outlet->name,
            'orders'=>rand(100,999)
            );
        }

        }








    @endphp
             @php
$restuarant1 = $resto;
         $resto_metas = \App\Helpers\CommonMethods::getRestoMetas($restuarant1);
            $imgix = isset($resto_metas['IMGIX_SOURCE']) && !empty($resto_metas['IMGIX_SOURCE'])?$resto_metas['IMGIX_SOURCE']:"https://meemappaws.imgix.net";

            $currency = isset($resto_metas['BUSSINESS_CCY'])?$resto_metas['BUSSINESS_CCY']:"IQD";
@endphp
    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper">
        <div class="container-full">
            <!-- Main content -->

            <section class="content">
                <div class="row ">
                    <div class="col-md-10">
                        <div class="page-top-title">
                            <h3 class="title m-0">{{__('label.inventory')}}</h3>
                        </div>
                    </div>
                </div>
                @php
                                $outlets = \App\Models\Outlets::whereNull('deleted_at')->where('active',1)->where('resto_id',$restuarant1->id)->get();


                            @endphp
                    <!--<div class="row m-0">
                    <div class="col-md-6 ">
                        <select class="form-control form-select" id="outlets">
                            <option value="">{{__('label.outlets')}}</option>

                            @if(isset($outlets) && $outlets->count() > 0)
                                @foreach($outlets as $outlet)
                                    <option value="{!! $outlet->id !!}" @if(isset($_GET['outlet_id']) && $_GET['outlet_id']==$outlet->id) selected @endif>{!! $outlet->name !!}</option>
                                @endforeach
                            @endif

                        </select>
                    </div>
                    <div class="col-md-6">
                       <button class="form-control btn  btn-md shadow-none ">Launch marketing activity</button>
                       </div>
                </div>-->

                <div class="row m-0">
{{--                    <div class="col-sm-6 mt-2">--}}
{{--                        <input type="text" placeholder="{{__('label.search_for_item')}}" class="form-control col-md-6">--}}
{{--                    </div>--}}
{{--                    <div class="col-sm-6"><p class="fw-bold text-align-ar-adjust mt-2">{{__('label.availablity')}}</p></div>--}}
                </div>

                 <div class="row p-0 mt-4">
                     <div class="col-sm-12">
                        <div class="table-responsive">
                           <table class="table table-stripped" id="recipe-lists">
                            <thead>
                                <tr>
                                    <!-- <td></td> -->
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                </tr>
                            </thead>
                            <tbody>

                             @if(isset($recipes) && $recipes->count() > 0)
                                    @foreach($recipes as $recipe)
                             <tr>
                                 @php
                                 $filename = isset($recipe->main_images)?\App\Helpers\CommonMethods::changeImageLinkAWStoImgix(
                                     $recipe->main_images->file_name,
                                     $imgix,
                                     env('PRODUCT_THUMBNAIL_IMG_HEIGHT'),
                                     env('PRODUCT_THUMBNAIL_IMG_WIDTH'),
                                     100
                                 ):"";

                                 @endphp
                                <!-- <td width="3%"></td> -->
                                <td>  <div style="height: 48px; width: 48px; background-image: url(@if(isset($recipe->main_images)) {!! $filename !!} @else {!! env('APP_ASSETS') !!}img/user/1.png @endif); background-size: cover; background-position: center;"></div></td>
                                 <td width="80%">{!! $recipe->name !!} @if($recipe->inventory_options!="available") <small class="text-danger">( {!! ucwords(str_replace('_',' ',$recipe->inventory_options)) !!} )</small> @endif </td>
                                 <td>

<button type="button"  data-on-text="Open"  data-off-text="Closed" class=" btn-toggle btn-sm btn-outlet @if($recipe->inventory_options=="available") active @endif  switch-me" data-id="{!! $recipe->id !!}"  data-bs-toggle="button" aria-pressed="true" autocomplete="off">
                                            <div class="handle"></div>
                                        </button>
                                 </td>
                             </tr>
                             @endforeach

                             @endif

                         </tbody>
                         </table>
                        </div>
                     </div>
                 </div>



            </section>
            <!-- /.content -->
        </div>
    </div>
    <div class="modal fade" id="inventory_option_modal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">

                <div class="modal-body">
                    <table class="table table-borderless">
                        <tr>
                            <td id="recipe-image">

                            </td>
                            <td id="recipe-name"></td>
                            <td>
                                <select class="form-control" id="inventory-option">
{{--                                    <option value="available">Available</option>--}}
                                    <option value="out_of_stock">Out of stock</option>
                                    <option value="not_available">Un-Available</option>
                                </select>
                            </td>
                        </tr>
                    </table>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary close-me" data-bs-dismiss="modal">{!! __('label.close') !!}</button>
                    <button type="button" class="btn btn-primary update-inventory-option">{!! __('label.update_inventory_option') !!}</button>
                </div>
            </div>
        </div>
    </div>
    <!-- /.content-wrapper -->
    @endsection

@section('js')

<script type="text/javascript">
    $(function(){
        var _selected_recipe_id = null;
        var _current_switch = null;

        $("body").on("click",".close-me",function(){
            _current_switch.addClass('active');
            _current_switch.attr('aria-pressed','true');
        });


        $("body").on("click",".update-inventory-option",function(){
            var _inventory_option = $("#inventory-option").val();

            $.ajax({
                url:"{!! env('APP_URL') !!}update/recipe/inventory",
                type:"POST",
                data:{
                    "_token":'{!! csrf_token() !!}',
                    recipe_id:_selected_recipe_id,
                    inventory_option:_inventory_option
                },
                success:function(response){
                    location.reload();
                }
            });
        });

        $("#outlets").on('change',function(){
            if($(this).val()=="")
            window.location.href = "{!! env('APP_URL') !!}inventory";
            else
            window.location.href = "{!! env('APP_URL') !!}inventory?outlet_id="+$(this).val();
        });

        $("body").on("click",".switch-me",function () {
            _current_switch = $(this);
              var is_active = $(this).attr("aria-pressed");

                var id = $(this).data('id');
                _selected_recipe_id = id;
                var outlet_id = $(this).data('outlet-id');
                is_active = $.trim(is_active);

                var _this = $(this);
                var status = 0;
                if(is_active=="true"){
                    $.ajax({
                        url:"{!! env('APP_URL') !!}update/recipe/inventory",
                        type:"POST",
                        data:{
                            "_token":'{!! csrf_token() !!}',
                            recipe_id:_selected_recipe_id,
                            inventory_option:'available'
                        },
                        success:function(response){
                        }
                    });
                }else{
                        var _parent = $(this).parents('tr');
                        $("#recipe-image").html(_parent.find("td:eq(0)").html());
                        $("#recipe-name").html(_parent.find("td:eq(1)").text());
                        $("#inventory_option_modal").modal('show');
                }

        });

        $('#recipe-lists').DataTable({
                "bSort": true,
                "searching": true,
                "paging": true,
                "info": true,
                "bLengthChange": false,

                language: {
                    @if($lang=='ar')
                    url:`{{asset('public/assets/js/dataTablear.json')}}`,
                    @endif
                    paginate: {
                        next: '<img src="{!! env("APP_ASSETS") !!}images/icons/next.png">', // or '→'
                        previous: '<img src="{!! env("APP_ASSETS") !!}images/icons/preivew.png">' // or '←'
                    }
                },

            });
            $("td nav").addClass('d-flex justify-content-center');

    })
</script>

@endsection