@extends('layouts.app')

@section('content')
<div class="ind">
    <article>
        <div class="titlepag">
            <h2><button class="bt-arrow" onclick="window.location='{{route('configuracion')}}'"><i class="bi bi-arrow-left"></i></button>Temas</h2>
            <hr>
        </div>
        <div class="theme-cont">
            <div onclick='cambiarTema("1")' class="theme-cont-ind">
                <div class="theme-cont-ind-img" style="background-image: url('img/tema1.png');">

                </div>
                <div class="theme-cont-ind-name selected">
                    @if ($config->valor==1)
                    <i class="bi bi-check-circle-fill"></i>
                    @else
                    <i class="bi bi-check-circle"></i>
                    @endif
                    <h3>Tema claro</h3>
                </div>
            </div>
            <div onclick='cambiarTema("2")' class="theme-cont-ind">
                <div class="theme-cont-ind-img" style="background-image: url('img/tema2.png');">

                </div>
                <div class="theme-cont-ind-name">
                @if ($config->valor==2)
                    <i class="bi bi-check-circle-fill"></i>
                    @else
                    <i class="bi bi-check-circle"></i>
                    @endif
                    <h3>Tema oscuro</h3>
                </div>
            </div>
            <div class="theme-cont-ind">
                <div class="theme-cont-ind-img" style="background-image: url('img/tema2.png');">

                </div>
                <div style="color: gray" class="theme-cont-ind-name">
                    <i class="bi bi-check-circle"></i>
                    <h3>Tema oscuro</h3>
                </div>
            </div>
            <div class="theme-cont-ind">
                <div class="theme-cont-ind-img" style="background-image: url('img/tema1.png');">

                </div>
                <div style="color: gray" class="theme-cont-ind-name selected">
                    <i class="bi bi-check-circle"></i>
                    <h3>Tema claro</h3>
                </div>
            </div>
        </div>
        <div class="theme-cont">
        <div class="theme-cont-ind">
                <div class="theme-cont-ind-img" style="background-image: url('img/tema1.png');">

                </div>
                <div style="color: gray" class="theme-cont-ind-name selected">
                    <i class="bi bi-check-circle"></i>
                    <h3>Tema claro</h3>
                </div>
            </div>
            <div class="theme-cont-ind">
                <div class="theme-cont-ind-img" style="background-image: url('img/tema2.png');">

                </div>
                <div style="color: gray" class="theme-cont-ind-name">
                    <i class="bi bi-check-circle"></i>
                    <h3>Tema oscuro</h3>
                </div>
            </div>
            <div class="theme-cont-ind">
                <div class="theme-cont-ind-img" style="background-image: url('img/tema2.png');">

                </div>
                <div style="color: gray" class="theme-cont-ind-name">
                    <i class="bi bi-check-circle"></i>
                    <h3>Tema oscuro</h3>
                </div>
            </div>
            <div class="theme-cont-ind">
                <div class="theme-cont-ind-img" style="background-image: url('img/tema1.png');">

                </div>
                <div style="color: gray" class="theme-cont-ind-name selected">
                    <i class="bi bi-check-circle"></i>
                    <h3>Tema claro</h3>
                </div>
            </div>
        </div>
    </article>
</div>
<script>
    function cambiarTema(id_tema){
        var id = "tema";
        let data={
        'id': id,
        'valor': id_tema
        }
        fetch("{{route('cambiarConfiguracion')}}", {
            headers:{
            "Content-Type": "application/json",
            "Accept": "application/json, text-plain, */*",
            "X-Requested-With": "XMLHttpRequest",
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
            },
            method:'POST',
            body: JSON.stringify(data)
        })
        .then(response => response.json())
        .then(function(result){
        
        })
      window.location.reload();
    }
</script>
@endsection