@extends('layouts.customer')

@section('content')
<style type="text/css">
    div.btn-group{
            width: 100%;
            border-radius: 0.1rem;
            border: 1px solid #d7d7d7;
    }
    .multiselect-selected-text{
        float: left;
    }
    b.caret{
       margin-left: 79%;
    }
    ul.multiselect-container.dropdown-menu.show {
    width: 100%;
}
.dropdown-toggle::after{
    margin-top: 7px;
    font-size: 17px;
}
.hide {
    display: none;
}
.form-group{float: left !important;width: 100% !important;margin-bottom: 30px;}
.custom-control.custom-radio {
  float: left;
  width: 120px;
}
.select2-selection {box-shadow: none !important;}
</style>
    
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <h1>Add Reward</h1>
            <div class="separator mb-4"></div>
        </div>
    </div>

    @if ($errors->any())
        <div class="alert alert-danger">
            <strong>Oops!</strong>
            <ul>
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    <div class="card">
        <div class="card-body">

            <form method="POST"
                  action="{{ str_replace('http:', 'https:', route('rewards.store',['account'=>$account])) }}">
                @csrf

                {{-- Reward Type --}}
                <div class="row mb-4">
                    <div class="col-12">
                        <label class="mb-2"><strong>Reward Type</strong></label><br>

                        <div class="custom-control custom-radio custom-control-inline">
                            <input type="radio"
                                   id="itemOff"
                                   name="reward_type"
                                   value="1"
                                   class="custom-control-input"
                                   checked>
                            <label class="custom-control-label" for="itemOff">Item Off</label>
                        </div>

                        <div class="custom-control custom-radio custom-control-inline">
                            <input type="radio"
                                   id="amountOff"
                                   name="reward_type"
                                   value="2"
                                   class="custom-control-input">
                            <label class="custom-control-label" for="amountOff">Amount Off</label>
                        </div>
                    </div>
                </div>

                {{-- ITEM OFF ROW --}}
                <div id="itemGroup">
                    <div class="row mb-4">
                        <div class="col-12 col-md-4">
                            <label><strong>Category</strong></label>
                            <select class="form-control select2" id="categorySelect">
                                @foreach($categories as $category)
                                    <option value="{{ $category->id }}">
                                        {{ $category->category_name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>

                        <div class="col-12 col-md-4 position-relative">
                            <label><strong>Product Off</strong></label>
                            <select class="form-control select2"
                                    id="productSelect"
                                    name="product_id[]">
                            </select>

                            <div id="productLoader"
                                 style="display:none;position:absolute;top:38px;right:15px;">
                                <span class="spinner-border spinner-border-sm"></span>
                            </div>
                        </div>

                        <div class="col-12 col-md-4">
                            <label><strong>Points Required to Unlock</strong></label>
                            <input type="number"
                                   class="form-control"
                                   name="points">
                        </div>
                    </div>
                </div>

                {{-- AMOUNT OFF ROW --}}
                <div id="amountGroup" class="hide">
                    <div class="row mb-4">
                        <div class="col-12 col-md-4">
                            <label><strong>Amount Off</strong></label>
                            <input type="number"
                                   class="form-control"
                                   name="price"
                                   min="0">
                        </div>

                        <div class="col-12 col-md-4">
                            <label><strong>Points Required to Unlock</strong></label>
                            <input type="number"
                                   class="form-control"
                                   name="points">
                        </div>

                        <div class="col-12 col-md-4">
                            {{-- Reserved for future fields --}}
                        </div>
                    </div>
                </div>

                {{-- Additional Notes --}}
                <div class="row mb-4">
                    <div class="col-12">
                        <label><strong>Additional Notes</strong></label>
                        <textarea class="form-control"
                                  name="description"
                                  rows="3"></textarea>
                    </div>
                </div>

                {{-- Reward Limit --}}
                <div class="row mb-4 align-items-center">
                    <div class="col-12 col-md-4" style="padding-left: 50px;">
                        <div class="custom-control custom-switch">
                            <input type="checkbox"
                                   name="is_reward_limit"
                                   class="custom-control-input"
                                   id="limitCheck"
                                   value="1">
                            <label class="custom-control-label" for="limitCheck">
                                <strong>Limit this reward?</strong>
                            </label>
                        </div>
                    </div>

                    <div class="col-12 col-md-4 hide" id="limitInput">
                        <label><strong>Reward Limit</strong></label>
                        <input type="number"
                               class="form-control"
                               name="limits">
                    </div>
                </div>

                {{-- Tier --}}
                <div class="row mb-4">
                    <div class="col-12">
                        <label><strong>Tier</strong></label>
                        <select class="form-control select2"
                                multiple
                                name="tiers[]">
                            @foreach($tiers as $tier)
                                <option value="{{ $tier->id }}">
                                    {{ $tier->title }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                </div>

                <input type="hidden" name="status" value="0">

                <div class="row">
                    <div class="col-12">
                        <button class="btn btn-primary">
                            Create Reward
                        </button>
                    </div>
                </div>

            </form>

        </div>
    </div>

</div>
@endsection
 
  <link rel="stylesheet" href="{{ secure_url('css/bootstrap-multiselect.css')}}">
@section('script')
 <script src="{{ secure_url('js/bootstrap-multiselect.min.js')}}"></script>
<script>
$(function () {

    $('.select2').select2({
        theme: 'bootstrap',
        width: '100%'
    });

    function toggleRewardUI() {
        let type = $('input[name="reward_type"]:checked').val();

        if (type == '1') {
            $('#itemGroup').show();
            $('#amountGroup').hide();
            $('#productSelect').prop('disabled', false);
            $('input[name="price"]').val('').prop('disabled', true);
        } else {
            $('#itemGroup').hide();
            $('#amountGroup').show();
            $('#productSelect').val(null).trigger('change').prop('disabled', true);
            $('input[name="price"]').prop('disabled', false);
        }
    }

    $('input[name="reward_type"]').on('change', toggleRewardUI);
    toggleRewardUI();

    $('#limitCheck').on('change', function () {
        $('#limitInput').toggleClass('hide', !this.checked);
    });

    function loadProducts(categoryId) {
        $('#productLoader').show();

        $.get(window.location.href, {
            ajax: 'products_by_category',
            category_id: categoryId
        }, function (data) {
            data = typeof data === 'string' ? JSON.parse(data) : data;
            let $product = $('#productSelect');
            $product.empty();

            $.each(data, function (_, item) {
                $product.append(
                    `<option value="${item.id}">${item.item_name}</option>`
                );
            });

            $product.trigger('change');
        }).always(() => $('#productLoader').hide());
    }

    loadProducts($('#categorySelect').val());

    $('#categorySelect').on('change', function () {
        loadProducts(this.value);
    });

});
</script>

 @endsection