@extends('layouts.admin')

@section('title', 'Edit Add-ons')
@section('content-header', 'Edit Add-ons')

@section('content')
    <div class="card">
        <div class="card-body">
            <form action="{{ route('addons.update', $addon) }}" method="POST" enctype="multipart/form-data">
                @csrf
                @method('PUT')
                @if ($errors->any())
                    <div class="alert alert-danger" role="alert">
                        <ul>
                            @foreach ($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                @endif
                <h5><u>Add-ons 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>
                        @foreach ($branch_access as $key => $value)
                            @if (old('branch', $addon->BID) == $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="name">Add-ons Name</label>
                    <input type="text" name="name" class="form-control @error('name') is-invalid @enderror" id="name" placeholder="Name" value="{{ old('name', $addon->name) }}">
                    @error('name')
                    <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 value="">-SELECT-</option>
                        @foreach ($categories as $key => $value)
                            <option value="{{ $key }}" {{ old('category', $addon->category_id) === $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="type">Type</label>
                    <select name="type" class="form-control @error('type') is-invalid @enderror" id="type">
                        <option value="">-SELECT-</option>
                        <option value="0" {{ old('type', $addon->type) === '0' ? 'selected' : ''}}>On/Off</option>
                        <option value="1" {{ old('type', $addon->type) === '1' ? 'selected' : ''}}>Multi Quantity</option>
                        <option value="2" {{ old('type', $addon->type) === '2' ? 'selected' : ''}}>Multi Selection</option>
                    </select>
                    @error('type')
                    <span class="invalid-feedback" role="alert">
                        <strong>{{ $message }}</strong>
                    </span>
                    @enderror
                </div>

                <div class="form-group">
                    <label for="required">Validation Option</label>
                    <select name="required" class="form-control @error('required') is-invalid @enderror" id="required">
                        <option value="1" {{ old('required', $addon->is_required) == '1' ? 'selected' : ''}}>Required</option>
                        <option value="0" {{ old('required', $addon->is_required) == '0' ? 'selected' : ''}}>Not Required</option>
                    </select>
                    @error('required')
                    <span class="invalid-feedback" role="alert">
                        <strong>{{ $message }}</strong>
                    </span>
                    @enderror
                </div>

                <hr>

                <h5><u>Add-on Order Type Selection</u></h5>

                <div class="form-group">
                    <ul class="data-listing">
                        <li class="data-element">
                            <div class="row">
                                <div class="col-8">
                                    <span style="margin: 10px;">Mandatory Selection</span>
                                </div>
                                <div class="col-4" style="text-align: right">
                                    <input type="checkbox" name="mandatory_selection[]" id="order_type_list" class="data-checkbox" value="DI" {{ in_array("DI", old('mandatory_selection[]', $mandatory_selection)) == "DI" ? 'checked' : ''}}>DINE-IN &nbsp;
                                    <input type="checkbox" name="mandatory_selection[]" id="order_type_list" class="data-checkbox" value="TA" {{ in_array("TA", old('mandatory_selection[]', $mandatory_selection)) == "TA" ? 'checked' : ''}}>TAKE AWAY &nbsp;
                                    <input type="checkbox" name="mandatory_selection[]" id="order_type_list" class="data-checkbox" value="DL" {{ in_array("DL", old('mandatory_selection[]', $mandatory_selection)) == "DL" ? 'checked' : ''}}>DELIVERY
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>

                <hr>

                <h5><u>Add-ons (Option & Price)</u></h5>

                <div class="form-group">
                    <label for="option_type">Option Type</label>
                    <select name="option_type" class="form-control @error('option_type') is-invalid @enderror" id="option_type" onchange="OptionType(this)">
                        <option value="0" {{ old('option_type', $addon->option_type) === 0 ? 'selected' : ''}}>SKUID</option>
{{--                        <option value="1" {{ old('option_type', $addon->option_type) === 1 ? 'selected' : ''}}>Name</option>--}}
                    </select>
                </div>

                <br>

                <div class="form-group">
                    <table class="table table-bordered" id="addons-option">
                        <thead>
                        <tr>
                            <th>Option</th>
                            <th>Price</th>
                            <th>Max Quantity</th>
                            <th>Action</th>
                        </tr>
                        </thead>
                        <tbody>
                        @foreach ($option_names as $key => $value)
                        <tr>
                            <td>
{{--                                @if($addon->option_type === 1)--}}
                                    <div class="Option_Name" style="display: none">
                                        <input type="text" name="addons_option[]" class="form-control" id="option" placeholder="Option Name" value="{{ old('addons_option[]', $value) }}">
                                    </div>
{{--                                @elseif($addon->option_type === 0)--}}
                                    <div class="Option_SKUID">
                                        <select name="addons_sku[]" class="form-control @error('addons_sku') is-invalid @enderror" id="addons_sku">
                                            <option value="">-SELECT-</option>
                                            @foreach ($msku as $SKUID => $description)
                                                @if (old('addons_sku[]', $value) == $SKUID)
                                                    <option value="{{ $SKUID }}" selected>{{ $description }} [{{ $SKUID }}]</option>
                                                @else
                                                    <option value="{{ $SKUID }}">{{ $description }} [{{ $SKUID }}]</option>
                                                @endif
                                            @endforeach
                                        </select>
                                    </div>
{{--                                @endif--}}
                            </td>
                            <td>
                                <input type="text" name="addons_price[]" class="form-control" id="price" placeholder="Price" value="{{ old('addons_price[]', $prices[$key]) }}" @if($addon->option_type === 1) readonly @endif>
                            </td>
                            <td>
                                <input type="number" name="addons_qty[]" class="form-control" id="max_qty" placeholder="Max Quantity" value="{{ old('addons_qty[]', $max_qty[$key]) }}">
                            </td>
                            <td style="text-align: center">
                                @if($key === 0)
                                    <button type="button" name="add" id="add-option" class="btn btn-outline-primary">Add</button>
                                @else
                                    <button type="button" class="btn btn-outline-danger remove-input-field">Delete</button>
                                @endif
                            </td>
                        </tr>
                        @endforeach
                        </tbody>
                    </table>
                </div>
                <button class="btn btn-primary float-right" type="submit">Update</button>
            </form>
        </div>
    </div>
@endsection

@section('js')
    <script type="text/javascript">
        var i = 0;
        $("#add-option").click(function () {
            ++i;
            $("#addons-option").append('' +
                '<tr>' +
                    '<td>' +
                        '<div class="Option_Name" style="display: none">' +
                            '<input type="text" name="addons_option[]" class="form-control" id="option" placeholder="Option Name">' +
                        '</div>' +
                        '<div class="Option_SKUID">' +
                            '<select name="addons_sku[]" class="form-control @error('addons_sku') is-invalid @enderror" id="addons_sku">' +
                                '<option value="">-SELECT-</option>'+
                                '@foreach($msku as $SKUID => $description)'+
                                    '<option value="{{ $SKUID }}" {{ old('addons_sku[]') === $SKUID ? 'selected' : ''}}>{{ $description }} [{{ $SKUID }}]</option>' +
                                '@endforeach'+
                            '</select>'+
                        '</div>'+
                    '</td>' +
                    '<td>' +
                        '<input type="text" name="addons_price[]" class="form-control" id="price" placeholder="Price">' +
                    '</td>'+
                    '<td>' +
                        '<input type="number" name="addons_qty[]" class="form-control" id="max_qty" placeholder="Max Quantity">' +
                    '</td>'+
                    '<td style="text-align: center">' +
                        '<button type="button" class="btn btn-outline-danger remove-input-field">Delete</button>' +
                    '</td>' +
                '</tr>'
            );
            OptionType(document.getElementById("option_type"));

        });
        $(document).on('click', '.remove-input-field', function () {
            $(this).parents('tr').remove();
        });

        function OptionType(elementValue) {
            if (elementValue.value == 0){

                $('.Option_Name').hide();
                $('.Option_SKUID').show();

                const addons_price = document.getElementsByName("addons_price[]");
                let i = 0, n = addons_price.length;
                for(; i<n; i++) {
                    addons_price[i].readOnly = false;
                }

            }else if (elementValue.value == 1){

                $('.Option_Name').show();
                $('.Option_SKUID').hide();

                const addons_price = document.getElementsByName("addons_price[]");
                let i = 0, n = addons_price.length;
                for(; i < n; i++) {
                    addons_price[i].value = "0";
                    addons_price[i].readOnly = true;
                }
            }
        }
    </script>
@endsection