@extends('layouts.backoffice')

@section('content')
<div class="row">
    <div class="col-md-12">
        
    <div class="card shadow-none position-relative overflow-hidden mb-4">
            <div class="card-body d-flex align-items-center justify-content-between p-4">
                <h4 class="card-title mb-0">Set Options Relation</h4>
                <nav aria-label="breadcrumb">
                <ol class="breadcrumb mb-0">
                    <li class="breadcrumb-item">
                        <a class="text-muted text-decoration-none" href="{{ route('backoffice.index') }}">Home</a>
                    </li>
                    <li class="breadcrumb-item" aria-current="page">
                        Set Options Relation
                    </li>
                    </ol>
                </nav>
            </div>
        </div>

    <form id="dataForm" name="dataForm" action="{{ route('backoffice.categories.categoryVariantOptionsRelationAction', []) }}" 
        method="post" enctype="multipart/form-data" onsubmit="return checkForm(this);">

    @csrf

    <div class="card">
        <div class="card-body">
            <div class="row">
                <div class="col-md-4 select-style-1">
                    <label class="form-label" for="category">Category</label>
                    <div class="select-position">
                        <select onchange="onChangeCategory()" class="form-select" id="category" name="category" data-required="true" data-datatype="NUMBER">
                            <option value=""></option>
                            @foreach($categories as $category_option)
                            <option value="{{ $category_option->id }}">{{ $category_option->name }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
                <div class="col-md-4 select-style-1">
                    <label class="form-label" for="variant">Variant</label>
                    <div class="select-position">
                        <select onchange="onChangeVariant()" class="form-select" id="variant" name="variant" data-required="true" data-datatype="NUMBER">
                            <option value=""></option>
                        </select>
                    </div>
                </div>
                <div class="col-md-4 select-style-1">
                    <label class="form-label" for="option">Option</label>
                    <div class="select-position">
                        <select class="form-select" id="option" name="option" data-required="true" data-datatype="NUMBER">
                            <option value=""></option>
                        </select>
                    </div>
                </div>
                <div class="col-md-4 select-style-1">
                    <label class="form-label" for="related_variant">Related Variant</label>
                    <div class="select-position">
                        <select onchange="onChangeRelatedVariant()" class="form-select" id="related_variant" name="related_variant" data-required="true" data-datatype="NUMBER">
                            <option value=""></option>
                        </select>
                    </div>
                </div>
                <div class="col-md-8 select-style-1 p-3">
                    <div id="related_options_container" class="row pt-4"></div>
                </div>

            </div>
        </div>
    </div>

    <div class="col-md-12 mb-3">
        <input class="form-control" type="hidden" name="ajax" value="1">
        <div id="submitSpinner" class="spinner-border text-success m-3 d-none" role="status"><span class="visually-hidden">Loading...</span></div>
        <button id="submitBtn" onclick="ajaxPostSubmitForm(this.form)" type="button" class="btn btn-primary btn-hover m-2">Submit</button>
    </div>
    
    </form>

    </div>
</div>
@endsection

@section('scripts')
<script>
function onChangeCategory(){
    var category = $("#category").val();
    
    $("#variant").find('option').remove();
    $("#variant").append($("<option />").val("").text(""));
    $("#option").find('option').remove();
    $("#option").append($("<option />").val("").text(""));
    $("#related_variant").find('option').remove();
    $("#related_variant").append($("<option />").val("").text(""));

    if(category == ""){
        return;
    }

    $.ajax({
        type: "GET",
        url: "{{ route('backoffice.categories.categoryVariantListAjax', []) }}",
        data: {
            "_token": "{{ csrf_token() }}",
            "category": category
        },
        success: function (data) {
            // console.log(data);
            if(data.success) {
                $.each(data.categoryVariants, function() {
                    // console.log(this);
                    $("#variant").append($("<option />").val(this.id).text(this.name));
                    $("#related_variant").append($("<option />").val(this.id).text(this.name));
                });
            }
            else{
                alert("Error loading variants!");
            }
        }
    });
    
}

function onChangeVariant(){
    var variant = $("#variant").val();
    
    $("#option").find('option').remove();
    $("#option").append($("<option />").val("").text(""));

    if(variant == ""){
        return;
    }

    $.ajax({
        type: "GET",
        url: "{{ route('backoffice.categories.categoryVariantOptionsListAjax', []) }}",
        data: {
            "_token": "{{ csrf_token() }}",
            "variant": variant
        },
        success: function (data) {
            // console.log(data);
            if(data.success) {
                $.each(data.categoryVariantOptions, function() {
                    // console.log(this);
                    $("#option").append($("<option />").val(this.id).text(this.label));
                });
            }
            else{
                alert("Error loading options!");
            }
        }
    });
    
}

function onChangeRelatedVariant(){
    var option = $("#option").val();
    var related_variant = $("#related_variant").val();
    
    $("#related_options_container").html('');

    if(option == "" || related_variant==''){
        return;
    }

    $.ajax({
        type: "GET",
        url: "{{ route('backoffice.categories.categoryVariantOptionsListAjax', []) }}",
        data: {
            "_token": "{{ csrf_token() }}",
            "linked_to_option": option,
            "variant": related_variant
        },
        success: function (data) {
            // console.log(data);
            if(data.success) {
                $.each(data.categoryVariantOptions, function() {
                    // console.log(this);

                    var checked = data.selection_by_option_id[this.id]==1 ? 'checked' : '';

                    var checkbox = '';
                    checkbox += '<div class="form-check">';
                    checkbox += '<input '+checked+' class="form-check-input" type="checkbox" value="'+this.id+'" name="related_options[]" id="related_option_'+this.id+'">';
                    checkbox += '<label class="form-check-label" for="related_option_'+this.id+'">'+this.label+'</label>';
                    checkbox += '</div>';

                    $("#related_options_container").append('<div class="col-md-4 select-style-1">'+checkbox+'</div>');
                });
            }
            else{
                alert("Error loading related options!");
            }
        }
    });
    
}

</script>
@endsection