@php

$breadcrumbs = [

    'Quotation List' => url('/quotation_list'),

    'Quotation Scan' => ''

];

@endphp



@extends('layouts.master')



@section('title')

    Quotation Scan

@endsection



@section('style')

<style>

    .view-card {

        border-radius: 15px;

        border: none;

        background-color: #ffffff;

        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08) !important;

    }

    .info-row { margin-bottom: 12px; display: flex; align-items: flex-start; }

    .bg-total-section { background-color: #fcfaff; border-radius: 10px; padding: 20px; }

</style>

@endsection



@section('scripts')

    <script type="module" src="{{ asset('build/assets/app.js') }}"></script>

   

    {{--

      💡 หมายเหตุ:

      - หลังจากเปลี่ยนตรงนี้แล้ว ให้คุณสั่ง `npm run build` ที่เครื่องคอมพิวเตอร์ของคุณเอง (Local)

      - จากนั้นใช้ FileZilla ลากโฟลเดอร์ `public/build` จากเครื่องคุณ ไปอัปโหลดไว้ที่โฟลเดอร์ `public` บนเซิร์ฟเวอร์

      - หากชื่อไฟล์ในโฟลเดอร์ build/assets มีการแนบ Hash (เช่น app-C1b2D3f4.js) ให้คุณเปลี่ยนชื่อไฟล์นั้นในเซิร์ฟเวอร์เป็น `app.js` หรือเปลี่ยนในโค้ดบรรทัดด้านบนให้ชื่อตรงกันครับ

    --}}

@endsection



@section('content')

<section class="wrapper bg-light">

    <div class="container py-10">

        <div class="row">

            <div class="col-lg-10 mx-auto">

               

                <div class="d-flex justify-content-between align-items-center mb-5 no-print">

                    <div>

                        <h2 class="display-6 mb-0">Quotation Scan Setup</h2>

                    </div>

                    <a href="{{ url()->previous() }}" class="btn btn-outline-dark rounded-pill btn-sm">

                        <i class="uil uil-arrow-left"></i> Back

                    </a>

                </div>



                @if (session('error'))

                    <div class="alert alert-danger alert-dismissible fade show" role="alert">

                        <strong>เกิดข้อผิดพลาด!</strong> {{ session('error') }}

                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>

                    </div>

                @endif



                <div class="card view-card p-6 mb-6">

                    <form action="{{ url('/quotation_scan') }}" method="POST" enctype="multipart/form-data">

                        @csrf

                        <div class="form-group mb-3">

                            <label class="form-label font-weight-bold">กรุณาเลือกไฟล์ใบเสนอราคาเพื่อสแกนจับข้อมูล</label>

                            <input type="file" name="document" id="documentFile" class="form-control" required>

                        </div>

                        <button type="submit" class="btn btn-primary btn-sm rounded-pill" id="btnSubmit">

                            <i class="uil uil-scenery"></i> ส่งให้ AI เริ่มดึงข้อมูล

                        </button>

                    </form>

                </div>



                <div class="container-fluid">

                    <div class="row">

                        <div class="col-12">

                           

                            <div id="root-quotation-scan"></div>

                           

                        </div>

                    </div>

                </div>



                {{-- <div class="card view-card p-6" id="resultFormSection" style="{{ session('scanned_data') ? 'display: block;' : 'display: none;' }}">

                    <h3 class="mb-4 text-purple"><i class="uil uil-edit"></i> ผลการดึงข้อมูลเอกสาร (โปรดตรวจสอบและแก้ไขก่อนกดบันทึก)</h3>

                   

                    <form id="confirmAndSaveForm">

                        @csrf

                        <input type="hidden" name="scanned_file_name" id="scanned_file_name" value="{{ session('file_name') }}">



                        <div class="row g-4">

                            <div class="col-md-6">

                                <div class="form-group">

                                    <label class="form-label font-weight-bold">เลขที่ใบเสนอราคา</label>

                                    <input type="text" name="quotation_number" id="res_no" class="form-control" value="{{ session('scanned_data.quotation_number') }}" required>

                                </div>

                            </div>

                            <div class="col-md-6">

                                <div class="form-group">

                                    <label class="form-label font-weight-bold">วันที่ในเอกสาร</label>

                                    <input type="date" name="date" id="res_date" class="form-control" value="{{ session('scanned_data.date') }}" required>

                                </div>

                            </div>

                            <div class="col-12">

                                <div class="form-group">

                                    <label class="form-label font-weight-bold">ชื่อบริษัท / ผู้เสนอราคา</label>

                                    <input type="text" name="company_name" id="res_company" class="form-control" value="{{ session('scanned_data.company_name') }}" required>

                                </div>

                            </div>

                            <div class="col-12">

                                <div class="form-group">

                                    <label class="form-label font-weight-bold">ชื่อโครงการ / รายละเอียดงาน</label>

                                    <input type="text" name="project_name" id="res_project" class="form-control" value="{{ session('scanned_data.project_name') }}">

                                </div>

                            </div>

                        </div>



                        <hr class="my-5">



                        <div class="row g-3 justify-content-end bg-total-section">

                            <div class="col-md-4">

                                <div class="form-group">

                                    <label class="form-label font-weight-bold">ยอดรวมก่อนภาษี/ส่วนลด (Sub-total)</label>

                                    <input type="number" step="0.01" name="sub_total" id="res_sub_total" class="form-control text-end" value="{{ session('scanned_data.sub_total') }}">

                                </div>

                            </div>

                            <div class="col-md-4">

                                <div class="form-group">

                                    <label class="form-label font-weight-bold">ส่วนลด (Discount)</label>

                                    <input type="number" step="0.01" name="discount" id="res_discount" class="form-control text-end" value="{{ session('scanned_data.discount') }}">

                                </div>

                            </div>

                            <div class="col-md-4">

                                <div class="form-group">

                                    <label class="form-label font-weight-bold">ยอดเงินรวมสุทธิ (Grand Total)</label>

                                    <input type="number" step="0.01" name="grand_total" id="res_total" class="form-control text-end font-weight-bold border-primary" value="{{ session('scanned_data.grand_total') }}" required>

                                </div>

                            </div>

                        </div>



                        <div class="d-flex justify-content-end mt-5">

                            <button type="button" class="btn btn-outline-secondary me-2 rounded-pill btn-sm" onclick="window.location.reload();">ล้างข้อมูล</button>

                            <button type="submit" class="btn btn-success btn-green rounded-pill btn-sm" id="btnSaveDB">

                                <i class="uil uil-save"></i> ยืนยันข้อมูลถูกต้อง บันทึกเข้าระบบ

                            </button>

                        </div>

                    </form>

                </div> --}}



            </div>

        </div>

    </div>

</section>

@endsection



@section('script')

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<script>

$(document).ready(function() {



    // เมื่อหน้าเว็บโหลดเสร็จ และตรวจพบว่ามีข้อมูลสแกนส่งกลับมา ให้เลื่อนหน้าจอลงไปที่ฟอร์มด้านล่างอัตโนมัติ

    @if(session('scanned_data'))

        $('html, body').animate({

            scrollTop: $("#resultFormSection").offset().top - 30

        }, 600);

       

        Swal.fire({

            icon: 'success',

            title: 'สแกนสำเร็จ',

            text: 'คัดแยกข้อมูลด้วย AI ลงแบบฟอร์มเรียบร้อยแล้ว',

            timer: 3000,

            showConfirmButton: false

        });

    @endif



    // สคริปต์เปลี่ยนสถานะปุ่มตอนกด Submit ฟอร์มปกติ เพื่อป้องกันการกดซ้ำ

    $('form').on('submit', function() {

        if ($(this).attr('id') !== 'confirmAndSaveForm') {

            $('#btnSubmit').text('กำลังส่งไฟล์และประมวลผลด้วย AI...').prop('disabled', true);

        }

    });



    // ส่วนการทำงานที่ 2: กดส่งชุดข้อมูลที่ตรวจสอบแล้วเพื่อบันทึกจริงลงฐานข้อมูล (ใช้ AJAX เดิมของคุณ)

    $('#confirmAndSaveForm').on('submit', function(e) {

        e.preventDefault();

       

        let formData = $(this).serialize();

        $('#btnSaveDB').text('กำลังบันทึกข้อมูล...').prop('disabled', true);

       

        $.ajax({

            url: '/quotation_store_scanned',

            type: 'POST',

            data: formData,

            success: function(response) {

                if(response.success) {

                    Swal.fire({

                        icon: 'success',

                        title: 'สำเร็จ!',

                        text: response.message,

                        confirmButtonText: 'ตกลง'

                    }).then((result) => {

                        window.location.href = '/quotation_list';

                    });

                } else {

                    Swal.fire({ icon: 'error', title: 'ผิดพลาด', text: response.message });

                    $('#btnSaveDB').html('<i class="uil uil-save"></i> ยืนยันข้อมูลถูกต้อง บันทึกเข้าระบบ').prop('disabled', false);

                }

            },

            error: function() {

                Swal.fire({ icon: 'error', title: 'ผิดพลาด', text: 'ไม่สามารถบันทึกข้อมูลได้ กรุณาลองใหมี่อีกครั้ง' });

                $('#btnSaveDB').html('<i class="uil uil-save"></i> ยืนยันข้อมูลถูกต้อง บันทึกเข้าระบบ').prop('disabled', false);

            }

        });

    });



});

</script>

@endsection