@extends('layouts.admin')

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

@section('content')
    <div class="card">
        <div class="card-body">
            <form action="{{ route('addons.store') }}" method="POST" enctype="multipart/form-data">
                @csrf
                @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">
                        @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="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') }}">
                    @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') === $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') === '0' ? 'selected' : ''}}>On/Off</option>
                        <option value="1" {{ old('type') === '1' ? 'selected' : ''}}>Multi Quantity</option>
                        <option value="2" {{ old('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('type') is-invalid @enderror" id="required">
                        <option value="1" {{ old('required') === '1' ? 'selected' : ''}}>Required</option>
                        <option value="0" {{ old('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 Order Type</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">DINE-IN &nbsp;
                                    <input type="checkbox" name="mandatory_selection[]" id="order_type_list" class="data-checkbox" value="TA">TAKE AWAY &nbsp;
                                    <input type="checkbox" name="mandatory_selection[]" id="order_type_list" class="data-checkbox" value="DL">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') === '0' ? 'selected' : ''}}>SKUID</option>
{{--                        <option value="1" {{ old('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>
                            <tr>
                                <td>
                                    <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[]') }}">
                                    </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 $key => $value)
                                                <option value="{{ $key }}" {{ old('addons_sku[]') === $key ? 'selected' : ''}}>{{ $value }} [{{ $key }}]</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </td>
                                <td>
                                    <input type="text" name="addons_price[]" class="form-control" id="price" placeholder="Price" value="{{ old('addons_price[]', 0) }}">
                                </td>
                                <td>
                                    <input type="number" name="addons_qty[]" class="form-control" id="max_qty" placeholder="Max Quantity" value="{{ old('addons_qty[]', 0) }}">
                                </td>
                                <td style="text-align: center">
                                    <button type="button" name="add" id="add-option" class="btn btn-outline-primary">Add</button>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <button class="btn btn-primary float-right" type="submit">Create</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 $key => $value)'+
                                    '<option value="{{ $key }}" {{ old('addons_sku[]') === $key ? 'selected' : ''}}>{{ $value }} [{{ $key }}]</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