@extends('admin.layouts.app')

@section('content')
    @include('admin.layouts.partial.toolbar', ['breadcrumb' => 'Edit Invoice']);

    <!--begin::Content-->
    <div id="kt_app_content" class="app-content flex-column-fluid">
        <!--begin::Content container-->
        <div id="kt_app_content_container" class="app-container container-xxl">
            <!--begin::Layout-->
            <div class="d-flex flex-column flex-lg-row">
                <!--begin::Content-->
                <div class="flex-lg-row-fluid me-lg-15 order-2 order-lg-1 mb-10 mb-lg-0">
                    <div class="card shadow-none border-0 rounded-0">
                        <!--begin::Header-->
                        <div class="card-header" id="kt_activities_header">
                            <h3 class="card-title fw-bold text-dark">Edit Invoice</h3>
                            <div class="card-toolbar">
                                <a class="btn btn-primary btn-sm"
                                    href="{{ route('admin.invoice.show', $invoice->id) }}">Back</a>
                            </div>
                        </div>
                        <!--end::Header-->
                        <div class="card-body position-relative">
                            <div class="d-flex flex-wrap py-5">
                                <!--begin::Row-->
                                <div class="flex-equal me-5">
                                    <!--begin::Details-->
                                    <table class="table fs-6 fw-semibold gs-0 gy-2 gx-2 m-0">
                                        <!--begin::Row-->
                                        <tbody>
                                            <tr>
                                                <td class="text-gray-800">Invoice No:</td>
                                                <td class="text-gray-400">{{ $invoice->invoice_no }}</td>
                                            </tr>
                                            <!--end::Row-->
                                            <!--begin::Row-->
                                            <tr>
                                                <td class="text-gray-800">Client Name:</td>
                                                <td class="text-gray-400">{{ $invoice->branch->client->ShopCompany ?? '' }}
                                                </td>
                                            </tr>
                                            <!--end::Row-->
                                            <!--begin::Row-->
                                            <tr>
                                                <td class="text-gray-800">Branch Name:</td>
                                                <td class="text-gray-400">{{ $invoice->branch_name ?? '' }}</td>
                                            </tr>
                                            <!--end::Row-->
                                            <!--begin::Row-->
                                            <tr>
                                                <td class="text-gray-800">Type of Invoice:</td>
                                                <td class="text-gray-400">{{ TYPE_OF_INVOICE[$invoice->type] }}</td>
                                            </tr>
                                            <!--end::Row-->
                                        </tbody>
                                    </table>
                                    <!--end::Details-->
                                </div>
                                <!--end::Row-->
                                <!--begin::Row-->
                                <div class="flex-equal me-5">
                                    <!--begin::Details-->
                                    <table class="table fs-6 fw-semibold gs-0 gy-2 gx-2 m-0">

                                        <tbody>
                                            <!--begin::Row-->
                                            <tr>
                                                <td class="text-gray-800">Tax:</td>
                                                <td class="text-gray-400">{{ $invoice->tax ? 'Yes' : 'No' }}</td>
                                            </tr>
                                            <!--end::Row-->
                                            <!--begin::Row-->
                                            <tr>
                                                <td class="text-gray-800">Generated Date:</td>
                                                <td class="text-gray-400">
                                                    {{ $invoice->created_at->format('d-m-Y') }}</td>
                                            </tr>
                                            <!--end::Row-->
                                            <tr>
                                                <td class="text-gray-800">Status:</td>
                                                <td class="text-gray-400">Generated</td>
                                            </tr>
                                        </tbody>
                                    </table>
                                    <!--end::Details-->
                                </div>
                                <!--end::Row-->

                                <form class="form" action="{{ route('admin.invoice.update', $invoice->id) }}"
                                    id="kt_edit_invoice_form" data-kt-redirect="{{ route('admin.invoice.list') }}"
                                    style="display: contents">
                                    <table class="table table-borderless">
                                        <thead>
                                            <tr class="table-primary">
                                                <th class="text-center">S.NO</th>
                                                <th>Category</th>
                                                <th>Service</th>
                                                <th>Sub Service</th>
                                                <th>Qty(Units)</th>
                                                <th>Unit Price</th>
                                                <th>Total Price</th>
                                            </tr>
                                        </thead>
                                        <tbody id="inv_tbody">
                                            @foreach ($invoice->subCalc as $index => $sub)
                                                <tr data-editable="true">
                                                    <td class="text-center">
                                                        {{ $index + 1 }}
                                                        <input type="hidden" name="invoice[{{ $index }}][id]"
                                                            value="{{ $sub->id }}">
                                                    </td>
                                                    <td>
                                                        <select name="invoice[{{ $index }}][category_id]"
                                                            data-control="select2"
                                                            class="form-select form-select-solid fw-bold"
                                                            id="category_{{ $index }}"
                                                            data-ajax-search="{{ route('admin.invoice.select2.category', ['type' => $invoice->type, 'branch_id' => $invoice->branch_id]) }}"
                                                            onchange="setServices({{ $index }})">
                                                            <option value="{{ $sub->category->id }}" selected>
                                                                {{ $sub->category->name }}</option>
                                                        </select>
                                                    </td>
                                                    <td>
                                                        <select name="invoice[{{ $index }}][service_id]"
                                                            data-control="select2" data-placeholder="Search ..."
                                                            class="form-select form-select-solid fw-bold"
                                                            id="service_{{ $index }}"
                                                            onchange="setSubService({{ $index }})"
                                                            data-ajax-search="{{ route('admin.invoice.select2.service', ['category_id' => $sub->category_id, 'branch_id' => $invoice->branch_id]) }}">
                                                            <option value="{{ $sub->service->id }}" selected>
                                                                {{ $sub->service->name }}</option>
                                                        </select>
                                                    </td>
                                                    <td>
                                                        <select name="invoice[{{ $index }}][sub_service_id]"
                                                            data-control="select2" data-placeholder="Search ..."
                                                            class="form-select form-select-solid fw-bold"
                                                            id="sub_service_{{ $index }}"
                                                            onchange="getPrice({{ $index }})"
                                                            data-ajax-search="{{ route('admin.invoice.select2.sub.service', ['service_id' => $sub->service_id, 'category_id' => $sub->category_id, 'branch_id' => $invoice->branch_id]) }}">
                                                            <option value="{{ $sub->sub_service->id }}" selected>
                                                                {{ $sub->sub_service->subserviceable->name ?? $sub->sub_service->subserviceable->packing_material_name }}
                                                            </option>
                                                        </select>
                                                    </td>
                                                    <td><input class="form-control form-control-solid" type="number"
                                                            step="any" name="invoice[{{ $index }}][quantity]"
                                                            value="{{ $sub->quantity }}" id="quantity_{{ $index }}"
                                                            oninput="calculateTotal({{ $index }})"></td>
                                                    <td>
                                                        <span>{{ $sub->price }}</span>
                                                        <input type="hidden" name="invoice[{{ $index }}][price]"
                                                            value="{{ $sub->price }}" id="price_{{ $index }}">
                                                    </td>
                                                    <td>
                                                        <span>{{ $sub->total }}</span>
                                                        <input type="hidden" name="invoice[{{ $index }}][total]"
                                                            value="{{ $sub->total }}" id="total_{{ $index }}">
                                                    </td>
                                                </tr>
                                            @endforeach
                                            <tr>
                                                <td colspan="7"></td>
                                            </tr>
                                            <tr>
                                                <td colspan="5"></td>
                                                <td>Total Value</td>
                                                <td colspan="2" class="text-center">{{ numberFormat($invoice->amount) }}
                                                </td>
                                            </tr>
                                            <tr>
                                                <td colspan="5"></td>
                                                <td>Service Fee</td>
                                                <td colspan="2" class="border border-dark border-bottom-1 text-center">
                                                    0.00
                                                </td>
                                            </tr>
                                            @if ($invoice->tax)
                                                <tr>
                                                    <td colspan="5"></td>
                                                    <td>Tax {{ $invoice->tax }}%</td>
                                                    <td colspan="2"
                                                        class="border border-dark border-bottom-1 text-center">
                                                        {{ numberFormat($invoice->tax_amount) }}</td>
                                                </tr>
                                            @endif
                                            <tr>
                                                <td colspan="6"></td>
                                                <td class="text-center">{{ numberFormat($invoice->total_amount) }}</td>
                                            </tr>
                                            <tr>
                                                <td colspan="8"></td>
                                            </tr>
                                            <tr>
                                                <td colspan="8"></td>
                                            </tr>
                                            <tr>
                                                <td colspan="8"></td>
                                            </tr>
                                            <tr>
                                                <td colspan="8">
                                                    <div class="float-end">

                                                        <button type="button" class="btn btn-primary me-3"
                                                            onclick="addRow()">Add Row</button>
                                                        <!--begin::Button-->
                                                        <button type="submit" id="kt_edit_invoice_submit"
                                                            class="btn btn-primary me-3">
                                                            <span class="indicator-label">Save</span>
                                                            <span class="indicator-progress">Please wait...
                                                                <span
                                                                    class="spinner-border spinner-border-sm align-middle ms-2"></span>
                                                            </span>
                                                        </button>
                                                        <!--end::Button-->
                                                        <!--begin::Button-->
                                                        <a href="{{ route('admin.invoice.show', $invoice->id) }}"
                                                            class="btn btn-primary">Close</a>
                                                        <!--end::Button-->
                                                    </div>
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
                <!--end::Content-->
            </div>
            <!--end::Layout-->
        </div>
        <!--end::Content container-->
    </div>
    <!--end::Content-->
@endsection

@push('scripts')
    <script src="{{ asset('assets/js/custom/admin/invoice/edit.js') }}"></script>
    <script>
        $(document).ready(function() {
            applySelect2WithAjax();
        });

        function applySelect2WithAjax() {
            let select = document.querySelectorAll("[data-ajax-search]");
            select.forEach((s) => {
                var url = s.getAttribute("data-ajax-search");
                var id_index = s.getAttribute("id");
                $(s).select2({
                    ajax: {
                        url: url,
                        method: "GET",
                        data: function(params) {
                            var query = {
                                search: params.term,
                                page: params.page || 1,
                            };
                            // Query parameters will be ?search=[term]&page=[page]
                            return query;
                        },
                    },
                    placeholder: "Search ...",
                });
            });
        }

        function setServices(index) {
            $(`#service_${index}`).val(null).trigger("change");
            $(`#sub_service_${index}`).val(null).trigger("change");

            let priceEle = $(`#price_${index}`);
            priceEle.val(0);
            priceEle.closest('td').find('span').text(0);

            let totalEle = $(`#total_${index}`);
            totalEle.val(0);
            totalEle.closest('td').find('span').text(0);

            let url = "{!! route('admin.invoice.select2.service', ['category_id' => '_id_', 'branch_id' => $invoice->branch_id]) !!}";
            let id = $(`#category_${index}`).val();
            url = url.replace('_id_', id);

            $(`#service_${index}`).select2({
                ajax: {
                    url: url,
                    method: "GET",
                    data: function(params) {
                        var query = {
                            search: params.term,
                            page: params.page || 1,
                        };
                        // Query parameters will be ?search=[term]&page=[page]
                        return query;
                    },
                },
                placeholder: "Search ...",
            });

            calculateTotal(index);
        }

        function setSubService(index) {
            $(`#sub_service_${index}`).val(null).trigger("change");
            let url = "{!! route('admin.invoice.select2.sub.service', [
                'service_id' => '_sid_',
                'category_id' => '_cid_',
                'branch_id' => $invoice->branch_id,
            ]) !!}";
            let sid = $(`#service_${index}`).val();
            let cid = $(`#category_${index}`).val();
            url = url.replace('_sid_', sid).replace('_cid_', cid);

            let priceEle = $(`#price_${index}`);
            priceEle.val(0);
            priceEle.closest('td').find('span').text(0);

            let totalEle = $(`#total_${index}`);
            totalEle.val(0);
            totalEle.closest('td').find('span').text(0);

            $(`#sub_service_${index}`).select2({
                ajax: {
                    url: url,
                    method: "GET",
                    data: function(params) {
                        var query = {
                            search: params.term,
                            page: params.page || 1,
                        };
                        // Query parameters will be ?search=[term]&page=[page]
                        return query;
                    },
                },
                placeholder: "Search ...",
            });

            calculateTotal(index);
        }

        function getPrice(index) {
            let sub_id = $(`#sub_service_${index}`).val();
            if (sub_id !== null) {
                let url = "{!! route('admin.invoice.sub.service.price', ['sub_id' => 's_id']) !!}";
                url = url.replace('s_id', sub_id);
                axios.post(url).then(function(res) {
                    let price = $(`#price_${index}`);
                    if (!$.isEmptyObject(res.data)) {
                        price.closest('td').find('span').text(res.data.price);
                        price.val(res.data.price);
                    } else {
                        price.closest('td').find('span').text(0);
                        price.val(0);
                    }
                    calculateTotal(index);
                });
            }
        }

        function calculateTotal(index) {
            let price = $(`#price_${index}`).val();
            let qty = $(`#quantity_${index}`).val();
            let total = $(`#total_${index}`);
            let amt = price * qty;
            total.closest('td').find('span').text(amt);
            total.val(amt);
        }

        function addRow() {
            let tr = document.querySelectorAll("tr[data-editable]");
            let index = tr.length;
            let html = `<tr data-editable="true">
                            <td class="text-center">
                                ${ index + 1 }
                            </td>
                            <td>
                                <select name="invoice[${ index }][category_id]"
                                    data-control="select2"
                                    class="form-select form-select-solid fw-bold"
                                    id="category_${ index }"
                                    data-ajax-search="{{ route('admin.invoice.select2.category', ['type' => $invoice->type, 'branch_id' => $invoice->branch_id]) }}"
                                    onchange="setServices(${ index })">
                                </select>
                            </td>
                            <td>
                                <select name="invoice[${ index }][service_id]"
                                    data-control="select2" data-placeholder="Search ..."
                                    class="form-select form-select-solid fw-bold"
                                    id="service_${ index }"
                                    onchange="setSubService(${ index })">
                                </select>
                            </td>
                            <td>
                                <select name="invoice[${ index }][sub_service_id]"
                                    data-control="select2" data-placeholder="Search ..."
                                    class="form-select form-select-solid fw-bold"
                                    id="sub_service_${ index }"
                                    onchange="getPrice(${ index })">
                                </select>
                            </td>
                            <td>
                                <input class="form-control form-control-solid" type="number"
                                    step="any" name="invoice[${ index }][quantity]"
                                    value="0" id="quantity_${ index }" oninput="calculateTotal(${ index })">
                            </td>
                            <td>
                                <span>0</span>
                                <input type="hidden" name="invoice[${ index }][price]"
                                    value="0" id="price_${ index }">
                            </td>
                            <td>
                                <span>0</span>
                                <input type="hidden" name="invoice[${ index }][total]"
                                        value="0" id="total_${ index }">
                            </td>
                            <td>
                                <button type="button" class="btn btn-sm btn-danger" onclick="deleteRow()"><i class="fa fa-trash" onclick="deleteRow()"></i></button>
                            </td>
                        </tr>`;

            $(`#inv_tbody tr[data-editable]:nth-child(${index})`).after(html);

            applySelect2WithAjax();
        }

        function deleteRow() {
            let target = event.target;
            $(target).closest('tr').remove();
        }
    </script>
@endpush