@extends('layout/ace')

@section('breadcrumbs')
    {{ Breadcrumbs::render('Subscribe') }}
@endsection

@section('title', 'Pregled Subscribe-a')
@section('content')
<form action="{{ route('cms.subscribe.update', ['subscribe' => $subscribe]) }}" method="POST">
    @csrf
    @method('PATCH')
    <div class="row">
        <div class="col-12 col-lg-8 custom-form">
            <div class="bgc-white pt-0 radius-1 shadow-sm mx-auto stack-block">
                <div class="w-100 brc-info-tp2 radius-t-1"></div>
                <div class="card h-100 border-0">
                    <div class="card-body h-100 d-flex flex-column justify-content-start py-3 px-3 border-0">
                        <div class="row">

                            <x-krojac-input value="{!! htmlspecialchars_decode($subscribe->subscribePackage->description) !!}" label="Opis" name="package[description]" id="description" col="12"></x-krojac-input>

                            <x-krojac-textarea value="{{ $subscribe->subscribePackage->content }}" name="package[content]" id="content" label="Sadržaj" col="12" :textEditor="true"></x-krojac-textarea>

                        </div>
                    </div>
                </div>
            </div>
            @include('cms.subscribe.partials._subscribe-courses')
        </div>
        <div class="col-12 col-lg-4 user-edit-aside">

            @include('cms.subscribe.partials._aside-options')

        </div>
    </div>
</form>
@endsection

@section('scripts')
    @parent
    <script>
        let fullChecked = false;
        const checkAllBtn = document.querySelector("input[type=checkbox][name=check_all]");
        const subscribePackagesChbs = document.querySelectorAll('input[type=checkbox][name="subscribe_packages[]"]');
        checkAllBtn.addEventListener('click', () => {
            console.log("fullChecked", fullChecked);
            subscribePackagesChbs.forEach((element) => {
                element.checked = !fullChecked;
            });
            fullChecked = !fullChecked;
        });

        document.addEventListener("DOMContentLoaded", () => {
            checkAllBtn.checked = isFullChecked();
        });

        document.querySelectorAll('input[type=checkbox][name="subscribe_packages[]"]').forEach((element) => {
            element.addEventListener('click', () => {
                checkAllBtn.checked = isFullChecked();
            })
        });

        const isFullChecked = () => {
            let result = true;

            document.querySelectorAll('input[type=checkbox][name="subscribe_packages[]"]').forEach((element) => {
                result &= element.checked
            });
            fullChecked = result;
            return result;
        }
    </script>
@endsection