@extends('admin.layouts.master')
@section('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.admin.main')</h4>
            <div class="page-title-right">
                <ol class="breadcrumb m-0">
                    <li class="breadcrumb-item"><a href="#">@lang('translation.sf_menus.admin.main')</a></li>
                    <li class="breadcrumb-item active">@lang('translation.sf_menus.admin.applications')</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.add')</h6>
            </div>
            <div class="card-body">
                <form id="createApplicationForm" action="{{ route('application.store') }}" method="POST">
                    @csrf
                    {{-- <input type="hidden" class="form-control" id="app_id" name="app_id" value="{{ $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" readonly="readonly">
                            </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 Light -->
                        <div class="col-lg-3 align-self-center">
                            <div class="mb-3 text-center">
                                <img class="rounded" alt="Logo light" width="100%" name="app_logo_light_img" src="">
                            </div>
                        </div>

                        <!-- Logo Dark -->
                        <div class="col-lg-3 align-self-center">
                            <div class="mb-3 text-center">
                                <img class="rounded" alt="Logo dark" width="100%" name="app_logo_dark_img" src="">
                            </div>
                        </div>

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

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

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

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

                        <!-- Favicon Upload -->
                        <div class="col-lg-3">
                            <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 Upload -->
                        <div class="col-lg-3">
                            <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>

                        <!-- 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 -->
                        <div class="col-lg-12">
                            <div class="hstack gap-2">
                                <button type="button" class="btn btn-link link-secondary text-end" onclick="window.history.go(-1)">@Lang('translation.cancel')</button>

                                <button type="submit" class="btn btn-soft-success ms-auto">@Lang('translation.submit')</button>
                            </div>
                        </div>
    
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

@endsection
@section('custom_scripts')
    <script src="{{ URL::asset('assets/js/apps/admin/applications/create.js') }}"></script>
@endsection