{% extends "admin/base.html" %}

{% block page_header %}
<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="{{  url('dashboard') }}">{{_("Dashboard",2)}}</a></li>
    <li class="breadcrumb-item">{{_("Settings",2)}}</li>
    <li class="breadcrumb-item active" aria-current="page">{{_("Images",2)}}</li>
  </ol>
</nav>
{% endblock %}

{% block content %}

<!-- Content Row -->
<div class="row">
    <div class="col-md-8">
        <div class="card card-image-settings">
            <div class="card-header">
                <div class="card-title">
                    {{_("Image Settings",2)}}
                </div>
            </div>
            <div class="card-body">
                <form id="image-settings" enctype="multipart/form-data">
                    {{ csrf_token()|raw }}
                    <div class="row">
                        <div class="mb-3 col-9">
                            <label class="form-label" for="logo">{{_("Dark Theme Logo",2)}}</label>
                            <input type="file" class="form-control-file upload-setting-image" id="logo" name="logo" value="{{SETTINGS.logo}}">
                            <small class="form-hint mt-1"><b>{{_("Optimim Size",2)}} -</b> Width:130px & Height:30px </small>
                        </div>
                        <div class="col-3 d-flex align-self-center justify-content-center">
                            <div class="setting-image-preview" style="height:{{IMAGE_SIZE.logo.height}}px; width:{{IMAGE_SIZE.logo.width}}px">
                                {% if SETTINGS.logo %}
                                    <img class="img-fluid" height="100%" src="{{MEDIA_URL}}/settings/{{SETTINGS.logo}}"  alt="">
                                    <button class="remove-setting" data-setting="logo"><i class="fa fa-times"></i></button>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="mb-3 col-9">
                            <label class="form-label" for="light_theme_logo">{{_("Light Theme Logo",2)}}</label>
                            <input type="file" class="form-control-file upload-setting-image" id="light_theme_logo" name="light_theme_logo" value="{{SETTINGS.light_theme_logo}}">
                            <small class="form-hint mt-1"><b>{{_("Optimim Size",2)}} -</b> Width:130px & Height:30px </small>
                        </div>
                        <div class="col-3 d-flex align-self-center justify-content-center">
                            <div class="setting-image-preview" style="height:{{IMAGE_SIZE.logo.height}}px; width:{{IMAGE_SIZE.logo.width}}px">
                                {% if SETTINGS.light_theme_logo %}
                                    <img class="img-fluid" height="100%" src="{{MEDIA_URL}}/settings/{{SETTINGS.light_theme_logo}}"  alt="">
                                    <button class="remove-setting" data-setting="light_theme_logo"><i class="fa fa-times"></i></button>
                                {% endif %}
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="mb-3 col-9">
                            <label class="form-label" for="small_logo">{{_("Dark Theme Small Logo",2)}}</label>
                            <input type="file" class="form-control-file upload-setting-image" id="small_logo" name="small_logo" value="{{SETTINGS.small_logo}}">
                            <small class="form-hint mt-1"><b>{{_("Optimim Size",2)}} -</b> Width:50px & Height:50px </small>
                        </div>
                        <div class="col-3 d-flex align-self-center justify-content-center">
                            <div class="setting-image-preview " style="height:{{IMAGE_SIZE.small_logo.height}}px; width:{{IMAGE_SIZE.small_logo.width}}px">
                                {% if SETTINGS.small_logo %}
                                    <img class="img-fluid" height="100%" src="{{MEDIA_URL}}/settings/{{SETTINGS.small_logo}}"  alt="">
                                    <button class="remove-setting" data-setting="small_logo"><i class="fa fa-times"></i></button>
                                {% endif %}
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="mb-3 col-9">
                            <label class="form-label" for="light_theme_small_logo">{{_("Light Theme Small Logo",2)}}</label>
                            <input type="file" class="form-control-file upload-setting-image" id="light_theme_small_logo" name="light_theme_small_logo" value="{{SETTINGS.light_theme_small_logo}}">
                            <small class="form-hint mt-1"><b>{{_("Optimim Size",2)}} -</b> Width:50px & Height:50px </small>
                        </div>
                        <div class="col-3 d-flex align-self-center justify-content-center">
                            <div class="setting-image-preview " style="height:{{IMAGE_SIZE.small_logo.height}}px; width:{{IMAGE_SIZE.small_logo.width}}px">
                                {% if SETTINGS.light_theme_small_logo %}
                                    <img class="img-fluid" height="100%" src="{{MEDIA_URL}}/settings/{{SETTINGS.light_theme_small_logo}}"  alt="">
                                    <button class="remove-setting" data-setting="light_theme_small_logo"><i class="fa fa-times"></i></button>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="mb-3 col-9">
                            <label class="form-label" for="favicon">{{_("Favicon",2)}}</label>
                            <input type="file" class="form-control-file upload-setting-image" id="favicon" name="favicon" value="{{SETTINGS.favicon}}">
                            <small class="form-hint mt-1"><b>{{_("Optimim Size",2)}} -</b> Width:196px & Height:196px </small>
                        </div>
                        <div class="col-3 d-flex align-self-center justify-content-center">
                            <div class="setting-image-preview" style="height:{{IMAGE_SIZE.favicon.height}}px; width:{{IMAGE_SIZE.favicon.width}}px">
                                {% if SETTINGS.favicon %}
                                    <img class="img-fluid" height="100%" src="{{MEDIA_URL}}/settings/{{SETTINGS.favicon}}"  alt="">
                                    <button class="remove-setting" data-setting="favicon"><i class="fa fa-times"></i></button>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="mb-3 col-9">
                            <label class="form-label" for="login_page_image">{{_("Login Page Image",2)}}</label>
                            <input type="file" class="form-control-file upload-setting-image" id="login_page_image" name="login_page_image" value="{{SETTINGS.login_page_image}}">
                            <small class="form-hint mt-1"><b>{{_("Optimim Size",2)}} -</b> Width:440px & Height:500px </small>
                        </div>
                        <div class="col-3 d-flex align-self-center justify-content-center">
                            <div class="setting-image-preview">
                                {% if SETTINGS.login_page_image %}
                                    <img class="img-fluid" height="100%" src="{{MEDIA_URL}}/settings/{{SETTINGS.login_page_image}}"  alt="">
                                    <button class="remove-setting" data-setting="login_page_image"><i class="fa fa-times"></i></button>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="mb-3 col-9">
                            <label class="form-label" for="register_page_image">{{_("Register Page Image",2)}}</label>
                            <input type="file" class="form-control-file upload-setting-image" id="register_page_image" name="register_page_image" value="{{SETTINGS.register_page_image}}">
                            <small class="form-hint mt-1"><b>{{_("Optimim Size",2)}} -</b> Width:440px & Height:500px </small>
                        </div>
                        <div class="col-3 d-flex align-self-center justify-content-center">
                            <div class="setting-image-preview">
                                {% if SETTINGS.register_page_image %}
                                    <img class="img-fluid" height="100%" src="{{MEDIA_URL}}/settings/{{SETTINGS.register_page_image}}"  alt="">
                                    <button class="remove-setting" data-setting="register_page_image"><i class="fa fa-times"></i></button>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="mb-3 col-9">
                            <label class="form-label" for="forget_password_page_image">{{_("Forget Password Page Image",2)}}</label>
                            <input type="file" class="form-control-file upload-setting-image" id="forget_password_page_image" name="forget_password_page_image" value="{{SETTINGS.forget_password_page_image}}">
                            <small class="form-hint mt-1"><b>{{_("Optimim Size",2)}} -</b> Width:440px & Height:500px </small>
                        </div>
                        <div class="col-3 d-flex align-self-center justify-content-center">
                            <div class="setting-image-preview">
                                {% if SETTINGS.forget_password_page_image %}
                                    <img class="img-fluid" height="100%" src="{{MEDIA_URL}}/settings/{{SETTINGS.forget_password_page_image}}"  alt="">
                                    <button class="remove-setting" data-setting="forget_password_page_image"><i class="fa fa-times"></i></button>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="mb-3 col-9">
                            <label class="form-label" for="default_ogimage">{{_("OG image",2)}}</label>
                            <input type="file" class="form-control-file upload-setting-image" id="default_ogimage" name="default_ogimage" value="{{SETTINGS.default_ogimage}}">
                        </div>
                        <div class="col-3 d-flex align-self-center justify-content-center">
                            <div class="setting-image-preview">
                                {% if SETTINGS.default_ogimage %}
                                    <img class="img-fluid" height="100%" src="{{MEDIA_URL}}/settings/{{SETTINGS.default_ogimage}}"  alt="">
                                    <button class="remove-setting" data-setting="default_ogimage"><i class="fa fa-times"></i></button>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="mb-3 col-9">
                            <label class="form-label" for="boxed_bg">{{_("Chat Page Background for Boxed Layout",2)}}</label>
                            <input type="file" class="form-control-file upload-setting-image" id="boxed_bg" name="boxed_bg" value="{{SETTINGS.boxed_bg}}">
                        </div>
                        <div class="col-3 d-flex align-self-center justify-content-center">
                            <div class="setting-image-preview">
                                {% if SETTINGS.boxed_bg %}
                                    <img class="img-fluid" height="100%" src="{{MEDIA_URL}}/settings/{{SETTINGS.boxed_bg}}"  alt="">
                                    <button class="remove-setting" data-setting="boxed_bg"><i class="fa fa-times"></i></button>
                                {% endif %}
                            </div>
                        </div>
                    </div>

                    <button type="button" class="btn btn-primary update-settings" value="image-settings">{{_("Update",2)}}</button>
                </form>
            </div>
        </div>
    </div>
</div>

{% endblock %}