@extends('administrator.layout.master')

@section('breadcrumb')
    @php
$breadcrumbItems = [
    ['label' => 'Invoice'],
    ['label' => 'Invoice Management', 'url' => route('administrator.pages.invoice.index')],
    ['label' => 'Add New Invoice', 'active' => true],
];
    @endphp
    <x-admin-breadcrumb :items="$breadcrumbItems" />
@endsection

@section('content')
    @if(auth()->guard('admins')->user()->can("add invoice"))
        <form action="{{ route('administrator.pages.invoice.store') }}" method="post">
            @csrf
            <div class="row">
                <div class="col-md-8">
                    <div class="card card-outline card-primary rounded-4 shadow-none">
                        <div class="card-header bg-white rounded-top-4">
                            <h5 class="card-title m-0">Invoice Information</h5>
                        </div>
                        <div class="card-body">
                            <div class="form-group mb-3">
                                <label for="customer_id">Client User</label>
                                <select class="form-control" name="customer_id" id="customer_id" data-placeholder="Select Customer">
                                    <option value=""></option>
                                    @if($customer->count())
                                        @foreach($customer->all() as $item)
                                            <option value="{{ $item->id }}">
                                                {{ $item->firstname . ' ' . $item->lastname }}
                                            </option>
                                        @endforeach
                                    @endif
                                </select>
                            </div>

                            <div class="form-group mb-3">
                                <label for="payment_id">Payment Method</label>
                                <select class="form-control" name="payment_id" id="payment_id" data-placeholder="Select Payment">
                                    <option value=""></option>
                                    @if($payment->count())
                                        @foreach($payment->all() as $item)
                                            <option value="{{ $item->id }}">{{ $item->name }}</option>
                                        @endforeach
                                    @endif
                                </select>
                            </div>

                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group mb-3">
                                        <label for="sub_total">Sub Total</label>
                                        <input type="number" class="form-control" name="sub_total" id="sub_total" value="0" min="0">
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group mb-3">
                                        <label for="total">Total</label>
                                        <input type="number" class="form-control" name="total" id="total" value="0" min="0">
                                    </div>
                                </div>
                            </div>

                            <div class="form-group mb-3">
                                <label for="description">Description</label>
                                <textarea class="form-control" name="description" id="description" rows="3"></textarea>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-md-4">
                    <div class="card card-outline card-primary rounded-4 shadow-none">
                        <div class="card-header bg-white rounded-top-4">
                            <h5 class="card-title m-0">Invoice Summary</h5>
                        </div>
                        <div class="card-body">
                            <table class="table table-borderless">
                                <tbody>
                                    <tr>
                                        <td>Sub Total</td>
                                        <td class="text-end" id="summary_sub_total">0đ</td>
                                    </tr>
                                    <tr>
                                        <td>VAT (10%)</td>
                                        <td class="text-end" id="summary_tax">0đ</td>
                                    </tr>
                                    <tr class="border-top">
                                        <td><strong>Total</strong></td>
                                        <td class="text-end" id="summary_total"><strong>0đ</strong></td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>

            <x-fixed-action-bar>
                <x-button-crm type="button" variant="secondary" size="sm" icon="arrow-left"
                    route="administrator.pages.invoice.index">Cancel</x-button-crm>
                <x-button-crm type="submit" variant="primary" size="sm" icon="check-circle">Create Invoice</x-button-crm>
            </x-fixed-action-bar>
        </form>
    @else
        <div class="alert alert-danger alert-dismissible">
            <h5 class="mb-0"><i class="icon fas fa-ban"></i> Access Denied - You are not assigned to any Invoice
                management department</h5>
        </div>
    @endif
@endsection

@push('custom-scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const subTotalInput = document.getElementById('sub_total');
            const totalInput = document.getElementById('total');
            const summarySubTotal = document.getElementById('summary_sub_total');
            const summaryTax = document.getElementById('summary_tax');
            const summaryTotal = document.getElementById('summary_total');

            function formatCurrency(amount) {
                return new Intl.NumberFormat('vi-VN').format(amount) + 'đ';
            }

            function calculateTotal() {
                const subTotal = parseFloat(subTotalInput.value) || 0;
                const tax = subTotal * 0.1;
                const total = subTotal + tax;

                summarySubTotal.textContent = formatCurrency(subTotal);
                summaryTax.textContent = formatCurrency(tax);
                summaryTotal.innerHTML = '<strong>' + formatCurrency(total) + '</strong>';
                totalInput.value = total;
            }

            subTotalInput.addEventListener('input', calculateTotal);
        });
    </script>
@endpush