@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 src="{{ mix('js/admin/admin-maint.js') }}"></script>

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

            // Add existing keywords from backend
            @foreach(json_decode($product->keywords, true) as $keyword)
            addKeyword("{{ $keyword }}");
            @endforeach

            @if ($product->status === "active")
            $("#active").prop("checked", true);
            @elseif($product->status === "inactive")
            $("#inactive").prop("checked", true);
            @endif

            // Function to add keyword to the table
            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($store) ?  __('heading.title_edit_stores').' <small>'.$store['name'].'</small>':__('heading.title_create_stores');
        $store = $store ?? null;
    @endphp

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

            <div class="col-md-12">
                <form class="form-horizontal" action="{{route('admin.update_product', ['id' => $product->id])}}" method="POST" enctype="multipart/form-data">
                    @csrf
                    @method("PUT")
                    <div class="card card-primary card-outline shadow">
                        <div class="card-header p-0 border-bottom-0">
                        </div>
                        <!-- /.card-header -->
                        <div class="card-body">
                            <div class="tab-content">
                                @if (session('alert-success'))
                                    <div class="alert alert-success" role="alert">
                                        Product updated successfully. <a href="{{route('admin.list_products', ['slug' => $product->product_group_slug])}}">Back to product list</a>
                                    </div>
                                @endif
                                <div class="tab-pane fade show active py-1" id="nav-tab-0" role="tabpanel">
                                    <!-- text input -->
                                    <div class="form-group row">
                                        <label for="productIdInput" class="col-sm-2 control-label">ID</label>
                                        <div id="productId" class="input-group col-sm-10">
                                            <h6>{{$product->id}}</h6>
                                        </div>
                                    </div>
                                    <div class="form-group row">
                                        <label for="productIdInput" class="col-sm-2 control-label">Product SN</label>
                                        <div id="productId" class="input-group col-sm-10">
                                            <h6>{{$product->product_sn}}</h6>
                                        </div>
                                    </div>
                                    <div class="form-group row">
                                        <label for="productIdInput" class="col-sm-2 control-label">Retail Partner</label>
                                        <div id="productId" class="input-group col-sm-10">
                                            <h6>{{$product->retail_partner}}</h6>
                                        </div>
                                    </div>
                                    <div class="form-group row">
                                        <label for="productIdInput" class="col-sm-2 control-label">Product Group Slug</label>
                                        <div id="productId" class="input-group col-sm-10">
                                            <h6>{{$product->product_group_slug}}</h6>
                                        </div>
                                    </div>
                                    <div class="form-group row">
                                        <label for="productIdInput" class="col-sm-2 control-label">Created</label>
                                        <div id="productId" class="input-group col-sm-10">
                                            <h6>{{$product->created_at->format('j F, Y g:i:s A T')}}</h6>
                                        </div>
                                    </div>
                                    <div class="form-group row">
                                        <label for="productIdInput" class="col-sm-2 control-label">Last Updated</label>
                                        <div id="productId" class="input-group col-sm-10">
                                            <h6>{{$product->updated_at->format('j F, Y g:i:s A T')}}</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 id="name" type="text" class="form-control"
                                                   name="name" value="{{ $product->name }}">

                                            @if ($errors->has('foo'))
                                                <small class="text-danger">{{ $errors->first('foo') }}</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>
                                        </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>

                        </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>
                    </div>


                </form>
            </div>

        </div>
        <!-- /.row -->
    </section>
    <!-- /.content -->

@endsection