@extends('layouts.backend.app')
@section('content')
    <div class="main-content stock">
        <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">Sales List</h6>
                            <ol class="breadcrumb m-0">
                                <li class="breadcrumb-item"><a href="#">Home </a></li>
                                <li class="breadcrumb-item active" aria-current="page">Sales List</li>
                            </ol>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-md-12">

                    <div class="col-md-12 mobile-table-column stock-table">
                        <div class="card">
                            <div class="card-body">

                                @if (!empty(Auth::User()->role()->id) && Auth::User()->role()->id != '8')
                                    <div class="d-flex justify-content-end mb-3">
                                        <div class="btn btn-primary add_sales"> Assign +</div>
                                    </div>
                                @endif

                                <table id="dataList" class="display" style="width:100%">
                                    <thead>
                                        <tr>
                                            <th>S.No</th>
                                            <th>Date</th>
                                            <th>Sales person Name</th>
                                            <th>Vendor</th>
                                            <th>No of Product</th>
                                            <th>Action</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                    </tbody>
                                </table>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h1 class="modal-title fs-5" id="exampleModalLabel">Vendor mobile</h1>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="row product-row stock-add">
                        <div class="col-md-12">
                            <div class="card shadow-none">
                                <div class="card-body p-0">
                                    <form id="vendor_submit" class="vendor-sale row">
                                        @csrf

                                        <div class="col-md-6">
                                            <div class="mb-3 w-100">
                                                <label class="form-label d-block">Select Vendor</label>
                                                <select class="form-control form-select py-3 serviceSelect w-100"
                                                    id="vendor" name="vendor">
                                                    @foreach ($vendor as $v)
                                                        <option value="{{ $v->id }}">{{ $v->vendor_name }}</option>
                                                    @endforeach
                                                </select>
                                                <span class="text-danger vendor"></span>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="mb-3 w-100">
                                                <label class="form-label d-block">Select Sales Person</label>
                                                <select class="form-control form-select py-3 serviceSelect w-100"
                                                    id="sales_person" name="sales_person">
                                                    @foreach ($sales as $s)
                                                        <option value="{{ $s->id }}">{{ $s->name }}</option>
                                                    @endforeach
                                                </select>
                                                <span class="text-danger sales_person"></span>
                                            </div>
                                        </div>
                                        <input type="hidden" name="type" id="type">
                                        <input type="hidden" name="edit_id" id="edit_id">
                                        <div class="col-md-6">
                                            <div class="mb-3 w-100">
                                                 <label class="form-label d-block">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="date" name="date">
                                                        </div>
                                                
                                               
                                                <span class="text-danger date"></span>
                                            </div>
                                        </div>
                                        
                                        
                                          <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("#assign_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('assign_date').value = formattedDateTime;
                                                        });
                                                    </script>

                                        <div class="col-md-12">
                                            <div class="mb-3 selectdraf">


                                                <label for="exampleFormControlInput1"
                                                    class="form-label w-100 d-flex justify-content-between">Salescode
                                                    <span class="barcode_count">0</span> </label>
                                                <input type="text" class="form-control w-100 w-100" data-role="tagsinput"
                                                    id="barcode" placeholder="" name="barcode">
                                                <span class="text-danger barcode"></span>
                                                <small class="form-text w-100">Enter Salescode ( 5544220322057 )</small>
                                            </div>
                                        </div>
                                        <div class="col-md-12 mt-3">
                                            <button type="submit" class="btn btn-success">Submit</button>

                                        </div>

                                    </form>

                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        @endsection

        @section('scripts')
            <script type="text/javascript">
                $(document).ready(function() {
                    $(window).keydown(function(event) {
                        const key = event.originalEvent.key;
                        if (event.keyCode == 13) {
                            var count = $("#barcode").tagsinput('items').length;
                            $('.barcode_count').html(count + 1);
                        }
                    });
                });

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

                $(document).ready(function() {

                    var pathn = $('meta[name="base_url"]').attr("content") + '/salesperson-data';
                    var reporttables = $('#dataList').DataTable({
                        "order": [
                            [0, "desc"]
                        ],
                        "serverSide": true,
                        "stateSave": true,
                        'processing': true,
                        "pageLength": 20,
                        "lengthMenu": [
                            [20, 50, 75, 100, 125, 150, 175, 200, 225, 250, 275, 300, 325, 350, 375, 400, 420,
                                450, 475, 500
                            ],
                            [20, 50, 75, 100, 125, 150, 175, 200, 225, 250, 275, 300, 325, 350, 375, 400, 420,
                                450, 475, 500
                            ]
                        ],
                        oLanguage: {
                            sProcessing: '<div class="lds-css"><div style="width:100%;height:100%" class="lds-eclipse"><div></div><p>Please wait while we are processing your request.</p></div></div>'
                        },
                        "ajax": {
                            'type': 'GET',
                            'url': pathn,
                            "data": function(d) {
                                d.pagenme = '{{ basename(url()->current()) }}',
                                    d.lot_no = $("#lot_no").val(),
                                    d.no_pro = $("#no_pro").val(),
                                    d.sup_name = $("#sup_name").val(),
                                    d.pay_status = $("#pay_status").val()
                            }
                        },
                        searching: true,
                        "iDisplayLength": 20,
                        "columnDefs": [{
                                "targets": 0,
                                className: "text-center",
                                "render": function(data, type, row, meta) {
                                    return row.index;
                                }
                            },
                            {
                                "targets": 1,
                                orderable: true,
                                "render": function(data, type, row, meta) {
                                    return row.date;
                                }
                            },
                            {
                                "targets": 2,
                                orderable: true,
                                "render": function(data, type, row, meta) {
                                    return row.sales;
                                }
                            },
                            {
                                "targets": 3,
                                orderable: true,
                                "render": function(data, type, row, meta) {
                                    return row.vendor;
                                }
                            },

                            {
                                "targets": 4,
                                orderable: true,
                                "render": function(data, type, row, meta) {
                                    return row.product;
                                }
                            },

                            {
                                "targets": 5,
                                orderable: true,
                                className: "text-center",
                                "render": function(data, type, row, meta) {

                                    var tbl = '';

                                    // tbl +='<a href="'+row.viewurl+'" class="edit text-info btn btn-sm btn-info text-white">';
                                    // 	tbl +='<i class="fas fa-eye"></i>';
                                    // tbl +='</a>';

                                    tbl += '<div class="action bank d-flex justify-content-start">';

                                    tbl += '<a href="' + row.viewurl +
                                        '"class="edit text-info btn btn-sm btn-info text-white"><i class="fas fa-eye"></i></a>';

                                    tbl += '<a href="' + row.invoiceurl +
                                        '"  class="edit text-info btn btn-sm btn-success text-white ms-3"> <i class="fas fa-file-invoice"></i> </a>';

                                    return tbl;
                                }
                            }
                        ]
                    });
                });


                $(document).on("submit", "#vendor_submit", function(e) {

                    e.preventDefault();

                    $('.remove_err').html("");
                    var url = $('#url').val();
                    var form = $('#vendor_submit')[0];
                    var formData = new FormData(form);

                    var redirect = $('#redirect').val();
                    $('.btn-primary').attr('disabled', true);
                    $.ajax({
                        url: "{{ route('salesperson-submit') }}",
                        type: 'POST',
                        processData: false,
                        contentType: false,
                        data: formData,
                        success: function(data) {
                            $("#rcm").remove();
                            if (data.success == false) {
                                $('.btn-primary').attr('disabled', false);
                                $('<div id="rcm" class="text-danger">Invalid sales code: ' + data.msg +
                                    '</div>').insertAfter(".selectdraf");
                                //custom_noty("error", 'Invalid sales code '+data.msg);
                            } else {
                                $('.btn-primary').attr('disabled', false);
                                window.location.reload();
                            }

                        },
                        error: function(xhr) {
                            $('.btn-primary').attr('disabled', false);
                            $('.user_err').html('');

                            var i = 0;
                            $.each(xhr.responseJSON.errors, function(key, value) {

                                replaced_key = key.replace(".", "_");
                                value = value[0].replace(key, replaced_key);
                                $('.' + replaced_key).append('<div class="text-danger user_err">' +
                                    value + '</div');

                                i++;

                            });

                        }
                    });
                });


                //vendor add
                $(document).on("click", ".add_sales", function(e) {
                    $('.user_err').html('');
                    $('.modaltitle').html("Add");
                    $('.input').val("");
                    $('#type').val("add");
                    $('#exampleModal').modal('show');

                });

                function vldfn() {
                    $('#dataList').DataTable().ajax.reload();
                }
            </script>
        @endsection