{% 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">{{_("Banners",2)}}</li>
  </ol>
</nav>
{% endblock %}

{% block content %}

<!-- Content Row -->
<div class="row">
    <div class="col-md-8">
        <div class="card card-banner-settings">
            <div class="card-header">
                <div class="card-title">
                    {{_("Banner Settings",2)}}
                </div>
            </div>
            <div class="card-body">
                <form id="banner-settings" enctype="multipart/form-data">
                    {{ csrf_token()|raw }}
                    <div class="row">
                        <div class="mb-3 col-9">
                            <label class="form-label" for="banner_1">{{_("Banner 1",2)}}</label>
                            <input type="file" class="form-control-file upload-setting-image" id="banner_1" name="banner_1" value="{{SETTINGS.banner_1}}">
                            <small class="form-hint mt-1"><b>{{_("Optimim Size",2)}} -</b> Width:1366px & Height:556px </small>
                        </div>
                        <div class="col-3 d-flex align-self-center justify-content-center">
                            <div class="setting-image-preview">
                                {% if SETTINGS.banner_1 %}
                                    <img class="img-fluid" height="100%" src="{{MEDIA_URL}}/settings/{{SETTINGS.banner_1}}"  alt="">
                                    <button class="remove-setting" data-setting="banner_1"><i class="fa fa-times"></i></button>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="mb-3 col-12">
                            <label class="form-label" for="banner_1_title">{{_("Banner 1 Title",2)}}</label>
                            <input type="text" class="form-control" id="banner_1_title" name="banner_1_title" value="{{SETTINGS.banner_1_title}}">
                            <small class="form-hint mt-1"> </small>
                        </div>
                    </div>
                    <div class="row">
                        <div class="mb-3 col-12">
                            <label class="form-label" for="banner_1_description">{{_("Banner 1 Description",2)}}</label>
                            <input type="text" class="form-control" id="banner_1_description" name="banner_1_description" value="{{SETTINGS.banner_1_description}}">
                            <small class="form-hint mt-1"> </small>
                        </div>
                    </div>
                    <hr>
                    <div class="row">
                        <div class="mb-3 col-9">
                            <label class="form-label" for="banner_2">{{_("Banner 2",2)}}</label>
                            <input type="file" class="form-control-file upload-setting-image" id="banner_2" name="banner_2" value="{{SETTINGS.banner_2}}">
                            <small class="form-hint mt-1"><b>{{_("Optimim Size",2)}} -</b> Width:1366px & Height:556px </small>
                        </div>
                        <div class="col-3 d-flex align-self-center justify-content-center">
                            <div class="setting-image-preview">
                                {% if SETTINGS.banner_2 %}
                                    <img class="img-fluid" height="100%" src="{{MEDIA_URL}}/settings/{{SETTINGS.banner_2}}"  alt="">
                                    <button class="remove-setting" data-setting="banner_2"><i class="fa fa-times"></i></button>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="mb-3 col-12">
                            <label class="form-label" for="banner_2_title">{{_("Banner 2 Title",2)}}</label>
                            <input type="text" class="form-control" id="banner_2_title" name="banner_2_title" value="{{SETTINGS.banner_2_title}}">
                            <small class="form-hint mt-1"> </small>
                        </div>
                    </div>
                    <div class="row">
                        <div class="mb-3 col-12">
                            <label class="form-label" for="banner_2_description">{{_("Banner 2 Description",2)}}</label>
                            <input type="text" class="form-control" id="banner_2_description" name="banner_2_description" value="{{SETTINGS.banner_2_description}}">
                            <small class="form-hint mt-1"> </small>
                        </div>
                    </div>
                    <hr>
                    <div class="row">
                        <div class="mb-3 col-9">
                            <label class="form-label" for="banner_3">{{_("Banner 3",2)}}</label>
                            <input type="file" class="form-control-file upload-setting-image" id="banner_3" name="banner_3" value="{{SETTINGS.banner_3}}">
                            <small class="form-hint mt-1"><b>{{_("Optimim Size",2)}} -</b> Width:1366px & Height:556px </small>
                        </div>
                        <div class="col-3 d-flex align-self-center justify-content-center">
                            <div class="setting-image-preview">
                                {% if SETTINGS.banner_3 %}
                                    <img class="img-fluid" height="100%" src="{{MEDIA_URL}}/settings/{{SETTINGS.banner_3}}"  alt="">
                                    <button class="remove-setting" data-setting="banner_3"><i class="fa fa-times"></i></button>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="mb-3 col-12">
                            <label class="form-label" for="banner_3_title">{{_("Banner 3 Title",2)}}</label>
                            <input type="text" class="form-control" id="banner_3_title" name="banner_3_title" value="{{SETTINGS.banner_3_title}}">
                            <small class="form-hint mt-1"> </small>
                        </div>
                    </div>
                    <div class="row">
                        <div class="mb-3 col-12">
                            <label class="form-label" for="banner_3_description">{{_("Banner 3 Description",2)}}</label>
                            <input type="text" class="form-control" id="banner_3_description" name="banner_3_description" value="{{SETTINGS.banner_3_description}}">
                            <small class="form-hint mt-1"> </small>
                        </div>
                    </div>
                    <hr>

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

{% endblock %}