@extends('layouts.admin')

@section('title', 'Create MSKU')
@section('content-header', 'Create MSKU')

@section('content')

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

        <form action="{{ route('msku.store') }}" method="POST" enctype="multipart/form-data">
            @csrf

            <h5><u>Product Information</u></h5>

            <div class="form-group">
                <label for="branch">Branch</label>
                <select name="branch" class="form-control @error('branch') is-invalid @enderror" id="branch" onchange="set_dashboard_branch()">
                <option value="ALL">ALL BRANCH</option>
                    @foreach ($branch_access as $key => $value)
                        @if ($branch_default == $value)
                            <option value="{{ $value }}" selected>{{ $value }}</option>
                        @else
                            <option value="{{ $value }}">{{ $value }}</option>
                        @endif
                    @endforeach
                </select>
                @error('branch')
                <span class="invalid-feedback" role="alert">
                    <strong>{{ $message }}</strong>
                </span>
                @enderror
            </div>

{{--            <div class="form-group">--}}
{{--                <label for="skuid">SKUID</label>--}}
{{--                <input type="text" name="skuid" class="form-control @error('skuid') is-invalid @enderror" id="skuid" placeholder="SKUID" value="{{ old('skuid') }}">--}}
{{--                @error('skuid')--}}
{{--                <span class="invalid-feedback" role="alert">--}}
{{--                    <strong>{{ $message }}</strong>--}}
{{--                </span>--}}
{{--                @enderror--}}
{{--            </div>--}}

            <div class="form-group">
                <label for="name">Product Name</label>
                <input type="text" name="name" class="form-control @error('name') is-invalid @enderror" id="name" placeholder="Name" value="{{ old('name') }}">
                @error('name')
                <span class="invalid-feedback" role="alert">
                    <strong>{{ $message }}</strong>
                </span>
                @enderror
            </div>

            <div class="form-group">
                <label for="description">Description</label>
                <textarea name="description" class="form-control @error('description') is-invalid @enderror" id="description" placeholder="Description">{{ old('description') }}</textarea>
                @error('description')
                <span class="invalid-feedback" role="alert">
                    <strong>{{ $message }}</strong>
                </span>
                @enderror
            </div>

            <div class="form-group">
                <label for="category">Category</label>
                <select name="category" class="form-control @error('category') is-invalid @enderror" id="category">
                    <option disabled selected>-SELECT-</option>
                    @foreach ($categories as $key => $value)
                        @if (old('category') == $key)
                            <option value="{{ $key }}" selected>{{ $value }}</option>
                        @else
                            <option value="{{ $key }}">{{ $value }}</option>
                        @endif
                    @endforeach
                </select>
                @error('category')
                <span class="invalid-feedback" role="alert">
                    <strong>{{ $message }}</strong>
                </span>
                @enderror
            </div>

            <div class="form-group">
                <label for="tax_code">Tax Code</label>
                <select name="tax_code" class="form-control @error('tax_code') is-invalid @enderror" id="tax_code">
                    <option>-SELECT-</option>
                    <option value="SST_S8" {{ old('tax_code') === 'SST_S8' ? 'selected' : ''}}>SST S8</option>
                    <option value="SST_S6" {{ old('tax_code') === 'SST_S6' ? 'selected' : ''}}>SST S6</option>
                    <option value="SST_S0" {{ old('tax_code') === 'SST_S0' ? 'selected' : ''}}>SST S0</option>
                </select>
                @error('tax_code')
                <span class="invalid-feedback" role="alert">
                    <strong>{{ $message }}</strong>
                </span>
                @enderror
            </div>

            <div class="form-group">
                <label for="is_active">
                    <input type="hidden" name="is_active" value="0">
                    <input type="checkbox" name="is_active" id="is_active" value="1" {{ old('is_active') == 1 ? 'checked' : '' }} data-plugin="switchery" data-color="#1bb99a">
                    Is Active
                </label>
                {!! "&nbsp;" !!}
                <label for="is_control">
                    <input type="hidden" name="is_control" value="0">
                    <input type="checkbox" name="is_control" id="is_control" value="1" {{ old('is_control') == 1 ? 'checked' : '' }} data-plugin="switchery" data-color="#1bb99a">
                    Is Addon Exclusive
                </label>
            </div>

            <div class="form-group">
                <label for="image">Image</label>
                <div class="custom-file">
                    <input type="file" class="custom-file-input" name="image" id="image">
                    <label class="custom-file-label" for="image">Choose file</label>
                </div>
                <small style="color: red">(Type: JPEG and PNG) (Size: Max 2 MB)</small>
                @error('image')
                <span class="invalid-feedback" role="alert">
                    <strong>{{ $message }}</strong>
                </span>
                @enderror
            </div>

            <hr>

            <h5><u>Product Details (Quantity & Price)</u></h5>

            <div class="form-group">
                <label for="quantity">Quantity</label>
                <input type="text" name="quantity" class="form-control @error('quantity') is-invalid @enderror" id="quantity" placeholder="Quantity" value="{{ old('quantity', 1) }}">
                @error('quantity')
                <span class="invalid-feedback" role="alert">
                    <strong>{{ $message }}</strong>
                </span>
                @enderror
            </div>

            <div class="form-group">
                <label for="cflag">Input Current/Open Price</label>
                <select name="cflag" class="form-control @error('cflag') is-invalid @enderror" id="cflag">
                    <option value="0" {{ old('cflag') === 0 ? 'selected' : ''}}>No (Fixed Price)</option>
                    <option value="1" {{ old('cflag') === 1 ? 'selected' : ''}}>Yes</option>
                </select>
                @error('cflag')
                <span class="invalid-feedback" role="alert">
                    <strong>{{ $message }}</strong>
                </span>
                @enderror
            </div>

            <div class="form-group">
                <label for="cost_price">Cost Price (RM)</label>
                <input type="text" name="cost_price" class="form-control @error('cost_price') is-invalid @enderror" id="cost_price" placeholder="Cost Price" value="{{ old('cost_price') }}">
                @error('cost_price')
                <span class="invalid-feedback" role="alert">
                    <strong>{{ $message }}</strong>
                </span>
                @enderror
            </div>

            <div class="form-group">
                <label for="sell_price">Sell Price (RM)</label>
                <input type="text" name="sell_price" class="form-control @error('sell_price') is-invalid @enderror" id="sell_price" placeholder="Sell Price" value="{{ old('sell_price') }}">
                @error('sell_price')
                <span class="invalid-feedback" role="alert">
                    <strong>{{ $message }}</strong>
                </span>
                @enderror
            </div>

            <div class="form-group">
                <label for="sell_price_ta">Sell Price (RM) Take Away</label>
                <input type="text" name="sell_price_ta" class="form-control @error('sell_price_ta') is-invalid @enderror" id="sell_price_ta" placeholder="Sell Price Take Away" value="{{ old('sell_price_ta') }}">
                @error('sell_price_ta')
                <span class="invalid-feedback" role="alert">
                    <strong>{{ $message }}</strong>
                </span>
                @enderror
            </div>

            <div class="form-group">
                <label for="sell_price_d">Sell Price (RM) Delivery</label>
                <input type="text" name="sell_price_d" class="form-control @error('sell_price_d') is-invalid @enderror" id="sell_price_d" placeholder="Sell Price Delivery" value="{{ old('sell_price_d') }}">
                @error('sell_price_d')
                <span class="invalid-feedback" role="alert">
                    <strong>{{ $message }}</strong>
                </span>
                @enderror
            </div>

            <div class="form-group">
                <label for="parent_skuid">Parent SKUID (Optional)</label>
                <div class="input-group">
                    <input list="parent_skuid_list" class="form-control" name="parent_skuid" id="parent_skuid" placeholder="Choose Parent MSKU..." value="{{ old('parent_skuid') }}" autocomplete="off">
                    <span class="input-group-append">
                        <button class="btn btn-default btn-flat" type="button" onclick="search_msku()"><i class="ion-search"></i></button>
                    </span>
                </div>
                <datalist id="parent_skuid_list"></datalist>
                @error('parent_skuid')
                <span class="invalid-feedback" role="alert">
                    <strong>{{ $message }}</strong>
                </span>
                @enderror
            </div>

            @if(!empty($addons) && $branch_default != 'ALL')
                <hr>

                <h5><u>Product Details (Add-ons)</u></h5>

                <div class="form-group">
                    <ul class="data-listing">
                        @foreach ($addons as $key => $value)
                            <li class="data-element">
                                <div class="row">
                                    <div class="col-8">
                                        <span style="margin: 10px;">{{ $value }}</span>
                                    </div>
                                    <div class="col-4" style="text-align: right">
                                        <input type="checkbox" name="msku_addons[]" id="msku_addons" class="data-checkbox" value="{{ $key }}">
                                    </div>
                                </div>
                            </li>
                        @endforeach
                    </ul>
                </div>
            @endif

            <hr>

            <h5><u>Product Details (Miscellaneous)</u></h5>

            <div class="form-group">
                <label for="miscellaneous">Miscellaneous</label>
                <ul class="data-listing">
                    <li class="data-element">
                        <div class="row">
                            <div class="col-8">
                                <span style="margin: 10px;">Tissue</span>
                            </div>
                            <div class="col-4" style="text-align: right">
                                <input type="checkbox" name="tissue_flag[]" id="miscellaneous_list" class="data-checkbox" value="DI">DINE-IN &nbsp;
                                <input type="checkbox" name="tissue_flag[]" id="miscellaneous_list" class="data-checkbox" value="TA">TAKE AWAY &nbsp;
                                <input type="checkbox" name="tissue_flag[]" id="miscellaneous_list" class="data-checkbox" value="DL">DELIVERY

                            </div>
                        </div>
                    </li>
                    <li class="data-element">
                        <div class="row">
                            <div class="col-8">
                                <span style="margin: 10px;">Plastic</span>
                            </div>
                            <div class="col-4" style="text-align: right">
                                <input type="checkbox" name="plastic_flag[]" id="miscellaneous_list" class="data-checkbox" value="DI">DINE-IN &nbsp;
                                <input type="checkbox" name="plastic_flag[]" id="miscellaneous_list" class="data-checkbox" value="TA">TAKE AWAY &nbsp;
                                <input type="checkbox" name="plastic_flag[]" id="miscellaneous_list" class="data-checkbox" value="DL">DELIVERY
                            </div>
                        </div>
                    </li>
                    <li class="data-element">
                        <div class="row">
                            <div class="col-8">
                                <span style="margin: 10px;">Cutlery</span>
                            </div>
                            <div class="col-4" style="text-align: right">
                                <input type="checkbox" name="cutlery_flag[]" id="miscellaneous_list" class="data-checkbox" value="DI">DINE-IN &nbsp;
                                <input type="checkbox" name="cutlery_flag[]" id="miscellaneous_list" class="data-checkbox" value="TA">TAKE AWAY &nbsp;
                                <input type="checkbox" name="cutlery_flag[]" id="miscellaneous_list" class="data-checkbox" value="DL">DELIVERY
                            </div>
                        </div>
                    </li>
                </ul>
            </div>

            <button class="btn btn-primary float-right" type="submit">Create</button>
        </form>
    </div>
</div>
@endsection

@section('js')
    <script src="{{ asset('plugins/bs-custom-file-input/bs-custom-file-input.min.js') }}"></script>
    <script>
        $(document).ready(function () {
            bsCustomFileInput.init();
        });

        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });


        function search_msku(){

            const SKUID = $('#parent_skuid').val();
            let options = '';
            console.log(SKUID);

            $.ajax({
                url: "{{ route('msku.get_msku_list') }}",
                type:"POST",
                data:{
                    PARENT_SKUID:SKUID,
                },
                success:function(response){
                    console.log(response);
                    if (response){
                        const p = response;
                        console.log(p.length);
                        for (let i = 0; i < p.length; i++) {
                            options += '<option value="' + p[i].SKUID + '">'+ p[i].Sdesc +'</option>';
                        }

                        document.getElementById('parent_skuid_list').innerHTML = options;
                    }
                },
                error: function(error) {
                    console.log(error);
                }
            });
        }

        function set_dashboard_branch(){

            const branch = $('#branch').val();
            console.log(branch);

            // if (branch != "ALL"){
                $.ajax({
                    url: "{{ route('home.set_dashboard_branch') }}",
                    type:"POST",
                    data:{
                        branch:branch,
                    },
                    success:function(response){
                        console.log(response);
                        window.location.reload();
                    },
                    error: function(error) {
                        console.log(error);
                    }
                });
            // }
        }

    </script>
@endsection