@extends('layouts.admin')


@section('style')

    <!-- daterange picker -->
    <link rel="stylesheet" href="{{ asset('assets/bower/bootstrap-daterangepicker/daterangepicker.css') }}">
    <!-- bootstrap datepicker -->
    <link rel="stylesheet"
          href="{{ asset('assets/bower/bootstrap-datepicker/dist/css/bootstrap-datepicker.min.css') }}">
    <link rel="stylesheet"
          href="https://cdnjs.cloudflare.com/ajax/libs/jquery-tagsinput/1.3.6/jquery.tagsinput.min.css">

    <link rel="stylesheet" href="{{ asset('assets/bower/bootstrap3-wysihtml5-bower/dist/bootstrap3-wysihtml5.css') }}">

    <style>
        .required {
            color: #dd4b39;
        }
    </style>

@endSection

@section('script')


    <!-- date-range-picker -->
    <script src="{{ asset('assets/bower/moment/min/moment.min.js') }}"></script>
    <script src="{{ asset('assets/bower/bootstrap-daterangepicker/daterangepicker.js') }}"></script>
    <!-- bootstrap datepicker -->
    <script src="{{ asset('assets/bower/bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js') }}"></script>
    <script src="{{ asset('assets/bower/bootstrap3-wysihtml5-bower/dist/bootstrap3-wysihtml5.all.min.js') }}"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-tagsinput/1.3.6/jquery.tagsinput.min.js"></script>
    <script src="https://code.jquery.com/jquery-migrate-3.0.0.min.js"></script>
    <script src="{{ asset('assets/bower/ckeditor/ckeditor.js') }}"></script>

    <script>
        $(function () {
            let keywordCount = 0;
            $("#keywordsInputHidden").val('[]')

            // Set status active as default
            $("#active").prop("checked", true);

            function addKeyword(keyword) {
                let keywords = JSON.parse($("#keywordsInputHidden").val());
                keywords.push(keyword);
                $("#keywordsInputHidden").val(JSON.stringify(keywords));

                keywordCount++;
                let newRow = $("<tr>");
                newRow.append("<td>" + keywordCount + "</td>");
                newRow.append("<td class='keyword'>" + keyword + "</td>");
                newRow.append("<td><button class='btn btn-sm btn-danger delete-btn'>Remove</button></td>");
                $("#keywordList").append(newRow);
            }

            // Update the hidden input field with keywords list
            function updateKeywordsInput() {
                let keywordsList = [];
                $("#keywordList .keyword").each(function() {
                    keywordsList.push($(this).text());
                });
                $("#keywordsInputHidden").val(JSON.stringify(keywordsList));
            }

            // Add button click event
            $("#addButton").click(function() {
                let keyword = $("#keywordInput input").val().trim();
                if (keyword !== "") {
                    addKeyword(keyword);
                    $("#keywordInput input").val("");
                }
            });

            // Edit button click event
            $(document).on("click", ".keyword", function() {
                let $keywordCell = $(this);
                let currentKeyword = $keywordCell.text();
                let $inputField = $("<input>", {
                    "type": "text",
                    "class": "form-control",
                    "value": currentKeyword
                });


                if ($keywordCell.children('input').length === 0) {
                    $keywordCell.html($inputField);
                    $inputField.trigger('focus').select();
                }

                // Handle blur event (when user clicks outside the input)
                $inputField.blur(function() {
                    let newKeyword = $(this).val().trim();
                    if (newKeyword !== "") {
                        $keywordCell.text(newKeyword);
                        updateKeywordsInput();
                    } else {
                        $keywordCell.text(currentKeyword); // Revert to original keyword if new keyword is empty
                    }
                });

                // Handle Enter key press event
                $inputField.keypress(function(event) {
                    if (event.which === 13) {
                        $(this).blur(); // Trigger blur event when Enter is pressed
                    }
                });
            });

            // Add keyword when Enter is pressed in the add keyword input field
            $("#keywordInputBox").keypress(function(event) {
                if (event.which === 13) {
                    event.preventDefault();
                    addKeyword($(this).val().trim());
                    $(this).val("");
                }
            });

            // Delete button click event
            $(document).on("click", ".delete-btn", function() {
                if (confirm("Are you sure you want to delete this keyword?")) {
                    $(this).closest("tr").remove();
                    keywordCount--;
                    updateKeywordsInput();
                    // Update serial numbers after deletion
                    $("#keywordList tr").each(function(index) {
                        $(this).find("td:first").text(index + 1);
                    });
                }
            });
        });
    </script>

@endSection

@section('content')

    <!-- Content Header (Page header) -->
    @php
        $page_title = isset($asset) ?  __('heading.title_edit_stores').' <small>'.$asset['name'].'</small>':__('heading.title_create_stores');
    @endphp

    <!-- Main content -->
    <div class="content">
        <div class="row">

            <div class="col-md-12">
                <form class="form-horizontal" action="{{ route('post_create_product', ['productGroupId' => $productGroup->id]) }}" method="POST" enctype="multipart/form-data">
                    @csrf
                    <div class="card card-primary card-outline shadow">

                        <div class="card-header">
                            <h3 class="card-title">Details</h3>
                        </div>
                        <!-- /.card-header -->
                        <div class="card-body">
                            <div class="form-group row">
                                <label for="productIdInput" class="col-sm-2 control-label">Product Group</label>
                                <div id="productId" class="input-group col-sm-10">
                                    <h6>{{$productGroup->name}}</h6>
                                </div>
                            </div>
                            <div class="form-group row {{ $errors->has('name') ? 'has-error' : '' }} ">
                                <label class="col-sm-2 control-label">Name <span
                                            class="required">*</span></label>
                                <div class="col-sm-10">
                                    <input type="text" class="form-control" placeholder="Product Name (e.g. Skale Shampoo)"
                                           name="name" value="{{ $asset['name'] ?? old('name') }}">

                                    @if ($errors->has('name'))
                                        <small class="text-danger">{{ $errors->first('name') }}</small>
                                    @endif
                                </div>
                            </div>
                            <div class="form-group row">
                                <label class="col-sm-2 control-label">
                                    Status
                                </label>
                                <div class="col-sm-10">
                                    <small class="text-muted">Set Status</small>
                                    <div class="form-check">
                                        <input class="form-check-input" type="radio" name="status" id="active" value="active">
                                        <label class="form-check-label" for="active">
                                            Active
                                        </label>
                                    </div>
                                    <div class="form-check">
                                        <input class="form-check-input" type="radio" name="status" id="inactive" value="inactive">
                                        <label class="form-check-label" for="inactive">
                                            Inactive
                                        </label>
                                    </div>
                                    @if ($errors->has('status'))
                                        <small class="text-danger">{{ $errors->first('status') }}</small>
                                    @endif
                                </div>
                            </div>
                            <div class="form-group row {{ $errors->has('sku') ? 'has-error' : '' }} ">
                                <label class="col-sm-2 control-label">SKU</label>
                                <div class="col-sm-10">
                                    <input type="text" class="form-control" placeholder="SKU" name="sku" value="{{ old('sku') }}">
                                </div>
                            </div>
                            <div class="form-group row {{ $errors->has('sku_name') ? 'has-error' : '' }} ">
                                <label class="col-sm-2 control-label">SKU Name</label>
                                <div class="col-sm-10">
                                    <input type="text" class="form-control" placeholder="SKU Name" name="sku_name" value="{{ old('sku_name') }}">
                                </div>
                            </div>
                            <div class="form-group row">
                                <label for="keywordInput" class="col-sm-2 control-label">Keywords</label>
                                <div id="keywordInput" class="input-group mb-3 col-sm-10">
                                    <input id="keywordInputBox" type="text" class="form-control" placeholder="Add Keyword" aria-label="Enter tags" aria-describedby="addButton">
                                    <div class="input-group-append">
                                        <button class="btn btn-outline-secondary" type="button" id="addButton">Add</button>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group row">
                                <div class="col-sm-10 offset-sm-2">
                                    <table class="table">
                                        <thead>
                                        <tr>
                                            <th scope="col">#</th>
                                            <th scope="col">Keyword</th>
                                            <th scope="col">Actions</th>
                                        </tr>
                                        </thead>
                                        <tbody id="keywordList">
                                        <!-- Keywords will be appended here -->
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                        <input type="hidden" name="keywords" id="keywordsInputHidden" value="{{$product->keywords}}">
                        </div>
                        <!-- /.card-body -->


                        <div class="card-footer">
                            {{--<button class="btn btn-default">Reset</button>--}}
                            @if(isset($asset))
                                <button type="submit" class="btn btn-info float-right ml-1">Save</button>
                                {{-- note: do not simply change the name of button, it will post the data for reference--}}
                            @else
                                <button type="submit" class="btn btn-info float-right">Submit</button>
                            @endif
                        </div>
                </form>
            </div>
        </div>
        </div>
        <!-- /.row -->
    </section>
    <!-- /.content -->

@endsection