@extends('layouts.dashboard')

@section('dashboard')
    @php
        $tema_id = \FCRD::getTemaId();
    @endphp
    @if (session('message'))
        <div class="alert alert-success mb-3">
            {{ session('message') }}
        </div>
    @endif
    <ul class="breadcrumb m-0 p-0">
        <li><a href="/dashboard">Home</a></li>
        <li><strong>Apariencia</strong></li>
    </ul>
    <h1 class="titulo-h1 mb-4">Apariencia</h1>


    <div class="accordion" id="accordionExample">
        <div class="card">
            <div class="card-header" id="headingOne">
                <h2 class="mb-0">
                    <button class="btn btn-accordion btn-block text-left collapsed" type="button" data-toggle="collapse"
                        data-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
                        Colores
                        <i class="fa fa-chevron-down icon-down-accordion"></i>
                    </button>
                </h2>
            </div>

            <div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordionExample">

                <form action="{{ route('apariencia-editada-colores') }}" id="apariencia-editada-colores"
                    onsubmit="return formApariencia(this.id)" method="post">
                    <div class="card-body">
                        <h3 class="p-3">Colores Principales</h3>
                        <div class="card-body">
                            <div class="row align-items-center">
                                <div class="col-md form-group">
                                    <label for="color-principal" class="text-uppercase">Color Principal:</label>
                                    <div class="d-flex align-items-center">
                                        <input type="text" name="color-principal" id="color-principal"
                                            class="form-control form-control-sm color-picker"
                                            placeholder="#000000"disabled>
                                        <button type="button" class="btn btn-success btn-rounded ml-2 btn-sm"
                                            title="Limpiar Campo" onclick="habilitarColor('color-principal')"><i
                                                class="fa fa-trash"></i></button>
                                    </div>

                                </div>
                                <div class="col-md form-group">
                                    <label for="color-secundario" class="text-uppercase">Color Secundario:</label>

                                    <div class="d-flex align-items-center">
                                        <input type="text" name="color-secundario" id="color-secundario"
                                            class="form-control form-control-sm color-picker"
                                            placeholder="#000000"disabled>
                                        <button type="button" class="btn btn-success btn-rounded ml-2 btn-sm"
                                            title="Limpiar Campo" onclick="habilitarColor('color-secundario')"><i
                                                class="fa fa-trash"></i></button>
                                    </div>
                                </div>
                                <div class="col-md form-group">
                                    <label for="color-titulos" class="text-uppercase">Color Títulos:</label>

                                    <div class="d-flex align-items-center">
                                        <input type="text" name="color-titulo" id="color-titulo"
                                            class="form-control form-control-sm color-picker"
                                            placeholder="#000000"disabled>
                                        <button type="button" class="btn btn-success btn-rounded ml-2 btn-sm"
                                            title="Limpiar Campo" onclick="habilitarColor('color-titulo')"><i
                                                class="fa fa-trash"></i></button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <h3 class="p-3">Barra Informaciones</h3>
                        <div class="card-body">
                            <div class="row align-items-center">
                                <div class="col-md form-group">
                                    <label for="color-barra-superior-background" class="text-uppercase">Background:</label>


                                    <div class="d-flex align-items-center">
                                        <input type="text" name="color-barra-superior-background"
                                            id="color-barra-superior-background"
                                            class="form-control form-control-sm color-picker"
                                            placeholder="#000000"disabled>
                                        <button type="button" class="btn btn-success btn-rounded ml-2 btn-sm"
                                            title="Limpiar Campo"
                                            onclick="habilitarColor('color-barra-superior-background')"><i
                                                class="fa fa-trash"></i></button>
                                    </div>

                                </div>
                                <div class="col-md form-group">
                                    <label for="color-barra-superior-texto" class="text-uppercase">Color de Texto:</label>

                                    <div class="d-flex align-items-center">
                                        <input type="text" name="color-barra-superior-texto"
                                            id="color-barra-superior-texto"
                                            class="form-control form-control-sm color-picker"
                                            placeholder="#000000"disabled>
                                        <button type="button" class="btn btn-success btn-rounded ml-2 btn-sm"
                                            title="Limpiar Campo" onclick="habilitarColor('color-barra-superior-texto')"><i
                                                class="fa fa-trash"></i></button>
                                    </div>
                                </div>


                            </div>
                        </div>

                        <h4 class="p-3">Colores Botones Catalogos</h4>
                        <div class="card-body">
                            <div class="row align-items-center">

                                <div class="col-md form-group">
                                    <div class="row">
                                        <div class="col-6">
                                            <label for="color-btn-comprar" class="text-uppercase">Background botón
                                                comprar:</label>


                                            <div class="d-flex align-items-center">
                                                <input type="text" name="color-btn-comprar" id="color-btn-comprar"
                                                    class="form-control form-control-sm color-picker"
                                                    placeholder="#000000"disabled>
                                                <button type="button" class="btn btn-success btn-rounded ml-2 btn-sm"
                                                    title="Limpiar Campo" onclick="habilitarColor('color-btn-comprar')"><i
                                                        class="fa fa-trash"></i></button>
                                            </div>
                                        </div>
                                        <div class="col-6">
                                            <label for="color-btn-comprar-oscuro" class="text-uppercase">Color texto botón
                                                comprar:</label>
                                            <div class="d-flex align-items-center">
                                                <input type="text" name="color-btn-comprar-oscuro"
                                                    id="color-btn-comprar-oscuro"
                                                    class="form-control form-control-sm color-picker"
                                                    placeholder="#000000"disabled>
                                                <button type="button" class="btn btn-success btn-rounded ml-2 btn-sm"
                                                    title="Limpiar Campo"
                                                    onclick="habilitarColor('color-btn-comprar-oscuro')"><i
                                                        class="fa fa-trash"></i></button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md form-group">
                                    <div class="row">
                                        <div class="col-6">
                                            <label for="color-btn-cotizar" class="text-uppercase">Background botón
                                                cotizar:</label>


                                            <div class="d-flex align-items-center">
                                                <input type="text" name="color-btn-cotizar" id="color-btn-cotizar"
                                                    class="form-control form-control-sm color-picker"
                                                    placeholder="#000000"disabled>
                                                <button type="button" class="btn btn-success btn-rounded ml-2 btn-sm"
                                                    title="Limpiar Campo" onclick="habilitarColor('color-btn-cotizar')"><i
                                                        class="fa fa-trash"></i></button>
                                            </div>
                                        </div>
                                        <div class="col-6">
                                            <label for="color-btn-cotizar-oscuro" class="text-uppercase">Color texto botón
                                                cotizar:</label>
                                            <div class="d-flex align-items-center">
                                                <input type="text" name="color-btn-cotizar-oscuro"
                                                    id="color-btn-cotizar-oscuro"
                                                    class="form-control form-control-sm color-picker"
                                                    placeholder="#000000"disabled>
                                                <button type="button" class="btn btn-success btn-rounded ml-2 btn-sm"
                                                    title="Limpiar Campo"
                                                    onclick="habilitarColor('color-btn-cotizar-oscuro')"><i
                                                        class="fa fa-trash"></i></button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="card-body">
                        <h3 class="p-3">Encabezado</h3>
                        <div class="card-body">
                            <div class="row align-items-center">

                                <div class="col-md form-group">
                                    <label for="color-header" class="text-uppercase">Background Encabezado:</label>



                                    <div class="d-flex align-items-center">
                                        <input type="text" name="color-header" id="color-header"
                                            class="form-control form-control-sm color-picker"
                                            placeholder="#000000"disabled>
                                        <button type="button" class="btn btn-success btn-rounded ml-2 btn-sm"
                                            title="Limpiar Campo" onclick="habilitarColor('color-header')"><i
                                                class="fa fa-trash"></i></button>
                                    </div>
                                </div>
                                <div class="col-md form-group">
                                    <label for="color-titulo-header" class="text-uppercase">Color Títulos:</label>

                                    <div class="d-flex align-items-center">
                                        <input type="text" name="color-titulo-header" id="color-titulo-header"
                                            class="form-control form-control-sm color-picker"
                                            placeholder="#000000"disabled>
                                        <button type="button" class="btn btn-success btn-rounded ml-2 btn-sm"
                                            title="Limpiar Campo" onclick="habilitarColor('color-titulo-header')"><i
                                                class="fa fa-trash"></i></button>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="card-body">
                            <h3>Menú</h3>
                            <div class="row align-items-center">

                                <div class="col-md form-group">
                                    <label for="color-barra-header" class="text-uppercase">Background menu:</label>


                                    <div class="d-flex align-items-center">
                                        <input type="text" name="color-barra-header" id="color-barra-header"
                                        class="form-control color-picker form-control-sm" placeholder="#000000"disabled>
                                        <button type="button" class="btn btn-success btn-rounded ml-2 btn-sm" title="Limpiar Campo" onclick="habilitarColor('color-barra-header')"><i class="fa fa-trash"></i></button>
                                    </div>
                                </div>
                                <div class="col-md form-group">
                                    <label for="color-link-menu" class="text-uppercase">Color link menú:</label>


                                    <div class="d-flex align-items-center">
                                        <input type="text" id="color-link-menu" name="color-link-menu"
                                        class="form-control color-picker form-control-sm" placeholder="#000000"disabled>
                                        <button type="button" class="btn btn-success btn-rounded ml-2 btn-sm" title="Limpiar Campo" onclick="habilitarColor('color-link-menu')"><i class="fa fa-trash"></i></button>
                                    </div>
                                </div>
                                <div class="col-md form-group">
                                    <label for="color-link-menu-hover" class="text-uppercase">Color link menú hover:</label>


                                    <div class="d-flex align-items-center">
                                        <input type="text" name="color-link-menu-hover" id="color-link-menu-hover"
                                        class="form-control color-picker form-control-sm" placeholder="#000000"disabled>
                                        <button type="button" class="btn btn-success btn-rounded ml-2 btn-sm" title="Limpiar Campo" onclick="habilitarColor('color-link-menu-hover')"><i class="fa fa-trash"></i></button>
                                    </div>
                                </div>
                                <div class="col-md form-group">
                                    <label for="bg-menu-hover" class="text-uppercase">Background menú hover:</label>


                                    <div class="d-flex align-items-center">
                                        <input type="text" name="bg-menu-hover" id="bg-menu-hover"
                                        class="form-control color-picker form-control-sm" placeholder="#000000"disabled>
                                        <button type="button" class="btn btn-success btn-rounded ml-2 btn-sm" title="Limpiar Campo" onclick="habilitarColor('bg-menu-hover')"><i class="fa fa-trash"></i></button>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="card-body">
                            <h4>Body</h4>
                            <div class="row align-items-center">
                                <div class="col-md form-group">
                                    <label for="color-titulo" class="text-uppercase">Background Body:</label>


                                    <div class="d-flex align-items-center">
                                        <input type="text" name="bg-body" id="bg-body"
                                        class="form-control color-picker form-control-sm" placeholder="#000000"disabled>
                                        <button type="button" class="btn btn-success btn-rounded ml-2 btn-sm" title="Limpiar Campo" onclick="habilitarColor('bg-body')"><i class="fa fa-trash"></i></button>
                                    </div>
                                </div>


                                <div class="col-md form-group">
                                    <label for="color-footer" class="text-uppercase">Textos:</label>


                                    <div class="d-flex align-items-center">
                                        <input type="text" name="color-textos-body" id="color-textos-body"
                                        class="form-control color-picker form-control-sm" placeholder="#000000"disabled>
                                        <button type="button" class="btn btn-success btn-rounded ml-2 btn-sm" title="Limpiar Campo" onclick="habilitarColor('color-textos-body')"><i class="fa fa-trash"></i></button>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="card-body">
                            <h4>Píe de pagina</h4>
                            <div class="row align-items-center">

                                <div class="col-md form-group">
                                    <label for="color-footer" class="text-uppercase">Backgroud Pie de Página:</label>


                                <div class="d-flex align-items-center">
                                    <input type="text" name="color-footer" id="color-footer"
                                    class="form-control color-picker form-control-sm" placeholder="#000000"disabled>
                                    <button type="button" class="btn btn-success btn-rounded ml-2 btn-sm" title="Limpiar Campo" onclick="habilitarColor('color-footer')"><i class="fa fa-trash"></i></button>
                                </div>
                                </div>

                                <div class="col-md form-group">
                                    <label for="color-titulo-footer" class="text-uppercase">Titulos:</label>


                                    <div class="d-flex align-items-center">
                                        <input type="text" name="color-titulo-footer" id="color-titulo-footer"
                                        class="form-control color-picker form-control-sm" placeholder="#000000"disabled>
                                        <button type="button" class="btn btn-success btn-rounded ml-2 btn-sm" title="Limpiar Campo" onclick="habilitarColor('color-titulo-footer')"><i class="fa fa-trash"></i></button>
                                    </div>
                                </div>
                                <div class="col-md form-group">
                                    <label for="color-texto-footer" class="text-uppercase">Textos:</label>


                                    <div class="d-flex align-items-center">
                                        <input type="text" name="color-texto-footer" id="color-texto-footer"
                                        class="form-control color-picker form-control-sm" placeholder="#000000"disabled>
                                        <button type="button" class="btn btn-success btn-rounded ml-2 btn-sm" title="Limpiar Campo" onclick="habilitarColor('color-texto-footer')"><i class="fa fa-trash"></i></button>
                                    </div>
                                </div>

                            </div>

                        </div>