| Server IP : 43.241.58.20 / Your IP : 216.73.216.25 Web Server : Apache/2 System : Linux ns1-1556229.dragonhispeed.com 3.16.0 #1 SMP Fri Mar 29 22:50:14 MSK 2024 x86_64 User : ratsitne ( 1130) PHP Version : 5.6.40 Disable Function : exec,system,passthru,shell_exec,proc_close,proc_open,dl,popen,show_source,posix_kill,posix_mkfifo,posix_getpwuid,posix_setpgid,posix_setsid,posix_setuid,posix_setgid,posix_seteuid,posix_setegid,posix_uname MySQL : ON | cURL : ON | WGET : OFF | Perl : OFF | Python : OFF | Sudo : OFF | Pkexec : OFF Directory : /home/ratsitne/.trash/files/admin.1/ |
Upload File : |
<div id="invoice-app">
<form method="POST" id="invoice-form" @submit.prevent="validateAndSubmit">
<div class="card">
<div class="card-header">
<h3 class="card-title">เพิ่มใบกำกับภาษี/ใบเสร็จรับเงิน</h3>
</div>
<div class="card-body">
<div v-if="loading" class="d-flex justify-content-center my-5">
<div class="spinner-border text-primary" role="status">
<span class="visually-hidden">กำลังโหลด...</span>
</div>
</div>
<template v-if="!loading">
<!-- Success message (Ajax response) -->
<div v-if="formSuccess" class="alert alert-success alert-dismissible fade show">
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
<i class="bi bi-check-circle me-1"></i>
{{ formSuccess }}
</div>
<!-- Error message (Ajax response) -->
<div v-if="formError" class="alert alert-danger alert-dismissible fade show">
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
<i class="bi bi-exclamation-triangle me-1"></i>
{{ formError }}
</div>
<div class="row">
<div class="col-md-8">
<div class="card">
<div class="card-header">
<h5 class="card-title">ข้อมูลลูกค้า</h5>
</div>
<div class="card-body">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="customer_id">เลือกลูกค้า</label>
<div class="input-group">
<input type="hidden" name="customer_id" id="customer_id" v-model="invoice.customer_id">
<input type="text" class="form-control" v-model="invoice.customer_name" readonly placeholder="คลิกที่ปุ่มเพื่อเลือกลูกค้า">
<button type="button" class="btn btn-primary" @click="openCustomerModal">
<i class="bi bi-search"></i> ค้นหาลูกค้า
</button>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="customer_name">ชื่อลูกค้า/บริษัท</label>
<input type="text" name="customer_name" id="customer_name" class="form-control" v-model="invoice.customer_name" readonly required>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="customer_taxid">เลขประจำตัวผู้เสียภาษี</label>
<input type="text" name="customer_taxid" id="customer_taxid" class="form-control" v-model="invoice.customer_taxid">
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="customer_tel">เบอร์โทรศัพท์</label>
<input type="text" name="customer_tel" id="customer_tel" class="form-control" v-model="invoice.customer_tel">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="customer_email">อีเมล</label>
<input type="email" name="customer_email" id="customer_email" class="form-control" v-model="invoice.customer_email">
</div>
</div>
</div>
<div class="form-group">
<label for="customer_address">ที่อยู่</label>
<textarea name="customer_address" id="customer_address" class="form-control" rows="3" v-model="invoice.customer_address"></textarea>
</div>
<div class="form-group">
<label for="customer_branch">สำนักงาน/สาขา</label>
<input type="text" name="customer_branch" id="customer_branch" class="form-control" v-model="invoice.customer_branch">
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<div class="card-header">
<h5 class="card-title">ข้อมูลเอกสาร</h5>
</div>
<div class="card-body">
<div class="form-group">
<label for="document_no">เลขที่เอกสาร</label>
<div class="input-group">
<input type="text" name="document_no" id="document_no" class="form-control" v-model="invoice.document_no" :readonly="isEditMode || !manualDocumentNo">
<div class="input-group-append">
<div class="input-group-text">
<input type="checkbox" id="enable_manual_no" class="me-1" v-model="manualDocumentNo" :disabled="isEditMode">
<label for="enable_manual_no" class="mb-0">กำหนดเอง</label>
</div>
</div>
</div>
</div>
<div class="form-group">
<label for="document_date">วันที่เอกสาร</label>
<input type="text" name="document_date" id="document_date" class="form-control datepicker" v-model="invoice.document_date" required>
</div>
<div class="form-group">
<label for="due_date">วันครบกำหนด</label>
<input type="text" name="due_date" id="due_date" class="form-control datepicker" v-model="invoice.due_date">
</div>
<div class="form-group">
<label for="document_reference">เอกสารอ้างอิง</label>
<input type="text" name="document_reference" id="document_reference" class="form-control" v-model="invoice.document_reference">
</div>
</div>
</div>
</div>
</div>
<div class="card mt-3">
<div class="card-header">
<h5 class="card-title">รายการสินค้า</h5>
</div>
<div class="card-body">
<div class="table-responsive">
<table class="table table-bordered" id="product-table">
<thead>
<tr>
<th style="width: 50px;">#</th>
<th style="width: 400px;">รายการ</th>
<th>รายละเอียด</th>
<th class="text-end" style="width: 80px;">จำนวน</th>
<th class="text-end" style="width: 100px;">ราคา</th>
<th class="text-end" style="width: 150px;">รวม</th>
<th style="width: 70px;">ลบ</th>
</tr>
</thead>
<tbody>
<tr class="product-row" v-for="(item, index) in items" :key="item.id">
<td>{{ index + 1 }}</td>
<td>
<div class="input-group">
<input type="hidden" :name="'product_id['+index+']'" v-model="item.product_id">
<input type="text" class="form-control" v-model="item.product_name" readonly placeholder="คลิกที่ปุ่มเพื่อเลือกสินค้า">
<button type="button" class="btn btn-primary" @click="openProductModal(index)">
<i class="bi bi-search"></i> ค้นหา
</button>
</div>
</td>
<td>
<textarea :name="'product_description['+index+']'" class="form-control" v-model="item.product_description" rows="1" placeholder="รายละเอียดเพิ่มเติม ระบุหรือไม่ก็ได้"></textarea>
</td>
<td>
<input type="number" :name="'quantity['+index+']'" class="form-control text-end" v-model.number="item.quantity" @input="updateRowTotal(index)" min="1" required>
</td>
<td>
<input type="number" :name="'price['+index+']'" class="form-control text-end" v-model.number="item.price" @input="updateRowTotal(index)" step="0.01" min="0" required>
</td>
<td>
<input type="number" :name="'total['+index+']'" class="form-control text-end" v-model.number="item.total" step="0.01" readonly>
</td>
<td>
<button type="button" class="btn btn-danger" @click="removeProductRow(index)"><i class="bi bi-trash"></i></button>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="6">
<button type="button" class="btn btn-success" @click="addProductRow"><i class="bi bi-plus-circle me-1"></i>เพิ่มรายการ</button>
</td>
</tr>
</tfoot>
</table>
</div>
<div class="row mt-3">
<div class="col-md-6">
<div class="form-group">
<label for="notes">หมายเหตุ</label>
<textarea name="notes" id="notes" class="form-control" rows="3" v-model="invoice.notes"></textarea>
</div>
</div>
<div class="col-md-6">
<div class="card">
<div class="card-body">
<div class="form-group row">
<label class="col-sm-6 col-form-label text-end">มูลค่ารวมก่อนภาษี:</label>
<div class="col-sm-6">
<input type="hidden" name="subtotal" id="subtotal" v-model.number="invoice.subtotal">
<div class="text-end fw-bold text-dark group-total">{{ formatNumber(invoice.subtotal) }}</div>
</div>
</div>
<div class="form-group row">
<label class="col-sm-6 col-form-label text-end">ส่วนลด:</label>
<div class="col-sm-6">
<input type="number" name="discount" id="discount" class="form-control text-end" step="0.01" v-model.number="invoice.discount">
</div>
</div>
<div class="form-group row">
<label class="col-sm-6 col-form-label text-end">ประเภทภาษี:</label>
<div class="col-sm-6">
<select name="vat_type" id="vat_type" class="form-select" v-model="invoice.vat_type">
<option value="included">รวมภาษีมูลค่าเพิ่ม</option>
<option value="excluded">แยกภาษีมูลค่าเพิ่ม</option>
<option value="none">ไม่มีภาษีมูลค่าเพิ่ม</option>
</select>
</div>
</div>
<div class="form-group row" v-show="invoice.vat_type !== 'none'">
<label class="col-sm-6 col-form-label text-end">ภาษีมูลค่าเพิ่ม (%):</label>
<div class="col-sm-6">
<input type="number" name="vat_rate" id="vat_rate" class="form-control text-end" step="0.01" v-model.number="invoice.vat_rate">
</div>
</div>
<div class="form-group row" v-show="invoice.vat_type !== 'none'">
<label class="col-sm-6 col-form-label text-end">ภาษีมูลค่าเพิ่ม:</label>
<div class="col-sm-6">
<input type="hidden" name="vat" id="vat" v-model.number="invoice.vat">
<div class="text-end fw-bold text-dark group-total">{{ formatNumber(invoice.vat) }}</div>
</div>
</div>
<div class="form-group row">
<label class="col-sm-6 col-form-label text-end fw-bold">ยอดรวมทั้งสิ้น:</label>
<div class="col-sm-6">
<input type="hidden" name="grand_total" id="grand_total" v-model.number="invoice.grand_total">
<div class="text-end fw-bold group-total">{{ formatNumber(invoice.grand_total) }}</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
</div>
<div class="card-footer">
<button type="submit" class="btn btn-primary me-2" :disabled="submitting">
<span v-if="submitting" class="spinner-border spinner-border-sm me-1" role="status" aria-hidden="true"></span>
<i v-else class="bi bi-floppy me-1"></i>
{{ submitting ? 'กำลังบันทึก...' : 'บันทึกข้อมูล' }}
</button>
<a href="<?php echo $admin_url . '/invoice-list.php'; ?>" class="btn btn-secondary">ย้อนกลับ</a>
</div>
</div>
</form>
<!-- Customer Selection Modal -->
<div class="modal fade" id="customerModal" tabindex="-1" aria-labelledby="customerModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="customerModalLabel">เลือกลูกค้า</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="row mb-3">
<div class="col-md-8">
<div class="input-group">
<input type="text" class="form-control" v-model="customerSearch" placeholder="ค้นหาชื่อลูกค้า, เลขประจำตัวผู้เสียภาษี">
<button class="btn btn-outline-secondary" type="button" @click="searchCustomers">
<i class="bi bi-search"></i> ค้นหา
</button>
</div>
</div>
</div>
<div class="table-responsive">
<div v-if="isLoading" class="text-center p-4">
<div class="spinner-border text-primary" role="status">
<span class="visually-hidden">กำลังโหลด...</span>
</div>
<p class="mt-2">กำลังโหลดข้อมูล...</p>
</div>
<table class="table table-bordered table-striped" v-else>
<thead>
<tr>
<th>ชื่อบริษัท</th>
<th>ชื่อติดต่อ</th>
<th>เลขประจำตัวผู้เสียภาษี</th>
<th>จัดการ</th>
</tr>
</thead>
<tbody>
<tr v-if="customers.length === 0">
<td colspan="5" class="text-center">ไม่พบข้อมูลลูกค้า</td>
</tr>
<tr v-for="customer in customers" :key="customer.id">
<td>{{ customer.company_name }}</td>
<td>{{ customer.contact_name }}</td>
<td>{{ customer.tax_id }}</td>
<td>
<button type="button" class="btn btn-primary btn-sm" @click="selectCustomerFromModal(customer)">
<i class="bi bi-check-circle"></i> เลือก
</button>
</td>
</tr>
</tbody>
</table>
</div>
<div class="row" v-if="customers.length > 0">
<div class="col-md-6">
<p>แสดง {{ (currentPage - 1) * perPage + 1 }}-{{ Math.min(currentPage * perPage, totalCustomers) }} จาก {{ totalCustomers }} รายการ</p>
</div>
<div class="col-md-6">
<nav aria-label="Page navigation">
<ul class="pagination justify-content-end">
<li class="page-item" :class="{ disabled: currentPage === 1 }">
<a class="page-link" href="#" @click.prevent="changePage(currentPage - 1)">ก่อนหน้า</a>
</li>
<li v-for="page in totalPages" :key="page" class="page-item" :class="{ active: currentPage === page }">
<a class="page-link" href="#" @click.prevent="changePage(page)">{{ page }}</a>
</li>
<li class="page-item" :class="{ disabled: currentPage === totalPages || totalPages === 0 }">
<a class="page-link" href="#" @click.prevent="changePage(currentPage + 1)">ถัดไป</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">ปิด</button>
</div>
</div>
</div>
</div>
<!-- Product Selection Modal -->
<div class="modal fade" id="productModal" tabindex="-1" aria-labelledby="productModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="productModalLabel">เลือกสินค้า</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="row mb-3">
<div class="col-md-8">
<div class="input-group">
<input type="text" class="form-control" v-model="productSearch" placeholder="ค้นหาชื่อสินค้า, รหัสสินค้า">
<button class="btn btn-primary" type="button" @click="searchProducts">
<i class="bi bi-search"></i> ค้นหา
</button>
</div>
</div>
<div class="col-md-4">
<select class="form-select" v-model="productCategoryFilter">
<option value="">-- ทุกหมวดหมู่ --</option>
<option v-for="category in categories" :key="category.id" :value="category.id">{{ category.category_name }}</option>
</select>
</div>
</div>
<div class="table-responsive">
<div v-if="productLoading" class="text-center p-4">
<div class="spinner-border text-primary" role="status">
<span class="visually-hidden">กำลังโหลด...</span>
</div>
<p class="mt-2">กำลังโหลดข้อมูล...</p>
</div>
<table class="table table-bordered table-striped" v-else>
<thead>
<tr>
<th>รหัสสินค้า</th>
<th>ชื่อสินค้า</th>
<th>หมวดหมู่</th>
<th>ราคาขาย</th>
<th>จัดการ</th>
</tr>
</thead>
<tbody>
<tr v-if="filteredProducts.length === 0">
<td colspan="5" class="text-center">ไม่พบข้อมูลสินค้า</td>
</tr>
<tr v-for="product in filteredProducts" :key="product.id">
<td>{{ product.sku }}</td>
<td>{{ product.name }}</td>
<td>{{ product.category_name }}</td>
<td>{{ product.sale_price }}</td>
<td>
<button type="button" class="btn btn-primary btn-sm" @click="selectProductFromModal(product)">
<i class="bi bi-check-circle"></i> เลือก
</button>
</td>
</tr>
</tbody>
</table>
</div>
<div class="row" v-if="filteredProducts.length > 0">
<div class="col-md-6">
<p>แสดง {{ (productCurrentPage - 1) * productPerPage + 1 }}-{{ Math.min(productCurrentPage * productPerPage, totalProducts) }} จาก {{ totalProducts }} รายการ</p>
</div>
<div class="col-md-6">
<nav aria-label="Page navigation">
<ul class="pagination justify-content-end">
<li class="page-item" :class="{ disabled: productCurrentPage === 1 }">
<a class="page-link" href="#" @click.prevent="changeProductPage(productCurrentPage - 1)">ก่อนหน้า</a>
</li>
<li v-for="page in productTotalPages" :key="page" class="page-item" :class="{ active: productCurrentPage === page }">
<a class="page-link" href="#" @click.prevent="changeProductPage(page)">{{ page }}</a>
</li>
<li class="page-item" :class="{ disabled: productCurrentPage === productTotalPages || productTotalPages === 0 }">
<a class="page-link" href="#" @click.prevent="changeProductPage(productCurrentPage + 1)">ถัดไป</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">ปิด</button>
</div>
</div>
</div>
</div>
</div>