@extends('layouts.admin')

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

@section('content')

<style>
    .checkbox-listing {
        list-style-type: none; /* Remove bullets */
        padding: 0; /* Remove padding */
        margin: 0; /* Remove margins */
    }

    .checkbox-element {
        border: 1px solid #ddd; /* Add a thin border to each list item */
        margin-top: -1px; /* Prevent double borders */
        background-color: #f6f6f6; /* Add a grey background color */
        padding: 12px; /* Add some padding */
    }

    .checkbox-element .checkbox-data {
        vertical-align: middle;
        position: relative;
        bottom: 1px;
        display: inline-block;
        transform: scale(2.0);
        margin-right: 10px;
    }
</style>

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

        <form action="{{ route('msku.update', $sku) }}" method="POST" enctype="multipart/form-data">
            @csrf
            @method('PUT')

            <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" readonly>
                    <option value="ALL">ALL BRANCH</option>
                    @foreach ($branch_access as $key => $value)
                        @if ($branch_default == $value)
                            <option value="{{ $value }}" selected>{{ $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', $sku->SKUID) }}" readonly>
                @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', $sku->Sdesc) }}">
                @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', $sku->Sdesc_long) }}</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)
                        <option value="{{ $key }}" {{ old('category', $sku->Cno) === $key ? 'selected' : ''}}>{{ $value }}</option>
                    @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 value="SST_S8" {{ old('tax_code', $sku->tax_code) === 'SST_S8' ? 'selected' : ''}}>SST S8</option>
                    <option value="SST_S6" {{ old('tax_code', $sku->tax_code) === 'SST_S6' ? 'selected' : ''}}>SST S6</option>
                    <option value="SST_S0" {{ old('tax_code', $sku->tax_code) === 'SST_S0' ? 'selected' : ''}}>SST S0</option>
                    <option value="TX_SR" {{ old('tax_code', $sku->tax_code) === 'TX_SR' ? 'selected' : ''}}>TX SR</option>
                    <option value="ZP_ZRL" {{ old('tax_code', $sku->tax_code) === 'ZP_ZRL' ? 'selected' : ''}}>ZP ZRL</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', $sku->Actflag) == 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', $sku->control_flag) == 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>

            @if(!empty($msku_img))
            <div class="form-group">
                <label for="msku_img">Preview Image</label><br>
                <img id="msku_img" src="data:image/png;base64,{{ chunk_split(base64_encode($msku_img->picture)) }}" style="width: 200px; height: auto" alt="Site Image"/>
            </div>
            @endif

            <hr>

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

            <div class="form-group">
                <label for="barcode_pic">Preview Barcode</label><br>
                <img id="barcode_pic" src="data:image/png;base64,{{ generateBarcode($sku->SKUID) }}" style="width: 200px; height: auto" alt="Barcode"/>
            </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', $sku->Uqty) }}">
                @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', $sku->cflag) === 0 ? 'selected' : ''}}>No (Fixed Price)</option>
                    <option value="1" {{ old('cflag', $sku->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', $sku->Lcost) }}">
                @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', $sku->LnetCost) }}">
                @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', $sku_price->sell_price_take_away) }}">
                @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', $sku_price->sell_price_delivery) }}">
                @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', $sku->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 }}" {{ in_array($key, old('msku_addons[]', $addons_id)) == $key ? 'checked' : ''}}>
                                    </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" {{ in_array("DI", old('tissue_flag[]', $tissue_flag)) == "DI" ? 'checked' : ''}}>DINE-IN &nbsp;
                                <input type="checkbox" name="tissue_flag[]" id="miscellaneous_list" class="data-checkbox" value="TA" {{ in_array("TA", old('tissue_flag[]', $tissue_flag)) == "TA" ? 'checked' : ''}}>TAKE AWAY &nbsp;
                                <input type="checkbox" name="tissue_flag[]" id="miscellaneous_list" class="data-checkbox" value="DL" {{ in_array("DL", old('tissue_flag[]', $tissue_flag)) == "DL" ? 'checked' : ''}}>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" {{ in_array("DI", old('plastic_flag[]', $plastic_flag)) == "DI" ? 'checked' : ''}}>DINE-IN &nbsp;
                                <input type="checkbox" name="plastic_flag[]" id="miscellaneous_list" class="data-checkbox" value="TA" {{ in_array("TA", old('plastic_flag[]', $plastic_flag)) == "TA" ? 'checked' : ''}}>TAKE AWAY &nbsp;
                                <input type="checkbox" name="plastic_flag[]" id="miscellaneous_list" class="data-checkbox" value="DL" {{ in_array("DL", old('plastic_flag[]', $plastic_flag)) == "DL" ? 'checked' : ''}}>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" {{ in_array("DI", old('cutlery_flag[]', $cutlery_flag)) == "DI" ? 'checked' : ''}}>DINE-IN &nbsp;
                                <input type="checkbox" name="cutlery_flag[]" id="miscellaneous_list" class="data-checkbox" value="TA" {{ in_array("TA", old('cutlery_flag[]', $cutlery_flag)) == "TA" ? 'checked' : ''}}>TAKE AWAY &nbsp;
                                <input type="checkbox" name="cutlery_flag[]" id="miscellaneous_list" class="data-checkbox" value="DL" {{ in_array("DL", old('cutlery_flag[]', $cutlery_flag)) == "DL" ? 'checked' : ''}}>DELIVERY
                            </div>
                        </div>
                    </li>
                </ul>
            </div>

            <button class="btn btn-primary float-right" type="submit">Update</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);
            }
        });
    }

</script>
@endsection