@extends('layouts.backend.app')

@section('content')
    <div class="main-content shop">
        <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">Vendor</h6>
                            <ol class="breadcrumb m-0">
                                <li class="breadcrumb-item"><a href="#">Home </a></li>
                                <li class="breadcrumb-item active" aria-current="page">Vendor</li>
                            </ol>
                        </div>
                        <div class="col-md-4">
                            <div class="btn-container float-right">
                                <button class=" btn btn-primary border-radius-5 add_vendor"><span class="pe-2"><i
                                            class="bi bi-plus"></i></span> Add
                                    New</button>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
            <div class="row">
                <div class="col-md-12">
                    <div class="col-md-12 mobile-table-column mbp">
                        <div class="card">
                            <div class="card-body">
                                <table id="dataList" class="display" style="width:100%;">
                                    <thead>
                                        <tr>
                                            <th width="5%">S.no</th>
                                            <th width="10%">Vendor Id</th>
                                            <th width="10%">Vendor Name</th>
                                            <th width="10%">Email Id</th>
                                            <th width="10%">Mobile Number</th>
                                            <th width="20%">Company Name</th>
                                            <th width="10%">Order Quantity</th>
                                            <th width="10%">Action</th>
                                        </tr>
                                    </thead>
                                    <tbody>


                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <!-- Modal -->
    <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h1 class="modal-title fs-5" id="exampleModalLabel"><span class="modaltitle">Add</span> Vendor</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">
                                        @csrf
                                        <div class="row">
                                            <div class="col-md-6">
                                                <div class="mb-3">
                                                    <label for="inputNumber3" class="col-sm-6 col-form-label">Vendor Id
                                                    </label>
                                                    <div class="col-sm-12">
                                                        <input type="num" class="form-control input" name="vendor_id"
                                                            id="vendor_id" readonly value="">
                                                    </div>
                                                </div>
                                                <input type="hidden" name="type" id="type">
                                                <input type="hidden" name="edit_id" id="edit_id">
                                                <div class="mb-3">
                                                    <label for="inputNumber3" class="col-sm-6 col-form-label">Vendor Name
                                                    </label>
                                                    <div class="col-sm-12">
                                                        <input type="text" name="vendor_name" id="vendor_name"
                                                            class="form-control input">
                                                        <span class="text-danger vendor_name"></span>

                                                    </div>
                                                </div>
                                                <div class="mb-3">
                                                    <label for="inputText3" class="col-sm-6 col-form-label">GST</label>
                                                    <div class="col-sm-12">
                                                        <input type="text" class="form-control input" name="gst"
                                                            id="gst">
                                                        <span class="text-danger gst"></span>
                                                    </div>
                                                </div>
                                                <div class="mb-3">
                                                    <label for="inputText3" class="col-sm-6 col-form-label">PAN</label>
                                                    <div class="col-sm-12">
                                                        <input type="text" class="form-control input" id="pan"
                                                            name="pan">
                                                        <span class="text-danger pan"></span>
                                                    </div>
                                                </div>
                                            </div>


                                            <div class="col-md-6">
                                                <div class="mb-3">
                                                    <label for="inputText3" class="col-sm-6 col-form-label">Email
                                                        ID</label>
                                                    <div class="col-sm-12">
                                                        <input type="text" name="email_id" class="form-control input"
                                                            id="email_id">
                                                        <span class="text-danger email_id"></span>
                                                    </div>
                                                </div>
                                                <div class="mb-3">
                                                    <label for="inputText3" class="col-sm-6 col-form-label">Mobile
                                                        Number</label>
                                                    <div class="col-sm-12">
                                                        <input type="text" class="form-control input"
                                                            name="mobile_number" id="mobile_number"
                                                            onkeypress="return isNumber(event)">
                                                        <span class="text-danger mobile_number"></span>
                                                    </div>
                                                </div>
                                                <div class="mb-3">
                                                    <label for="inputText3" class="col-sm-6 col-form-label">Company
                                                        Name</label>
                                                    <div class="col-sm-12">
                                                        <input type="text" class="form-control input"
                                                            name="company_name" id="company_name">
                                                        <span class="text-danger company_name"></span>
                                                    </div>
                                                </div>

                                                <div class="mb-3">
                                                    <label for="inputText3"
                                                        class="col-sm-6 col-form-label">Pincode</label>
                                                    <div class="col-sm-12">
                                                        <input type="text" class="form-control input" id="pincode"
                                                            name="pincode">
                                                        <span class="text-danger pincode"></span>
                                                    </div>
                                                </div>

                                                <!--<div class="mb-3">
                                                       <label for="inputText3" class="col-sm-6 col-form-label">Password</label>
                                                       <div class="col-sm-12">
                                                          <input type="password" class="form-control input" name="password" id="password">
                                                          <span class="text-danger password"></span>
                                                       </div>
                                                    </div>-->
                                            </div>

                                            <div class="col-md-12">
                                                <div class="mb-3">
                                                    <label for="inputText3"
                                                        class="col-sm-6 col-form-label">Address</label>
                                                    <div class="col-sm-12">
                                                        <textarea class="form-control input" placeholder="Leave a comment here" name="address" style="height: 100px"
                                                            id="address"></textarea>
                                                        <span class="text-danger address"></span>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="mb-0">
                                                <label for="inputText3" class="col-sm-6 col-form-label "></label>
                                                <div class="col-sm-6">
                                                    <button type="submit" class="btn btn-primary me-3">Submit</button>
                                                </div>
                                            </div>

                                        </div>
                                        <div class="col-md-12">
                                            <div class="btn-container d-flex justify-content-center">
                                            </div>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- <div class="modal-footer">
                                  <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                                  <button type="button" class="btn btn-primary">Save changes</button>
                                  </div> -->
            </div>
        </div>
    </div>
    <!--Add form ends-->
    <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-body">
                    <div class="row">
                        <div class="col-12">
                            <div class="">
                                <div class="">
                                    <form class="mt-3">

                                        <div class="row">
                                            <div class="col-md-6">
                                                <div class="mb-3">
                                                    <label for="exampleFormControlInput1" class="form-label">Mobile
                                                        Name</label>
                                                    <input type="text" id="" class="form-control"
                                                        id="exampleFormControlInput1" placeholder="">
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <div class="mb-3">
                                                    <label for="exampleFormControlInput1" class="form-label">Modal
                                                        Name</label>
                                                    <input type="text" class="form-control"
                                                        id="exampleFormControlInput1" placeholder="">
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <div class="mb-3">
                                                    <label for="exampleFormControlInput1" class="form-label">Logo</label>
                                                    <input type="file" class="form-control"
                                                        id="exampleFormControlInput1" placeholder=>
                                                </div>
                                            </div>
                                            <div>
                                                <button type="button" class="btn btn-primary add-btn">
                                                    Submit
                                                </button>
                                                <button type="button" class="btn btn-secondary"
                                                    data-bs-dismiss="modal">Cancel</button>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                        <!-- end col -->
                    </div>
                </div>
            </div>
        </div>
    </div>


    <!-- Delete Modal HTML -->
    <div id="deleteModal" class="modal fade">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">Delete Record</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                </div>
                <div class="modal-body">
                    <p>Are you sure you want to delete these Records?</p>
                    <p class="text-warning"><small>This action cannot be undone.</small></p>
                </div>
                <input type="hidden" id="delete_id">
                <div class="modal-footer">
                    <input type="button" class="btn btn-default closebtn" data-dismiss="modal" value="Cancel">
                    <input type="button" class="btn btn-danger" onclick="deleterecord()" value="Delete">
                </div>
            </div>
        </div>
    </div>
@endsection


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

            var pathn = $('meta[name="base_url"]').attr("content") + '/vendor-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.vendor_id;
                        }
                    },
                    {
                        "targets": 2,
                        orderable: true,
                        "render": function(data, type, row, meta) {
                            return row.vendor_name;
                        }
                    },
                    {
                        "targets": 3,
                        orderable: true,
                        "render": function(data, type, row, meta) {
                            return row.email_id;
                        }
                    },
                    {
                        "targets": 4,
                        orderable: true,
                        "render": function(data, type, row, meta) {
                            return row.mobile_number;
                        }
                    },
                    {
                        "targets": 5,
                        orderable: true,
                        "render": function(data, type, row, meta) {
                            return row.company_name;
                        }
                    },

                    {
                        "targets": 6,
                        orderable: true,
                        "render": function(data, type, row, meta) {
                            return row.order_quantity;
                        }
                    },
                    {
                        "targets": 7,
                        orderable: true,
                        className: "text-center",
                        "render": function(data, type, row, meta) {

                            var tbl = '';
                            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">';
                            tbl += '<i class="fas fa-eye"></i>';
                            tbl += '</a>';

                            tbl +=
                                '<a class="edit mx-2 text-info btn btn-sm btn-success text-white vendor_edit" data-id=' +
                                row.id + '>';
                            tbl += '<i class="fas fa-edit"></i>';
                            tbl += '</a>';

                            tbl += '<a href="#deleteModal" data-toggle="modal" data-id="' + row.id +
                                '" class="edit text-info btn btn-sm  btn-danger text-white me-2 removrd">';
                            tbl += '<i class="fas fa-trash"></i>';
                            tbl += '</a>';

                            tbl += '</div>';
                            return tbl;
                        }
                    }
                ]
            });

        });



        $(document).on('click', '.searchdata', function() {
            $('#dataList').DataTable().ajax.reload();
        });

        $(document).on('click', '.reset_searchdata', function() {
            $('#memberdata').trigger("reset");
            $('#lot_no').val('');
            $('#no_pro').val('');
            $('#sup_name').val('');
            $('#pay_status').val('');
            $('#dataList').DataTable().ajax.reload();
            $('.fltr-btn').trigger('click');
        });
    </script>

    <script type="text/javascript">
        //Remove Record
        $(document).on("click", ".removrd", function() {
            var rid = $(this).data("id");
            $('#delete_id').val(rid);
        });

        //Remove Record
        function deleterecord() {
            var rid = $('#delete_id').val();
            var pathn = $('meta[name="base_url"]').attr("content") + '/vendor-remove';
            var token = $('meta[name="csrf-token"]').attr("content");
            $.ajax({
                url: pathn,
                type: "POST",
                data: {
                    _token: token,
                    user_id: rid
                },
                success: function(data) {

                    if (data.status == true) {
                        custom_noty("success", data.msg);
                        $(".closebtn").click();
                        $('#dataList').DataTable().ajax.reload();
                    } else {
                        custom_noty("error", data.msg);
                    }
                }
            });
        }
    </script>


    <script type="text/javascript">
        $(".fltrbtn").click(function() {

            if ($('.fltr-main').is(':visible')) {
                $(".fltr-main").hide(1000);
            } else {
                $(".fltr-main").show(1000);
            }
        })




        //Add


        function isNumber(evt) {
            evt = (evt) ? evt : window.event;
            var charCode = (evt.which) ? evt.which : evt.keyCode;
            if (charCode > 31 && (charCode < 48 || charCode > 57)) {
                return false;
            }
            return true;
        }





        $(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('vendor-submit') }}",
                type: 'POST',
                processData: false,
                contentType: false,
                data: formData,
                success: function(data) {
                    if (data.success == true) {
                        $('.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) {

                        //console.log(key);

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


            })
        });


        //vendor add
        $(document).on("click", ".add_vendor", function(e) {
            $('.user_err').html('');
            $('.modaltitle').html("Add");
            $('.input').val("");
            $('#type').val("add");
            $.ajax({
                url: "{{ route('vendor-add') }}",
                type: 'GET',

                success: function(data) {
                    if (data.success == true) {
                        $('#exampleModal').modal('show');
                        $('#vendor_id').val(data.vennumber);
                    }
                }
            })
        });

        //vendor edit
        $(document).on("click", ".vendor_edit", function() {
            var id = $(this).data('id');
            $('.user_err').html('');
            $('.modaltitle').html("Edit");

            $.ajax({
                url: "{{ route('vendor-edit', '') }}/" + id,
                type: 'GET',

                success: function(data) {
                    if (data.success == true) {
                        $('#exampleModal').modal('show');
                        $('#type').val("edit");
                        $('#edit_id').val(data.vendor.id);
                        $('#vendor_id').val(data.vendor.vendor_id);
                        $('#vendor_name').val(data.vendor.vendor_name);
                        $('#gst').val(data.vendor.gst);
                        $('#pan').val(data.vendor.pan);
                        $('#pincode').val(data.vendor.pincode);
                        $('#email_id').val(data.vendor.email_id);
                        $('#mobile_number').val(data.vendor.mobile_number);
                        $('#company_name').val(data.vendor.company_name);
                        // $('#password').val(data.vendor.password);
                        $('#address').val(data.vendor.address);
                    }
                }
            })
        });


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