@extends('master')

@section('css')
    <!-- iCheck for checkboxes and radio inputs -->
    <link rel="stylesheet" href="{{ asset('assets/plugins/icheck-bootstrap/icheck-bootstrap.min.css') }}">
@endsection

@section('contant')
    {{-- @if ($errors->any())
        {{ implode('', $errors->all('<div>:message</div>')) }}
        {{ dd($errors->all()) }}
    @endif --}}
    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper">
        <!-- Content Header (Page header) -->
        <div class="content-header">
            <div class="container-fluid">
                <div class="row mb-2">
                    <div class="col-sm-6">
                        <h1 class="m-0">{{ $pageTitle }}</h1>
                    </div><!-- /.col -->
                    <div class="col-sm-6">
                        <ol class="breadcrumb float-sm-right">
                            <li class="breadcrumb-item"><a href="{{ route('home') }}">Dashboard</a></li>
                            <li class="breadcrumb-item"><a href="{{ route('settings.index') }}">Settings</a></li>
                            <li class="breadcrumb-item active">Create</li>
                        </ol>
                    </div><!-- /.col -->
                </div><!-- /.row -->
            </div><!-- /.container-fluid -->
        </div>
        <!-- /.content-header -->

        <!-- Main content -->
        <div class="content">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-lg-12">
                        <div class="card card-primary">
                            <div class="card-header">
                                <h3 class="card-title">{{ $pageTitle }}</h3>
                            </div>
                            <!-- /.card-header -->
                            <!-- form start -->
                            <form action="{{ route('settings.store') }}" method="POST">@csrf
                                <div class="card-body">
                                    <div class="form-group">
                                        <label for="name">Name</label>
                                        <input type="text" name="name" class="form-control" id="name"
                                            value="{{ old('name') }}" placeholder="Enter Name">
                                        @error('name')
                                            <span class="text-danger">{{ $message }}</span>
                                        @enderror
                                    </div>
                                    <div class="form-group">
                                        <label for="key">Key</label>
                                        <input type="text" name="key" class="form-control" id="key"
                                            value="{{ old('key') }}" placeholder="Enter Key">
                                        @error('key')
                                            <span class="text-danger">{{ $message }}</span>
                                        @enderror
                                    </div>
                                    <div class="form-group">
                                        <label>Type</label><br>
                                        <div class="form-group clearfix">
                                            <div class="icheck-primary d-inline">
                                                <input type="radio" id="type_other" value="other" name="type" checked>
                                                <label for="type_other">
                                                    Other
                                                </label>
                                            </div>&nbsp;
                                            <div class="icheck-primary d-inline">
                                                <input type="radio" id="type_mode" name="type" value="mode">
                                                <label for="type_mode">
                                                    Mode
                                                </label>
                                            </div>
                                        </div>
                                        @error('type')
                                            <span class="text-danger">{{ $message }}</span>
                                        @enderror
                                        @error('options.*')
                                            <span class="text-danger">{{ $message }}</span>
                                        @enderror
                                    </div>
                                    <div class="form-group" id="value_input">
                                        <label for="value">Value</label>
                                        <input type="text" name="value" class="form-control" id="value"
                                            value="{{ old('value') }}" placeholder="Enter Value">
                                        @error('value')
                                            <span class="text-danger">{{ $message }}</span>
                                        @enderror
                                    </div>
                                    <div id="mode_options">
                                        <div class="form-group">
                                            <div class="d-flex justify-content-between align-items-center mb-2">
                                                <label>Mode Option</label><br>
                                                <button type="button" class="btn btn-primary" id="add_option"><i
                                                        class="fas fa-plus"></i> Add
                                                    Option</button>
                                            </div>
                                            <table class="table table-striped">
                                                <thead>
                                                    <tr>
                                                        <th>Name</th>
                                                        <th>Value</th>
                                                        <th style="width: 40px">Action</th>
                                                    </tr>
                                                </thead>
                                                <tbody id="option_table_body">
                                                    {{-- <tr>
                                                        <td>
                                                            <input type="text" class="form-control"
                                                                name="options[][name]">
                                                        </td>
                                                        <td>
                                                            <input type="text" class="form-control"
                                                                name="options[][key]">
                                                        </td>
                                                        <td>
                                                            <input type="text" class="form-control"
                                                                name="options[][value]">
                                                        </td>
                                                        <td>
                                                            <button type="button" class="btn btn-danger" data-option=""><i class="fas fa-trash-alt"></i></button>
                                                        </td>
                                                    </tr> --}}
                                                </tbody>
                                            </table>
                                            @error('type')
                                                <span class="text-danger">{{ $message }}</span>
                                            @enderror
                                        </div>
                                    </div>
                                    
                                </div>
                                <div class="card-footer">
                                    <button type="submit" class="btn btn-primary">Submit</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
                <!-- /.row -->
            </div>
            <!-- /.container-fluid -->
        </div>
        <!-- /.content -->
    </div>
    <!-- /.content-wrapper -->
@endsection

@section('js')
    <!-- Bootstrap Switch -->
    <script src="{{ asset('assets/plugins/bootstrap-switch/js/bootstrap-switch.min.js') }}"></script>
    <script>
        var optionCount = 0;

        $('#mode_options').hide();
        $('input[name=type]').on('change', function() {
            var type = $(this).val();
            if (type == 'mode') {
                $('#mode_options').show();
                addOption(0);
            } else if (type == 'other') {
                $('#mode_options').hide();
            }
        });

        $('#add_option').on('click', function() {
            addOption(optionCount + 1);
        });

        function addOption(count) {
            if (count == 0) {
                console.log(count);
                $('#option_table_body').html('<tr id="option_0"><td><input type="text" class="form-control"name="options[0][name]"></td><td><input type="text" class="form-control"name="options[0][value]"></td><td><button type="button" class="btn btn-danger" onclick="removeOption(0)"><i class="fas fa-trash-alt"></i></button></td></tr>');
            } else {
                if ($('#option_table_body').find('tr:last').length) {
                    console.log(count);
                    $('#option_table_body').find('tr:last').after(
                        '<tr id="option_' + count + '"><td><input type="text" class="form-control"name="options[' + count +
                        '][name]"></td><td><input type="text" class="form-control"name="options[' + count +
                        '][value]"></td><td><button type="button" class="btn btn-danger" onclick="removeOption(' + count +
                        ')"><i class="fas fa-trash-alt"></i></button></td></tr>');
                    optionCount++;
                } else {
                    $('#option_table_body').append(
                        '<tr id="option_0"><td><input type="text" class="form-control"name="options[0][name]"></td><td><input type="text" class="form-control"name="options[0][value]"></td><td><button type="button" class="btn btn-danger" onclick="removeOption(0)"><i class="fas fa-trash-alt"></i></button></td></tr>'
                    );
                }
            }
        }

        function removeOption(optionID) {
            $('#option_' + optionID).remove();
        }
    </script>
@endsection