@props(['item' => new \App\Models\Item()])

<div class="card border-0 shadow-none">
    <div class="card-body">
        <h1>Sales Channels</h1>
        <span class="text-muted">For this product, you can choose whether to add Sales Channels for your clients to access your product.</span>

        <hr class="my-10">

        <p class="mb-1">Options:</p>

        <div class="form-group mb-5">
            <div class="form-check form-check-custom form-check-xs form-check-success mb-2">
                <input type="checkbox" class="form-check-input" name="has_sales_channel" id="has_sales_channel_1" value="1" @checked(old('has_sales_channel', $item->sales_channel != null ? 1 : null) == 1)>
                <label class="form-check-label fw-semibold text-dark" for="has_sales_channel_1">
                    Yes, to add
                </label>
            </div>
            <div class="form-check form-check-custom form-check-xs form-check-success mb-2">
                <input type="checkbox" class="form-check-input" name="has_sales_channel" id="has_sales_channel_2" value="2" @checked(old('has_sales_channel', $item->sales_channel == null ? 2 : null) == 2)>
                <label class="form-check-label fw-semibold text-dark" for="has_sales_channel_2">
                    Not required
                </label>
            </div>
            @error('has_sales_channel')
                <span class="text-sm text-danger">
                    {{ $message }}
                </span>
            @enderror
        </div>

        <div id="sales_channel_form">
            <div class="alert alert-secondary text-gray-800">
                <p>Note:</p>
                <ul style="list-style-type: none;">
                    <li>To show where user can easily find your product(s) for purchases.</li>
                </ul>
            </div>

            <div class="form-group mb-5">
                @foreach (\App\Models\Product::SALES_CHANNELS as $key => $value)
                    <div class="form-check form-check-custom form-check-xs form-check-success mb-2">
                        <input type="radio" class="form-check-input" name="sales_channel" id="sales_channel_{{ $key }}" value="{{ $key }}" @checked(old('sales_channel', $item->sales_channel) == $key)>
                        <label class="form-check-label fw-semibold text-dark" for="sales_channel_{{ $key }}">
                            {{ $value }}
                        </label>
                    </div>

                    @if ($key == 1)
                        <div class="my-2 ps-8" id="sales_channel_1_form">
                            <div class="input-group input-group-sm">
                                <span class="input-group-text" id="sales_channel_addon_1">https://</span>
                                <input type="text" class="form-control" id="online_url" name="online_url" value="{{ old('online_url', $item->online_url) }}"
                                    aria-describedby="sales_channel_addon_1" />
                            </div>
                            @error('online_url')
                                <span class="text-sm text-danger">
                                    {{ $message }}
                                </span>
                            @enderror
                        </div>
                    @elseif ($key == 2)
                        <div class="my-2 ps-8" id="sales_channel_2_form">
                            <div class="form-group mb-3">
                                <label for="retailer_name" class="form-label">Store Name(s)</label>
                                <textarea name="retailer_name" class="form-control" id="retailer_name" cols="30" rows="2">{{ old('retailer_name', $item->retailer_name) }}</textarea>
                                @error('retailer_name')
                                    <span class="text-sm text-danger">
                                        {{ $message }}
                                    </span>
                                @enderror
                            </div>
                            <div class="form-group mb-3">
                                <label for="retailer_location" class="form-label">Store Location(s)</label>
                                <textarea name="retailer_location" class="form-control" id="retailer_location" cols="30" rows="2">{{ old('retailer_location', $item->retailer_location) }}</textarea>
                                @error('retailer_location')
                                    <span class="text-sm text-danger">
                                        {{ $message }}
                                    </span>
                                @enderror
                            </div>
                        </div>
                    @elseif ($key == 3)
                        <div class="my-2 ps-8" id="sales_channel_3_form">
                            <div class="input-group input-group-sm">
                                <span class="input-group-text" id="sales_channel_addon_3">+60</span>
                                <input type="text" class="form-control" id="direct_phone_no" name="direct_phone_no" value="{{ old('direct_phone_no', $item->direct_phone_no) }}"
                                    aria-describedby="sales_channel_addon_3" />
                            </div>
                            @error('direct_phone_no')
                                <span class="text-sm text-danger">
                                    {{ $message }}
                                </span>
                            @enderror
                        </div>
                    @endif
                @endforeach
            </div>
        </div>
    </div>
</div>

@push('scripts')
    <script>
        var salesChannelCheckboxes = $("input[type=checkbox][name=has_sales_channel]");
        var selectedSalesChannel = salesChannelCheckboxes.filter(":checked");
        var salesChannelRadios = $('input[type=radio][name=sales_channel]');
        var selectedSalesChannelRadio = salesChannelRadios.filter(":checked");

        $(function() {
            toggleSalesChannel(selectedSalesChannel);
            toggleSalesChannelForm(selectedSalesChannelRadio.val());
        });

        salesChannelCheckboxes.on('click', function() {
            toggleSalesChannel(this);
        })

        salesChannelRadios.on('click', function() {
            toggleSalesChannelForm(this.value);
        });

        function toggleSalesChannel(obj) {
            salesChannelCheckboxes.not('#' + $(obj).prop('id')).prop('checked', false);

            if ($(obj).prop('checked') && $(obj).val() == 1) {
                $('#sales_channel_form').show();
                salesChannelRadios.prop('disabled', false);
            } else {
                $('#sales_channel_form').hide();
                salesChannelRadios.prop('disabled', true);
            }
        }

        function toggleSalesChannelForm(value) {
            $('#sales_channel_1_form').hide();
            $('#sales_channel_2_form').hide();
            $('#sales_channel_3_form').hide();

            $('#sales_channel_' + value + '_form').show();
        }
    </script>
@endpush