@extends('layouts.admin')


@section('style')
    @parent
    @include('admin.components.create_voucher_series_style')
@endsection

@section('script')
    @include('admin.components.create_voucher_series_script', ['voucher_series',$voucher_series])

    <script>
        $(document).ready(function() {
            $('#batchModal').on('shown.bs.modal', function () {
                initializePromoDropdown();
            });

            function initializePromoDropdown() {
                var $dropdown = $('#batch-promo');
                var seriesId = voucherSeries.series_id;

                $dropdown.select2({
                    dropdownParent: $('#promo-code-dropdown-container'),
                    minimumResultsForSearch: 2,
                    allowClear: !seriesId
                });

                loadPromoCodes(seriesId, $dropdown);
            }

            function loadPromoCodes(seriesId, $dropdown) {
                $dropdown.empty();

                $.ajax({
                    url: "{{ route('promo_codes_group') }}",
                    data: { voucher_series_id: seriesId },
                    type: "GET",
                    dataType: 'json',
                    success: function(data) {
                        var groups = data.groups;
                        var currentGroupId = data.currentGroupId
                        if (!currentGroupId) {
                            $dropdown.append($('<option>', {
                                value: '',
                                text: 'Select a promo code group',
                                disabled: true,
                                selected: true
                            }));
                        }

                        if (groups.length > 0) {
                            $.each(groups, function(index, group) {
                                $dropdown.append(new Option(group.text, group.id, group.id == currentGroupId));
                            });
                            if (currentGroupId) {
                                $dropdown.val(currentGroupId).trigger('change');
                            }
                        }
                    },
                    error: function(xhr, status, error) {
                        console.error(error);
                    }
                });
            }

            $('input[name="promotion_mechanic"]').change(function() {
                if ($(this).val() === 'unique_promo_code') {
                    $('#promo-code-dropdown-container').show();
                } else {
                    $('#promo-code-dropdown-container').hide();
                }
            });
        });
    </script>
@endsection

@section('content')

    @php $step = '3' @endphp
    @component('admin.components.step_form_pages',
    ['post_url'=>$post_url,
    'type'=>'voucher',
    'voucher_series'=>$voucher_series,
    'title'=> config('admin.create_voucher')['step_3']['title'] ,
    'step'=>'3'
    ])

        @php $form = config('admin.new_voucher')@endphp

        @php $id = 'business_asset_ids'; $hasError = $errors->has($id) @endphp
        @component('admin.components.form_field_100', ['label'=>$form[$id]['label'], 'required'=>$form[$id]['req'], 'description'=>$form[$id]['descr'], 'hasError'=>$hasError ])

            <select id="business_asset_ids" name="business_asset_ids[]" class="form-control select2 {{$errors->has($id) ? 'select2-danger':'select2bs4'}} " multiple="multiple" data-placeholder="Select the Outlets" style="width: 100%;">
                @foreach($asset_array as $key => $assets)

                    <optgroup label="{{$stores[$key]['name']}}">
                        @foreach($assets as $key => $asset)

                            @php
                                $selected = '';
                                if ($voucher_series['business_asset_ids'] ?? old('business_asset_ids')) {
                                    if (in_array($asset['id'], $voucher_series['business_asset_ids'] ?? old('business_asset_ids'))) {
                                        $selected = 'selected="selected"';
                                    }
                                }
                            @endphp
                            @if( $asset['status'] == 'active' || $asset['active'] == 'active')
                                <option value="{{ $asset['id'] }}" {{ $selected }}>{{ $asset['name'] }}</option>
                            @endif
                        @endforeach
                    </optgroup>
                @endforeach
            </select>


            @component('admin.components.form_error_msg', ['hasError'=>$hasError]){{ $errors->first($id) }}@endcomponent
        @endcomponent


        @php $id = 'redemption_method' @endphp

        @component('admin.components.form_field_100', ['label'=>$form[$id]['label'], 'help'=>'redeem_guide', 'required'=>$form[$id]['req'], 'description'=>$form[$id]['descr'], 'hasError'=>$hasError ])
            @php
                $redemption_method = $voucher_series['redemption_method'] ?? old('redemption_method') ?? 'none';
                $methods = [
                    '6_digit' => '6 Digit Pin',
                    'none' => 'None',
                    //'point_redemption' => 'Point',
                    ];
            @endphp
            <div class="d-flex">
                @foreach ($methods as $key => $method)
                    <div class="custom-control custom-radio mr-3 d-flex align-items-center">
                        <input class="custom-control-input" type="radio" id="{{$key}}" value="{{$key}}" name="redemption_method" {{ $redemption_method === $key ? 'checked' : '' }}>
                        <label for="{{$key}}" class="custom-control-label">{{$method}}</label>
                    </div>
                @endforeach
            </div>

            <small>Get the 6 digits pins for each outlet <a href='{{ route('edit_voucher_series_summary',$voucher_series['series_id']) }}#redemption' target='_blank'>here</a></small>

            @component('admin.components.form_error_msg', ['hasError'=>$hasError]){{ $errors->first($id) }}@endcomponent
        @endcomponent


{{--        @php $id = 'promotion_mechanic' @endphp--}}
{{--        @component('admin.components.form_field_100', ['label'=>$form[$id]['label'], 'required'=>$form[$id]['req'], 'description'=>$form[$id]['descr'], 'hasError'=>$hasError ])--}}

{{--            @php--}}
{{--                $promotion_mechanic = old('promotion_mechanic') ?? $voucher_series['promotion_mechanic'] ?? 'none_mechanic';--}}
{{--                $mechanics = [--}}
{{--                    'qr_code' => 'QR Code',--}}
{{--                    'bar_code' => 'Barcode',--}}
{{--                    'plain_text' => 'Plain Text',--}}
{{--                    'unique_promo_code' => 'Unique Promo Code',--}}
{{--                    'none_mechanic' => 'None',--}}
{{--                ];--}}
{{--            @endphp--}}
{{--            <div class="row bg-light border p-3 mx-auto">--}}
{{--                <div class="col-sm-6">--}}

{{--                    @foreach ($mechanics as $key => $mechanic)--}}
{{--                        <div class="custom-control custom-radio mr-3">--}}
{{--                            <input class="custom-control-input" type="radio" id="{{$key}}" value="{{$key}}" name="promotion_mechanic" {{ $promotion_mechanic === $key ? 'checked' : '' }}>--}}
{{--                            <label for="{{$key}}" class="custom-control-label">{{$mechanic}}</label>--}}
{{--                        </div>--}}
{{--                    @endforeach--}}
{{--                </div>--}}

{{--                <div class="col-sm-6">--}}

{{--                    <input class="form-control" type="file" name="redeem_image_file" id="redeem_image_input" accept="{{ \App\Http\Controllers\Admin\VoucherSeriesController::IMG_HTML_ACCEPT_RULE }}"/>--}}

{{--                    <textarea class="form-control" type="text" name="redeem_plain_text" id="redeem_plain_text" rows="5"--}}
{{--                              maxlength="191">{{ $promotion_mechanic === 'plain_text' ? (old('promotion_mechanic_value') ?? $voucher_series['promotion_mechanic_value']) : '' }}</textarea>--}}

{{--                    <select class="form-control" name="redeem_code_group" id="redeem_code_group">--}}
{{--                        <option disabled selected>Select Code Group</option>--}}
{{--                    </select>--}}

{{--                </div>--}}
{{--            </div>--}}
{{--            @component('admin.components.form_error_msg', ['hasError'=>$hasError]){{ $errors->first($id) }}@endcomponent--}}
{{--        @endcomponent--}}

        @php $id = 'promotion_mechanic' @endphp
        @component('admin.components.form_field_100', ['label'=>$form[$id]['label'], 'required'=>$form[$id]['req'], 'description'=>$form[$id]['descr'], 'hasError'=>$hasError ])

            <div>
                <button id="batch-edit-btn" type="button" class="btn btn-sm btn-inline-block btn-warning mb-2">
                    <i class="fas fa-edit"></i> Set Promotional Mechanic for Outlet(s)
                </button>
                <span id="batch-edit-btn-error" class="text-danger outlet"></span>
            </div>
            <!-- fake data-->
            <table id="promotion_mechanic_table" class="table table-striped table-bordered" style="width:100%">
                <thead class="">
                <tr>
                    <th style="width:10px" >
                        <input type="checkbox" class="" id="store-all">
                    </th>
                    <th>Outlet</th>
                    <th>Store</th>
                    <th>Promo Mech</th>
                    <th>Value</th>
                    {{--                                <th style="width:50px">Edit</th>--}}
                </tr>
                </thead>
                <tbody class="table-hover" id="outlet-tbody">
                <tr><td colspan="6" class="text-center">Loading...</td></tr>
                </tbody>
            </table>

        @endcomponent


        @slot('footer_back')
            <a href={{ substr(request()->url(), 0, -1).((int)$step-1) }} class="btn btn-default">Back</a>
        @endslot
        @slot('footer_next')
            @if($voucher_series['series_id'])
                <button type="submit" class="btn btn-default float-right">Save Step</button>
            @else
                <button type="submit" class="btn btn-info float-right">Next Step</button>
            @endif
        @endslot

    @endcomponent

<!-- Template Row -->
<table class="hidden">
    <tr class="outlet-row-template">
        <td class="row-checkbox">
            <input type="checkbox" class="store-check">
        </td>
        <td class="row-outlet">Store</td>
        <td class="row-store">Puregold</td>
        <td class="row-promo-mechanic">QR Code</td>
        <td class="row-value">
            <div class="row-value-text" style="display: none"></div>
            <img class="row-value-img" src="" width="150px" style="display: none"/>
        </td>
        {{--            <td class="row-edit">--}}
        {{--                <button class="row-edit-button btn btn-block btn-xs btn-primary disabled" type="button" >Edit</button>--}}
        {{--            </td>--}}
    </tr>

</table>
<!-- /.Template Row -->

<!-- Modal -->
<div id="batchModal" class="modal fade " tabindex="-1" role="dialog">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Edit Selected Outlets</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="container-fluid">
                    <div class="row w-100">
                        <div class="col-12">
                            <div><b>Selected <span id="outlet-length">3</span> Outlets:</b> <span id="outlet-list">Store 1, Store2 , Store3</span></div>
                            <div><b>Promotional Mechanic:</b> <span id="promo_mech">None</span></div>


{{--                            @php $id = 'promotion_mechanic' @endphp--}}
{{--                            @component('admin.components.form_field_100', ['label'=>$form[$id]['label'], 'required'=>$form[$id]['req'], 'description'=>$form[$id]['descr'], 'hasError'=>$hasError ])--}}

                                @php
                                    $promotion_mechanic = old('promotion_mechanic') ?? $voucher_series['promotion_mechanic'] ?? 'none_mechanic';
                                    $mechanics = [
                                        'qr_code' => 'QR Code',
                                        'bar_code' => 'Barcode',
                                        'plain_text' => 'Plain Text',
                                        'unique_promo_code' => 'Unique Promo Code',
                                        'pin_code' => 'Pin Code',
                                        'none' => 'None',
                                    ];
                                @endphp
                                <div class="row bg-light border p-3 mx-auto">
                                    <div class="col-sm-6">

                                        @foreach ($mechanics as $key => $mechanic)
                                            <div class="custom-control custom-radio mr-3">
                                                <input class="custom-control-input" type="radio" id="{{'promotion_mechanic_'.$key}}" value="{{$key}}" name="promotion_mechanic" {{ $promotion_mechanic === $key ? 'checked' : '' }}>
                                                <label for="{{'promotion_mechanic_'.$key}}" class="custom-control-label">{{$mechanic}}</label>
                                            </div>
                                        @endforeach
                                    </div>

                                    <div class="col-sm-6">
                                        <div class="batch-item batch-image" promo_mech="qr_code bar_code">
                                            <div>
                                                <img class="preview-image" width="250" height="250" style="object-fit: contain; background: #eee;"/>
                                            </div>

                                            <label for="batch-image">Upload Image:</label>
                                            <input id="batch-image" class="form-control" name="promotion_mechanic_value"
                                                   type="file" accept="{{ \App\Http\Controllers\Admin\VoucherSeriesController::IMG_HTML_ACCEPT_RULE }}"
                                                   onchange="loadImg()"/>
                                        </div>

{{--                                        <div class="batch-item batch-promo" promo_mech="unique_promo_code" >--}}
{{--                                            <label for="batch-promo">Enter Promo Code for Outlets:</label>--}}
{{--                                            <input id="batch-promo" class="form-control" name="promotion_mechanic_value"--}}
{{--                                                   type="text" placeholder="Promo code"/>--}}
{{--                                        </div>--}}

                                        <div class="batch-item batch-promo" id="promo-code-dropdown-container" style="display: none;" promo_mech="unique_promo_code">
                                            <label for="batch-promo">Promo Code Group</label>
                                            <select id="batch-promo" class="form-control select2" name="promotion_mechanic_value" style="width: 100%;">
                                            </select>
                                        </div>

                                        <div class="batch-item batch-pin" promo_mech="pin_code">
                                            <label for="batch-pin">Enter Pin Code for Outlets:</label>
                                            <input id="batch-pin" class="form-control" name="promotion_mechanic_value"
                                                   pattern="\d*" inputmode="numeric" type="text" placeholder="Pin code"/>
                                        </div>

                                        <div class="batch-item batch-text" promo_mech="plain_text">
                                            <label for="batch-text">Enter Text:</label>
                                            <textarea id="batch-text" class="form-control" name="promotion_mechanic_value"
                                                      placeholder="Enter Plain Text/ Promo Code/ Pin Code for Redemption"
                                                      rows="4" width="100%" maxlength="191"></textarea>
                                        </div>

                                    </div>
                                </div>
{{--                                @component('admin.components.form_error_msg', ['hasError'=>$hasError]){{ $errors->first($id) }}@endcomponent--}}
{{--                            @endcomponent--}}

                        </div>
                    </div>

                    <br/>
                </div>
            </div>
            <div class="justify-content-between modal-footer">
                <small class="text-right w-100 text-muted">* You will overwrite existing settings for selected vouchers</small>
                <button type="button" class="btn btn-default" data-dismiss="modal">{{ __('heading.btn_close') }}</button>
                <button id="batch-save-btn" type="button" class="btn btn-primary float-right">Save changes</button>
                <small class="text-right w-100 text-danger error" style="display: none"></small>

            </div>
        </div>
    </div>
</div>
<!-- /.content -->
@endsection