@extends('layouts.backend')
@section('extraCss')
<style>
label {font-weight: bold;}
.schemeAssociation label {font-weight: bold;font-size:10px;}
</style>
@endsection
@section('mainContentArea')
    <div class="card card-default">
        <div class="card-header"><h4>Add new scheme <a href="{{ route('scheme-and-offers-listing') }}" class="btn btn-sm btn-success float-right"><i class="fa fas fa-reply"></i> Back to scheme / offer</a></div>
        <div class="card-body">
           
            <form action="{{ route('save-scheme') }}" method="post" name="schemeform">
                @csrf
                <input type="hidden" name="scheme_id" value="{{ empty($scheme->id) ? 0 : $scheme->id }}">
                <div class="alert alert-warning">
                    <h6>Scheme Basic Info</h6>
                    <div class="row">
                        <div class="col-md-4">
                            <div class="form-group">
                                <label for="name">Scheme Name</label>
                                <input type="text" class="form-control" id="name" name="name" required value="{{ !empty($scheme->name) ? $scheme->name : '' }}">
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label for="details">Scheme Details</label>
                                <input type="text" class="form-control" id="details" name="details" required value="{{ !empty($scheme->details) ? $scheme->details : '' }}">
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label for="scheme_nature">Scheme Nature</label>
                                <select name="scheme_nature" id="scheme_nature" class="form-control select2" required data-placeholder="Select scheme nature"
                                    onchange="if(this.value == {{ SLAB_DISCOUNT }}){showSlabArea();}else{hideSlabArea();}if(this.value == {{ COMBO_DISCOUNT }}){showComboArea();}else{hideComboArea();}"
                                >
                                    <option value=""></option>
                                    @foreach(SCHEME_TYPES as $key => $value)
                                    <option value="{{ $key }}" {{ !empty($scheme->scheme_nature) && $scheme->scheme_nature == $key ? 'selected' : ''}}>{{ $value }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="form-group">
                                <label for="start_date">Scheme Starts</label>
                                <input type="text" class="form-control datepickers" id="start_date" name="start_date" required value="{{ !empty($scheme->start_date) ? $scheme->start_date : date("Y-m-d") }}" readonly>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="form-group">
                                <label for="end_date">Scheme Ends</label>
                                <input type="text" class="form-control datepickers" id="end_date" name="end_date" required value="{{ !empty($scheme->start_date) ? $scheme->start_date : date("Y-m-d") }}" readonly>
                            </div>
                        </div>
                        <div class="col-md-2">
                            <div class="form-group">
                                <label for="ignore_end_date">
                                    Ignore End Date
                                </label>
                                <input class="form-control" type="checkbox" id="ignore_end_date" name="ignore_end_date" {{ !empty($scheme->ignore_end_date) ? 'checked' : '' }}>
                            </div>
                        </div>
                        <div class="col-md-2">
                            <div class="form-group">
                                <label for="is_global">
                                    IS Global
                                </label>
                                <input class="form-control" type="checkbox" id="is_global" name="is_global" {{ !empty($scheme->is_global) ? 'checked' : '' }}>
                            </div>
                        </div>
                        <div class="col-md-2">
                            <div class="form-group">
                                <label for="is_active">
                                    IS Active
                                </label>
                                <input class="form-control" type="checkbox" id="is_active" name="is_active" {{ !empty($scheme->is_active) ? 'checked' : '' }}>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="form-group">
                                <label for="cart_amount">Apply On</label>
                                <select name="cart_qty" id="cart_qty" class="form-control select2" required data-placeholder="Select Option">
                                    @foreach(APPLY_SCHEME as $key => $value)
                                    <option value="{{ $key }}" {{ !empty($scheme->cart_qty) && $scheme->cart_qty == $key ? 'selected' : '' }}>{{ $value }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="form-group">
                                <label for="cart_qty">Min. Value</label>
                                <input type="number" class="form-control" id="cart_amount" name="cart_amount" value="{{ !empty($scheme->cart_amount) ? $scheme->cart_amount : '1' }}" required min="1" step="any">
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="form-group">
                                <label for="discount_percent">Discount Mode</label>
                                <select name="discount_percent" id="discount_percent" class="form-control select2" required data-placeholder="Select Option">
                                    @foreach(DISC_TYPE as $key => $value)
                                    <option value="{{ $key }}" {{ !empty($scheme->discount_percent) && $scheme->discount_percent == $key ? 'selected' : '' }}>{{ $value }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="form-group">
                                <label for="discount_percent">Discount Amount</label>
                                <input type="number" class="form-control" id="discount_amount" name="discount_amount" value="{{ !empty($scheme->discount_amount) ? $scheme->discount_amount : '0' }}" required min="0" step="any">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="alert alert-info">
                    <h6>Scheme Associations</h6>
                    <div class="row schemeAssociation">
                        <div class="col-md-3" style="height:250px;overflow:auto;">
                            <div class="form-group">
                                <div class="clearfix"></div>
                                <label class="float-left">Associated Categories</label>
                                <label class="float-right" for="checkAllCategories"><input type="checkbox" id="checkAllCategories" name="checkAllCategories" onclick="checkAllCategoriesAction();"> Select all Categories</label>
                                <div class="clearfix"></div>
                                <select name="associatedCategories[]" id="associatedCategories" class="form-control select2" onchange="articlesList()" multiple required data-placeholder="Select Categories">
                                    @foreach($sections as $section)
                                    @php $dash=''; @endphp
                                    <option value="{{ $section->id }}"  {{ in_array($section->id, $associatedCategories) ? 'selected' : '' }}>{{ $section->name }}</option>
                                        @foreach ($section->childrenCategories as $childCategory)
                                        @include('backend.schemes.child_category', ['child_category' => $childCategory])
                                        @endforeach
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="col-md-3" style="height:250px;overflow:auto;">
                            <div class="form-group">
                                <div class="clearfix"></div>
                                <label class="float-left">Associated Stores</label>
                                <label class="float-right" for="checkAllStores"><input type="checkbox" id="checkAllStores" name="checkAllStores" onclick="checkAllStoresAction();"> Select all Stores</label>
                                <div class="clearfix"></div>
                                <select name="associatedStores[]" id="associatedStores" class="form-control select2" multiple required data-placeholder="Select Stores">
                                @foreach($stores as $store)
                                    <option value="{{ $store->id }}"  {{ in_array($store->id, $associatedStores) ? 'selected' : '' }}>{{ $store->name }}</option>
                                @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="col-md-3" style="height:250px;overflow:auto;">
                            <div class="form-group">
                                <div class="clearfix"></div>
                                <label class="float-left">Include Products</label>
                                <label class="float-right" for="checkAllIncProducts"><input type="checkbox" id="checkAllIncProducts" name="checkAllIncProducts" onclick="checkAllIncProductsAction();"> Include all Products</label>
                                <div class="clearfix"></div>
                                <select name="includeProducts[]" id="includeProducts" class="form-control select2" multiple data-placeholder="Include Products">
                                @foreach($articles as $article)
                                <option value="{{ $article->id }}" {{ in_array($article->id, $associatedProducts) ? 'selected' : '' }}>{{ $article->name }}</option>
                                @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="col-md-3" style="height:250px;overflow:auto;">
                            <div class="form-group">
                                <div class="clearfix"></div>
                                <label class="float-left">Exclude Products</label>
                                <div class="clearfix"></div>
                                <select name="excludeProducts[]" id="excludeProducts" class="form-control select2" multiple data-placeholder="Exclude Products">
                                    @foreach($articles as $article)
                                    <option value="{{ $article->id }}" {{ in_array($article->id, $associatedProductsEx) ? 'selected' : '' }}>{{ $article->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
    
                    </div>
                </div>
                <div class="alert alert-info slabArea d-none">
                    <h6>Assign Slabs <button type="button" class="btn btn-sm float-right btn-success" onclick="addNewSlab();"><i class="fa fas fa-plus"></i> Add New Slab</button></h6>
                    <div class="d-none slabAreaInput">
                        <table class="table">
                            <tbody>  
                                <tr>
                                    <td>
                                        <select name="slabProduct[]" class="form-control --cls--" multiple data-placeholder="Select Slab Products">
                                            @foreach($articles as $article)
                                            <option value="{{ $article->id }}">{{ $article->name }}</option>
                                            @endforeach
                                        </select>
                                    </td>
                                    <td>
                                        <input type="number" class="form-control" step="1" name="slabQtyMin[]" >
                                    </td>
                                    <td>
                                        <input type="number" class="form-control" step="1" name="slabQtyMax[]">
                                    </td>
                                    <td>
                                        <input type="number" class="form-control" step="1" name="slabPercent[]">
                                    </td>
                                    <td>
                                        <button class="btn btn-danger btn-sm" type="button" onclick="$(this).parent().parent().remove();"><i class="fa fas fa-times"></i></button>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <table class="table slabAreaItems">
                        <thead>
                            <tr>
                                <th>Article</th>
                                <th>Qty From</th>
                                <th>Qty Upto</th>
                                <th>Discount %</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            @if(!empty($scheme->scheme_nature) && $scheme->scheme_nature == SLAB_DISCOUNT)
                            @foreach($scheme->offers as $offer)
                                @if($offer->main_from_qty > 0)
                                <tr>
                                    <td>
                                        <select name="slabProduct[]" class="form-control --cls--"  data-placeholder="Select Slab Products">
                                            @foreach($articles as $article)
                                            <option value="{{ $article->id }} @if($article->id == $offer->article_id)  'selected' @endif">{{ $article->name }}</option>
                                            @endforeach
                                        </select>
                                    </td>
                                    <td>
                                        <input type="number" class="form-control" step="1" name="slabQtyMin[]" value="{{ $offer->main_from_qty }}">
                                    </td>
                                    <td>
                                        <input type="number" class="form-control" step="1" name="slabQtyMax[]"  value="{{ $offer->combo_upto_qty }}">
                                    </td>
                                    <td>
                                        <input type="number" class="form-control" step="1" name="slabPercent[]" value="{{ $offer->discount_percent }}">
                                    </td>
                                    <td>
                                        <button class="btn btn-danger btn-sm" type="button" onclick="$(this).parent().parent().remove();"><i class="fa fas fa-times"></i></button>
                                    </td>
                                </tr>
                                @endif
                                @endforeach
                            @endif

                        </tbody>
                    </table>
                </div>
                <div class="alert alert-info comboArea d-none">
                    <h6>Assign Combo Options <button type="button" class="btn btn-sm float-right btn-success" onclick="addNewCombo();"><i class="fa fas fa-plus"></i> Add New Combo</button></h6>
                    <div class="d-none comboAreaInput">
                        <table class="table">
                            <tbody>
                                <tr>
                                    <td>
                                        <select name="comboProduct[]" class="form-control --cls--" data-placeholder="Select Combo Products">
                                            @foreach($articles as $article)
                                            <option value="{{ $article->id }} ">{{ $article->name }}</option>
                                            @endforeach
                                        </select>
                                    </td>
                                    <td>
                                        <input type="number" class="form-control" step="1" name="mainQty[]">
                                    </td>
                                    <td>
                                        <input type="number" class="form-control" step="1" name="comboQty[]">
                                    </td>
                                    <td>
                                        <input type="number" class="form-control" step="1" name="comboPercent[]">
                                    </td>
                                    <td>
                                        <button class="btn btn-danger btn-sm" type="button" onclick="$(this).parent().parent().remove();"><i class="fa fas fa-times"></i></button>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <table class="table comboAreaItems">
                        <thead>
                            <tr>
                                <th>Article</th>
                                <th>Main Qty.</th>
                                <th>Combo Qty.</th>
                                <th>Discount %</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            @if(!empty($scheme->scheme_nature) && $scheme->scheme_nature == COMBO_DISCOUNT)
                            @foreach($scheme->offers as $offer)
                            @if($offer->main_from_qty > 0)
                            <tr>
                                <td>
                                    <select name="comboProduct[]" class="form-control --cls--"  data-placeholder="Select Combo Products">
                                        @foreach($articles as $article)
                                        <option value="{{ $article->id }}" @if($article->id == $offer->article_id)  {{ 'selected' }} @endif>{{ $article->name }}</option>
                                        @endforeach
                                    </select>
                                </td>
                                <td>
                                    <input type="number" class="form-control" step="1" name="mainQty[]" value="{{ $offer->main_from_qty }}">
                                </td>
                                <td>
                                    <input type="number" class="form-control" step="1" name="comboQty[]" value="{{ $offer->combo_upto_qty }}">
                                </td>
                                <td>
                                    <input type="number" class="form-control" step="1" name="comboPercent[]" value="{{ $offer->discount_percent }}">
                                </td>
                                <td>
                                    <button class="btn btn-danger btn-sm" type="button" onclick="$(this).parent().parent().remove();"><i class="fa fas fa-times"></i></button>
                                </td>
                            </tr>
                            @endif
                            @endforeach
                            @endif

                        </tbody>
                    </table>
                </div>
                <div class="alert alert-success text-right">
                    <button class="btn btn-success"><i class="fa fas fa-save"></i> Save Scheme</button>
                    <a href="{{ route('scheme-and-offers-listing') }}" class="btn btn-danger"><i class="fa fas fa-times"></i> Cancel</a>
                </div>
                
            </form>
        </div>
    </div>
@endsection

@section('extraJs')
<script>
    function showComboArea() {
        $(".comboArea").removeClass('d-none');
        // $(".comboAreaItems").html('');
    }
    function hideComboArea() {
        $(".comboArea").addClass('d-none');
        // $(".comboAreaItems").html('');
    }
    function hideSlabArea() {
        $(".slabArea").addClass('d-none');
        // $(".slabAreaItems tbody").html('');
    }
    function showSlabArea() {
        $(".slabArea").removeClass('d-none');
        // $(".slabAreaItems tbody").html('');
    }
    function addNewSlab() {
        var cls = 'tr' + parseInt(Math.random() * 1000000000);
        var clsName = '.'+cls;
        var html = $('.slabAreaInput table tbody').html().replace('--cls--', cls);
        $('.slabAreaItems tbody').append(html);
        setTimeout('$("'+clsName+'").select2();',100);
        console.log('$("'+clsName+'").select2();');
    }
    function addNewCombo() {
        var cls = 'tr' + parseInt(Math.random() * 10000000000);
        var clsName = '.'+cls;
        var html = $('.comboAreaInput table tbody').html().replace('--cls--', cls);
        $('.comboAreaItems tbody').append(html);
        setTimeout('$("'+clsName+'").select2();',100);
        console.log('$("'+clsName+'").select2();');
    }
    function checkAllCategoriesAction() {
        var isChecked = document.getElementById("checkAllCategories").checked;
        $("#associatedCategories option").each(function() {
            if(isChecked == true) {
                $(this).attr('selected', 'selected');
            } else {
                $(this).removeAttr('selected');
            }
        });
        $("#associatedCategories").trigger('change');
    }
    function checkAllStoresAction() {
        var isChecked = document.getElementById("checkAllStores").checked;
        $("#associatedStores option").each(function() {
            if(isChecked == true) {
                $(this).attr('selected', 'selected');
            } else {
                $(this).removeAttr('selected');
            }
        });
        $("#associatedStores").trigger('change');
    }
    function checkAllIncProductsAction() {
        var isChecked = document.getElementById("checkAllIncProducts").checked;
        $("#includeProducts option").each(function() {
            if(isChecked == true) {
                $(this).attr('selected', 'selected');
            } else {
                $(this).removeAttr('selected');
            }
        });
        $("#includeProducts").trigger('change');
    }

    @if(!empty($scheme->id))
    $("#scheme_nature").trigger('change');
    @endif
    $(document).ready(function() {
      $("input.datepickers").datepicker({
            autoclose: true,
            todayHighlight: true,
            format: 'yyyy-mm-dd',
            orientation: 'right bottom'                      
      });
    });

    function articlesList()
    {   catelist = [];
        console.log(this.associatedCategories);
        $("associatedCategories").each(function(){
            catelist.push($(this).val());
        });
        console.log(catelist);
        var _token   = $('meta[name="csrf-token"]').attr('content');   
    };

</script>
@endsection