@extends('layouts.app')

@section('content')
    <div class="page-wrapper">

        <div class="row page-titles">
            <div class="col-md-5 align-self-center">
                <h3 class="text-themecolor">{{ trans('lang.category_plural') }}</h3>
            </div>

            <div class="col-md-7 align-self-center">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="{{ url('/dashboard') }}">{{ trans('lang.dashboard') }}</a></li>
                    <li class="breadcrumb-item"><a href="{!! route('categories') !!}">{{ trans('lang.category_plural') }}</a>
                    </li>
                    <li class="breadcrumb-item active">{{ trans('lang.category_create') }}</li>
                </ol>
            </div>
        </div>

        <div class="container-fluid">
            <div class="cat-edite-page max-width-box">
                <form action="{{ route('categories.store') }}" method="POST" enctype="multipart/form-data">
                    @csrf
                    <div class="card  pb-4">

                        <div class="card-header">
                            <ul class="nav nav-tabs align-items-end card-header-tabs w-100">
                                <li role="presentation" class="nav-item">
                                    <a href="#category_information" aria-controls="description" role="tab"
                                        data-toggle="tab"
                                        class="nav-link active">{{ trans('lang.category_information') }}</a>
                                </li>
                                {{-- <li role="presentation" class="nav-item">
                                    <a href="#review_attributes" aria-controls="review_attributes" role="tab"
                                        data-toggle="tab" class="nav-link">{{ trans('lang.reviewattribute_plural') }}</a>
                                </li> --}}
                            </ul>
                        </div>

                        <div class="card-body">

                            <div id="data-table_processing" class="dataTables_processing panel panel-default"
                                style="display: none;">
                                {{ trans('lang.processing') }}
                            </div>
                            <div class="error_top" style="display:none"></div>
                            @include('alerts.error_messages')
                            <div class="row restaurant_payout_create" role="tabpanel">

                                <div class="restaurant_payout_create-inner tab-content">
                                    <div role="tabpanel" class="tab-pane active" id="category_information">
                                        <fieldset>
                                            <legend>{{ trans('lang.category_create') }}</legend>
                                            <div class="form-group row width-100">
                                                <label class="col-3 control-label">{{ trans('lang.category_name') }}</label>
                                                <div class="col-7">
                                                    <input type="text" class="form-control cat-name" name="name">
                                                    <div class="form-text text-muted">
                                                        {{ trans('lang.category_name_help') }}
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="form-group row width-100">
                                                <label
                                                    class="col-3 control-label ">{{ trans('lang.category_description') }}</label>
                                                <div class="col-7">
                                                    <textarea rows="7" class="category_description form-control" id="category_description" name="description">{{ old('description') }}</textarea>
                                                    <div class="form-text text-muted">
                                                        {{ trans('lang.category_description_help') }}
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="form-group row width-100">
                                                <label
                                                    class="col-3 control-label ">{{ trans('lang.parent_category') }}</label>
                                                <div class="col-7">
                                                    <select rows="7" class="parent_category form-control"
                                                        id="parent_category" name="parent_id">
                                                        <option value="">{{ trans('lang.select_parent_category') }}
                                                        </option>
                                                        @foreach ($categories as $category)
                                                            @php
                                                                $selected = '';
                                                                if (old('parent_id') == $category->id) {
                                                                    $selected = 'selected';
                                                                }
                                                            @endphp
                                                            <option value="{{ $category->id }}" {{ $selected }}>
                                                                {{ $category->full_name }}</option>
                                                        @endforeach
                                                    </select>
                                                    {{-- <div class="form-text text-muted">
                                                        {{ trans('lang.parent_category_help') }}
                                                    </div> --}}
                                                </div>
                                            </div>
                                             <div class="form-group row width-100">
                                                <label class="col-3 control-label">{{ trans('lang.display_order') }}</label>
                                                <div class="col-7">
                                                    <input type="number" min=0 class="form-control cat-name" name="display_order">
                                                    <div class="form-text text-muted">
                                                        {{ trans('lang.display_order_help') }}
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="form-group row width-100">
                                                <label
                                                    class="col-3 control-label">{{ trans('lang.category_image') }}</label>
                                                <div class="col-7">
                                                    <input type="file" id="category_image" name="image">
                                                    <div class="placeholder_img_thumb cat_image"></div>
                                                    <div id="uploding_image"></div>
                                                    <div class="form-text text-muted w-50">
                                                        {{ trans('lang.category_image_help') }}
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="form-group row width-100">
                                                <label
                                                    class="col-3 control-label">{{ trans('lang.product_default_image') }}</label>
                                                <div class="col-7">
                                                    <input type="file" id="product_default_image"
                                                        name="product_default_image">
                                                    <div class="placeholder_img_thumb product_default_image"></div>
                                                    <div id="uploding_image"></div>
                                                    <div class="form-text text-muted w-50">
                                                        {{ trans('lang.product_default_image_help') }}
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="form-group row width-100">
                                                <label
                                                    class="col-3 control-label">{{ trans('lang.category_header_image') }}</label>
                                                <div class="col-7">
                                                    <input type="file" id="category_header_image"
                                                        name="category_header_image">
                                                    <div class="placeholder_img_thumb category_header_image"></div>
                                                    <div id="uploding_image"></div>
                                                    <div class="form-text text-muted w-50">
                                                        {{ trans('lang.category_header_image_help') }}
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="form-check row width-100">
                                                <input type="checkbox" class="is_active" name="is_active" value="1"
                                                    id="is_active">
                                                <label class="col-3 control-label"
                                                    for="is_active">{{ trans('lang.is_active') }}</label>
                                            </div>
                                            <div class="form-check row width-100">
                                                <input type="checkbox" class="is_main" name="is_main" value="1"
                                                    id="is_main">
                                                <label class="col-3 control-label"
                                                    for="is_main">{{ trans('lang.is_main') }}</label>
                                                <div class="form-text text-muted w-50">
                                                    {{ trans('lang.main_help') }}</div>
                                            </div>
                                            <div class="form-check row width-100">
                                                <input type="checkbox" class="is_carto" name="is_carto" value="1"
                                                    id="is_carto">
                                                <label class="col-3 control-label"
                                                    for="is_carto">{{ trans('lang.is_carto') }}</label>
                                                <div class="form-text text-muted w-50">
                                                    {{ trans('lang.is_carto_help') }}</div>
                                            </div>
                                            <div class="form-check row width-100 mt-2 ">
                                                <input type="checkbox" class="is_bookit" name="is_bookit" value="1"
                                                    id="is_bookit">
                                                <label class="col-3 control-label"
                                                    for="is_bookit">{{ trans('lang.is_bookit') }}</label>
                                                <div class="form-text text-muted w-50">
                                                    {{ trans('lang.is_bookit_help') }}</div>
                                            </div>
                                            
                                            {{-- <div class="form-check row width-100" id="show_in_home">
                                            <input type="checkbox" id="show_in_homepage">
                                            <label class="col-3 control-label" for="show_in_homepage">{{trans('lang.show_in_home')}}</label>
                                            <div class="form-text text-muted w-50">{{trans('lang.show_in_home_desc')}}<span id="forsection"></span></div>
                                        </div> --}}

                                        </fieldset>
                                    </div>

                                    <div role="tabpanel" class="tab-pane" id="review_attributes">

                                    </div>
                                </div>

                            </div>

                        </div>

                        <div class="form-group col-12 text-center btm-btn">
                            <button type="submit" class="btn btn-primary save_category_btn"><i class="fa fa-save"></i>
                                {{ trans('lang.save') }}
                            </button>
                            <a href="{!! route('categories') !!}" class="btn btn-default"><i
                                    class="fa fa-undo"></i>{{ trans('lang.cancel') }}</a>
                        </div>

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

    </div>
@endsection

@section('scripts')
    <script>
        var database = firebase.firestore();
        var ref = database.collection('vendor_categories');
        var photo = "";
        var id_category = "6939a05689d76";
        var category_length = 1;
        var placeholderImage = '';
        var placeholder = database.collection('settings').doc('placeHolderImage');
        var ref_review_attributes = database.collection('review_attributes');

        placeholder.get().then(async function(snapshotsimage) {
            var placeholderImageData = snapshotsimage.data();
            placeholderImage = placeholderImageData.image;
        })

        $(document).ready(function() {

            jQuery("#data-table_processing").show();

            ref.get().then(async function(snapshots) {
                category_length = snapshots.size + 1;
                jQuery("#data-table_processing").hide();
            })


            // $(".save_category_btn").click(async function () {

            //     var title = $(".cat-name").val();
            //     var description = $(".category_description").val();
            //     var item_publish = $("#item_publish").is(":checked");
            //     var show_in_homepage = $("#show_in_homepage").is(":checked");

            //     var review_attributes = [];
            //     $('#review_attributes input').each(function () {
            //         if ($(this).is(':checked')) {
            //             review_attributes.push($(this).val());
            //         }
            //     });

            //     if (title == '') {

            //         $(".error_top").show();
            //         $(".error_top").html("");
            //         $(".error_top").append("<p>{{ trans('lang.enter_cat_title_error') }}</p>");
            //         window.scrollTo(0, 0);
            //     } else {
            //         var count_vendor_categories = 0;
            //             if (show_in_homepage) {

            //                 await database.collection('vendor_categories').where('show_in_homepage', "==", true).get().then(async function (snapshots) {

            //             count_vendor_categories = snapshots.docs.length;

            //             });
            //             }
            //             if (count_vendor_categories >= 5) {
            //         alert("Already 5 categories are active for show in homepage..");
            //         return false;
            //     } else {
            //         database.collection('vendor_categories').doc(id_category).set({
            //             'id': id_category,
            //             'title': title,
            //             'description': description,
            //             'photo': photo,
            //             'review_attributes': review_attributes,
            //             'publish': item_publish,
            //             'show_in_homepage': show_in_homepage,
            //         }).then(function (result) {
            //             window.location.href = '{{ route('categories') }}';
            //         });
            //      }
            //     }

            // });

        });


        ref_review_attributes.get().then(async function(snapshots) {
            var ra_html = '';
            snapshots.docs.forEach((listval) => {
                var data = listval.data();
                ra_html += '<div class="form-check width-100">';
                ra_html += '<input type="checkbox" id="review_attribute_' + data.id + '" value="' + data
                    .id + '">';
                ra_html += '<label class="col-3 control-label" for="review_attribute_' + data.id +
                    '">' + data.title + '</label>';
                ra_html += '</div>';
            });
            $('#review_attributes').html(ra_html);
        });


        var storageRef = firebase.storage().ref('images');

        // function handleFileSelect(evt) {

        //     var f = evt.target.files[0];
        //     var reader = new FileReader();
        //     reader.onload = (function (theFile) {

        //         return function (e) {

        //             var filePayload = e.target.result;
        //             var val = $('#category_image').val().toLowerCase();
        //             var ext = val.split('.')[1];
        //             var docName = val.split('fakepath')[1];
        //             var filename = $('#category_image').val().replace(/C:\\fakepath\\/i, '')
        //             var timestamp = Number(new Date());
        //             var filename = filename.split('.')[0] + "_" + timestamp + '.' + ext;
        //             var uploadTask = storageRef.child(filename).put(theFile);
        //             uploadTask.on('state_changed', function (snapshot) {
        //                 var progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
        //             }, function (error) {
        //             }, function () {
        //                 uploadTask.snapshot.ref.getDownloadURL().then(function (downloadURL) {
        //                     jQuery("#uploding_image").text("Upload is completed");
        //                     photo = downloadURL;
        //                     $(".cat_image").empty();
        //                     $(".cat_image").append('<img class="rounded" style="width:50px" src="' + photo + '" alt="image">');

        //                 });
        //             });

        //         };
        //     })(f);
        //     reader.readAsDataURL(f);
        // }

        //upload image with compression
        // $("#category_image").resizeImg({

        //     callback: function(base64str) {

        //         var val = $('#category_image').val().toLowerCase();
        //         var ext = val.split('.')[1];
        //         var docName = val.split('fakepath')[1];
        //         var filename = $('#category_image').val().replace(/C:\\fakepath\\/i, '')
        //         var timestamp = Number(new Date());
        //         var filename = filename.split('.')[0] + "_" + timestamp + '.' + ext;

        //         //upload base64str encoded string as a image to firebase
        //         var uploadTask = storageRef.child(filename).putString(base64str.split(',')[1], "base64", {contentType: 'image/'+ext})

        //         uploadTask.on('state_changed', function (snapshot) {
        //             var progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
        //         }, function (error) {
        //         }, function () {
        //             uploadTask.snapshot.ref.getDownloadURL().then(function (downloadURL) {
        //                 jQuery("#uploding_image").text("Upload is completed");
        //                 photo = downloadURL;
        //                 $(".cat_image").empty();
        //                 $(".cat_image").append('<img class="rounded" style="width:50px" src="' + photo + '" alt="image">');
        //                 $("#category_image").val('');
        //             });
        //         });
        //     }
        // });
    </script>
@endsection