@extends('layouts.main')

@section('title','Configs')

@section('page_title','Configs')

@section('breadcrumb')
  <li class="breadcrumb-item">Configs</li>
@endsection

@section('content')

<style>
.app-img{
    width: 100px;
    cursor:pointer;
}
.card-about {
  border-radius: 2rem !important;
  /*height: 60vh;*/
}

.card-about-long {
  border-radius: 4rem !important;
  /*height: 90vh;*/
}
.small-bold{
    font-size: 0.8rem;
}
</style>
<div class="card">
    <div class="card-header p-2">
        <ul class="nav nav-pills">
            <li class="nav-item"><a class="nav-link active" href="#landing_page" data-toggle="tab">Landing Page</a></li>
            <li class="nav-item"><a class="nav-link" href="#landing_foot" data-toggle="tab">Landing Footer</a></li>
            <li class="nav-item"><a class="nav-link" href="#landing_head" data-toggle="tab">Landing Header</a></li>
            <li class="nav-item"><a class="nav-link" href="#settings" data-toggle="tab">App Settings</a></li>
        </ul>
    </div>
    <div class="card-body">
        <div class="tab-content">
            <div class="tab-pane active" id="landing_page">
                @include('app_config.landing_page')
            </div>
            <div class="tab-pane" id="landing_head">
                LANDING HEADER SETT
            </div>
            <div class="tab-pane" id="landing_foot">
                @include('app_config.landing_footer')
            </div>
            <div class="tab-pane" id="settings">
                <form method="POST" action="/edit_app_config" class="form-edit-config">
                @csrf
                <div class="card card-primary card-outline">
                    <div class="card-body box-profile " style="position: relative;">
                        <div class="text-center">
                            <img class="app-img" src="{{$datas['logo']}}" alt="App Logo" 
                            onclick="event.preventDefault(); document.getElementById('input_app_logo').click();" id="view_app_logo">
                            <input id="input_app_logo" type="file" accept=".png" name="input_app_logo" class="input-transparent" hidden onchange="putImage()">
                            
                            <label class="text-danger" style="position: absolute; top:1rem; font-size: 1rem">*</label>
                        </div>
                        <h3 class="profile-username text-center">
                            <input id="input_app_name" placeholder="RideRunner" name="input_app_name" class="input-transparent" value="{{$datas['name']}}" required autofocus>
                        </h3>
                        <!--<p class="text-muted text-center">Boss</p>-->
                        <ul class="list-group list-group-unbordered mb-3">
                            <li class="list-group-item">
                                <b>Url</b> 
                                <br>
                                <input type="url" id="input_app_url" placeholder="https://..." name="input_app_url" class="input-transparent float-right col-md-12" value="{{$datas['url']}}" required autofocus>
                            </li>
                            <li class="list-group-item">
                                <b>Descriptions</b> <label class="text-danger" style="font-size: 1rem">*</label>
                                <br>
                                <textarea class="input-transparent float-right col-md-12" id="input_app_desc" name="input_app_desc" placeholder="Ride Runner Food Web App" required autofocus>{{$datas['description']}}</textarea>
                            </li>
                            <li class="list-group-item">
                                <b>Remaks</b> <label class="text-danger" style="font-size: 1rem">*</label>
                                <br>
                                <textarea class="input-transparent float-right col-md-12" id="input_app_remarks" name="input_app_remarks" placeholder="Ride Runner Food Web App" required autofocus>{{$datas['remarks']}}</textarea>
                            </li>
                        </ul>
                        <button type="submit" class="btn btn-info pull-right">Update</button>
                    </div>
                    <div class="card-footer bg-transparent text-right">
                        <label class="text-danger" style="font-size: 0.8rem">* Changing App Logo, App Name & Description might take some time to take effect &nbsp;</label>
                    </div>
                </div>
                </form>
            </div>
        </div>
     </div>
</div>

<script>
function showImage(src, target) {
  var fr = new FileReader();
  fr.onload = function() {
    target.src = fr.result;
  }
  fr.readAsDataURL(src.files[0]);

}

function putImage() {
  var src = document.getElementById("input_app_logo");
  var target = document.getElementById("view_app_logo");
  showImage(src, target);
}

$(document).on("submit", ".form-edit-config", function(e) {
    e.preventDefault();
    var e_modal_wait = $("#modalWait");
    showLoading(e_modal_wait);
    
    var ini = $(this),  input_token = ini.find('input[name=_token]'),   url = ini.attr('action');
    
    var data = {
        is_ajax: true,
        _token: input_token.val(),
        name: ini.find("input[name=input_app_name]").val(),
        url: ini.find("input[name=input_app_url]").val(),
        description: ini.find("textarea[name=input_app_desc]").val(),
        remarks: ini.find("textarea[name=input_app_remarks]").val(),
        merchant_payment: ini.find("input[name=merchant_payment]").val(),
        access_token: ini.find("input[name=input_access_token]").val(),
        start_lat: ini.find("input[name=input_start_lat]").val(),
        start_lng: ini.find("input[name=input_start_lng]").val(),
        end_lat: ini.find("input[name=input_end_lat]").val(),
        end_lng: ini.find("input[name=input_end_lng]").val(),
    };
    
    var el_logo = document.getElementById("input_app_logo"), logo = el_logo.files[0];
    if (typeof (logo) === "undefined") {
    } else {
        var readerLogo = new FileReader();
        readerLogo.readAsDataURL(logo);
        readerLogo.onloadend = function () {
            data.logo =  readerLogo.result;
            postData(data);
        };
    } 
    function postData(data) {
        $.ajax({
            url: url,
            type: "post",
            data: data
        })
        .done(function (result) {
            hideLoading(e_modal_wait);
            input_token.val(result.newtoken);
            if (result.status) {
                var message = result.message || 'Success';
                successAlert(message);
                // location.reload(true);
            } else {
                var message = result.message || 'Api connection problem';
                failedAlert(message);
            }
            input_token.val(result.newtoken);
        })
        .fail(ajax_fail);
    }
    postData(data)
});

$(document).on("input", "#input_app_merchant_payment", function(e) {
        var inp = $('#input_app_merchant_payment').val(),
            tar = $('.view_app_merchant_payment');
        
        // tar.html(inp);
        tar.attr("href", inp);
    });
</script>

@endsection