@extends('layouts.backoffice')

@section('content')

<div class="main-container">
    <div class="ms-panel">
        <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">Item Specifications / {{ $storeItem->name }}</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">
                    Item Specifications / {{ $storeItem->name }}
                    </li>
                    </ol>
                </nav>
            </div>
        </div>
        <div class="ms-panel-body">

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

            @csrf
            
            <div class="table-wrapper table-responsive">
                <table class="table table-bordered">
                    <thead>
                        <tr>
                            <th>Variant</th>
                            <th>Type</th>
                            <th>Required</th>
                            <th>Min</th>
                            <th>Max</th>
                            <th>Length</th>
                        </tr>
                    </thead>
                    <tbody>
                        @if($category_variants->isEmpty())
                        <tr><td colspan="10">No variants!</td></tr>
                        @else
                            @foreach($category_variants as $variant)
                            <tr class="mt-4">
                                <td style="background-color: #ededed !important;"><b>{{ $variant->name }}</b></td>
                                <td style="background-color: #ededed !important;">{{ $GLOBALS['CATEGORY_VARIANT_INPUT_TYPES'][$variant->input_type] }}</td>
                                <td style="background-color: #ededed !important;">{{ $variant->required==1 ? 'Yes' : 'No' }}</td>
                                <td style="background-color: #ededed !important;">{{ escapeNullOrEmpty($variant->min, "-") }}</td>
                                <td style="background-color: #ededed !important;">{{ escapeNullOrEmpty($variant->max, "-") }}</td>
                                <td style="background-color: #ededed !important;">{{ escapeNullOrEmpty($variant->length, "-") }}</td>
                            </tr>
                            <tr>
                                <td colspan="6">
                                    @php 

                                    // This part should be matching with the submit backend service of the category variant
                                    // to have same variant limitations and controls

                                    $input_type = $variant->input_type;

                                    $input_name = "spec_value_".$variant->id;
                                    if($input_type=='MO'){
                                        $input_name .= "[]";
                                    }

                                    $required_attr = $variant->required==1 ? 'true' : 'false';
                                    $value_attr = $variant->default_value;
                                    $type_attr = '';
                                    $min_attr = escapeNullOrEmpty($variant->min, "");
                                    $max_attr = escapeNullOrEmpty($variant->max, "");
                                    $length_attr = escapeNullOrEmpty($variant->length, "");

                                    if($input_type == "SO" || $input_type == "MO"){
                                    @endphp 
                                    <div class="select-style-1 mb-0">
                                        <div class="select-position">
                                        <select class="form-select"data-required="{{ $required_attr }}" {{ $input_type=='MO' ? 'multiple' : '' }} name="{{ $input_name }}" class="form-control">
                                            <option value=""></option>
                                            @foreach($variant->category_variant_options as $option)
                                                @if($option->status==1)

                                                    @php 
                                                    $selected_options = [];
                                                    if(isset($item_spec_by_variant[$variant->id])){
                                                        if($input_type=='MO'){
                                                            $selected_options = explode(",", $item_spec_by_variant[$variant->id]->value);
                                                        }
                                                        else{
                                                            $selected_options[] = $item_spec_by_variant[$variant->id]->value;
                                                        }
                                                    }
                                                    @endphp 

                                                <option value="{{ $option->value }}" {{ in_array($option->value, $selected_options) ? 'selected' : '' }}>{{ $option->label }}</option>
                                                @endif
                                            @endforeach
                                        </select>
                                        </div>
                                    </div>
                                    @php
                                    }
                                    else{
                                        if(isset($item_spec_by_variant[$variant->id])){
                                            $value_attr = $item_spec_by_variant[$variant->id]->value;
                                        }

                                        if($input_type == "FT"){
                                            $type_attr = 'text';
                                            $min_attr = '';
                                            $max_attr = '';
                                        }
                                        elseif($input_type == "DI"){
                                            $type_attr = 'date';
                                            $length_attr = '';
                                        }
                                        elseif($input_type == "NB" || $input_type == "PR"){
                                            $type_attr = 'number';
                                            $length_attr = '';
                                        }
                                        @endphp 
                                        <div class="input-style-1 mb-0">
                                            <input data-required="{{ $required_attr }}" type="{{ $type_attr }}" min="{{ $min_attr }}" max="{{ $max_attr }}" maxlength="{{ $length_attr }}" name="{{ $input_name }}" class="form-control form-control-sm" value="{{ $value_attr }}" >
                                        </div>
                                        @php 
                                        }
                                        @endphp
                                </td>
                            </tr>
                            @endforeach
                        @endif
                    </tbody>
                </table>
            </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">Submit</button>
            </div>
            
            </form>
            
	    </div>
    </div>
</div>
@endsection