@include('components/uheader')
@include('components/usidebar')
<!--  Begin CONTENT AREA  -->
<style>
.select2-selection__rendered {
    display: none;
}
</style>
<div id="content" class="main-content">
    <div class="topbar_content mt-3">
        <h2>EOW Suggestion</h2>
        <div class="viewAll mr-4">
            <a href="/employee_dashboard" class="viewAllBtn">
                <button class="btn btn-danger mr-2">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-left"><line x1="19" y1="12" x2="5" y2="12"></line><polyline points="12 19 5 12 12 5"></polyline>
                    </svg> Back
                </button>
            </a>
        </div>
    </div>
    <div class="layout-px-spacing layout-top-spacing">
        <!-- Start Main Profile -->
        <div class="modal-footer">
        </div>
        <div class="row">
            <div class="tab-content">
                <div class="tab-pane active" id="tab-7">
                    <div class="row">
                        <div class="col-xl-12 col-lg-12 col-md-12 layout-spacing">
                            <form id="eow-form" class="section eow" action="/suggestion" method="post"
                                enctype="multipart/form-data">
                                {{csrf_field()}}
                                <div class="eowDetails table-responsive">
                                    <table class="col-xl-12 col-lg-12 col-md-12" id="dynamicAddRemove">
                                        <tr>
                                            <td class="col-xl-4 col-lg-4 col-md-6 employeeName">
                                                <select class="form-control basic" name="name[]">
                                                    <option>Select Employee Name</option>
                                                    @foreach($data as $u)
                                                    <option value="{{$u->id}}">{{$u->first_name}}
                                                        {{$u->last_name}} ({{$u->id}})</option>
                                                    @endforeach
                                                </select>
                                                <span class="text-danger">
                                                </span>
                                            </td>
                                            <td>
                                            <div class=" justify-content-center choose-file-custom-btn d-flex align-items-center">
                                                <label class="btn btn-primary"> Choose File
                                                    <input class="form-control" type="file" accept="image/*" id="formFileMultiple" multiple  name="document[0][]">
                                                </label>
                                                <div class="fileName d-block pl-3">No File Chosen</div>
                                                <span class="text-danger"></span>
                                            </div>
                                            </td>
                                            <td class="col-xl-4 col-lg-4 col-md-6 commentss">
                                                <textarea rows="1" cols="20" name="comment[0]" class="form-control row" placeholder="Comment"></textarea>
                                                <span class="text-danger">
                                                </span>
                                            </td>
                                            <td>
                                                <button type="button" id="add-btn" name="add" class="btn btn-primary row">+</button>
                                            </td>
                                        </tr>
                                    </table>
                                </div>
                                <div class="row">
                                    <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12 eowApply">
                                        <div class="mt-4">
                                            <button class="btn pmd-ripple-effect btn-success pmd-btn-raised" type="submit" id="submit_btn">Submit</button>
                                            <button class="btn pmd-ripple-effect btn-primary pmd-btn-raised" onclick="location.reload();" id="form-reset" type="reset">Reset</button>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="topbar_content mt-3">
            <h2>Suggestion List</h2>
        </div>
        <div class="modal-footer mt-3"></div>
        <div class="card">
            <div class="card-body p-0">
                <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
                    <div class="row">
                        <div class="tab-pane active p-0" id="tab-7">
                            <div class="widget-content widget-content-area br-6">
                               <table id="zero-config" class="table dt-table-hover table-striped" style="width:100%">
                                    <thead>
                                        <tr>
                                            <th>Sr No</th>
                                            <th>Employee Id</th>
                                            <th>Employee Name</th>
                                            <th>Comments</th>
                                            <th>Images</th>
                                            <th>Action</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @php $i = 0; @endphp
                                            @foreach($image as $m)
                                                @if(isset($m->suggestion->id))
                                                    <tr>
                                                        @php $i = $i +1; @endphp
                                                        <td>{{$i}}</td>
                                                        <td>{{$m->suggestion->id}}</td>
                                                        <td>{{$m->suggestion->first_name}} {{$m->suggestion->last_name}}
                                                        </td>
                                                        <td class="reason"> {{ $m->comment }} </td>
                                                        <td>
                                                            @php $datas = date('d-m-Y',strtotime($m->created_at)); @endphp
                                                            @foreach(explode('/', $m->image) as $image)
                                                            @php
                                                            if($m->image == ''){
                                                            $imgs = 0;
                                                            }else{
                                                            $img = explode('/', $m->image);
                                                            $imgs = count($img);
                                                            }
                                                            @endphp
                                                            @endforeach
                                                            <span class="text-center">{{$imgs}} Files Uploaded</span>
                                                        </td>
                                                        <td>
                                                            <div class="leave-action">
                                                                <a href="javascript:void(0);" class="delete"
                                                                    data-value="{{$m->id}}" data-toggle="modal"
                                                                    data-bs-placement="top" data-bs-original-title="Delete"
                                                                    data-target="#delete">
                                                                    <img src="{{asset('design/img/delete.svg')}}" />
                                                                </a>
                                                            </div>
                                                        </td>
                                                    </tr>
                                                @endif
                                            @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- End Main Profile -->
    </div>
    <div id="edit" style="display: none;">
    </div>
    <div class="modal fade" id="delete" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle"
        aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <center>
                    <div class="modal-header" style="border-bottom: 1px dashed #e0e6ed;">
                        <div class="media-body">
                            <h5><b>Are You Sure You Want To Delete This Suggestion ?</b></h5>
                        </div>
                    </div>
                </center>
                <div class="modal-body">
                    <form class="form-group" method="post" action="/delete_suggestion">
                        {{@csrf_field()}}
                        <input type="hidden" name="id" class="delete_id">
                        <div class="row float-right">
                            <div class="col-6">
                                <input type="submit" value="Delete" class="btn btn-success">
                            </div>
                            <div class="col-6">
                                <input type="reset" data-dismiss="modal" value="Cancel" class="btn btn-primary">
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    @if(session('done'))
    <script type="text/javascript">
    swal.fire({
        title: 'Suggestion Added Successfully!',
        type: 'success',
        padding: '2em'
    })
    </script>
    @elseif(session('edit'))
    <script type="text/javascript">
    swal.fire({
        title: 'Suggestion Edited Successfully!',
        type: 'success',
        padding: '2em'
    })
    </script>
    @elseif(session('delete'))
    <script type="text/javascript">
    swal.fire({
        title: 'Suggestion Deleted Successfully!',
        type: 'success',
        padding: '2em'
    })
    </script>
    @elseif(session('error'))
    <script type="text/javascript">
    swal.fire({
        title: 'Something went Wrong!',
        type: 'error',
        padding: '2em'
    })
    </script>
    @endif
    @include('components/ufooter')
    <script>
    $('.delete').click(function() {
        var id = $(this).data('value');
        $('.delete_id').val(id);
    });
    $(document).ready(function() {
        var i = 0;
        $("#add-btn").click(function() {
            ++i;
            $("#dynamicAddRemove").append(
                '<tr><td class="col-xl-4 employeeName"><select class="form-control basic" name=name[' + i +']><option>Select Employee Name </option> @foreach($data as $u)<option value="{{$u->id}}">{{$u->first_name}}{{$u->last_name}} ({{$u->id}})</option>@endforeach</select><span class="text-danger"></span></td><td><div class=" justify-content-center choose-file-custom-btn d-flex align-items-center"><label class="btn btn-primary"> Choose File<input class="form-control" type="file" id="formFileMultiple" accept="image/*" data-id="f'+i+'" multiple name="document[' + i + '][]"></label><div id="f'+i+'" class="fileName d-block pl-3">No File Chosen</div><span class"text-danger"></span></div></td><td class="col-xl-4 commentss"><textarea rows="1" cols="20" name="comment[' + i + ']" class="form-control row" placeholder="Comment"></textarea><span class="text-danger"></span></td><td><button type="button"  class="btn btn-danger row remove-tr">-</button></td></tr>'
            
                );
            $(".basic").select2({
                placeholder: "Select Employee Name",
            });
        });

        $(".basic").select2({
            placeholder: "Select Employee Name",
        });

        $(document).on('click', '.remove-tr', function() {
            $(this).parents('tr').remove();
        });

        $("#submit_btn").on('click', function(event) {
            $('.employeeName').each(function() {
                var option = $(this).children().val();
                var span = $(this).children('span:last-child()');
                if (option == 'Select Employee Name') {
                    span.html('<p class="text-danger">This field is required*</p>');
                    event.preventDefault();
                } else {
                    span.text('');
                }
            });
            $('.commentss').each(function() {
                var comment = $(this).children().attr('name');
                var values = $(this).children('textarea').val();
                var span = $(this).children('span');
                if (values.trim().length<1) {
                    event.preventDefault();
                    span.text('This field is required*');
                   
                } else {
                    span.text('');
                }
            });
            $('.choose-file-custom-btn').each(function(){
                var filename = $(this).find('input[type="file"]').val().split("\\");      
                filename = filename[filename.length - 1];
                var ext_required = ['jpg','png','jpeg','webp'];
                var ext = filename.split('.').pop();
                var span = $(this).find('span');

                if(filename != ''){
                    if(jQuery.inArray(ext,ext_required) == '-1'){
                        event.preventDefault();
                    }else{
                        span.html('');                    
                    }
                }
            });
        });
    });
    $(document).on('change', ".choose-file-custom-btn", function() {
        $(this).each(function(){
            var data_id = $(this).find('input[type="file"]').attr('data-id');
            var file_id   = $(this).find('.fileName').attr('id');
            var filename = $(this).find('input[type="file"]').val().split("\\");      
            filename = filename[filename.length - 1];
            $(this).find('.fileName').text(filename);
            // $('.fileName').text(fileName);
            var ext_required = ['jpg','png','jpeg','webp'];
            var ext = filename.split('.').pop();
            var span = $(this).find('span');

            if(jQuery.inArray(ext,ext_required) == '-1'){
                span.html('Required formates are JPG,JPEG,PNG,WEBP');
                event.preventDefault();
            }else{
                span.html('');                    
            }
        })
    });

    $("#close").on("click", function() {
        $(".modal").toggel("model");
    });
   
    $(".edit").on('click', function() {
        $("#edit").css("display", "block");
        $("body").addClass("modal-open");
        $("body").append("<div class='modal-backdrop fade show'></div>");
        $("body").css("overflow-y", "hidden");
        var db_id = $(this).data('value');
        var name = $(this).data('name');
        var comment = $(this).data('comment');
        var imgs = $(this).data('imgs');
        var suggestion = $(this).data('value');
        if (suggestion) {
            $.ajax({
                url: "{{ url('suggestions')}}",
                type: "get",
                data: {
                    suggestion: suggestion
                },
                success: function(html) {
                    $("#edit").html(html);
                }
            });
        } else {
            $("#edit").html('<option value="">Select Department First</option>');
        }
        $("#ids").val(db_id);
        $("#names").val(name);
        $("#comment").val(comment);
        $("#imgs").text(imgs + ' File is uploaded');
    });

</script>