@extends('layouts.app')
@section('title', 'Vendor')
@section('content')
<div class="container-fluid mt-4">
    <div class="row">
        <div class="col-lg-12">
            <div class="card">
                <div class="card-header" >
                    <h5 class="mt-0 text-left"> Vendors </h5>
                </div>
                <div class="row mt-1">
                    <div class="col-md-6"></div>
                    <div class="col-md-6" align="right">
                        <i class="fa fa-search fontcolor"></i>
                        <input type="text" id="search" name="search" placeholder="Search..." autocomplete="off">
                        @if(auth()->user()->user_type_id == 1 )
                            <button class="btn btn-success" id="add_vendors" data-bs-toggle="modal" data-bs-target="#add_vendor_modal"><span><img class="menuicon" src="{{asset('app-assets/images/orgicons/add.svg')}}"></span>&nbsp;<span class="add_vendor">Add New Vendor<span></button>
                        @endif
                        <a type="button" class="btn active_icon_view" id="vendor_list"><img class="menuicon" src="{{asset('app-assets/images/orgicons/list.svg')}}"></a>
                        <a type="button" class="btn  inactive_icon_view" id="vendor_grid" style="margin-right:10px;"><img class="menuicon" src="{{asset('app-assets/images/orgicons/grid.svg')}}"></a>
                    </div>
                </div>
               <div class="card-body">
                    <section class="card mt-2" id="vendor_list_view" style="border:none !important">
                        <div class="row table-responsive">
                            <table class="table mb-0 org_table" id="vendor_list_table">
                                <tbody>
                                                                   </tbody>
                            </table>
                        </div>
                    </section>
                    <section class="card mt-2" id="vendor_grid_view" style="display:none;margin-left:40px;border:none !important">
                        @foreach ($vendors->chunk(4) as $chunk)
                        <div class="row show_grid">
                            @foreach($chunk as $ven)
                            <div class="card grid pt-1" style="width: 19rem;word-wrap: normal;">
                               <div class="align-items-center" >
                                    @if(isset($ven->vender_logo))
                                        <img class="card-imdg-top gridd_img rounded-circle img-responsive" src="{{asset('vendorlogos/'.$ven->vender_logo)}}" height="75" width="75" style="padding: 3px;border: 2px solid #707070; ">
                                    @else
                                        <img src="{{asset('app-assets/images/user-1.png')}}" class="card-imdg-top gridd_img  rounded-circle img-responsive" alt="" height="75" width="75" style="padding: 3px;border: 2px solid #707070; ">
                                    @endif
                                </div>
                                <div class="card-body">
                                    <h5 class="card-title">{{$ven->vendor_name}}</h5></br>
                                    <div class="row g_icon" style="min-height: 39%!important;">
                                        <div class="col-md-6">
                                            <img src="{{asset('app-assets/images/orgicons/phone.svg')}}" width="10px" height="10px">&nbsp;{{$ven->contact_no}}
                                        </div>
                                        <div class="col-md-6">
                                            <div class="row">
                                                <div class="col-md-2">
                                                    <img src="{{asset('app-assets/images/orgicons/email.svg')}}" width="12px" height="12px">
                                                </div>
                                                <div class="col-md-9">
                                                    <p style="word-wrap: break-word;">{{$ven->email_id}}</p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row mt-3">
                                        <div class="col-md-3"></div>
                                        <div class="col-md-6">
                                            <a class="btn viewbtn"  href="{{ url('admin/organization/vendor/'.$vendor->id) }}">
                                                <span class="view"><i class="fa-solid fa-eye"></i> &nbsp;View<span>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            @endforeach
                        </div>
                        @endforeach
                    </section>
                    <div style="float: right;">
                    </div>
                    <div class="modal fade" id="add_vendor_modal" tabindex="-1" aria-labelledby="add_vendor_modalLabel" aria-hidden="true">
                        <div class="modal-dialog modal-xl">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h6 class="modal-title">Add New Vendor</h6>
                                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                </div>
                                <div class="modal-body">
                                    <form method="POST" role="form" name="add_vendor_form" id="add_vendor_form" enctype="multipart/form-data">
                                    @csrf
                                        <div class="row">
                                            <div class="col-md-5">
                                                <div class="form-group row">
                                                    <label class="col-sm-4 col-form-label col-form-label-sm"><strong>Vendor Name<span class="text-danger">*</span></strong></label>
                                                    <div class="col-sm-8">
                                                        <input type="text" class="form-control" id="vendor_name" name="vendor_name" placeholder="Enter Vendor Name" required data-parsley-trigger="keyup" data-parsley-pattern="^[A-Za-z ][A-Za-z_ ]*$">
                                                    </div>
                                                </div>
                                                <div class="form-group row mt-3">
                                                    <label class="col-sm-4 col-form-label"><strong>Website</strong></label>
                                                    <div class="col-sm-8">
                                                        <input type="text" class="form-control" id="website" name="website" placeholder="Enter Website">
                                                    </div>
                                                </div>
                                                <div class="form-group row mt-3">
                                                    <label class="col-sm-4 col-form-label col-form-label-sm"><strong>Contact Name<span class="text-danger">*</span></strong></label>
                                                    <div class="col-sm-8">
                                                        <input type="text" class="form-control" id="contact_name" name="contact_name" placeholder="Enter Contact Name" required data-parsley-trigger="keyup" data-parsley-pattern="^[A-Za-z ][A-Za-z_ ]*$">
                                                    </div>
                                                </div>
                                                <div class="form-group row mt-3">
                                                    <label class="col-sm-4 col-form-label col-form-label-sm"><strong>Contact Number<span class="text-danger">*</span></strong></label>
                                                    <div class="col-sm-8">
                                                        <input type="text" class="form-control" id="contact_no" name="contact_no" placeholder="Enter Contact Number" required  data-parsley-type="number" data-parsley-minlength="10" data-parsley-maxlength="14" data-parsley-trigger="change">
                                                    </div>
                                                </div>
                                                <div class="form-group row mt-3">
                                                    <label class="col-sm-4 col-form-label"><strong>Contact Email<span class="text-danger">*</span></strong></label>
                                                    <div class="col-sm-8">
                                                        <input type="email" class="form-control" id="contact_email" name="contact_email" placeholder="Enter Contact Email" required>
                                                    </div>
                                                </div>
                                                <div class="form-group row mt-3">
                                                    <label class="col-sm-4 col-form-label"><strong>Is Active ?</strong></label>
                                                    <div class="col-sm-8 mt-2">
                                                        <input type="checkbox" id="is_active" name="is_active" value="1" checked>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-md-5">
                                                <div class="form-group row">
                                                    <label class="col-sm-4 col-form-label"><strong>Address Line 1<span class="text-danger">*</span></strong></label>
                                                    <div class="col-sm-8">
                                                        <input type="text" class="form-control" id="address_line1" name="address_line1" placeholder="Enter Address 1" required>
                                                    </div>
                                                </div>
                                                <div class="form-group row mt-3">
                                                    <label class="col-sm-4 col-form-label"><strong>Address Line 2</strong></label>
                                                    <div class="col-sm-8">
                                                        <input type="text" class="form-control" id="address_line2" name="address_line2" placeholder="Enter Address 2">
                                                    </div>
                                                </div>
                                                <div class="form-group row mt-3">
                                                    <label class="col-sm-4 col-form-label"><strong>State<span class="text-danger">*</span></strong></label>
                                                    <div class="col-sm-8">
                                                        <select class="form-select form-control" name="state" id="state" required>
                                                            <option value="" selected disabled>Select State</option>
                                                            @foreach($states as $state)
                                                            <option value="{{$state->id}}">{{$state->short_code}}</option>
                                                            @endforeach
                                                        </select>
                                                    </div>
                                                </div>
                                                <div class="form-group row mt-3">
                                                    <label class="col-sm-4 col-form-label"><strong>City<span class="text-danger">*</span></strong></label>
                                                    <div class="col-sm-8">
                                                        <input type="text" class="form-control" id="city" name="city" placeholder="Enter City" required data-parsley-trigger="keyup" data-parsley-pattern="^[A-Za-z ][A-Za-z_ ]*$">
                                                    </div>
                                                </div>

                                                <div class="form-group row mt-3">
                                                    <label class="col-sm-4 col-form-label"><strong>Zip<span class="text-danger">*</span></strong></label>
                                                    <div class="col-sm-8">
                                                        <input type="text" class="form-control" id="zip" name="zip" placeholder="Enter zip" required data-parsley-type="integer" data-parsley-trigger="keyup">
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-md-2">
                                                <input type="file" name="logo" id="logo" class="dropify" data-height="250" data-parsley-trigger="keyup" accept=".jpg,.png,.svg,.PNG" data-parsley-fileextension='jpg,png,svg,jpeg,PNG' data-parsley-errors-container="#startTimeErrorContainer" data-parsley-trigger="change">
                                                <div id="startTimeErrorContainer"></div>
                                            </div>
                                        </div>
                                        <div class="row mt-3">
                                            <div class="col-md-4"></div>
                                            <div class="col-md-5">
                                                <button type="button" class="btn btn-secondary" id="close_org" data-bs-dismiss="modal">Cancel</button>
                                                <button type="button" class="btn btn-success" id="submit_org"  onclick="addvendor()">Save Vendor</button>
                                            </div>
                                            <div class="col-md-3"></div>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
$(document).ready(function() {
    localStorage.removeItem('lastTab');
    window.ParsleyValidator
        .addValidator('fileextension', function (value, requirement) {
           var tagslistarr = requirement.split(',');
            var fileExtension = value.split('.').pop();
                        var arr=[];
                        $.each(tagslistarr,function(i,val){
                         arr.push(val);
                        });
            if(jQuery.inArray(fileExtension, arr)!='-1') {
              return true;
            } else {
              return false;
            }
        }, 32)
        .addMessage('en', 'fileextension', 'The extension doesn\'t match the required');

    $("form").parsley();
});

    $(document).ready(function () {
        $('.dropify').dropify({
            messages: {
                'default': 'Upload Logo<br/>Or</br>Drag it Here',
            }
        });

        $('#vendor_grid').on('click', function () {
            $("#vendor_list").removeClass("active_icon_view");
            $("#vendor_list").addClass("inactive_icon_view");
            $("#vendor_grid").removeClass("inactive_icon_view");
            $("#vendor_grid").addClass("active_icon_view");
            $('#vendor_list_view').hide();
            $('#vendor_grid_view').show();
        })

        $('#vendor_list').on('click', function () {
            $("#vendor_grid").removeClass("active_icon_view");
            $("#vendor_grid").addClass("inactive_icon_view");
            $("#vendor_list").removeClass("inactive_icon_view");
            $("#vendor_list").addClass("active_icon_view");
            $('#vendor_list_view').show();
            $('#vendor_grid_view').hide();
        })
    });

    function addvendor() {
        if ($("#add_vendor_form").parsley()) {
            if ($("#add_vendor_form").parsley().validate()) {
                event.preventDefault();
                if ($("#add_vendor_form").parsley().isValid()) {
                    $.ajax({
                        type: "POST",
                        cache:false,
                        async: false,
                        url: "{{ route('vendor_add') }}",
                        data: new FormData($("#add_vendor_form")[0]),
                        processData: false,
                        contentType: false,
                        success: function(response) {
                            new PNotify({
                                title: 'Success',
                                text:  response.msg,
                                type: 'success'
                            });
                            // localStorage.setItem('lastTab', "#docs");
                            setTimeout(function(){  location.reload(); }, 2000);
                        },
                        error:function(response) {
                            var err = "";
                            $.each(response.responseJSON.errors,function(field_name,error){
                                err = err +'<br>' + error;
                            });
                            new PNotify({
                                title: 'Error',
                                text:err,
                                type: 'error',
                                delay: 1000
                            });
                        }
                    });
                }
            }
        }
    }

    $('#search').on('keyup',function(){
        $value=$(this).val();
        $.ajax({
            type : 'get',
            url : "{{route('vendor_search')}}",
            data:{'search':$value},
            success:function(data){
                $("#vendor_list_table tbody").html(data.data1);
                $("#vendor_grid_view").html(data.data2);
            }
        });
    })

</script>
@endsection