@php

    $variation = is_array($variation ?? null)
        ? $variation
        : [];

    $vIndex = $vIndex ?? 0;

    $variationName = $variation['name'] ?? '';

    $variationType = $variation['type'] ?? 'multi';

    $variationMin = $variation['min'] ?? '';

    $variationMax = $variation['max'] ?? '';

    $variationRequired = isset($variation['required'])
        && in_array(
            strtolower((string) $variation['required']),
            ['on', '1', 'true', 'yes'],
            true
        );

    $variationValues =
        isset($variation['values']) &&
        is_array($variation['values'])
            ? $variation['values']
            : [];

@endphp

<div class="variation-block border rounded p-3 mb-4">

    {{-- =====================================================
         VARIATION HEADER
         ===================================================== --}}

    <div class="row">

        {{-- Variation Name --}}
        <div class="col-lg-3">

            <div class="form-group">

                <label>
                    Variation Name
                </label>

                <input
                    type="text"
                    name="variation[name]"
                    class="form-control"
                    value="{{ old('variation.name', $variationName) }}"
                    required
                >

            </div>

        </div>


        {{-- Selection Type --}}
        <div class="col-lg-3 col-md-6">

            <label>
                Selection Type
            </label>

            <div class="d-flex">

                <label class="form-check mr-2">

                    <input
                        type="radio"
                        name="variation[type]"
                        value="multi"
                        {{ $variationType == 'multi' ? 'checked' : '' }}
                    >

                    Multiple

                </label>


                <label class="form-check">

                    <input
                        type="radio"
                        name="variation[type]"
                        value="single"
                        {{ $variationType == 'single' ? 'checked' : '' }}
                    >

                    Single

                </label>

            </div>

        </div>


        {{-- Minimum Selection --}}
        <div class="col-lg-2">

            <div class="form-group">

                <label>
                    Minimum Selection
                </label>

                <input
                    type="number"
                    min="0"
                    name="variation[min]"
                    class="form-control"
                    value="{{ old('variation.min', $variationMin) }}"
                >

            </div>

        </div>


        {{-- Maximum Selection --}}
        <div class="col-lg-2">

            <div class="form-group">

                <label>
                    Maximum Selection
                </label>

                <input
                    type="number"
                    min="0"
                    name="variation[max]"
                    class="form-control"
                    value="{{ old('variation.max', $variationMax) }}"
                >

            </div>

        </div>


        {{-- Required --}}
        <div class="col-lg-1">

            <div class="form-group">

                <label>
                    Required
                </label>

                <div class="custom-control custom-checkbox mt-2">

                    <input
                        type="checkbox"
                        class="custom-control-input"
                        id="variation_required_{{ $vIndex }}"
                        name="variation[required]"
                        value="on"
                        {{ $variationRequired ? 'checked' : '' }}
                    >

                    <label
                        class="custom-control-label"
                        for="variation_required_{{ $vIndex }}"
                    >
                        Required
                    </label>

                </div>

            </div>

        </div>

    </div>


    {{-- =====================================================
         OPTIONS
         ===================================================== --}}

    <div class="option-container">

        <div class="d-flex justify-content-between align-items-center mb-3">

            <h5 class="mb-0">
                Options
            </h5>

            <button
                type="button"
                class="btn btn-primary btn-sm add-option"
            >
                <i class="bi bi-plus"></i>
                Add Option
            </button>

        </div>


        <div class="option-list">

            @if(!empty($variationValues))

                @foreach($variationValues as $optionIndex => $option)

                    <div class="row g-3 mb-3 option-row">

                        {{-- Option Name --}}
                        <div class="col-md-4 col-sm-6">

                            <label>
                                Option Name
                            </label>

                            <input
                                type="text"
                                class="form-control"
                                required
                                name="variation[values][{{ $optionIndex }}][label]"
                                value="{{ $option['label'] ?? '' }}"
                            >

                        </div>


                        {{-- Additional Price --}}
                        <div class="col-md-4 col-sm-6">

                            <label>
                                Additional Price
                            </label>

                            <input
                                type="number"
                                min="0"
                                step="0.01"
                                class="form-control"
                                required
                                name="variation[values][{{ $optionIndex }}][optionPrice]"
                                value="{{ $option['optionPrice'] ?? 0 }}"
                            >

                        </div>


                        {{-- Remove --}}
                        <div class="col-md-4 d-flex align-items-center">

                            <button
                                type="button"
                                class="btn btn-danger btn-sm remove-option"
                            >
                                <i class="bi bi-trash"></i>
                            </button>

                        </div>

                    </div>

                @endforeach

            @else

                {{-- First empty option --}}
                <div class="row g-3 mb-3 option-row">

                    <div class="col-md-4 col-sm-6">

                        <label>
                            Option Name
                        </label>

                        <input
                            type="text"
                            class="form-control"
                            required
                            name="variation[values][0][label]"
                            value=""
                        >

                    </div>


                    <div class="col-md-4 col-sm-6">

                        <label>
                            Additional Price
                        </label>

                        <input
                            type="number"
                            min="0"
                            step="0.01"
                            class="form-control"
                            required
                            name="variation[values][0][optionPrice]"
                            value="0"
                        >

                    </div>


                    <div class="col-md-4 d-flex align-items-center">

                        <button
                            type="button"
                            class="btn btn-danger btn-sm remove-option"
                        >
                            <i class="bi bi-trash"></i>
                        </button>

                    </div>

                </div>

            @endif

        </div>

    </div>

</div>