@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_edit') }}</li>
                </ol>
            </div>
        </div>

        <div class="container-fluid">
            <div class="cat-edite-page max-width-box">
                <form action="{{ route('categories.put', $category->id) }}" method="POST" enctype="multipart/form-data">
                    @csrf
                    @method('PUT')
                    <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_edit') }}</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"
                                                        value="{{ old('name', $category->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">{{ $category->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->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" value="{{$category->display_order}}" min=0 class="form-control cat-name" name="display_order">
                                                    <div class="form-text text-muted">
                                                        {{ trans('lang.display_order_help') }}
                                                    </div>
                                                </div>
                                            </div>
                                            <!-- Category Image -->
                                            <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 id="uploding_image"></div>
                                                    <div class="form-text text-muted w-50">{{ trans('lang.category_image_help') }}</div>
                                                </div>
                                            </div>
                                            @if ($category->getMedia('images')->count())
                                                <table class="table mt-3">
                                                    <thead>
                                                        <tr>
                                                            <th>{{ trans('lang.image') }}</th>
                                                            <th>{{ trans('lang.actions') }}</th>
                                                        </tr>
                                                    </thead>
                                                    <tbody>
                                                        @foreach ($category->getMedia('images') as $media)
                                                            <tr>
                                                                <td>
                                                                    <img src="{{ $media->getUrl() }}" alt="category_image"
                                                                        class="img-thumbnail" style="width: 150px;">
                                                                </td>
                                                                <td>
                                                                    <button type="button" class="btn btn-danger btn-sm"
                                                                        onclick="deleteMedia('{{ route('categories.media.destroy', [$category->id, $media->id]) }}')">
                                                                        ✕ Delete
                                                                    </button>
                                                                </td>
                                                            </tr>
                                                        @endforeach
                                                    </tbody>
                                                </table>
                                            @endif

                                            <!-- Product Default Image -->
                                            <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 id="uploding_image"></div>
                                                    <div class="form-text text-muted w-50">{{ trans('lang.product_default_image_help') }}</div>
                                                </div>
                                            </div>
                                            @if ($category->getMedia('product_default_image')->count())
                                                <table class="table mt-3">
                                                    <thead>
                                                        <tr>
                                                            <th>{{ trans('lang.image') }}</th>
                                                            <th>{{ trans('lang.actions') }}</th>
                                                        </tr>
                                                    </thead>
                                                    <tbody>
                                                        @foreach ($category->getMedia('product_default_image') as $media)
                                                            <tr>
                                                                <td>
                                                                    <img src="{{ $media->getUrl() }}" alt="product_default_image"
                                                                        class="img-thumbnail" style="width: 150px;">
                                                                </td>
                                                                <td>
                                                                    <button type="button" class="btn btn-danger btn-sm"
                                                                        onclick="deleteMedia('{{ route('categories.media.destroy', [$category->id, $media->id]) }}')">
                                                                        ✕ Delete
                                                                    </button>
                                                                </td>
                                                            </tr>
                                                        @endforeach
                                                    </tbody>
                                                </table>
                                            @endif

                                            <!-- Category Header Image -->
                                            <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 id="uploding_image"></div>
                                                    <div class="form-text text-muted w-50">{{ trans('lang.category_header_image_help') }}</div>
                                                </div>
                                            </div>
                                            @if ($category->getMedia('category_header_image')->count())
                                                <table class="table mt-3">
                                                    <thead>
                                                        <tr>
                                                            <th>{{ trans('lang.image') }}</th>
                                                            <th>{{ trans('lang.actions') }}</th>
                                                        </tr>
                                                    </thead>
                                                    <tbody>
                                                        @foreach ($category->getMedia('category_header_image') as $media)
                                                            <tr>
                                                                <td>
                                                                    <img src="{{ $media->getUrl() }}" alt="category_header_image"
                                                                        class="img-thumbnail" style="width: 150px;">
                                                                </td>
                                                                <td>
                                                                    <button type="button" class="btn btn-danger btn-sm"
                                                                        onclick="deleteMedia('{{ route('categories.media.destroy', [$category->id, $media->id]) }}')">
                                                                        ✕ Delete
                                                                    </button>
                                                                </td>
                                                            </tr>
                                                        @endforeach
                                                    </tbody>
                                                </table>
                                            @endif

                                            <div class="form-check row width-100">
                                                <input type="checkbox" class="is_active" id="is_active" name="is_active"
                                                    value="1" {{ $category->is_active == 1 ? 'checked' : '' }}>
                                                <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" id="is_main" name="is_main"
                                                    value="1" {{ $category->is_main == 1 ? 'checked' : '' }}>
                                                <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"  {{ $category->is_carto == 1 ? 'checked' : '' }}>
                                                <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">
                                                <input type="checkbox" class="is_bookit" name="is_bookit" value="1"
                                                    id="is_bookit"  {{ $category->is_bookit == 1 ? 'checked' : '' }}>
                                                <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 id = "";
        // var database = firebase.firestore();
        // var ref = database.collection('vendor_categories').where("id", "==", id);
        // var photo = "";
        // var placeholderImage = '';
        // var placeholder = database.collection('settings').doc('placeHolderImage');
        // var ref_review_attributes = database.collection('review_attributes');
        // var category = '';

        // 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 = snapshots.docs[0].data();
            //     $(".cat-name").val(category.title);
            //     $(".category_description").val(category.description);
            //     photo = category.photo;

            //     if (photo != '' && photo != null) {

            //         $(".cat_image").append('<img class="rounded" style="width:50px" src="' + photo + '" alt="image">');
            //     } else {

            //         $(".cat_image").append('<img class="rounded" style="width:50px" src="' + placeholderImage + '" alt="image">');
            //     }

            //     if (category.publish) {
            //         $("#item_publish").prop('checked', true);
            //     }

            //     if (category.show_in_homepage) {
            //         $("#show_in_homepage").prop('checked', true);
            //     }


            jQuery("#data-table_processing").hide();
            // })

            // 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" >';
            //         var checked = $.inArray(data.id, category.review_attributes) !== -1 ? 'checked' : '';
            //         ra_html += '<input type="checkbox" id="review_attribute_' + data.id + '" value="' + data.id + '" ' + checked + '>';
            //         ra_html += '<label class="col-3 control-label" for="review_attribute_' + data.id + '">' + data.title + '</label>';
            //         ra_html += '</div>';
            //     })
            //     $('#review_attributes').html(ra_html);
            // })


            // $(".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).where("id", "!=", id).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).update({
            //             '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') }}';
            //         });
            //     }
            //     }

            // });


        });


        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('');
        //             });
        //         });
        //     }
        // });
        function deleteMedia(deleteUrl) {
                if (confirm('Are you sure you want to delete this image?')) {
                    fetch(deleteUrl, {
                        method: 'DELETE',
                        headers: {
                            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                        }
                    }).then(response => {
                        if (response.ok) {
                            location.reload(); // Reload to update the UI
                        } else {
                            alert('Failed to delete image.');
                        }
                    });
                }
            }
    </script>
@endsection