@extends('layouts.backend.app')

@section('content')
    <!-- Start right Content here -->
    <div class="main-content">
        <div class="page-content">
            <div class="container-fluid">

                <div class="page-title-box">
                    <div class="row align-items-center">
                        <div class="col-md-8">
                            <h6 class="page-title">Start Audit</h6>
                            <ol class="breadcrumb m-0">
                                <li class="breadcrumb-item"><a href="{{ dashboardurl() }}">Home</a></li>
                                <li class="breadcrumb-item active" aria-current="page">Start Audit</li>
                            </ol>
                        </div>
                        <div class="col-md-4 text-end">
                            <div class="btn-container float-right">
                                <a href="{{ route('product-audit') }}" class="btn btn-primary">
                                    <span class="pe-1 color-primary"><i class="ti-angle-left"></i></span> Back</a>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- end row -->

                <div class="row">
                    <div class="col-md-12">
                        <div class="col-md-12 mobile-table-column stock-table">
                            <div class="card">
                                <div class="row p-3 justify-content-center">
                                    <div class="col-md-6 ">
                                        <div class="">
                                            <div class="">

                                                <form class="form-horizontal" action="{{ route('start-audit-save') }}"
                                                    method="POST" id="dtad" name="dtad"
                                                    enctype="multipart/form-data">
                                                    @csrf


                                                    <!-- Page Preloder -->
                                                    <div id="preloder">
                                                        <div class="loader"></div>
                                                    </div>


                                                    <div class="mb-3">
                                                        <label class="form-label">Audit date</label>
                                                        <div class="input-group" id="datepicker1">
                                                            <span class="input-group-text"><i
                                                                    class="mdi mdi-calendar"></i></span>

                                                            <input type="text"
                                                                class="form-control datepicker flatpickr-input"
                                                                placeholder="" data-date-format="d M, Y G:i K"
                                                                data-enable-time="true" id="audit_date" name="audit_date">

                                                        </div>
                                                    </div>


                                                    <!-- Include Flatpickr library -->
                                                    <link rel="stylesheet"
                                                        href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
                                                    <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>

                                                    <script>
                                                        // Wait for the DOM to be fully loaded
                                                        document.addEventListener("DOMContentLoaded", function() {
                                                            // Initialize Flatpickr
                                                            flatpickr("#audit_date", {
                                                                minDate: "today",
                                                                dateFormat: "d M, Y G:i K",
                                                                enableTime: true
                                                            });
                                                        });
                                                    </script>


                                                    <script>
                                                        document.addEventListener("DOMContentLoaded", function() {
                                                            // Get current date and time
                                                            var now = new Date();
                                                            var formattedDateTime = now.toLocaleString('en-US', {
                                                                day: '2-digit',
                                                                month: 'short',
                                                                year: 'numeric',
                                                                hour: '2-digit',
                                                                minute: '2-digit',
                                                                hour12: true
                                                            });

                                                            // Set current date and time as the default value for the datepicker input
                                                            document.getElementById('audit_date').value = formattedDateTime;
                                                        });
                                                    </script>


                                                    <div class="mb-3 selectdraf">

                                                        <label for="exampleFormControlInput1"
                                                            class="form-label w-100 d-flex justify-content-between">Add
                                                            Barcode <span class="barcode_count">0</span></label>

                                                        <textarea class="form-control w-100 w-100 tags" id="barcodescd" name="barcodescd" rows="15" placeholder=""></textarea>

                                                        <small class="form-text w-100">Enter Temporary Code ( #AM220322057
                                                            )</small>
                                                    </div>

                                                    <button class="btn btn-success sumbtn" type="button"> Submit </button>

                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- end row -->

            </div>
        </div>
    </div>
    <!-- end main content-->
@endsection

@section('scripts')
    <script>
        $(document).ready(function() {

            $(".bootstrap-tagsinput").css({
                'height': '200px'
            })
           
            $(window).keydown(function(event) {
                const key = event.originalEvent.key;
                if (event.keyCode == 13) {


                    var count = $("#barcodescd").tagsinput('items').length;
                    $('.barcode_count').html(count + 1);

                }
            });
        });

        $(document).on("click", ".label-info", function() {
            var count = $("#barcodescd").tagsinput('items').length;
            $('.barcode_count').html(count);
        })

        //Add
        $(document).on("click", ".sumbtn", function() {

            var err = true;

            var input = $("#audit_date");
            var urlvl = $("#audit_date").val();
            if (urlvl == '') {
                input.removeClass("valid").addClass("invalid");
                $("#nmb").remove();
                $('<div id="nmb" class="text-danger">Audit date is required</div>').insertAfter("#datepicker1");
                $("#audit_date").focus();
                err = false;
            } else {
                input.removeClass("invalid").addClass("valid");
                $("#nmb").remove();
            }

            var input = $("#temcode");
            var urlvl = $("#temcode").val();
            if (urlvl == '') {
                input.removeClass("valid").addClass("invalid");
                $("#ltdt").remove();
                $('<div id="ltdt" class="text-danger">Temporary code is required</div>').insertAfter("#temcode");
                $("#temcode").focus();
                err = false;
            } else {
                input.removeClass("invalid").addClass("valid");
                $("#ltdt").remove();
            }

            if (err == true) {

                $(".sumbtn").attr("disabled", true);
                document.forms["dtad"].submit();
                $("#preloder").fadeIn();
                return true;
            }
        });

        $("#audit_date").on("change", function(event) {
            var input = $("#audit_date");
            var urlvl = $("#audit_date").val();
            if (urlvl == '') {
                input.removeClass("valid").addClass("invalid");
                $("#nmb").remove();
                $('<div id="nmb" class="text-danger">Audit date is required</div>').insertAfter("#audit_date");
                $("#audit_date").focus();
            } else {
                input.removeClass("invalid").addClass("valid");
                $("#nmb").remove();
            }
        });

        $("#temcode").on("change", function(event) {
            var input = $("#temcode");
            var urlvl = $("#temcode").val();
            if (urlvl == '') {
                input.removeClass("valid").addClass("invalid");
                $("#ltdt").remove();
                $('<div id="ltdt" class="text-danger">Temporary code is required</div>').insertAfter("#temcode");
                $("#temcode").focus();
            } else {
                input.removeClass("invalid").addClass("valid");
                $("#ltdt").remove();
            }
        });
    </script>
@endsection