@include('includes.header')
<section class="pt-2 pb-2">
    <div class="container">
        <div class="row align-items-lg-end">
            <div class="col-md-12" id="document">
                <h3 data-animate="fadeInUp" data-delay=".1" class="animated fadeInUp"
                    style="animation-duration: 0.6s; animation-delay: 0.1s;">Add Document</h3>
                {{--<form action="{{url('/customer/document/add')}}" method="post" name="document" id="document"
                enctype="multipart/form-data">--}}
                {{--{{csrf_field()}}--}}
                <div class="form-body">
                    <div class="row p-t-20">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="control-label">Document Type</label>
                                <select name="doctype" id="doctype" class="form-control">
                                    <option value="">Select Document Type</option>
                                    @foreach($doctype as $doctype)
                                    <option value="{{$doctype->id}}"
                                        {{($doc->document_type_id == $doctype->id)?'selected':''}}>{{$doctype->name}}
                                    </option>
                                    @endforeach
                                </select>
                                <span id="docerror" style="display: none; color: red;">This field is required</span>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="control-label">Year</label>
                                <select name="year" id="year" class="form-control">
                                    <option value="">Select Year</option>
                                    @for($i=1999;$i <= 2060;$i++) <option value="{{$i}}"
                                        {{($i == $doc->year)? 'selected':''}}>{{$i}}</option>
                                        @endfor
                                </select>
                                <span id="yearerror" style="display: none; color: red;">This field is required</span>
                            </div>
                        </div>

                    </div>

                    <div class="row p-t-20">
                        <div class="col-md-12">
                            <div class="form-group">
                                <label class="control-label">Message</label>
                                <textarea name="message" id="message" cols="20" rows="5"
                                    class="form-control">{{$doc->description}}</textarea>
                                <span id="messageerror" style="display: none; color: red;">This field is required</span>
                            </div>
                        </div>
                    </div>

                    <div class="row p-t-20">
                        <div class="col-md-12">
                            <div class="row">
                            @foreach($doc->attachment as $attachment)
                                @if($attachment->is_remove != 1)
                                    @if($attachment->type == 'pdf')
                                        <div class="col-lg-2 col-md-4 col-sm-6">
                                            <div class="single-member animated fadeInUp" data-animate="fadeInUp" data-delay="0"
                                                 style="animation-duration: 0.6s; animation-delay: 0s;">
                                                <div class="image-hover-wrap"> <img
                                                            src="{{URL::asset('frontend')}}/img/member1.jpg" alt="">
                                                    <div
                                                            class="image-hover-content d-flex justify-content-center align-items-center text-center">
                                                        <ul class="list-inline">
                                                            <li><a href="{{route('deleteattachment',$attachment->id)}}"><i class="fas fa-trash-alt"></i></a>
                                                            </li>
                                                        </ul>
                                                    </div>
                                                </div>
                                                <div class="single-member-info bg-light">
                                                    <h4>{{(strlen($attachment->name) > 15)?substr($attachment->name, 0, 15) . '...':$attachment->name}}</h4>
                                                </div>
                                            </div>
                                        </div>
                                    @elseif($attachment->type == 'jpg' || $attachment->type == 'jpeg' || $attachment->type == 'png' || $attachment->type == 'gif')
                                        <div class="col-lg-2 col-md-4 col-sm-6">
                                            <div class="single-member animated fadeInUp" data-animate="fadeInUp" data-delay="0"
                                                 style="animation-duration: 0.6s; animation-delay: 0s;">
                                                <div class="image-hover-wrap"> <img
                                                            src="{{URL::asset('frontend')}}/img/member4.jpg" alt="">
                                                    <div
                                                            class="image-hover-content d-flex justify-content-center align-items-center text-center">
                                                        <ul class="list-inline">
                                                            <li><a href="{{route('deleteattachment',$attachment->id)}}"><i class="fas fa-trash-alt"></i></a>
                                                            </li>
                                                        </ul>
                                                    </div>
                                                </div>
                                                <div class="single-member-info bg-light">
                                                    <h4>{{(strlen($attachment->name) > 15)?substr($attachment->name, 0, 15) . '...':$attachment->name}}</h4>
                                                </div>
                                            </div>
                                        </div>
                                    @elseif($attachment->type == 'msword' || $attachment->type == 'doc' || $attachment->type == 'docx')
                                        <div class="col-lg-2 col-md-4 col-sm-6">
                                            <div class="single-member animated fadeInUp" data-animate="fadeInUp" data-delay="0"
                                                 style="animation-duration: 0.6s; animation-delay: 0s;">
                                                <div class="image-hover-wrap"> <img
                                                            src="{{URL::asset('frontend')}}/img/member2.jpg" alt="">
                                                    <div
                                                            class="image-hover-content d-flex justify-content-center align-items-center text-center">
                                                        <ul class="list-inline">
                                                            <li><a href="{{route('deleteattachment',$attachment->id)}}"><i class="fas fa-trash-alt"></i></a>
                                                            </li>
                                                        </ul>
                                                    </div>
                                                </div>
                                                <div class="single-member-info bg-light">
                                                    <h4>{{(strlen($attachment->name) > 15)?substr($attachment->name, 0, 15) . '...':$attachment->name}}</h4>
                                                </div>
                                            </div>
                                        </div>
                                    @elseif($attachment->type == 'xls' || $attachment->type == 'xlsx')
                                        <div class="col-lg-2 col-md-4 col-sm-6">
                                            <div class="single-member animated fadeInUp" data-animate="fadeInUp" data-delay="0"
                                                 style="animation-duration: 0.6s; animation-delay: 0s;">
                                                <div class="image-hover-wrap"> <img
                                                            src="{{URL::asset('frontend')}}/img/member3.jpg" alt="">
                                                    <div
                                                            class="image-hover-content d-flex justify-content-center align-items-center text-center">
                                                        <ul class="list-inline">
                                                            <li><a href="{{route('deleteattachment',$attachment->id)}}"><i class="fas fa-trash-alt"></i></a>
                                                            </li>
                                                        </ul>
                                                    </div>
                                                </div>
                                                <div class="single-member-info bg-light">
                                                    <h4>{{(strlen($attachment->name) > 15)?substr($attachment->name, 0, 15) . '...':$attachment->name}}</h4>
                                                </div>
                                            </div>
                                        </div>
                                    @elseif($attachment->type == 'ppt' || $attachment->type == 'pptx')
                                        <div class="col-lg-2 col-md-4 col-sm-6">
                                            <div class="single-member animated fadeInUp" data-animate="fadeInUp" data-delay="0"
                                                 style="animation-duration: 0.6s; animation-delay: 0s;">
                                                <div class="image-hover-wrap"> <img
                                                            src="{{URL::asset('frontend')}}/img/member5.jpg" alt="">
                                                    <div
                                                            class="image-hover-content d-flex justify-content-center align-items-center text-center">
                                                        <ul class="list-inline">
                                                            <li><a href="{{route('deleteattachment',$attachment->id)}}"><i class="fas fa-trash-alt"></i></a>
                                                            </li>
                                                        </ul>
                                                    </div>
                                                </div>
                                                <div class="single-member-info bg-light">
                                                    <h4>{{(strlen($attachment->name) > 15)?substr($attachment->name, 0, 15) . '...':$attachment->name}}</h4>
                                                </div>
                                            </div>
                                        </div>
                                    @elseif($attachment->type == 'zip')
                                        <div class="col-lg-2 col-md-4 col-sm-6">
                                            <div class="single-member animated fadeInUp" data-animate="fadeInUp" data-delay="0"
                                                 style="animation-duration: 0.6s; animation-delay: 0s;">
                                                <div class="image-hover-wrap"> <img
                                                            src="{{URL::asset('frontend')}}/img/member7.jpg" alt="">
                                                    <div
                                                            class="image-hover-content d-flex justify-content-center align-items-center text-center">
                                                        <ul class="list-inline">
                                                            <li><a href="{{route('deleteattachment',$attachment->id)}}"><i class="fas fa-trash-alt"></i></a>
                                                            </li>
                                                        </ul>
                                                    </div>
                                                </div>
                                                <div class="single-member-info bg-light">
                                                    <h4>{{(strlen($attachment->name) > 15)?substr($attachment->name, 0, 15) . '...':$attachment->name}}</h4>
                                                </div>
                                            </div>
                                        </div>
                                    @endif


                                {{--<!-- <img src="{{url($attachment->path)}}" alt="" width="100" height="100">--}}
                                {{--<a href="" class="btn btn-danger">Remove</a> -->--}}
                                @endif
                            @endforeach
                            </div>
                        </div>
                    </div>

                    <div class="row p-t-20">
                        <div class="col-md-12">
                            <form action="#" method="post" class="dropzone" enctype="multipart/form-data" id="data">

                                {{ csrf_field() }}
                                <input type="hidden" name="lastid" id="lastid" value="{{$doc->id}}">
                                <div class="fallback">

                                    <input class="form-control" name="file" type="file" multiple />
                                </div>

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




                    <!--/row-->
                </div>
                <div class="row p-t-20" style="margin-top: 20px;">
                    <div class="col-md-12">
                        <div class="form-actions">
                            <button type="submit" class="btn btn-success" id="document_submit"> <i
                                    class="fa fa-check"></i> Save</button>
                            <a href="{{url('customer/documents')}}" class="btn btn-info">Cancel</a>
                        </div>
                    </div>
                </div>
                {{--</form>--}}
            </div>
        </div>
    </div>
</section>
@include('includes.footer')
<script>
    var count = 1;
    var countfiles = 0;
    var counterror = 0;
    var myDropzone = new Dropzone("#data", {
        url: "{{route('editdoc',$doc->id)}}",
        autoProcessQueue: false,
        addRemoveLinks: true,
        dictRemoveFile: 'Remove',
        parallelUploads: 100,
        maxFilesize: 25,
        accept: function (file, done) {

            if (file.type != "image/jpeg" && file.type != "image/png" &&
                file.type != "image/gif" && file.type != "application/pdf" &&
                file.type != "application/msword" && file.type != "application/doc" &&
                file.type != "application/docx" && file.type != "application/vnd.openxmlformats-officedocument.wordprocessingml.document" &&
                file.type != "application/xls" && file.type != "application/xlsx" &&
                file.type != "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" && file.type != "application/vnd.ms-powerpoint" &&
                file.type != "application/vnd.openxmlformats-officedocument.presentationml.presentation" && file.type != "application/ppt" &&
                file.type != "application/pptx" && file.type != "application/zip") {
                // console.log(done("Not Allowed"));
                counterror++;
                // console.log(counterror);
                if (count == 1) {
                    $('.dz-remove').on('click', function () {
                        var html = $(this).siblings('.dz-error-message').find('span').html();
                        if (html == 'Not Allowed') {
                            counterror = counterror - 1;
                            console.log(counterror);
                        }

                    })
                }
                count++;
            }
            else {
                done();
            }
        },
        init: function () {
            var myDropzone = this;

            this.on("success", function (file, response) {
                // console.log(response);
                countfiles++;
                if (myDropzone.getAcceptedFiles().length == countfiles) {
                    // console.log('kali');
                    window.location = '{{url('customer/documents')}}'
                }

            });

        }
    });

    $(document).ready(function () {
        $('#document_submit').on('click', function () {
            $('#docerror').hide()
            $('#yearerror').hide()
            $('#messageerror').hide()
            if ($('#doctype').val() == '') {
                $('#docerror').show()
            } else if ($('#year').val() == '') {
                $('#yearerror').show()
            } else if ($('#message').val() == '') {
                $('#messageerror').show()
            } else {
                var doctype = $('#doctype').val()
                var year = $('#year').val()
                var message = $('#message').val()
                $.ajax({
                    url: '{{route('editdoc',$doc->id)}}',
                    type: 'POST',
                    data: {
                        doctype: doctype,
                        year: year,
                        message: message
                    },
                    success: function (resp) {
                        debugger
                        if (resp.status == 1) {
                            // $('#lastid').val(resp.id)
                            if (myDropzone.getQueuedFiles().length > 0)
                                myDropzone.processQueue();
                            else
                                window.location = '{{url('customer/documents')}}'
                        }
                    }
                })
            }
        })
    })
</script>