@extends('administration.layouts.master')
@section('page_content')

<!-- PAGE TITLE -->
<div class="row">
    <div class="col-12">
        <div class="page-title-box d-sm-flex align-items-center justify-content-between">
            <h4 class="mb-sm-0 font-size-18">@lang('translation.sf_menus.administration.main')</h4>
            <div class="page-title-right">
                <ol class="breadcrumb m-0">
                    <li class="breadcrumb-item"><a href="#">@lang('translation.sf_menus.administration.main')</a></li>
                    <li class="breadcrumb-item active">@lang('translation.sf_menus.administration.application')</li>
                </ol>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-xxl-12">
        <div class="card">
            <div class="card-header">
                <h6 class="card-title mb-0">@lang('translation.sf_menus.administration.application')</h6>
            </div>
            <div class="card-body">
                <form id="applicationForm" action="{{ route('application.update') }}" method="POST">
                    @csrf
                    <input type="hidden" class="form-control" id="app_id" name="app_id"/>
    
                    <div class="row">
    
                        <!-- Name -->
                        <div class="col-lg-4">
                            <div class="mb-3">
                                <label for="app_name" class="form-label">@Lang('translation.contents.name')</label>
                                <input type="text" class="form-control" id="app_name" name="app_name" placeholder="">
                            </div>
                        </div>

                        <!-- Slogan -->
                        <div class="col-lg-4">
                            <div class="mb-3">
                                <label for="app_slogan" class="form-label">@Lang('translation.contents.slogan')</label>
                                <input type="text" class="form-control" id="app_slogan" name="app_slogan" placeholder="">
                            </div>
                        </div>

                        <!-- URL -->
                        <div class="col-lg-4">
                            <div class="mb-3">
                                <label for="app_url" class="form-label">URL</label>
                                <input type="text" class="form-control" id="app_url" name="app_url" placeholder="">
                            </div>
                        </div>

                        <!-- Description -->
                        <div class="col-lg-12">
                            <div class="mb-4">
                                <label for="app_description" class="form-label">@Lang('translation.contents.description')</label>
                                <textarea class="form-control" id="app_description" name="app_description" placeholder="" rows="3"></textarea>
                            </div>
                        </div>

                        <!-- Logo -->
                        <div class="col-lg-4 align-self-center">
                            <div class="mb-3 text-center">
                                <img class="rounded" alt="Logo" width="250" name="app_logo_img" src="">
                            </div>
                        </div>

                        <!-- Favicon -->
                        <div class="col-lg-4 align-self-center">
                            <div class="mb-3 text-center">
                                <img class="rounded" alt="Favicon" width="250" name="app_favicon_img" src="">
                            </div>
                        </div>

                        <!-- Background -->
                        <div class="col-lg-4 align-self-center">
                            <div class="mb-3 text-center">
                                <img class="rounded" alt="Background" width="250" name="app_background_img" src="">
                            </div>
                        </div>

                        <!-- Logo -->
                        <div class="col-lg-4">
                            <div class="mb-3">
                                <label for="app_logo" class="form-label">Logo</label>
                                <input type="file" class="form-control" id="app_logo" name="app_logo" placeholder="">
                            </div>
                        </div>

                        <!-- Favicon -->
                        <div class="col-lg-4">
                            <div class="mb-3">
                                <label for="app_favicon" class="form-label">Favicon</label>
                                <input type="file" class="form-control" id="app_favicon" name="app_favicon" placeholder="">
                            </div>
                        </div>

                        <!-- Background -->
                        <div class="col-lg-4">
                            <div class="mb-3">
                                <label for="app_background" class="form-label">@Lang('translation.contents.background')</label>
                                <input type="file" class="form-control" id="app_background" name="app_background" placeholder="">
                            </div>
                        </div>

                        <!-- Primary color -->
                        <div class="col-lg-6">
                            <div class="mb-3">
                                <label for="app_primary_color" class="form-label">@Lang('translation.contents.primary_color')</label>
                                <input type="text" class="form-control" id="app_primary_color" name="app_primary_color" placeholder="">
                            </div>
                        </div>

                        <!-- Secondary color -->
                        <div class="col-lg-6">
                            <div class="mb-3">
                                <label for="app_secondary_color" class="form-label">@Lang('translation.contents.secondary_color')</label>
                                <input type="text" class="form-control" id="app_secondary_color" name="app_secondary_color" placeholder="">
                            </div>
                        </div>

                        <!-- Android App URL -->
                        <div class="col-lg-6">
                            <div class="mb-3">
                                <label for="app_android_url" class="form-label">@Lang('translation.contents.android_app_url')</label>
                                <input type="text" class="form-control" id="app_android_url" name="app_android_url" placeholder="">
                            </div>
                        </div>

                        <!-- iOS App URL -->
                        <div class="col-lg-6">
                            <div class="mb-3">
                                <label for="app_ios_url" class="form-label">@Lang('translation.contents.ios_app_url')</label>
                                <input type="text" class="form-control" id="app_ios_url" name="app_ios_url" placeholder="">
                            </div>
                        </div>

                        <!-- Buttons -->
                        @if(auth()->user()->hasPermissionTo('edit', null))
                        <div class="col-lg-12">
                            <div class="hstack gap-2 justify-content-end">
                                <button type="submit" class="btn btn-soft-success">@Lang('translation.update')</button>
                            </div>
                        </div>
                        @endif
    
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

@endsection
@section('custom_scripts')
    <script src="{{ URL::asset('build/js/apps/administration/application.js') }}"></script>
@endsection