@extends('layout.layout')
@section('title')
Document Management
@endsection
@section('content')
			<!--begin::Card-->
            <div class="card card-custom">
                <div class="card-header flex-wrap py-5 border-0">
                    <div class="card-title">
                         <!--begin::Button-->
                        {{-- <a href="#" class="btn btn-light-primary font-weight-bolder export-btn exportReport z-index-1 position-relative" data="signup" data-type="excel">
                            <span class="svg-icon svg-icon-md">
                               <!--begin::Svg Icon | path:C:\wamp64\www\keenthemes\legacy\metronic\theme\html\demo1\dist/../src/media/svg/icons\Files\Selected-file.svg--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
                                <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                    <polygon points="0 0 24 0 24 24 0 24"/>
                                    <path d="M4.85714286,1 L11.7364114,1 C12.0910962,1 12.4343066,1.12568431 12.7051108,1.35473959 L17.4686994,5.3839416 C17.8056532,5.66894833 18,6.08787823 18,6.52920201 L18,19.0833333 C18,20.8738751 17.9795521,21 16.1428571,21 L4.85714286,21 C3.02044787,21 3,20.8738751 3,19.0833333 L3,2.91666667 C3,1.12612489 3.02044787,1 4.85714286,1 Z M8,12 C7.44771525,12 7,12.4477153 7,13 C7,13.5522847 7.44771525,14 8,14 L15,14 C15.5522847,14 16,13.5522847 16,13 C16,12.4477153 15.5522847,12 15,12 L8,12 Z M8,16 C7.44771525,16 7,16.4477153 7,17 C7,17.5522847 7.44771525,18 8,18 L11,18 C11.5522847,18 12,17.5522847 12,17 C12,16.4477153 11.5522847,16 11,16 L8,16 Z" fill="#000000" fill-rule="nonzero" opacity="0.3"/>
                                    <path d="M6.85714286,3 L14.7364114,3 C15.0910962,3 15.4343066,3.12568431 15.7051108,3.35473959 L20.4686994,7.3839416 C20.8056532,7.66894833 21,8.08787823 21,8.52920201 L21,21.0833333 C21,22.8738751 20.9795521,23 19.1428571,23 L6.85714286,23 C5.02044787,23 5,22.8738751 5,21.0833333 L5,4.91666667 C5,3.12612489 5.02044787,3 6.85714286,3 Z M8,12 C7.44771525,12 7,12.4477153 7,13 C7,13.5522847 7.44771525,14 8,14 L15,14 C15.5522847,14 16,13.5522847 16,13 C16,12.4477153 15.5522847,12 15,12 L8,12 Z M8,16 C7.44771525,16 7,16.4477153 7,17 C7,17.5522847 7.44771525,18 8,18 L11,18 C11.5522847,18 12,17.5522847 12,17 C12,16.4477153 11.5522847,16 11,16 L8,16 Z" fill="#000000" fill-rule="nonzero"/>
                                </g>
                            </svg>
                            </span>Export to Excel
                        </a> --}}
                            <!--end::Button-->
                            <!--begin::Button-->
                        {{-- <a href="#" class="btn btn-light-primary font-weight-bolder export-btn exportReport" data="signup" data-type="pdf">
                            <span class="svg-icon svg-icon-md">
                               <!--begin::Svg Icon | path:C:\wamp64\www\keenthemes\legacy\metronic\theme\html\demo1\dist/../src/media/svg/icons\Files\Selected-file.svg--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
                                <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                    <polygon points="0 0 24 0 24 24 0 24"/>
                                    <path d="M4.85714286,1 L11.7364114,1 C12.0910962,1 12.4343066,1.12568431 12.7051108,1.35473959 L17.4686994,5.3839416 C17.8056532,5.66894833 18,6.08787823 18,6.52920201 L18,19.0833333 C18,20.8738751 17.9795521,21 16.1428571,21 L4.85714286,21 C3.02044787,21 3,20.8738751 3,19.0833333 L3,2.91666667 C3,1.12612489 3.02044787,1 4.85714286,1 Z M8,12 C7.44771525,12 7,12.4477153 7,13 C7,13.5522847 7.44771525,14 8,14 L15,14 C15.5522847,14 16,13.5522847 16,13 C16,12.4477153 15.5522847,12 15,12 L8,12 Z M8,16 C7.44771525,16 7,16.4477153 7,17 C7,17.5522847 7.44771525,18 8,18 L11,18 C11.5522847,18 12,17.5522847 12,17 C12,16.4477153 11.5522847,16 11,16 L8,16 Z" fill="#000000" fill-rule="nonzero" opacity="0.3"/>
                                    <path d="M6.85714286,3 L14.7364114,3 C15.0910962,3 15.4343066,3.12568431 15.7051108,3.35473959 L20.4686994,7.3839416 C20.8056532,7.66894833 21,8.08787823 21,8.52920201 L21,21.0833333 C21,22.8738751 20.9795521,23 19.1428571,23 L6.85714286,23 C5.02044787,23 5,22.8738751 5,21.0833333 L5,4.91666667 C5,3.12612489 5.02044787,3 6.85714286,3 Z M8,12 C7.44771525,12 7,12.4477153 7,13 C7,13.5522847 7.44771525,14 8,14 L15,14 C15.5522847,14 16,13.5522847 16,13 C16,12.4477153 15.5522847,12 15,12 L8,12 Z M8,16 C7.44771525,16 7,16.4477153 7,17 C7,17.5522847 7.44771525,18 8,18 L11,18 C11.5522847,18 12,17.5522847 12,17 C12,16.4477153 11.5522847,16 11,16 L8,16 Z" fill="#000000" fill-rule="nonzero"/>
                                </g>
                            </svg>
                            </span>Export to PDF
                        </a> --}}
                            <!--end::Button-->
                    </div>
                    <div class="card-toolbar">
                        <!--begin::Button-->
                        @if(session('Role')=="site-coordinator" || session('Role')=="site-coordinator-collector")
                        <button onclick="add_document_modal()" class="btn btn-primary font-weight-bolder" >Add Document</button>
                        @endif
                        <!--end::Button-->
                    </div>
                </div>
                <div class="card-body">
                    <!--begin: Datatable-->
                    <table class="table align-middle table-row-dashed fs-6 gy-5 dataTable no-footer base-datatable">
                        <thead>
                            <tr>
                                {{-- <th>ERX ID</th> --}}
                                <th>SUBJECT ID</th>
                                <th>DOCUMENT NAME</th>
                                <th>UPLOAD DATE</th>
                                <th>UPLOAD TIME</th>
                                <th>UPLOADED BY</th>
                                <th>ACTION</th>
                              </tr>
                        </thead>
                        <tbody>
                            @foreach ($documents as $item)
                            <tr>
                                {{-- <td>{{ $item->erxId }}</td> --}}
                                <td>{{ $item->subjectId }}</td>
                                <td>{{ $item->file_name }}</td>
                                <td>{{ $item->upload_date  }}</td>
                                <td>{{ convert_mm_dd_yyyy_otime($item->created_at) }}</td>
                                <td>{{ $item->uploaded_by }}</td>
                                <td class="nowrap">
                                    <a href="/document_manager/{{ $item->file_name }}" target="_blank" class="btn btn-light btn-sm px-2">
                                        <i class="fa fa-eye fs-8 pe-0 me-2"></i> View
                                    </a>
                                    @if(session('Role')=="site-coordinator" || session('Role')=="site-coordinator-collector")
                                    <button onclick="delete_document({{ $item->id }})" class="btn btn-light btn-sm px-2">
                                        <i class="fa fa-trash-alt fs-8 pe-0 me-2"></i> Delete
                                    </button>
                                    @endif
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                    <!--end: Datatable-->
                </div>
            </div>
            <!--end::Card-->

<div class="modal fade mydropdownmodal" role="dialog" id="add_document">
    <div class="modal-dialog" role="document">
        <div class="modal-content rounded-3">
            <div class="modal-header">
                <h5 class="modal-title">Add Document</h5>
                <div class="btn btn-icon btn-sm btn-active-light-primary ms-2" data-bs-dismiss="modal" aria-label="Close">
                    <span class="fa fa-times"></span>
                </div>
            </div>
            <form action="{{ url('/documents') }}" method="post" id="document_form" enctype="multipart/form-data">
                @csrf
                <div class="modal-body pt-0">
                    {{-- <div class="form-group mt-5">
                        <label>ERX ID <span class="text-danger">*</span> </label>
                        <select name="erxId" id="erxId" class="form-control form-select custom-select-placeholder">
                            <option disabled selected value="0">Select ERX ID</option>
                            @foreach ($users as $user)
                                <option value="{{ $user->erxId }}" {{ old('erxId') == $user->erxId ? 'selected' : '' }}>{{ $user->erxId }}
                                </option>
                            @endforeach
                        </select>
                        <p class="text-danger">{{ $errors->first('erxId') }}</p>
                    </div> --}}
                    <div class="form-group mt-5">
                        <label>Subject ID <span class="text-danger">*</span> </label>
                        <select class="form-control form-select custom-select-placeholder" name="subjectId" id="subjectId">
                            <option disabled selected value="0">Select Subject ID</option>
                            @foreach ($subjects as $subject)
                                <option value="{{ $subject->subjectId }}" {{ old('subjectId') == $subject->subjectId ? 'selected' : '' }}>{{ $subject->subjectId }}
                                </option>
                            @endforeach
                        </select>
                        <p class="text-danger">{{ $errors->first('subjectId') }}</p>
                    </div>
                    <div class="form-group mt-5">
                        <label>Document <span class="text-danger">*</span> </label>
                        <div class="image-upload-wrap">
                            <input class="file-upload-input" type="file" name="file_name" onchange="readURL(this);" accept="application/pdf">
                            <img src="/assets/upload.png" alt="" class="drag-icon">
                            <h5 class="drg-drp-head">Drag and Drop or Browse your files</h5>
                            <p class="drg-drp-par">Only PDF Files</p>
                        </div>
                        <div id="file-upload-content" style="display: none">
                            <p class="file-name-upload"></p>
                            <span onclick="remove_image()"><i class="remove-image fa fa-times"></i></span>
                        </div>
                        <p class="text-danger">{{ $errors->first('file_name') }}</p>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal" aria-label="Close">Close</button>
                    <button class="btn btn-primary" onclick="submit_form(this)">Save</button>
                </div>
            </form>
        </div>
    </div>
</div>

<div class="modal fade mydropdownmodal" role="dialog" id="delete_modal">
    <div class="modal-dialog" role="document">
        <div class="modal-content rounded-3">
            <div class="modal-header">
                <h5 class="modal-title">Confirmation</h5>
                <div class="btn btn-icon btn-sm btn-active-light-primary ms-2" data-bs-dismiss="modal" aria-label="Close">
                    <span class="fa fa-times"></span>
                </div>
            </div>
            <div class="modal-body">
                <input type="hidden" id="document_id" />
                <p>Are you sure you want to delete this document?</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal" aria-label="Close">No</button>
                <button type="button" class="btn btn-primary" onclick="confirm_delete(this)">Yes</button>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
    $(document).ready( function () {
        $('.base-datatable').DataTable({
            columnDefs: [
            { orderable: false, targets: -1 }
            ],
            pagingType: 'numbers',
            responsive: true,
            scrollX: true,
            order: [],
        });

        $("#subjectId").select2({
            dropdownParent: $("#add_document")
        });

        var error = {{ count($errors) }}
        if(error){
            $('#add_document').modal('show');
        }

        $('#add_document').on('hidden.bs.modal', function () {
            $('#subjectId').val("0").trigger("change");
            $('#file-upload-content').hide();
            $('.file-name-upload').html("");
            $('.file-upload-input').val("");
        })

    });

    function readURL(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();
            reader.onload = function(e) {
            $('#file-upload-content').show();
            $('.file-name-upload').html(input.files[0].name);
            };
            reader.readAsDataURL(input.files[0]);
        }
        else {
            remove_image();
        }
    }

    function remove_image(){
        $('#file-upload-content').hide();
        $('.file-name-upload').html("");
        $('.file-upload-input').val("");
    }

    function add_document_modal(){
        $('#add_document').modal('show');
    }

    function submit_form(e){
        $(e).attr("disabled", true);
        $('#document_form').submit();
    }

    function delete_document(id){
        $('#document_id').val(id);
        $('#delete_modal').modal('show');
    }

    function confirm_delete(e){
        $(e).attr('disabled', true);
        var document_id = $('#document_id').val();
        window.location.href = "/documents/" + document_id;
    }

</script>

@endsection