@extends('layouts.app')
@section('main-content')

<style>
    .table td,
    .table th {
        border: none;
        padding: 5px;
    }

    #labordesc {
        background-color: #fff;
        position: relative;
        resize: none;
        border: none;
        padding: 0.3rem;
        padding-left: 1rem;
        height: 7rem;
        font-size: 0.8rem;
    }

    .tableAmount tbody {
        border: #fff !important;
    }

    .tableAmount td {
        text-align: end;
        padding: 0 !important;
    }

    .tableAmount strong {
        padding: 0;
    }

    td.payDesc {
        padding: 0.2rem !important;
        padding-top: 0.12rem !important;
        padding-right: 1.7rem !important;
        border-top: none !important;
        background-color: none !important;
    }

    td.amount {
        padding: 0.3rem !important;
        padding-right: 1.25rem !important;
        border: none !important;
        background-color: none !important;
    }

    td.gtotal {
        padding: 0.5rem !important;
        padding-right: 1.25rem !important;
        border-top: 1px solid grey;
        border-bottom: 2px solid gray !important;
        margin: 0;
    }

    .gtotal strong {
        font-size: 0.85rem;
    }

    #parentAmount {
        border: none !important;
        padding: 0 !important;
        margin: 0 !important;
        /* padding-right: 0.43rem !important; */
        /* border: none !important; */
    }
</style>
<div class="container-fluid p-0">
    <nav class="page-breadcrumb">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{{ route('dashboard') }}">Home</a></li>
            <li class="breadcrumb-item"><a href="{{ route('invoices') }}">All Invoices</a></li>
            <li class="breadcrumb-item">Details</li>
        </ol>
    </nav>

    <h1 class="h3 mb-3"><strong>Invoice</strong> Details</h1>
    <div class="row">
        <div class="col-md-12 middle-wrapper">
            <div class="card px-3 py-3">
                <div class="table-responsive">
                    <div class="card-header">
                        <span id="invno" data-value="{{ $header->invoice_no }}"></span>
                        <div class="d-flex justify-content-between pb-1">
                            <h5 class="card-title text-nowrap mb-0">Invoice Numbers [{{ str_pad($header->invoice_no, 5, '0', STR_PAD_LEFT ) }}]</h5>
                            <div class="d-inline-flex">
                                <span id="invstat" data-value="{{ $header->status }}"></span>
                                <span id="approve" class="btn btn-outline-info btn-sm p-2 mx-1 w-10 shadow-none d-none" rel="facebox" title="Approve">
                                    <i class="align-middle" data-feather="thumbs-up"></i> Approve
                                </span>
                                <span id="decline" class="btn btn-outline-danger btn-sm p-2 px-1 w-10 shadow-none d-none" data-confirm-delete="true">
                                    <i class="align-middle me-1" data-feather="thumbs-down"></i>Reject
                                </span>
                                <span id="print" class="btn btn-outline-primary btn-sm p-2 w-10 mx-1 d-none">
                                    <i data-feather="file" class="me-1"></i>Print
                                </span>
                            </div>
                        </div>
                        <div class="col-sm-5 middle-wrapper">
                            <div class="row mb-1">
                                <div class="form-group d-flex">
                                    <strong class="text-nowrap me-1">Customer Name:</strong>
                                    <span class="text-nowrap">{{ $header->customer->name }}</span>
                                    @if ( $header->customer->customertype == 'B')
                                    <span class="badge bg-success py-1 mt-0 ms-5 me-1">Business</span>
                                    @else
                                    <span class="badge bg-info py-1 mt-0 ms-5 me-1">Personal</span>
                                    @endif
                                    @if ($header->status == 'P')
                                    <span id="curstatus" class="badge bg-warning py-1">Pending</span>
                                    @elseif ($header->status == 'R')
                                    <span id="bgstatus" class="badge bg-danger py-1">Rejected</span>
                                    @else
                                    <span id="bgstatus" class="badge bg-success py-1">Approved</span>
                                    @endif
                                    <span id="bgstatus"></span>
                                </div>
                            </div>
                            <div class="row mb-1">
                                <div class="form-group">
                                    @if ( $header->customer->customertype == 'B')
                                    <strong class="text-nowrap me-1">Company Name:</strong>
                                    <span>
                                        {{ $header->customer->companyname }}
                                    </span>
                                    @endif
                                </div>
                            </div>
                            <div class="row mb-1 d-flex">
                                <div class="form-group">
                                    <strong class="text-nowrap me-1">Contact:</strong>
                                    <span>{{ $header->customer->contact }}</span>
                                </div>
                            </div>
                            <div class="row mb-1 d-flex">
                                <div class="form-group">
                                    <strong class="text-nowrap me-1">Vehicle Info:</strong>
                                    <span>{{ $header->customer->info }} ({{ $header->customer->models }})</span>
                                </div>
                            </div>
                            <div class="row mb-1 d-flex">
                                <div class="form-group">
                                    <strong>Date:</strong>
                                    <span>{{ date('d/m/Y', strtotime($header->invoice_date)) }}</span>
                                </div>
                            </div>
                            <div class="row mb-1 d-flex">
                                <div class="form-group">
                                    <strong>Payment Terms:</strong>
                                    <span>{{ $header->payment_term }}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="card-body pt-0">
                        <div class="table-responvive">
                            <table class="table w-100 table-condensed borderless show-invoice">
                                <thead>
                                    <th>#</th>
                                    <th class="col-sm-7">Product</th>
                                    <th class="text-center col-sm-1">Quantity</th>
                                    <th class="text-center col-sm-1">UoM</th>
                                    <th class="text-end text-nowrap">Unit Price</th>
                                    <th class="text-end">Amount</th>
                                </thead>
                                <tbody>
                                                                        @foreach($items as $item)
                                    <tr class="border-none">
                                        <td>1</td>
                                        <td>{{ $item->product->description }}</td>
                                        <td class="text-center">{{ $item->quantity }}</td>
                                        <td class="text-center">{{ $item->item_uom->description }}</td>
                                        <td class="text-end">
                                            @if ( $item->unit_price <= $item->cost_price )
                                                <a href="{{ route('products.edit', $item->product_id) }}" class="text-danger" rel="facebox" title="Click to update price">{{ number_format($item->unit_price, 2) }}</a>
                                                @else
                                                {{ number_format($item->unit_price, 2) }}
                                                @endif
                                        </td>
                                        <td class="text-end">RM {{ number_format($item->total, 2) }}</td>
                                    </tr>
                                                                        @endforeach
                                    @if ($header->flushing != null)
                                    <tr>
                                        <td>2</td>
                                        <td>Flushing Aircond System</td>
                                        <td class="text-center">1</td>
                                        <td class="text-center">Lot</td>
                                        <td class="text-end">{{ number_format($header->flushing, 2)}}</td>
                                        <td class="text-end">RM{{ number_format($header->flushing, 2)}}</td>
                                    </tr>
                                    @endif
                                    @if ($header->var_rate != null)
                                    <tr>
                                        <td>3</td>
                                        <td>Refill gas 134a + vaccum C.F Internal Oil Compressor</td>
                                        <td class="text-center">1</td>
                                        <td class="text-center">Lot</td>
                                        <td class="text-end">{{ number_format($header->var_rate, 2)}}</td>
                                        <td class="text-end">RM{{ number_format($header->var_rate, 2)}}</td>
                                    </tr>
                                    @endif
                                    <tr>
                                        <td colspan="4" rowspan="4" class="col-sm-7">
                                            @if(!empty($header->labor_desc))
                                            <label for="labordesc" class="fw-bold">Labour Description</label>
                                            <textarea cols="20" rows="3" id="labordesc" class="form-control" readonly>{{ $header->labor_desc }}</textarea>
                                            @endif
                                        </td>
                                        <td colspan="2" class="col-sm-4" id="parentAmount">
                                            <table class="table table-condensed tableAmount">
                                                <tr>
                                                    <td class="text-right payDesc"><strong>SUBTOTAL</strong></td>
                                                    <td class="text-end text-nowrap amount"><strong>RM {{ number_format($header->total + $header->var_rate + $header->flushing, 2) }}</strong></td>
                                                </tr>
                                                @if($header->labour)
                                                <tr>
                                                    <td class="text-right payDesc"><strong>LABOUR</strong></td>
                                                    <td class="text-end text-nowrap amount"><strong>RM {{ number_format($header->labour, 2) }}</strong></td>
                                                </tr>
                                                @endif
                                                @if ($header->discount)
                                                <tr>
                                                    <td colspan="" class="text-right payDesc"><strong>DISCOUNT</strong></td>
                                                    <td class="text-end text-nowrap amount"><strong>- RM {{ number_format($header->discount, 2) }}</strong></td>
                                                </tr>
                                                @endif
                                                <tr>
                                                    <td colspan="" class="text-nowrap text-right payDesc px-0 mx-0"><strong>GRAND TOTAL</strong></td>
                                                    <td class="text-right text-nowrap gtotal"><strong>RM {{ number_format($header->grand_total, 2) }}</strong></td>
                                                </tr>
                                            </table>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection
@section('script')
<script type="text/javascript">
    const status = $("#invstat").data('value');
    if (status == 'P') {
        $("#approve").removeClass('d-none');
        $("#decline").removeClass('d-none');
    } else if (status == 'A') {
        $("#print").removeClass('d-none');
    } else if (status === 'R') {
        $("#decline").removeClass('d-none');
    }

    $(document).ready(function() {
        $(document).on('click', '#approve', function(e) {
            e.preventDefault();
            const invoice = $("#invno").data('value');
            $.ajax({
                url: '/api/invoices/' + invoice,
                data: {
                    '_token': 'csrf_token'
                },
                method: 'GET',
                beforeSend: function() {
                    $(".spinner-border").removeClass('d-none');
                    $("#processing").text('Processing...');
                },
                success: function(data) {
                    $(".spinner-border").addClass('d-none');
                    $("#processing").text('');
                    if (data.status === 'A') {
                        $("#curstatus").remove();
                        $("#bgstatus").removeClass();
                        $("#bgstatus").text("Approved");
                        $("#bgstatus").addClass("badge bg-success py-1");
                        $("#approve").addClass('d-none');
                        $("#decline").addClass('d-none');
                        $("#print").removeClass('d-none');
                    } else {
                        $("#modalLowStock").modal('show');
                        $('#modalLabel').text('Low Stock');
                        $("#modalBody").empty();
                        $.each(JSON.parse(data), function(i, item) {
                            no = i + 1;
                            $('#modalBody').append(
                                '<p class="mb-0 px-2">' + no + '. ' + item.product + '</p>');
                        });
                    }
                },
                error: function(data) {
                    console.log("Error in API call");
                }
            });
        });

        $(document).on('hide.bs.modal', '#modalAppointment', function() {
            $("#modalBody").text('');
        });

        $("#decline").on('click', function(e) {
            e.preventDefault();
            const invoice = $("#invno").data('value');
            $.ajax({
                url: '/api/invoices/' + invoice + '/reject',
                data: {
                    '_token': 'csrf_token'
                },
                success: function(data) {
                    $("#decline").removeClass('d-none');
                    $("#approve").addClass('d-none');
                    $("#curstatus").remove();
                    $("#bgstatus").removeClass();
                    $("#bgstatus").text("Rejected");
                    $("#bgstatus").addClass("badge bg-danger py-1");

                }
            });
        });

        $(document).on('click', "#print", function() {
            const invoice = $("#invno").data('value');
            window.location.replace('/preview/' + invoice);
        });

    });
</script>
@endsection