@extends('layouts_old.main')
@section('stylesheets')
    <link rel="stylesheet" href="{{asset('css/general-inner.css')}}"/>
    <link rel="stylesheet" href="{{asset('css/index.css')}}"/>
    <link rel="stylesheet" href="{{asset('css/settings.css')}}"/>
@endsection
@section('content')
    <div blade="{{ $viewName ?? 'unknown' }}">
    <div class="main-wrapper">
        <div id="settings">
            <div class="row justify-content-between Header top-container mb-5">
                <div class="col-md-8  d-flex  justify-content-center justify-content-md-start Header-breadcrumbs">
                    <p class="Header-breadcrumbs--title">{{ Breadcrumbs::render('settings') }}
                    </p>
                </div>
                <div class="col-md-4 d-flex  justify-content-center justify-content-md-end Header-buttons">
                    <a href="{{route('settings.create')}}" class="Header-buttons--button me-3">
                        <p class="Header-buttons--button--text">Create Setting
                        </p>
                        <img src="{{asset('images/plus.svg')}}" class="homeHeader-buttons--button--img">
                    </a>
                </div>
            </div>
            <div class="main-info-container">
                <div class="row main-info-container--header-row">
                    <p class="setting-number">No</p>
                    <p class="setting-name">Setting Name</p>
                    <p class="status">Status/Value</p>
                    <p class="action">Action</p>
                </div>
                @foreach($settings as $setting)
                    <div class=" row main-info-container--row">

                        <form class="alternative-gap" action="{{route('settings.update',['setting' => $setting])}}"
                              method="POST">
                            @csrf
                            <p class="setting-number setting-no-inner">{{$setting->id}}</p>
                            <p class="setting-name setting-name-inner">{{$setting->name}}</p>
                            <div class="status">
                                @if($setting->type == 'Boolean')
                                    <label class="form-check-label" for="disableLogin">Active</label>
                                    <input type="checkbox" class="form-check-input" id="disableLogin" name="value"
                                           @if($setting->bool_value) checked
                                        @endif>
                                @elseif($setting->type == 'String')
                                    <label for="disableLogin">Value</label>
                                    <input type="text" id="disableLogin" class="input-string" name="value"
                                           value="{{$setting->string_value}}">
                                @else
                                    <label for="disableLogin">Value</label>
                                    <input type="number" class="input-number" id="disableLogin" name="value"
                                           value="{{$setting->numeric_value}}">
                                @endif
                            </div>
                            <!-- <div class="action">
                                <button class="btn main-info-container--btn" type="submit">Save</button>
                            </div> -->
                            <div class="action form">
                                <div class="action-more">
                                    <div class="dropdown1">
                                        <img class="dropbtn1 action-more menu-dots" src="{{asset('images/menu.svg')}}">
                                        <div id="myDropdown1" class="dropdown1-content" >
                                            <button type="submit">Save</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                @endforeach
                <form class="d-flex justify-content-center mt-5" action="{{route('settings.refresh.cache')}}">
                    <button class="btn main-info-container--btn" type="submit">Refresh Cache</button>
                </form>
            </div>
        </div>

    </div>
    </div>
@endsection
@section('javascripts')
<script>
        window.onclick = function(event) {
            if (event.target.matches('.dropbtn1')) {
                var dropbuttons = document.getElementsByClassName("dropbtn1");
                for (var i = 0; i < dropbuttons.length; i++) {
                    var openDropdown = dropbuttons[i];
                    if (openDropdown.classList.contains('show') && !event.target.classList.contains('show')) {
                        openDropdown.classList.remove('show');
                    }
                }
                event.target.classList.toggle("show");
            }
            if (!event.target.matches('.dropbtn1')) {
                var dropbuttons = document.getElementsByClassName("dropbtn1");
                for (var i = 0; i < dropbuttons.length; i++) {
                    var openDropdown = dropbuttons[i];
                    if (openDropdown.classList.contains('show') && !event.target.classList.contains('show')) {
                        openDropdown.classList.remove('show');
                    }
                }
            }
        }
    </script>
@endsection