invoice single, invoice payment by stripe and others

যেহেতু আমাদের প্রজেক্টের সব কিছুই livewire দিয়ে করছি তাই আমরা এটাও করার জন্য প্রথমেই একটা component make করব।

php artisan livewire:make InvoiceEdit

এবার আমাদের user folder এর মধ্যে যে invoice folder আছে তারমধ্যে আমাদের show.blade.php file এই ফাইলের মধ্যে আমরা আমাদের livewire যে component make করলাম সেটাকে শো করাব।

এবার আমাদের invoice-edit blade file এ গিয়ে কোড গুলো লিখি।

<div>
    <h2 class="font-bold text-green-700  ">Information</h2>
    <p>Invoice to: {{$invoice->user->name}}</p>

    <table class="table-auto w-full mb-4">
        <tr>
            <th class="lms-cell-border text-left">Name</th>
            <th class="lms-cell-border">Price</th>
            <th class="lms-cell-border">Quantity</th>
            <th class="lms-cell-border text-right">Total</th>
        </tr>

        @foreach($invoice->items as $item)
        <tr>
            <td class="lms-cell-border">{{$item->name}}</td>
            <td class="lms-cell-border text-center">${{number_format($item->price, 2)}}</td>
            <td class="lms-cell-border text-center">{{$item->quantity}}</td>
            <td class="lms-cell-border text-right">${{number_format($item->price * $item->quantity, 2)}}</td>
        </tr>
        @endforeach
        <tr>
            <td colspan="3" class="lms-cell-border text-right">Subtotal</td>
            <td class="lms-cell-border text-right">${{number_format($invoice->amount()['total'], 2)}}</td>
        </tr>
        <tr>
            <td colspan="3" class="lms-cell-border text-right">Paid</td>
            <td class="lms-cell-border text-right">- ${{number_format($invoice->amount()['paid'], 2)}}</td>
        </tr>
        <tr>
            <td colspan="3" class="lms-cell-border text-right">Due</td>
            <td class="lms-cell-border text-right">${{number_format($invoice->amount()['due'], 2)}}</td>
        </tr>
    </table>




    @if($enableAddItem)
    <form class="mb-4" wire:submit.prevent="saveNewItem">
        <div class="flex mb-4">
            <div class="w-full">
                @include('components.form-field', [
                    'name' => 'name',
                    'label' => 'Name',
                    'type' => 'text',
                    'placeholder' => 'Item name',
                    'required' => 'required',
                ])
            </div>

            <div class="min-w-max ml-4">
                @include('components.form-field', [
                    'name' => 'price',
                    'label' => 'Price',
                    'type' => 'number',
                    'placeholder' => 'Type price',
                    'required' => 'required',
                ])
            </div>

            <div class="min-w-max ml-4">
                @include('components.form-field', [
                    'name' => 'quantity',
                    'label' => 'Quantity',
                    'type' => 'number',
                    'placeholder' => 'Type quantity',
                    'required' => 'required',
                ])
            </div>


        </div>
        <div class="flex mb-4">
            @include('components.wire-loading-btn')
            <button class=" bg-red-500 ml-4 py-2 px-4 font-bold text-white " wire:click="addNewItem" type="button">Cancel</button>
        </div>
    </form>
    @else
        <button class="px-4 py-2 bg-green-300 mt-4 mb-4" wire:click="addNewItem" class="underline">Add New Item</button>
    @endif


    <h3 class="font-bold text-lg mb-2">Payments</h3>
    <ul class="mb-4">
        @foreach($invoice->payments as $payment)
        <li>{{date('F j, Y - g:i:a', strtotime($payment->created_at))}} - ${{number_format($payment->amount, 2)}} - transaction ID: {{$payment->transaction_id}} <button wire:click="refund({{$payment->id}})" class="bg-red-500 text-white px-4 py-2 text-xs">Refund</button></li>
        @endforeach
    </ul>
</div>

এবং আমাদের যে component file টা আছে সেখানে নিচের কোড গুলো লিখি,।

public $invoice_id;
    public $invoice;
    public $enableAddItem = false;
    public $name;
    public $quantity;
    public $price;

    public function mount() {
        $this->invoice = Invoice::findOrFail($this->invoice_id);
    }
    public function render()
    {
        return view('livewire.invoice-edit');
    }

    public function addNewItem() {
        $this->enableAddItem = !$this->enableAddItem;
    }

    public function saveNewItem() {
        InvoiceItem::create([
            'name' => $this->name,
            'price' => $this->price,
            'quantity' => $this->quantity,
            'invoice_id' => $this->invoice_id,
        ]);

        $this->name = '';
        $this->price = '';
        $this->quantity = '';

        $this->addNewItem();

        flash()->addSuccess('Added!');

        return redirect(route('invoice-show', $this->invoice_id));
    }

এবং আমাদের যে controller আছে সেখানে id এর পরিবর্তে invoice গুলো পাঠিয়ে দেই।

return view('user.invoice.show', [
            'invoice' => Invoice::findOrFail($id),
        ]);

এবং আমাদের যে মডেল আছে সেখানে fillable property গুলো দিয়ে দেই।

এবং আমাদের আগেই subtotal calculate করা আছে আমরা সেই কোড গুলো review করলেই বুঝতে পারব আশা করি ।আর যদি কোন কিছু মিসিং থাকে আমাদের github repository তো আছেই।

আশা করি খুব সিম্পল ভাবেই বুঝতে পেরেছেন।