@extends('layouts.app')

@section('content')
    <div class="page-content">
        <div class="container-fluid">
            @include('layouts.partials.breadcrumb', ['title' => $title])

            <div class="row justify-content-center">
                <div class="col-xxl-9">
                    <div class="card" id="demo">
                        <div class="row">
                            <div class="col-lg-12">
                                <div class="card-header border-bottom-dashed p-4 ribbon-box border shadow-none right mb-lg-0">
                                    <x-ribbon :status="$estimate->approval_status"/>
                                    <div class="d-flex mt-4">
                                        <div class="flex-grow-1">
                                            <img src="{{ asset('assets/images/logo-dark.png') }}"
                                                class="card-logo card-logo-dark" alt="logo dark" height="17">
                                            <img src="{{ asset('assets/images/logo-light.png') }}"
                                                class="card-logo card-logo-light" alt="logo light" height="17">
                                            <div class="mt-sm-5 mt-4">
                                                <h6 class="text-muted text-uppercase fw-semibold">Address</h6>
                                                <p class="text-muted mb-1" id="address-details">California, United States
                                                </p>
                                                <p class="text-muted mb-0" id="zip-code"><span>Zip-code:</span> 90201</p>
                                            </div>
                                        </div>
                                        <div class="flex-shrink-0 mt-sm-0 mt-3">
                                            <h6><span class="text-muted fw-normal">Estimate No: </span><span
                                                    id="legal-register-no">{{$estimate->estimate_no}}</span></h6>
                                            <h6><span class="text-muted fw-normal">Date: </span><span
                                                    id="email">{{ $estimate->date->format('Y-m-d') }}</span></h6>

                                        </div>
                                    </div>
                                </div>
                                <!--end card-header-->
                            </div><!--end col-->


                            <div class="col-lg-12">
                                <div class="card-body p-4 border-top border-top-dashed">
                                    <div class="row g-3">
                                        <div class="col-4">
                                            <fieldset class="border-2 text-muted">
                                                <legend>
                                                    <h6 class="text-dark">To,</h6>
                                                </legend>
                                                <p class="fw-medium text-uppercase mb-2" id="billing-name">
                                                    {{ $estimate->customer?->customer_name ?? 'N/A' }}</p>
                                                <p class="text-muted mb-1 text-uppercase" id="billing-address-line-1">
                                                    {{ $estimate->customer?->address ?? 'N/A' }}</p>
                                                <p class="text-muted mb-1"><span>Phone: </span><span
                                                        id="billing-phone-no">{{ $estimate->customer?->phone ?? 'N/A' }}</span>
                                                </p>

                                                <div class="px-3 py-2 border border-1 border-dark m-2">
                                                    <p class="text-dark text-bold mb-0 text-uppercase"><span>Client Pan:
                                                        </span><span
                                                            id="billing-tax-no">{{ $estimate->customer?->company_pan ?? 'N/A' }}</span>
                                                    </p>
                                                </div>

                                            </fieldset>
                                        </div>
                                        <!--end col-->

                                    </div>
                                    <!--end row-->
                                </div>
                                <!--end card-body-->
                            </div><!--end col-->
                            <div class="col-lg-12">
                                <div class="card-body p-4">
                                    <div class="table-reponsive">
                                        <table class="table table-bordered table-nowrap text-center align-middle mb-0">
                                            <thead>
                                                <tr class="table-active">
                                                    <th scope="col" style="width: 50px;">#</th>
                                                    <th scope="col" width=30%>Description</th>
                                                    <th scope="col" width=20%>Narration</th>
                                                    <th scope="col">Qty</th>
                                                    <th scope="col">Rate</th>
                                                    <th scope="col">Non Taxable</th>
                                                    <th scope="col" class="text-center">Taxable</th>
                                                </tr>
                                            </thead>

                                            <tbody id="products-list">
                                                @if ($estimate->estimateDetails->isNotEmpty())
                                                    @foreach ($estimate->estimateDetails as $index => $item)
                                                        <tr>
                                                            <th scope="row">{{ $index + 1 }}</th>
                                                            <td class="text-center">
                                                                <span class="fw-medium"></span>
                                                                <p class="text-muted mb-0">
                                                                    {{ $item->billingComponent?->title ?? 'N/A' }}</p>
                                                            </td>
                                                            <td>{{ $item->billingComponent?->unit }}</td>
                                                            <td>{{ $item->qty }}</td>
                                                            <td class="text-center">{{ $item->billingComponent?->price }}
                                                            </td>
                                                            <td class="non-taxable-amount">{{ $item->billingComponent?->taxable == 0 ? $item->qty * $item->billingComponent?->price : '' }}
                                                            </td>
                                                            <td class="taxable-amount">{{ $item->billingComponent?->taxable == 1 ? $item->qty * $item->billingComponent?->price : '' }}
                                                            </td>
                                                        </tr>
                                                    @endforeach
                                                @endif
                                            </tbody>
                                            <tfoot>
                                                <tr>
                                                    <td colspan="4" class="text-start"> Amount in words:</td>
                                                    <td class="text-end">Total (A):</td>
                                                    <td id="non-taxable-total">0.00</td>
                                                    <td class="taxable-total">0.00</td>
                                                </tr>
                                                <tr>
                                                    <td colspan="4" rowspan="4" id="amount-in-words" class="text-capitalize"></td>
                                                    <td colspan="2" class="text-end">Taxable Total</td>
                                                    <td class="taxable-total">0.00</td>
                                                </tr>
                                                <tr>
                                                    <td colspan="2" class="text-end">VAT (13%)</td>
                                                    <td id="tax">0.00</td>
                                                </tr>
                                                <tr>
                                                    <td colspan="2" class="text-end">Amount After Tax (B)</td>
                                                    <td id="amount-with-tax">0.00</td>
                                                </tr>
                                                <tr>
                                                    <td colspan="2" class="text-end">Grand Total (A+B)</td>
                                                    <td class="grand-total">0.00</td>
                                                </tr>
                                            </tfoot>

                                        </table><!--end table-->
                                    </div>

                                    {{-- <div class="mt-3">
                                        <h6 class="text-muted text-uppercase fw-semibold mb-3">Estimate Details:</h6>
                                        <p class="text-muted mb-1">Total Amount: <span class="fw-medium grand-total"
                                                id="card-number">0.00</span></p>
                                        <p class="text-muted">Amount in words: <span class="fw-medium" id="">$
                                            </span><span id="card-total-amount">One Lakh Five Thousand only /-</span></p>
                                    </div> --}}

                                    <div class="hstack gap-2 justify-content-end d-print-none mt-4">
                                        <a href="javascript:window.print()" class="btn btn-info"><i
                                                class="ri-printer-line align-bottom me-1"></i> Print</a>

                                        @if ($estimate->approval_status != 3)
                                            <a href="javascript:void(0);" class="btn btn-success" data-bs-toggle="modal"
                                                data-bs-target="#approveModal"><i
                                                    class="ri-check-double-line align-bottom me-1"></i> Approve</a>
                                        @endif

                                    </div>
                                </div>
                                <!--end card-body-->
                            </div><!--end col-->
                        </div><!--end row-->
                    </div>
                    <!--end card-->
                </div>
                <!--end col-->
            </div>
            <!--end row-->
        </div>
    </div>

    <!-- Grids in modals -->
    <div class="modal fade" id="approveModal" tabindex="-1" aria-labelledby="approveModalLabel" aria-modal="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="approveModalLabel">Approve Form</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form action="{{ route('estimate.changeStatus') }}" class="needs-validation" method="POST"
                        novalidate>
                        @csrf
                        <div class="row g-3">
                            {{ html()->hidden('estimate_id', $item->id) }}
                            <div class="col-12">
                                <div>
                                    {{ html()->label('Status')->for('status')->class('form-label') }}
                                    {{ html()->select('approval_status', $statusList, $item->status)->id('status')->class('form-control select2') }}
                                </div>
                            </div><!--end col-->

                            <div class="col-12">
                                <div>
                                    {{ html()->label('Remarks')->for('approval_remarks')->class('form-label') }}
                                    {{ html()->textarea('approval_remarks')->id('approval_remarks')->class('form-control')->attributes(['rows' => 3]) }}
                                </div>
                            </div><!--end col-->

                            <div class="col-lg-12">
                                <div class="hstack gap-2 justify-content-end">
                                    <button type="button" class="btn btn-sm btn-light"
                                        data-bs-dismiss="modal">Close</button>
                                    <button type="submit" class="btn btn-sm btn-primary">Submit</button>
                                </div>
                            </div><!--end col-->

                        </div><!--end row-->
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('js')
    <script src="{{ asset('assets/js/pages/form-validation.init.js') }}"></script>
    <script class="text/javascript">

        $(document).ready(function() {
            calculate();
        });

        function calculate() {
            let totalTaxable = 0;
            let totalNonTaxable = 0;
            let amountWithTax = 0;
            let grandTotal = 0;

            $('.taxable-amount').each(function() {
                var value = parseFloat($(this).text());
                if (!isNaN(value)) {
                    totalTaxable += value;
                }
            });

            $('.non-taxable-amount').each(function() {
                var value = parseFloat($(this).text());
                if (!isNaN(value)) {
                    totalNonTaxable += value;
                }
            });

            taxAmount = (totalTaxable * 0.13).toFixed(2);
            amountWithTax = totalTaxable + parseFloat(taxAmount);
            grandTotal = (totalNonTaxable + parseFloat(amountWithTax)).toFixed(2);
            const amountInWords = `${amountToWords(grandTotal)} Only /-`;

            $('#tax').text(taxAmount);
            $('#amount-with-tax').text(amountWithTax);
            $('.grand-total').text(grandTotal);
            $('#non-taxable-total').text(totalNonTaxable);
            $('.taxable-total').text(totalTaxable);
            $('#amount-in-words').text(amountInWords);
        }
    </script>
@endpush