@extends('base::layouts.default')

@section('header')
@include('base::layouts.headers.dashboard')
@endsection


@section('content')
<div data-ng-controller="CustomizationController as ctzCtrl">
    <div class="dashboard-page " id="dashboard-page">
        <div class="page-heading flexbox align-items-center flex-wrap">
            <h4>{{ __('organizations::index.organization') }}</h4>
        </div>

        @include('base::layouts.subnav')

        <div class="contentpanel product order_list">
            @include('base::partials.errors')
            <div class="response-msg"></div>
        </div>

        <ul class="nav nav-tabs" role="tablist">
            <li class="active">
                <a href="#home" role="tab" data-toggle="tab" style="color: black;">App Customization</a>
            </li>
        </ul>

        <div class="tab-content">
            <div id="home" class="tab-pane fade in active"><br>
                <h1 class="fs-4 fw-bold" style="font-size: 1.5rem;">Add App Customization</h1><br>
                <div class="row">
                    <div class="justify-content-center mx-auto" style="width:70%; margin-left: 10rem;">
                        <form method="POST" enctype="multipart/form-data" id="customization" data-base-validator data-ng-submit="ctzCtrl.save($event)">
                            {!! csrf_field() !!}
                            <input type="hidden" id="org-id" name="id" value="{{ request()->id }}">

                            <div class="form-group row" style="margin-bottom: 15px;">
                                <label for="add_banner" class="col-sm-2 control-label"><strong>Add Banner Logo:</strong></label>
                                <div class="col-sm-3">
                                    <img id="selectedImage" src="https://mdbootstrap.com/img/Photos/Others/placeholder.jpg"
                                        alt="example placeholder" style="width: 150px;" />
                                </div>
                                <div class="col-sm-6">
                                    <div class="btn btn-info">
                                        <label class="text-white" for="add_banner" style="margin-bottom: 0;">Choose file</label>
                                        <input type="file" name="add_banner" class="hidden" id="add_banner"
                                            onchange="displaySelectedImage(event, 'selectedImage')" />
                                    </div>
                                </div>
                            </div>

                            <div class="form-group row" style="margin-bottom: 15px;">
                                <label for="privacy_policy" class="col-sm-2 control-label"><strong>Privacy Policy:</strong></label>
                                <div class="col-sm-10">
                                    <input type="text" class="form-control" ng-model="ctzCtrl.appcustomization.privacy_policy"
                                        name="privacy_policy" placeholder="{{trans('organizations::index.ctm_privacy')}}" id="privacy_policy"
                                        style="border: 2px solid rgba(128, 130, 133, 0.36); border-radius: 20px; padding: 0px 9px; height: auto;">
                                </div>
                            </div>

                            <div class="form-group row" style="margin-bottom: 15px;">
                                <label for="feedback" class="col-sm-2 control-label"><strong>Feedback:</strong></label>
                                <div class="col-sm-10">
                                    <input type="text" class="form-control" ng-model="ctzCtrl.appcustomization.feedback"
                                        name="feedback" placeholder="{{trans('organizations::index.ctm_feedback')}}" id="feedback"
                                        style="border: 2px solid rgba(128, 130, 133, 0.36); border-radius: 20px; padding: 0px 9px; height: auto;">
                                </div>
                            </div>

                            <div class="form-group row" style="margin-bottom: 15px;">
                                <label for="user_agreement" class="col-sm-2 control-label"><strong>User Agreement:</strong></label>
                                <div class="col-sm-10">
                                    <input type="text" class="form-control" ng-model="ctzCtrl.appcustomization.user_agreement"
                                        name="user_agreement" placeholder="{{trans('organizations::index.ctm_agreement')}}" id="user_agreement"
                                        style="border: 2px solid rgba(128, 130, 133, 0.36); border-radius: 20px; padding: 0px 9px; height: auto;">
                                </div>
                            </div>

                            <div class="form-group row" style="margin-bottom: 15px;">
                                <label for="reports" class="col-sm-2 control-label"><strong>Reports:</strong></label>
                                <div class="col-sm-10">
                                    <input type="text" class="form-control" ng-model="ctzCtrl.appcustomization.reports"
                                        name="reports" placeholder="{{trans('organizations::index.ctm_reports')}}" id="reports"
                                        style="border: 2px solid rgba(128, 130, 133, 0.36); border-radius: 20px; padding: 0px 9px; height: auto;">
                                </div>
                            </div>

                            <div class="form-group text-center">
                                <button type="submit" class="btn btn-success"><strong>Submit</strong></button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>
@endsection

@section('scripts')
<script src="{{asset('adminview/assets/js/classieSidebarEffects.js')}}"></script>
<script src="{{asset('adminview/assets/js/classieSidebarEffectsDirective.js')}}"></script>
<script src="{{asset('adminview/assets/js/canvasjs.min.js')}}"></script>
<script src="{{asset('adminview/assets/js/requestFactory.js')}}"></script>
<script src="{{asset('adminview/assets/js/gridView.js')}}"></script>
<script src="{{asset('adminview/assets/js/organization/app-customization/customization.js')}}"></script>
<script src="{{asset('adminview/assets/js/common/common.js')}}"></script>
<script src="{{asset('adminview/assets/js/grid.js')}}"></script>
<script src="{{asset('adminview/assets/js/common/directive.js')}}"></script>
@endsection