@extends('qc::layouts.app')

@section('head')
<!-- DataTable -->
<link rel="stylesheet" href="{{ url('vendors/dataTable/datatables.min.css') }}" type="text/css">
<link rel="stylesheet" href="{{ url('vendors/dropzone/dropzone.css') }}" type="text/css">
<!-- Prism -->
<link rel="stylesheet" href="{{ url('vendors/prism/prism.css') }}" type="text/css">
<link rel="stylesheet" href="{{ url('vendors/datepicker/daterangepicker.css') }}" type="text/css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
    integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.70/pdfmake.js"
    integrity="sha512-rn5JpU98RtYVMtZeQJfzmJ67rl4/dqDpGZ393z5f9WMYHXEU4+8Stm/PQAma2gbsLbpClmUHJzT0DaG32OmEyQ=="
    crossorigin="anonymous"></script>

<meta name="csrf-token" content="{{ csrf_token() }}">
@endsection

@section('content')
<div class="page-header">
    <div>
        <h3></h3>
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item active" aria-current="page">Outside Factory Visit Attachment</li>
            </ol>
        </nav>
    </div>
</div>

<div class="row">
    <div class="col-md-12">
        <div class="card ">
            <div class="card-body">
                <h6 class="card-title">Outside Factory Visit Attachment</h6>

                <div class="" id="attachmentBody">
                    <div class="row">
                        <div class="col-md-4 mt-3">
                            <div class="input-group mb-2 mr-sm-2">
                                <div class="input-group-prepend">
                                    <div class="input-group-text form-control form-control-sm" style="width: 100px;">Reference No.</div>
                                </div>
                                <input type="text" class="form-control form-control-sm" id="reference_no" name="reference_no" disabled="">
                            </div>
                        </div>

                        <div class="col-md-4 mt-3">
                            <div class="input-group mb-2 mr-sm-2">
                                <div class="input-group-prepend">
                                    <div class="input-group-text form-control form-control-sm" style="width: 100px;">Date</div>
                                </div>
                                <input type="text" class="form-control form-control-sm" id="date" name="date">
                            </div>
                        </div>

                        <div class="col-md-4 mt-3">
                            <div class="input-group mb-2 mr-sm-2">
                                <div class="input-group-prepend">
                                    <div class="input-group-text form-control form-control-sm" style="width: 100px;">Factory</div>
                                </div>
                                <select id="factory" class="form-control form-control-sm">
                                    <option value="" selected>-- Select Factory --</option>
                                </select>
                            </div>
                        </div>

                    </div>
                    <div class="row">
                        <div class="col-md-4 mt-3">
                            <div class="input-group mb-2 mr-sm-2">
                                <div class="input-group-prepend">
                                    <div class="input-group-text form-control form-control-sm" style="width: 100px;">Outside Factory</div>
                                </div>
                                <select id="outside_factory" class="form-control form-control-sm">
                                    <option value="" selected>-- Select Outside Factory --</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-8 mt-3">
                            <div class="input-group mb-2 mr-sm-2">
                                <div class="input-group-prepend">
                                    <div class="input-group-text form-control form-control-sm" style="width: 100px;">Description</div>
                                </div>
                                <input type="text" class="form-control form-control-sm" id="description" name="description">

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

                       

                    <div class="row mt-3">
                        <div class="col-md-12">
                           
    
                            <label for="file_input_pics" class="col-sm-4 col-form-label">Attachment Pictures</label>
                            <!-- Regular Pictures -->
                            <form action="{{ route('/OutsideFactoryVisitRecordController/uploadAttachmentPics') }}"
                                class="dropzone" id="picsDropzone">
                                @csrf
                                <input type="hidden" id="outside_factory_visit_id" name="outside_factory_visit_id" value="">
                                <input type="hidden" id="attachment_token_pics" name="attachment_token_pics" value="">
                                <div class="fallback">
                                    <input name="file" type="file" multiple />
                                </div>
                            </form>
    
                            {{-- <label for="packing_center_visit_pics" class="col-sm-4 col-form-label">Packing Center Visit
                                Pics</label>
                            
                            <form action="{{ route('/OutsideFactoryVisitRecordController/uploadPackingCenterVisitPics') }}"
                                class="dropzone" id="packingDropzone">
                                @csrf
                                <input type="hidden" name="outside_factory_visit_id" value="">
                                <input type="hidden" name="attachment_token" value="">
                                <div class="fallback">
                                    <input name="file" type="file" multiple />
                                </div>
                            </form>
    
                            <label for="finished_boxes_pics" class="col-sm-4 col-form-label">Finished Boxes Pics</label>
                            
                            <form action="{{ route('/OutsideFactoryVisitRecordController/uploadFinishedBoxesPics') }}"
                                class="dropzone" id="boxesDropzone">
                                @csrf
                                <input type="hidden" name="outside_factory_visit_id" value="">
                                <input type="hidden" name="attachment_token" value="">
                                <div class="fallback">
                                    <input name="file" type="file" multiple />
                                </div>
                            </form>
     --}}
                        </div>
                    </div>

                    <div class="" id="attachmentList">
                        {{ csrf_field() }}
                        <table id="myTable" class="table table-striped table-bordered dataTable dtr-inline collapsed"
                            role="grid" aria-describedby="example1_info">
                            <thead>
                                <tr>
                                    <th class="id">ID</th>
                                    <th>Image</th>
                                    <th>Title</th>
                                    <th>Name</th>
                                    <th>Description</th>
                                    <th>Edit</th>
                                    <th>Remove</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
    
                    </div>

                    <div class="modal-footer mt-4">
                        <button type="button" class="btn btn-light" id="btnSave" >Save</button>
                        <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
                    </div>
                </div>

                

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

<!--Attachment-->
<div class="modal fade" id="attachmentAddModal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-md" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="attachmentAddModalTitle">Edit Image Details</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <i class="ti-close"></i>
                </button>
            </div>
            <div class="modal-body" id="attachmentAddModalBody">
                <div class="row">
                    <div class="col-md-12">
                        <input type="hidden" class="form-control" id="image_id">
                        <div class="form-group row">
                            <label for="image_title" class="col-sm-4 col-form-label">Title</label>
                            <div class="col-sm-8">
                                <select id="image_title" class="form-control form-control-sm">
                                    <option value="" selected>-- Select Image Category --</option>
                                    <option value="product_dimension">Product Dimension</option>
                                    <option value="product_expansion">Product Expansion</option>
                                    {{-- <option value="product_dimension_small">Product Dimension - Small</option>
                                    <option value="product_dimension_large">Product Dimension - Large</option> --}}
                                    <option value="remarks">Remarks</option>
                                    <option value="packing_center_visit">Packing Center Visit</option>
                                    <option value="finished_boxes">Finished Boxes</option>
                                </select>
                                {{-- <input type="text" class="form-control" id="image_title"> --}}
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="image_name" class="col-sm-4 col-form-label">Name</label>
                            <div class="col-sm-8">
                                <input type="image_name" class="form-control" id="image_name">
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="image_description" class="col-sm-4 col-form-label">Description</label>
                            <div class="col-sm-8">
                                <textarea class="form-control" id="image_description"></textarea>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-light" id="btnModalSave" data-dismiss="modal">Update</button>
                    <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection

<!-- Javascript -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
@section('script')
<script src="{{ url('vendors/datepicker/daterangepicker.js') }}"></script>
<!-- DataTable -->
<script src="{{ url('vendors/dataTable/datatables.min.js') }}"></script>

{{-- pdf --}}
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.70/vfs_fonts.js"
    integrity="sha512-vv3EN6dNaQeEWDcxrKPFYSFba/kgm//IUnvLPMPadaUf5+ylZyx4cKxuc4HdBf0PPAlM7560DV63ZcolRJFPqA=="
    crossorigin="anonymous"></script>
<script type="application/octet-stream"
    src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.70/fonts/Roboto/Roboto-Medium.ttf"></script>
<script src="{{ Module::asset('qc:js/pdf/Page.js') }}?random=689011f24c857"></script>
<script src="{{ Module::asset('qc:js/pdf/PDFViewer.js') }}?random=689011f24c85b"></script>

<!-- Prism -->
<script src="{{ url('vendors/prism/prism.js') }}"></script>
<script src="{{ url('vendors/dropzone/dropzone.js') }}"></script>
<script src="{{ url('assets/js/notification.js') }}?random=689011f24c85c"></script>


<script src="{{ Module::asset('qc:js/outside_factory_visit_attachment.js') }}?random=689011f24c85d"></script>
@endsection