@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.service_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('services') !!}">{{trans('lang.service_plural')}}</a>
                </li>
                <li class="breadcrumb-item active">{{trans('lang.service_edit')}}</li>
            </ol>
        </div>
    </div>
    <div class="container-fluid">
        <div class="card pb-4">
             <div class="card-header">
                <ul class="nav nav-tabs" id="language-tabs" role="tablist">
                </ul>
            </div>
            <div class="card-body">

                <div class="error_top"></div>

                <div class="row restaurant_payout_create">
                    <div class="restaurant_payout_create-inner">
                        <fieldset>
                            <legend>{{trans('lang.service_details')}}</legend>
                            <div class="tab-content" id="language-contents">  </div>
                            <div class="form-group row width-50">
                                <label class="col-3 control-label global_value_label"></label>
                                <div class="col-7">
                                    <input type="number" class="form-control km_charge" min="0">
                                    <div class="form-text text-muted w-50 global_value_text">
                                    </div>
                                </div>
                            </div>
                            <input type="hidden" id="distanceType" />

                            <div class="form-group row width-100">
                                <label class="col-3 control-label">{{trans('lang.image')}}</label>
                                <div class="col-7">
                                    <input type="file" onChange="handleFileSelect(event)" class="form-control image"
                                        id="service_image">
                                    <div class="placeholder_img_thumb service_image"></div>
                                    <div id="uploding_image"></div>
                                </div>
                            </div>



                            <div class="form-group row width-50">
                                <div class="form-check">
                                    <input type="checkbox" class="service_active" id="active">
                                    <label class="col-3 control-label" for="active">{{trans('lang.enable')}}</label>
                                </div>
                            </div>

                            <div class="form-group row width-50">
                                <div class="form-check">
                                    <input type="checkbox" class="intercity_type" id="intercityType">
                                    <label class="col-3 control-label"
                                        for="intercityType">{{trans('lang.service_intercity')}}</label>
                                </div>
                            </div>
                            <div class="form-group row width-50">
                                <div class="form-check">
                                    <input type="checkbox" class="offer_rate" id="offer_rate">
                                    <label class="col-3 control-label"
                                        for="offer_rate">{{trans('lang.enable_offer_rate')}}</label>
                                </div>
                            </div>

                            <div class="form-group row width-50">
                                <div class="form-check">
                                    <input type="checkbox" class="IsglobalAdminComission" id="IsglobalAdminComission"
                                        onclick="ShowHideDiv()">
                                    <label class="col-3 control-label" for="IsglobalAdminComission">{{
    trans('lang.IsglobalAdminComossion') }}</label>
                                </div>
                            </div>
                            <div class="form-group row width-50" id="comissionType">
                                <label class="col-4 control-label">{{ trans('lang.commission_type') }}</label>
                                <div class="col-7">
                                    <select class="form-control commission_type" id="commission_type">
                                        <option value="fix">{{ trans('lang.fixed') }}</option>
                                        <option value="percentage">{{ trans('lang.percentage') }}</option>
                                    </select>
                                </div>
                            </div>

                            <div class="form-group row width-50" id="comission">
                                <label class="col-4 control-label">{{ trans('lang.admin_commission') }}<span
                                        class="required-field"></span></label>
                                <div class="col-7">
                                    <input type="number" class="form-control commission">
                                </div>
                            </div>

                        </fieldset>
                    </div>
                </div>

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

            </div>

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

@endsection

@section('scripts')

<script>

    var id = "";
    var database = firebase.firestore();
    var ref = database.collection('service').where("id", "==", id);
    var storageRef = firebase.storage().ref('images');
    var storage = firebase.storage();
    var photo = "";
    var fileName = "";
    var serviceImageFile = '';
    var append_list = '';
    var placeholderImage = "{{ asset('/images/default_user.png') }}";
    function ShowHideDiv() {
        let enableCommision = $("#IsglobalAdminComission").is(":checked");
        if (enableCommision) {
            $("#comissionType").hide();
            $("#comission").hide();
        } else {
            $("#comissionType").show();
            $("#comission").show();
        }
    }

    $(document).ready(function () {
        fetchLanguages().then(createLanguageTabs);

        $('.ride_sub_menu li').each(function () {
            var url = $(this).find('a').attr('href');
            if (url == document.referrer) {
                $(this).find('a').addClass('active');
                $('.rides_menu').addClass('active').attr('aria-expanded', true);
            }
            $('.ride_sub_menu').addClass('in').attr('aria-expanded', true);
        });

        jQuery("#overlay").show();
        ref.get().then(async function (snapshots) {
            var data = snapshots.docs[0].data();
           
            if (data.hasOwnProperty('adminCommission')) {

                if (data.adminCommission.isEnabled) {
                    $("#IsglobalAdminComission").prop('checked', true);
                    $("#comissionType").hide();
                    $("#comission").hide();
                } else {
                    $("#commission_type").val(data.adminCommission.type);
                    $(".commission").val(data.adminCommission.amount);
                }
            }
            if(Array.isArray(data.title)) {
                    data.title.forEach(function(titleObj) {
                        var inputField=$(`#service-title-${titleObj.type}`);
                        if(inputField.length) {
                            inputField.val(titleObj.title);
                        }
                    });
            }

            $(".km_charge").val(data.kmCharge);
            if (data.offerRate) {
                $('.offer_rate').prop('checked', true);
            }
            if (data.enable) {
                $('.service_active').prop('checked', true);
            }
            $('.intercity_type').prop('checked', data.intercityType ? true : false);
            photo = data.image;
            if (photo != '') {

                $(".service_image").append('<span class="image-item"><span class="remove-btn"><i class="fa fa-remove"></i></span><img class="rounded" style="width:50px" src="' + photo + '" alt="image">');
                serviceImageFile = data.image;
            } else {
                photo = "";
                $(".service_image").append('<span class="image-item"><span class="remove-btn"><i class="fa fa-remove"></i></span><img class="rounded" style="width:50px" src="' + placeholderImage + '" alt="image">');
            }
            jQuery("#overlay").hide();
        });
    });

    async function storeImageData() {
        var newPhoto = '';
        try {
            if (serviceImageFile != "" && photo != serviceImageFile) {
                var serviceOldImageUrlRef = await storage.refFromURL(serviceImageFile);
                imageBucket = serviceOldImageUrlRef.bucket;
                var envBucket = "