@extends('template.layouts.template-base')
@section('title', 'Invoice - Pdf')

@section('styles')
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css"
    />
<style>
  .page-content{
    /* background-color:#F0F4F8!important; */
    padding: 80px 10px;
  }

      .invoice-wrapper {
        max-width: 900px;
        margin: 0 auto;
        background-color: white;
        border: 2px solid #000;
        padding: 0;
      }

      /* Header Section */
      .header-section {
        padding: 20px;
        border-bottom: 2px solid #000;
      }

      .header-table {
        width: 100%;
        border-collapse: collapse;
      }

      .company-logo {
        width: 150px;
      }

      .company-info {
        text-align: right;
      }

      .company-name {
        color:#0040a0;
        font-size: 20px;
        font-weight: bold;
        margin-bottom: 5px;
      }

      .company-address {
        font-size: 11px;
        line-height: 1.5;
        color: #000;
      }

      /* Bill To / Ship To Section */
      .address-section {
        width: 100%;
        border-collapse: collapse;
      }

      .address-section td {
        padding: 10px;
        vertical-align: top;
        border-right: 1px solid #000;
        border-top: 1px solid transparent;
        border-bottom: 1px solid transparent;
        border-left: 1px solid transparent;
        font-size: 12px;
        line-height: 1.6;
      }

      .address-title {
        font-weight: bold;
        margin-bottom: 10px;
        display: block;
      }

      .customer-info-box {
        border-bottom: 1px solid #e7e7e7;
      }
        .table-row-bg{
         background-color: #F1F5F9;
        }
      .info-row {
        margin-bottom: 5px;
      }

      /* Product Table */
      .product-table {
        width: 100%;
        border-collapse: collapse;
        margin-top: 0;
      }

      .product-table th {
        background-color: #F1F5F9;
        padding: 12px 8px;
        text-align: left;
        font-size: 13px;
        font-weight: bold;
        border: 1px solid #000;
      }

      .product-table td {
        padding: 10px 8px;
        font-size: 13px;
        border: 1px solid #000;
        vertical-align: top;
      }

      .product-table .product-row-item {
        height: 250px;
      }

      .text-center {
        text-align: center;
      }

      .text-right {
        text-align: right;
      }

      .totals-row td {
        font-weight: bold;
        padding: 12px 8px;
      }

      .total-final {
        background-color: white;
        font-weight: bold;
        font-size: 14px;
      }

      /* Amount in Words */
      .amount-words {
        padding: 15px;
        border: 1px solid #000;
        border-top: none;
      }

      .amount-words-title {
        font-size: 12px;
        margin-bottom: 5px;
      }

      .amount-words-text {
        font-size: 13px;
        font-weight: 500;
      }

      /* Bank and Price Details */
      .details-section {
        width: 100%;
        border-collapse: collapse;
      }

      .details-section td {
        padding: 15px;
        border: 1px solid #000;
        border-top: none;
        vertical-align: top;
        font-size: 13px;
      }

      .section-title {
        font-weight: bold;
        font-size: 14px;
        /* margin-bottom: 10px; */
        display: block;
      }

      .detail-row {
        margin-bottom: 8px;
        line-height: 1.8;
      }

      .detail-label {
        display: inline-block;
        width: 180px;
      }

      .detail-value {
        display: inline-block;
      }

      /* Terms and Notes Section */
      .footer-section {
        width: 100%;
        border-collapse: collapse;
      }

      .footer-section td {
        padding: 12px 8px;
        border: 1px solid #000;
        border-top: none;
        vertical-align: top;
        font-size: 12px;
      }

      .footer-section ul {
        margin-left: 20px;
        margin-top: 10px;
      }

      .footer-section li {
        margin-bottom: 8px;
        line-height: 1.5;
      }

      /* Signature Section */
      .signature-section {
        padding: 20px 15px;
        text-align: right;
      }

      .signature-text {
        text-align: center;
        font-size: 12px;
        margin-bottom: 50px;
      }

      .signature-line {
        margin-top: 10px;
      }

      .signature-label {
        font-size: 12px;
        display: inline-block;
        margin-right: 100px;
      }

      .date-label {
        font-size: 12px;
        display: inline-block;
      }

      .details-section .price-desc-sec  td{
        padding: 0px !important;
      }
      .price-desc-sec .detail-row{
             padding: 0px !important;
      }
      .price-desc-sec .detail-row:not(:last-child){
        border-bottom: 1px solid #000;

      }
      .authorized-sign{
        width:150px;
        display: flex;
        align-items: center;
        margin: 0 auto;
      }
</style>
@endsection

@section('content')
  <div class="invoice-wrapper">
      <!-- Header Section -->
      <div class="header-section">
        <table class="header-table">
          <tr>
            <td style="width: 200px">
                       <img
               src="{{ asset('assets/template/images/logo.jpg') }}"
                  alt="Cattle Feed"
                  class="invoice-logo"
                />
            </td>
            <td class="company-info">
              <div class="company-name">Annapurna Cattle Feeds</div>
              <div class="company-address">
                1st Floor 4/127/4, VW Complex, Salem Road,<br />
                Namakkal - 637 001, TamilNadu.<br />
                Ph: 73958 30836<br />
                Email: shanmugapoultry2021@gmail.com
              </div>
            </td>
          </tr>
        </table>
      </div>

      <!-- Bill To / Ship To / Customer Info Section -->
      <table class="address-section">
        <tr>
          <td style="width: 33.33%">
            <span class="address-title">Bill To</span>
            Annapurna Cattle Feeds,<br />
            12/34, ABC Street, Ganapathy Post, Coimbatore,<br />
            India 123 456.<br />
            Ph: +91 1234567890<br />
            Email: customerx@gmail.com<br />
            GSITIN : A8716227365111O
          </td>
          <td style="width: 33.33%">
            <span class="address-title">Ship To</span>
            Cloudi5 Technologies,<br />
            12/34, ABC Street, Ganapathy Post, Coimbatore,<br />
            India 123 456.<br />
            Ph: +91 1234567890<br />
            Email: customerx@gmail.com<br />
            GSITIN : A8716227365111O
          </td>
          <td style="width: 33.33%">
            <div class="info-row">
              <strong>Customer Name</strong>
            </div>
            <div class="customer-info-box">Customer X</div>
            <div class="info-row" style="margin-top: 15px">
              <strong>Invoice ID</strong>
            </div>
            <div class="customer-info-box">IID001</div>
            <div class="info-row" style="margin-top: 15px">
              <strong>Invoice Date</strong>
            </div>
            <div class="customer-info-box">00/00/0000</div>
          </td>
        </tr>
      </table>

      <!-- Product Details Table -->
      <table class="product-table">
        <thead>
          <tr>
            <th style="width: 5%">S. No</th>
            <th style="width: 20%">Product Name</th>
            <th style="width: 10%">HSN</th>
            <th style="width: 8%">Kgs</th>
            <th style="width: 12%">Price</th>
            <th style="width: 8%">Quantity</th>
            <th style="width: 12%">Taxable Value</th>
            <th style="width: 8%">GST</th>
            <th style="width: 12%">Amount</th>
          </tr>
        </thead>
        <tbody>
          <tr class="product-row-item">
            <td class="text-center">1</td>
            <td>Product XYZ</td>
            <td class="text-center">ABC123</td>
            <td class="text-center">50</td>
            <td class="text-right">₹1,50,000</td>
            <td class="text-center">3</td>
            <td class="text-right">₹4,50,000</td>
            <td class="text-center">9%</td>
            <td class="text-right">₹4,77,900</td>
          </tr>
          <tr class="totals-row">
            <td colspan="5"></td>
            <td class="text-right">Sub Total :</td>
            <td class="text-center">3</td>
            <td class="text-right">₹4,50,000</td>
            <td class="text-right">₹4,77,900</td>
          </tr>

          <tr class="totals-row">
            <td colspan="8" class="text-right">X Charges :</td>
            <td class="text-right">₹600</td>
          </tr>
          <tr class="total-final">
            <td colspan="8" class="text-right" style="font-size: 15px">
              <strong>Total :</strong>
            </td>
            <td class="text-right" style="font-size: 15px">
              <strong>₹4,78,000</strong>
            </td>
          </tr>
        </tbody>
      </table>

      <!-- Amount in Words -->
      <div class="amount-words">
        <div class="amount-words-title">Amount Chargeable (in words)</div>
        <div class="amount-words-text">
          Four Lakh Seventy Eight Thousand Only
        </div>
      </div>

      <!-- Bank Details and Price Details -->
      <table class="details-section">
        <thead>
            <tr class="table-row-bg">
                <td>  <span class="section-title">Bank Details</span></td>
                <td>  <span class="section-title">Price Details</span></td>
            </tr>
        </thead>
        <tbody>

        <tr>
          <td style="width: 50%">

            <div class="detail-row">
              <span class="detail-label">Account Holder Name</span>
              <span class="detail-value">: Annapurna Private Ltd</span>
            </div>
            <div class="detail-row">
              <span class="detail-label">Bank Name</span>
              <span class="detail-value">: Bank X</span>
            </div>
            <div class="detail-row">
              <span class="detail-label">Branch Name</span>
              <span class="detail-value">: Branch X</span>
            </div>
            <div class="detail-row">
              <span class="detail-label">Account Number</span>
              <span class="detail-value">: 120120939182O901</span>
            </div>
            <div class="detail-row">
              <span class="detail-label">IFSC Code</span>
              <span class="detail-value">: BX001672</span>
            </div>
          </td>
          <td style="width: 50%" class="price-desc-sec">

            <div class="detail-row">
              <span class="detail-label">Taxable Amount</span>
              <span class="detail-value">: ₹4,05,000</span>
            </div>
            <div class="detail-row">
              <span class="detail-label">GST</span>
              <span class="detail-value">: 9%</span>
            </div>
            <div class="detail-row">
              <span class="detail-label">Total Tax Amount</span>
              <span class="detail-value">: ₹22,900</span>
            </div>
            <div class="detail-row">
              <span class="detail-label"><strong>Total Amount</strong></span>
              <span class="detail-value"><strong>: ₹4,78,000</strong></span>
            </div>
          </td>
        </tr>

        </tbody>
      </table>

      <!-- Terms and Notes -->
      <table class="footer-section">
        <tr>
          <td style="width: 50%">
            <span class="section-title">Terms of Instructions</span>
            <ul>
              <li>
                Delivery terms: 2-4 WEEKS from the date of your Purchase order
                along with PAYMENT IMMEDIATE 100%
              </li>
              <li>
                Mode Of Delivery : By Road thru your nominated Transporter on
                To-Pay Basis
              </li>
              <li>
                Pricing Terms: Valid for 2 Weeks and please note price will vary
                depends market rate.
              </li>
              <li>Insurance : To be covered by customer</li>
              <li>Payment Terms : 100 % advance payment along with PO</li>
              <li>All disputes subject to Coimbatore Jurisdiction only.</li>
            </ul>
          </td>
          <td style="width: 50%">
            <span class="section-title">Notes</span>
            <div
              style="
                height: 100px;
                padding: 10px;
                border-bottom:1px solid #000;
                margin-top: 10px;
              "
            ></div>
            <div class="signature-section">
              <div class="signature-text">For Annapurna Cattle Feeds</div>
              <div style="height: 60px; margin-bottom: 10px">
                        <img
               src="{{ asset('assets/template/images/signature.png') }}"
                  alt="Cattle Feed"
                  class="authorized-sign"
                />
              </div>
              <div class="signature-line">
                <span class="signature-label">(Authorized Signature)</span>
                <span class="date-label">Date: 00/00/0000</span>
              </div>
            </div>
          </td>
        </tr>
      </table>
    </div>

@endsection


@section('scripts')


@endsection