@extends("layouts.default")

@section("title", $title)

@section("block-header")
@stop

@section("breadcrumb")
    @parent
    <li class="breadcrumb-item active">
        General Setting
    </li>
@stop

@section("content")
<form action="{{ route('general_setting.store') }}" method="POST">
    @csrf
    <div class="row clearfix">
        <div class="col-sm-9">
            @includeWhen(Session::has("message"),"inc.alert")
            <div class="card mt-3">
                <h5 class="card-header">General Setting</h5>
                <div class="body">
                    <div class="row clearfix">
                        <div class="col-lg-3 form-control-label">
                            <label class="label-title">Health Plant: </label>
                        </div>
                        <div class="col-lg-9">
                            <input type="checkbox" {{$str_checked_health_plant}} data-toggle="toggle" data-size="sm" name="general_setting[health_plant]" value="1">
                        </div>
                    </div>

                    <!-- Booking Service -->
                    <div class="row clearfix">
                        <div class="col-lg-3 form-control-label">
                            <label class="label-title">Enable Booking Service: </label>
                        </div>
                        <div class="col-lg-9">
                            <input type="checkbox" {{$str_checked_booking_service}} data-toggle="toggle" data-size="sm" name="general_setting[booking_service]" value="1">
                        </div>
                    </div>
                    <!-- <div class="row">
                        <div class="col-lg-12 text-right">
                            <button type="submit" class="btn btn-primary btn-round waves-effect m-t-20">
                                @lang('lang.save')
                            </button>
                        </div>
                    </div>   -->
                </div>
            </div>
        </div>
    </div>

    <!-- <div class="row clearfix">
        <div class="col-sm-9">
            <div class="card mt-3">
                <h5 class="card-header">Interest (ចំណាប់អារម្មណ៍)</h5>
                <div class="body">
                    <div class="row clearfix">
                        <div class="col-lg-12 form-control-label">
                            <label>Random Interest (ចំណាប់អារម្មណ៍) by filter below:</label>
                        </div>
                    </div>
                    <div class="row clearfix">
                        <div class="col-lg-3 form-control-label">
                            <label class="label-title">Type: </label>
                        </div>
                        <div class="col-lg-9">
                            <select class="form-control select-random-type" name="general_setting[random_interest_type]">
                                <option value="all">All</option>
                                @foreach($arr_type as $k => $v)
                                                                        <option value="{{$k}}" {{$str_selected}}>{{$v}}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <div class="row clearfix">
                        <div class="col-lg-3 form-control-label">
                            <label class="label-title">Category: </label>
                        </div>
                        <div class="col-lg-9">
                            <select class="form-control select-random-category" name="random_interest_category[]" multiple>
                                <option value="all" {{$is_selected_all}}>All</option>
                            </select>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row clearfix">
        <div class="col-sm-9">
            <div class="card mt-3">
                <h5 class="card-header">Recent News</h5>
                <div class="body">
                    <div class="row clearfix">
                        <div class="col-lg-12 form-control-label">
                            <label>Pinned News by filter below:</label>
                        </div>
                    </div>
                    <div class="row clearfix">
                        <div class="col-lg-3 form-control-label">
                            <label class="label-title">Category: </label>
                        </div>
                        <div class="col-lg-9">
                            <select class="form-control select-pinned-category" name="general_setting[pinned_category_id]">
                                <option value="0">Select category</option>
                                @foreach($categories as $k => $v)
                                                                        <option value="{{$k}}" {{$str_selected}}>{{$v}}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <div class="row clearfix">
                        <div class="col-lg-3 form-control-label">
                            <label class="label-title">Articles: </label>
                        </div>
                        <div class="col-lg-9">
                            <select class="form-control select-pinned-article" name="pinned_article_id">
                                <option value="0">Select article</option>
                            </select>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div> -->

    <!-- product banner -->
    <div class="row clearfix">
        <div class="col-sm-9">
            <div class="card mt-3">
                <h5 class="card-header">Product Banner</h5>
                <div class="body">
                    <div class="row clearfix">
                        <div class="col-lg-3 form-control-label">
                            <label class="label-title">Show By: </label>
                        </div>
                        <div class="col-lg-9">
                            <select class="form-control product-banner-show-by" name="product_banner_show_by">
                                @foreach($show_by as $k => $v)
                                                                        <option value="{{$k}}" {{$str_selected}}>{{$v}}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <div class="row clearfix div-product-banner-categories">
                        <div class="col-lg-3 form-control-label">
                            <label class="label-title">By  Product Categogries: </label>
                        </div>
                        <div class="col-lg-9">
                            <select class="form-control product-banner-categories" name="product_banner_categories[]" multiple>
                                <option value="0">All Category</option>
                                @foreach($product_category as $k => $v)
                                                                        <option value="{{$v->id}}" {{$str_selected}}>{{@$property->name}}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <div class="row clearfix div-selected-products">
                        <div class="col-lg-3 form-control-label">
                            <label class="label-title">By Selected Products: </label>
                        </div>
                        <div class="col-lg-9">
                            <select class="form-control selected-products" name="selected_products[]" multiple>
                                <option value="0">Select Product</option>
                                @foreach($products as $k => $v)
                                                                        <option value="{{$v->id}}" {{$str_selected}}>{{@$property->product_id . "-" . @$property->name}}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-sm-9 text-right">
            <button type="submit" class="btn btn-primary btn-round waves-effect m-t-20">
                @lang('lang.save')
            </button>
        </div>
    </div>  
    <div class="row small-min-height"></div>
</form>

<style type="text/css">
.small-min-height { min-height: 200px; }
.label-title { float: left; display: inline-block; padding-top: 7px; }
.input-inline { float: left; display: inline-block; margin-left: 10px; margin-right: 10px; }
.small-width { width: 120px !important; }
.medium-width { width: 250px !important; }
.toggle { border: 1px solid #999; }
</style>
@stop

@section('script')
<script>
$(function(){

    var data = [],
        pinned_category_id = "{{$pinned_category_id}}",
        random_interest_type = "{{$random_interest_type}}",
        default_show_by = "{{$default_show_by}}";

    if (pinned_category_id != '' && pinned_category_id != '0') {
        getArticle(pinned_category_id);
    }
    if (random_interest_type != '' && random_interest_type != '0') {
        getCategory(random_interest_type);
    }

    getProductBanner(default_show_by);

    // random interest type
    $('.select-random-type').on('change', function () {
        const me = $(this);
        const type = me.val();
        if (type != '') {
            getCategory(type);
        }
    });

    // pinned article
    $('.select-pinned-category').on('change', function () {
        const me = $(this);
        const cat_id = me.val();
        if (cat_id != '') {
            getArticle(cat_id);
        }
    });


    // product banner
    $('.product-banner-show-by').on('change', function () {
        const me = $(this);
        const by_random = me.val();
        getProductBanner(by_random);
    });

});

function getProductBanner(by_random) {
    if (by_random == 1) {
        $('div.div-product-banner-categories').show();
        $('div.div-selected-products').hide();
    }
    if (by_random == 2) {
        $('div.div-product-banner-categories').hide();
        $('div.div-selected-products').show();
    }
}

function getCategory(type) {
    const random_interest_category = {!! json_encode($random_interest_category) !!};
    switch(type) {
        case '1':
        case '2':
            data = {!! json_encode($categories) !!};
            break;
        case '3':
            data = {!! json_encode($health_categories) !!};
            break;
        case 'all':
            data = [];
            break;
        default:
            // 
    }
    // opt category
    let temp = ``;
    $.each(data, function (k, v) {
        let str = "";
        if(jQuery.inArray(k, random_interest_category) !== -1) {
            str = " selected='selected' ";
        }
        temp += `<option value="${k}" ${str}>${v}</option>`;
    });
    const opt_category = $('select.select-random-category');
    opt_category.children().not(':first').remove();
    opt_category.append(temp);
    opt_category.selectpicker('refresh');
}

function getArticle(cat_id) {
    const pinned_article_id = "{{$pinned_article_id}}";
    $.ajax({
        method: "GET",
        url: '{{ route('get.article') }}',
        data: {cat_id: cat_id},
        success: (data) => {
            let temp = ``;
            $.each(data, function (i, data) {
                const property = data.property;
                let str = "";
                if (data.id == pinned_article_id) {
                    str = " selected='selected' ";
                }
                temp += `<option value="${data.id}" ${str}>${property.title}</option>`;
            });
            const option = $("select.select-pinned-article");
            option.children().not(':first').remove();
            option.append(temp);
            option.selectpicker('refresh');
        }, error: function (error) {
            console.log(error);
        }
    });
}

</script>
@stop