<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
<link rel="stylesheet" href="{{ asset('AdminLTE/plugins/fontawesome-free/css/all.min.css') }}">
<link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
<link rel="stylesheet" href="{{ asset('AdminLTE/plugins/sweetalert2-theme-bootstrap-4/bootstrap-4.min.css') }}">
<link rel="stylesheet" href="{{ asset('AdminLTE/plugins/icheck-bootstrap/icheck-bootstrap.min.css') }}">
<link rel="stylesheet" href="{{ asset('AdminLTE/dist/css/adminlte.min.css') }}">
<link rel="stylesheet" href="{{ asset('AdminLTE/plugins/summernote/summernote-bs4.min.css') }}">
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jquery-datetime-picker@2.5.11/jquery.datetimepicker.min.css">
<link rel="stylesheet" href="{{ asset('css/app.css') }}">
<link rel="stylesheet" href="{{ asset('css/custom2.css') }}?v={{ filemtime(public_path('css/custom2.css')) }}">
<link rel="stylesheet" href="{{ asset('css/select2_multiple.css') }}">

<style>
    .ocr{

    }
    .pdf-container{
    }
    .ocr-field{
        cursor: pointer;
        border:1px solid rgb(238 230 230);
    }
    .ocr-field:hover{
        border:1px solid black;
    }
    .ocr-field.selected{
        border: 2px dashed var(--warning);
    }
    .ocr-has-map{
        border: 1px solid var(--primary);
        border-radius: .125rem !important;
    }
    .ocr-field-map{
        display: none;
    }
    .ocr-has-map:hover .ocr-field-map{
        display: block;
    }
    .ocr-field-select{
        z-index: 100000;
    }
    .ocr-customer-name-field{
        border: 2px solid var(--primary);
    }
    .ocr_selection-rect{
        border: 2px dashed var(--warning);
        border-radius: .125rem !important;
        pointer-events: none !important;
    }
    .ocr-disable-pointer{
        pointer-events: none !important;
    }
    .ocr_selection-rect select{
        pointer-events:auto;
    }
    .d-none {
        display: none !important;
    }
    .img-fluid, .img-thumbnail {
        height: auto;
        max-width: 100%;
    }

    .ocr-border{
        border: 1px solid rgb(238, 230, 230);
    }
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/1.6.8/axios.min.js"></script>
<script src="{{ asset("assets/js/vue.min.js") }}"></script> 
<div class="wrapper">
    <div class="content-wrapper position-relative">
    <section class="contents">
        <div id="app" >
    <div class="loading text-center"><div class="spinner-container"><div role="status" class="spinner-border text-primary"><span class="sr-only">Loading...</span></div></div></div>
    <div class="pdf-container" :style="{width: this.ocr.mst_template.image.width*0.3155 + 'px',height: this.ocr.mst_template.image.height*0.3155 + 'px'}">
        <div class="text-center" @mousedown="ocr_start_select" @mousemove="ocr_move_select" @mouseup="ocr_end_select" >
            <img :src="`{{route('order.show_pdf')}}?file_path=`+ocr.image_path" class="img-fluid border" draggable="false" />
            <div @click.stop="ocr_open_field(index)" class="ocr ocr-field" :class="{'ocr-disable-pointer': ocr_handler.drag.selecting > 0}"
                v-for="(ocr_field,index) in ocr.json_data.ocr_cells" :data-index="index" :title="ocr_field.text"
                :style="{position: 'absolute',left: ocr_field.style.left + 'px',top: ocr_field.style.top + 'px',width: ocr_field.style.width + 'px',
                height: ocr_field.style.height + 'px'}"  >
                <select class="ocr-field-select" v-if="!ocr.mst_template?.tpl_xy" :class="{'d-none':ocr_handler.field_selected!=index}" @change="($event)=>ocr_map_customer($event,ocr_field)"
                        :style="{position: 'absolute',left: ocr_field.style.width + 'px',top: ocr_field.style.height + 'px'}" value="1">
                    <option value="1"></option>
                    <option value="2">得意先名</option>
                </select>
                <select v-else class="ocr-field-select" :class="{'d-none':ocr_handler.field_selected!=index}" @change="ocr_map_field(ocr.mst_template_field[$event.target.value],ocr_field)"
                :style="{position: 'absolute',left: ocr_field.style.width + 'px',top: ocr_field.style.height + 'px'}">
                    <option value=""></option>
                    <option v-for="(mst_field,field_name) in ocr.mst_template_field" :value="field_name">@{{mst_field.name}}</option>
                </select>
            </div>
            <div v-if="ocr.mst_template?.tpl_xy" class="ocr ocr-field ocr-customer-name-field" :class="{'ocr-disable-pointer': ocr_handler.drag.selecting > 0}"
                :style="{position: 'absolute',left: ocr.mst_template.style.left + 'px',top: ocr.mst_template.style.top + 'px',
                width: ocr.mst_template.style.width + 'px',height: ocr.mst_template.style.height + 'px'}">
                <select  @change="($event)=>ocr_map_customer($event,ocr.mst_template)" class="ocr-field-select" 
                    :style="{position: 'absolute',left: ocr.mst_template.style.width + 'px',top: ocr.mst_template.style.height + 'px'}" :value="2">
                    <option value="1"></option>
                    <option value="2">得意先名</option>
                </select>
            </div>
            <div @click.stop="ocr_open_field('d_'+index)" class="ocr ocr-field ocr-has-map" :class="{'ocr-disable-pointer': ocr_handler.drag.selecting > 0}" v-for="(template_field,index) in ocr.dt_template_field" v-if="template_field.style" :data-index="index" :title="template_field.field_name"
                    :style="{position: 'absolute',left: template_field.style.left + 'px',top: template_field.style.top + 'px',width: template_field.style.width + 'px',height: template_field.style.height + 'px'}">
                <select class="ocr-field-select" :class="{'d-none':ocr_handler.field_selected!='d_'+index}"
                        @change="ocr_map_field(ocr.mst_template_field[$event.target.value],{},template_field.coordinate)" :value="template_field.field_name"
                        :style="{position: 'absolute',left: template_field.style.width + 'px',top: template_field.style.height + 'px'}">
                    <option value=""></option>
                    <option v-for="(mst_field,field_name) in ocr.mst_template_field" :value="field_name">@{{mst_field.name}}</option>
                </select>
            </div>
            <div v-if="ocr_handler.drag.selecting > 0" class="ocr_selection-rect"
                    :style="{position: 'absolute',left: ocr_handler_drag_style.left + 'px',top: ocr_handler_drag_style.top + 'px',
                    width: ocr_handler_drag_style.width + 'px',height: ocr_handler_drag_style.height + 'px'}" >
                <template v-if="!ocr.mst_template?.tpl_xy">
                    <select v-if="ocr_handler.drag.selecting == 2" @change="($event)=>ocr_map_customer($event,{},ocr_handler.drag.coordinate)" class="ocr-field-select"
                                :style="{position: 'absolute',left: ocr_handler_drag_style.width + 'px',top: ocr_handler_drag_style.height + 'px'}">
                        <option value="1"></option>
                        <option value="2">得意先名</option>
                    </select>
                </template>
                <template v-else>
                    <select v-if="ocr_handler.drag.selecting == 2" class="ocr-field-select" @change="ocr_map_field(ocr.mst_template_field[$event.target.value],{},ocr_handler.drag.coordinate)"
                            :style="{position: 'absolute',left: ocr_handler_drag_style.width + 'px',top: ocr_handler_drag_style.height + 'px'}">
                        <option value=""></option>
                        <option v-for="(mst_field,field_name) in ocr.mst_template_field" :value="field_name">@{{mst_field.name}}</option>
                    </select>
                </template>
            </div>
        </div>    
    </div>
    <div v-for="page_num in (ocr.json_data.page_total - 1)" :key="page_num" :style="{width: ocr.mst_template.image.width * 0.3155 + 'px',height: ocr.mst_template.image.height * 0.3155 + 'px'}">
        <img :src="`{{ route('order.show_pdf') }}?file_path=` + ocr.image_path.replace(/\.jpg$/, `_${page_num}.jpg`)" class="img-fluid border" draggable="false" />
    </div>
</div>
    </section>
</div>
</div>




<script>
    var app = new Vue({ 
        el    : '#app',
        mixins: [],
        data  : {
            ocr  : window.opener.app.ocr,
            customer  : window.opener.app.customer,
            ocr_handler: {
                field_selected:-1,
                drag:{coordinate:[0,0,0,0],selecting: -1}
            },
            disable:Number(@json($disable))
        },
        watch: {
        },
        created() {
            if(!!this.ocr && this.ocr.json_data){
                this.ocr.json_data.ocr_cells=this.ocr.json_data.ocr_cells.map(item => {
                    const [x1, y1, x2, y2] = this.bboxToA4(item.bbox)
                    return {
                        ...item,
                        style: {
                            left: x1,
                            top: y1,
                            width: x2 - x1,
                            height: y2 - y1
                        }
                    };
                })
                if(this.ocr?.mst_template?.tpl_xy){
                    const [xx1, xy1, xx2, xy2] = this.bboxToA4(this.ocr.mst_template.tpl_xy)
                    this.ocr.mst_template.style={
                        left: xx1,
                        top: xy1,
                        width: xx2 - xx1,
                        height: xy2 - xy1
                    }
                }
                
                    
                
                this.ocr.dt_template_field = this.ocr.dt_template_field.map(template_field => {
                    this.ocr_map_style_template(template_field)
                    return template_field
                })
            }
        },
        updated() {
        },
        computed:{
            ocr_handler_drag_style() {
                let [x1, y1, x2, y2] = this.ocr_handler.drag.coordinate

                return {
                    left: Math.min(x1, x2),
                    top: Math.min(y1, y2),
                    width: Math.abs(x2 - x1),
                    height: Math.abs(y2 - y1)
                }
            }
        },
        methods: {
            ocr_isBoxInside(bbox,coord){
                const gap = 1

                let isFullyInside = (
                    bbox[0] >= coord[0] &&
                    bbox[1] >= coord[1] &&
                    bbox[2] <= coord[2] &&
                    bbox[3] <= coord[3]
                );

                let isOverlapping = !(
                    bbox[2] < coord[0] + gap ||
                    bbox[0] > coord[2] - gap ||
                    bbox[3] < coord[1] + gap ||
                    bbox[1] > coord[3] - gap
                )
                return isFullyInside||isOverlapping
            },
            isMatchCoords(bbox, coords) {
                if (!coords || !coords.length) {
                    return false
                }

                const gap = 1

                return (
                    Math.abs(bbox[0] - coords[0]) <= gap &&
                    Math.abs(bbox[1] - coords[1]) <= gap &&
                    Math.abs(bbox[2] - coords[2]) <= gap &&
                    Math.abs(bbox[3] - coords[3]) <= gap
                )
            },
            A4ToBbox(bbox) {
                let imgWidth=this.ocr?.mst_template?.image?.width ?? 1;
                let imgHeight=this.ocr?.mst_template?.image?.height ?? 1;
                let [x1, y1, x2, y2] = bbox;

                const a4Width = this.ocr.mst_template.image.width*0.3155
                const a4Height = this.ocr.mst_template.image.height*0.3155
                
                const scaleX = imgWidth/a4Width
                const scaleY = imgHeight/a4Height

                x1 = Math.round(x1 * scaleX * 100) / 100;
                y1 = Math.round(y1 * scaleY * 100) / 100;
                x2 = Math.round(x2 * scaleX * 100) / 100;
                y2 = Math.round(y2 * scaleY * 100) / 100;

                return [x1, y1, x2, y2];
            },
            bboxToA4(bbox) {
                let imgWidth=this.ocr?.mst_template?.image?.width ?? 1;
                let imgHeight=this.ocr?.mst_template?.image?.height ?? 1;
                let [x1, y1, x2, y2] = bbox;
                
                
                const a4Width = this.ocr.mst_template.image.width*0.3155
                const a4Height = this.ocr.mst_template.image.height*0.3155

                const scaleX = a4Width / imgWidth;
                const scaleY = a4Height / imgHeight;

                x1 = Math.round(x1 * scaleX * 100) / 100;
                y1 = Math.round(y1 * scaleY * 100) / 100;
                x2 = Math.round(x2 * scaleX * 100) / 100;
                y2 = Math.round(y2 * scaleY * 100) / 100;

                return [x1, y1, x2, y2];
            },
            ocr_map_style_template(template_field){
                if (template_field.field_type == 1){
                    let col_idx=template_field.coordinate
                    let coord = template_field.rel_coordinate

                    json_field = this.ocr.json_data.ocr_cells.find(c => c.table && c.table.row_idx == 1 && c.table.col_idx == col_idx) || null;
                    if(!json_field) return
                    [x1,y1,x2,y2] = json_field.table.table_cell_bbox
                    if(coord){
                        if (Array.isArray(coord) && coord.length > 0) {
                            [x1,y1,x2,y2]=[coord[0]+x1,coord[1]+y1,coord[2]+x1,coord[3]+y1]
                        }
                    }
                    [x1, y1, x2, y2] = this.bboxToA4([x1, y1, x2, y2])
                    template_field.style={
                        left: x1,
                        top: y1,
                        width: x2 - x1,
                        height: y2 - y1
                    }
                }else{
                    const [x1, y1, x2, y2] = this.bboxToA4(template_field.coordinate)
                    template_field.style={
                        left: x1,
                        top: y1,
                        width: x2 - x1,
                        height: y2 - y1
                    }
                }
            },
            ocr_open_field(index){
                this.ocr_handler.field_selected=index

                document.removeEventListener("click", this._nextClickHandler);
                this._nextClickHandler = (e) => {
                    if (!e.target.matches(".ocr-field")) {
                        this.ocr_handler.field_selected = -1
                    }
                    document.removeEventListener("click", this._nextClickHandler);
                };
                setTimeout(() => {
                    document.addEventListener("click", this._nextClickHandler, { once: true });
                }, 0)
            },
            //===
            ocr_start_select(e){
                if(!!this.disable) return
                if (e.target.classList.contains('ocr-field-select') && e.target.tagName == 'SELECT')
                    return
                else if (this.ocr_handler.drag.selecting == 2)
                    this.ocr_handler.drag  = {coordinate:[0,0,0,0],selecting: -1}
                else  {
                    this.ocr_handler.drag.coordinate = [e.offsetX,e.offsetY,0,0]
                    this.ocr_handler.drag.selecting = 0
                }
            },
            ocr_move_select(e){
                if (this.ocr_handler.drag.selecting == 0 || this.ocr_handler.drag.selecting == 1) {

                    x1 = this.ocr_handler.drag.coordinate[0]
                    y1 = this.ocr_handler.drag.coordinate[1]
                    x2 = e.offsetX
                    y2 = e.offsetY
                    this.ocr_handler.drag.coordinate = [x1,y1,x2,y2]

                    this.ocr_handler.drag.selecting = 1

                }
            },
            ocr_end_select(e){
                let [x1, y1, x2, y2] = this.ocr_handler.drag.coordinate

                if ((Math.abs(x2-x1) < 5) && (Math.abs(y2-y1) < 5)) {this.ocr_handler.drag  = {coordinate:[0,0,0,0],selecting: -1}
                }else if (this.ocr_handler.drag.selecting == 1){
                    this.ocr_handler.drag.selecting = 2
                }else if (!e.target.matches(".ocr-field-select")) this.ocr_handler.drag  = {coordinate:[0,0,0,0],selecting: -1}
                
                this.ocr_handler.drag.coordinate = [
                    Math.min(x1, x2),
                    Math.min(y1, y2),
                    Math.max(x1, x2),
                    Math.max(y1, y2)
                ]
            },
            //===
            ocr_map_customer(e,ocr_field,coordinate={}){
                if(!!this.disable) return

                if(e.target.value==1){ 
                    this.ocr.mst_template.tpl_xy=undefined
                    this.ocr.mst_template.tpl_text=''
                    this.ocr.dt_template_field=[]
                    return 
                }
                if (coordinate && Object.keys(coordinate).length > 0){
                    coord = this.A4ToBbox(coordinate)
                    for (const json_field of this.ocr.json_data.ocr_cells) {
                        let bbox = json_field.bbox
                        if (this.ocr_isBoxInside(bbox,coord)){
                            ocr_field.text=(ocr_field.text??'')+json_field.text
                        }
                    }
                    ocr_field.bbox=coord
                    if(this.ocr.mst_template.option === undefined) this.ocr.mst_template.option={}
                    this.ocr.mst_template.option.drag_customer_template=1
                }
                this.ocr.mst_template.tpl_text=ocr_field.text
                this.ocr.mst_template.tpl_xy=ocr_field.bbox
                const [x1, y1, x2, y2] = this.bboxToA4(this.ocr.mst_template.tpl_xy)
                this.ocr.mst_template.style={
                    left: x1,
                    top: y1,
                    width: x2 - x1,
                    height: y2 - y1
                }
                window.opener.postMessage({type: 'mapping-customer',customer:ocr_field.text}, '*');
            },
            async ocr_map_field(mst_field,ocr_field,coordinate=undefined){
                if(!!this.disable) return

                this.ocr_handler.field_selected=-1
                if(!mst_field) return
                let template_field=this.ocr.dt_template_field.find(t => t.field_name === mst_field.field_name)
                if(!template_field){
                    template_field={
                        field_type:mst_field.field_type,
                        field_name:mst_field.field_name,
                    }
                    this.ocr.dt_template_field.push(template_field)
                }
                if(coordinate){
                    coord = this.A4ToBbox(coordinate)
                    let col_idx=undefined
                    let row_idx=undefined
                    let cell=undefined
                    for (const json_field of this.ocr.json_data.ocr_cells) {
                        let bbox = json_field.bbox
                        if (this.ocr_isBoxInside(bbox,coord)){
                            if(template_field.field_type==1){
                                if(!json_field.table) return
                                if(col_idx === undefined){
                                    col_idx=json_field.table.col_idx
                                }else{
                                    if(col_idx!=json_field.table.col_idx) continue
                                }
                                if(row_idx === undefined){
                                    row_idx=json_field.table.row_idx
                                }else{
                                    if(row_idx!=json_field.table.row_idx) continue
                                }
                                cell = json_field.table.table_cell_bbox
                            }else ocr_field.text=(ocr_field.text??'')+json_field.text
                        }
                    }
                    if(template_field.field_type==1){
                        if(col_idx === undefined || !cell) return
                        ocr_field.table= {col_idx: col_idx,
                            rel_bbox:[coord[0]-cell[0],coord[1]-cell[1],coord[2]-cell[0],coord[3]-cell[1]]
                        }
                    }else{
                        ocr_field.bbox=coord
                    }
                }
                if(template_field.field_type==1){
                    let texts=[]
                    for (const json_field of this.ocr.json_data.ocr_cells) {
                        if (!json_field.table) continue
                        if (this.ocr.tpl.option?.ignore_last_row && json_field.table.row_idx == this.ocr.json_data.tables[0].total_rows - 1) continue

                        let row_idx=json_field.table.row_idx
                        row_idx=row_idx-1
                        if (row_idx < 0) continue

                        if (ocr_field.table.rel_bbox&&json_field.table.rel_bbox) {
                            if (ocr_field.table.col_idx!=json_field.table.col_idx
                                ||!this.ocr_isBoxInside(json_field.table.rel_bbox,ocr_field.table.rel_bbox)) continue
                        }else{
                            if (json_field.table.col_idx != ocr_field.table.col_idx) continue
                        }
                        texts[row_idx]=(texts[row_idx]??'')+json_field.text
                    }
                    for (let page_num = 1; page_num < this.ocr.json_data.page_total; page_num++) {
                        count=texts.length
                        for (const json_field of this.ocr.json_data["page_"+page_num].ocr_cells) {
                            if (!json_field.table) continue
                            if (this.ocr.tpl.option?.ignore_last_row && json_field.table.row_idx == this.ocr.json_data.tables[0].total_rows - 1) continue

                            let row_idx=json_field.table.row_idx
                            row_idx=row_idx-1
                            if (row_idx < 0) continue
                            row_idx=row_idx+count

                            if (ocr_field.table.rel_bbox&&json_field.table.rel_bbox) {
                                if (ocr_field.table.col_idx!=json_field.table.col_idx
                                    ||!this.ocr_isBoxInside(json_field.table.rel_bbox,ocr_field.table.rel_bbox)) continue
                            }else{
                                if (json_field.table.col_idx != ocr_field.table.col_idx) continue
                            }
                            texts[row_idx]=(texts[row_idx]??'')+json_field.text
                        }
                    }
                    
                    template_field.coordinate=ocr_field.table.col_idx
                    template_field.rel_coordinate=ocr_field.table.rel_bbox
                    
                    window.opener.postMessage({type: 'mapping-field',template_field:template_field,text:texts}, '*');
                }else{
                    template_field.coordinate=ocr_field.bbox
                    window.opener.postMessage({type: 'mapping-field',template_field:template_field,text:ocr_field.text}, '*');
                }
                this.ocr_map_style_template(template_field)
            },
        }
    });
</script>