@extends('admin.layouts.app')

@push('styles')
    <link href="{{ asset('assets/plugins/custom/datatables/datatables.bundle.css') }}" rel="stylesheet" type="text/css" />
@endpush

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

    <!--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">Create Mapping</h3>
                        </div>
                        <!--end::Header-->
                        <div class="card-body position-relative">
                            <form class="form" action="{{ route('admin.mapping.store') }}" id="kt_add_service_form"
                                data-kt-redirect="{{ route('admin.mapping.list') }}">
                                <!--begin::Input group-->
                                <div class="fv-row mb-7">
                                    <!--begin::Label-->
                                    <label class="required fs-6 fw-semibold mb-2">Branch Name</label>
                                    <!--end::Label-->
                                    <!--begin::Input-->
                                    <select name="branch_id" id="branch" data-control="select2"
                                        class="form-select form-select-solid fw-bold"
                                        data-ajax-search="{{ route('admin.mapping.select2.branch') }}">
                                    </select>
                                    <!--end::Input-->
                                </div>
                                <!--end::Input group-->
                                <!--begin::Input group-->
                                <div class="fv-row mb-7">
                                    <!--begin::Label-->
                                    <label class="required fs-6 fw-semibold mb-2">Comments</label>
                                    <!--end::Label-->
                                    <!--begin::Input-->
                                    <textarea class="form-control form-control-solid" name="comment" maxlength="100"></textarea>
                                    <!--end::Input-->
                                </div>
                                <!--end::Input group-->
                                {{-- <div class="table-responsive"> --}}
                                <table class="table table-borderless">
                                    <thead>
                                        <tr class="table-primary">
                                            <th class="px-5">Category</th>
                                            <th>Service</th>
                                            <th>Sub Service</th>
                                            <th>Comment</th>
                                            <th>Qty(Units)</th>
                                            <th>Price(Unit)</th>
                                            <th>Total Price</th>
                                            <th></th>
                                        </tr>
                                    </thead>
                                    <tbody id="mapping_body"></tbody>
                                </table>
                                {{-- </div> --}}


                                <div class="flex-center">
                                    <!--begin::Button-->
                                    <button type="submit" id="kt_add_service_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.mapping.list') }}" class="btn btn-primary me-3">Close</a>
                                    <!--end::Button-->
                                    <button type="button" class="btn btn-primary" onclick="addRow()">Add Row</button>
                                </div>

                            </form>
                        </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/mapping/create.js') }}?{{ env('JS_REFRESH_TOKEN') }}"></script>
    <script>
        $(document).ready(function() {
            handleSelect2Ajax();

            $('#branch').on('change', function() {
                let tr = document.querySelectorAll("tr[data-editable]");
                if (tr.length > 0) {
                    Swal.fire({
                        text: "You will lose your progress!",
                        icon: "warning",
                        buttonsStyling: false,
                        confirmButtonText: "Okay",
                        customClass: {
                            confirmButton: "btn btn-primary",
                        },
                    }).then(function() {
                        $("#mapping_body").empty();
                    });
                }
            });
        });


        var handleSelect2Ajax = function() {
            let select = document.querySelectorAll('[data-ajax-search]');
            select.forEach((s) => {
                var url = s.getAttribute('data-ajax-search');
                $(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 ...',
                });
            });
        }

        let tr = document.querySelectorAll("tr[data-editable]").length;
        var addRow = function() {
            let branch_id = $('#branch').val();
            if (!branch_id) {
                alert('Please select Branch first...');
                return false;
            }
            let c_url = "{!! route('admin.mapping.select2.category', ['branch_id' => '__id']) !!}";
            c_url = c_url.replace('__id', branch_id);


            let index = tr;
            tr += 1;
            let html = `<tr data-editable="true">
                <td style="width:150px !important">
                    <select name="mapping[${ index }][category_id]"
                        data-control="select2"
                        class="form-select form-select-solid fw-bold"
                        id="category_${ index }"
                        data-ajax-search="${c_url}"
                        onchange="setServices(${ index })">
                    </select>
                </td>
                <td style="width:150px !important">
                    <select name="mapping[${ 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 style="width:150px !important">
                    <select name="mapping[${ 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="text"
                                    name="mapping[${ index }][comment]"
                                    value="" id="comment_${ index }">
                </td>
                <td>
                    <input class="form-control form-control-solid" type="number"
                                    step="any" name="mapping[${ index }][quantity]"
                                    value="0" id="quantity_${ index }" oninput="calculateTotal(${ index })">
                </td>
                <td>
                    <input class="form-control form-control-solid" type="number"
                                    step="any" name="mapping[${ index }][price]"
                                    value="0" id="price_${ index }" oninput="calculateTotal(${ index })">
                </td>
                <td class="align-middle" id="total_${ index }">
                    0
                </td>
                <td><button type="button" class="btn btn-sm btn-danger" onclick="deleteRow()"><i class="fa fa-trash" onclick="deleteRow()"></i></button></td>
                </tr>`;

            $("#mapping_body").append(html);

            handleSelect2Ajax();
        }

        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.mapping.select2.service', ['category_id' => 'c_id', 'branch_id' => 'b_id']) !!}";
            let c_id = $(`#category_${index}`).val();
            let b_id = $(`#branch`).val();
            url = url.replace('c_id', c_id).replace('b_id', b_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' => '_bid_',]) !!}";
            let sid = $(`#service_${index}`).val();
            let cid = $(`#category_${index}`).val();
            let bid = $(`#branch`).val();
            url = url.replace('_sid_', sid).replace('_cid_', cid).replace('_bid_', bid);

            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.val(res.data.price);
                    }
                    calculateTotal(index);
                });
            }
        }

        function calculateTotal(index) {
            let price = $(`#price_${index}`).val();
            let qty = $(`#quantity_${index}`).val();
            let total = $(`#total_${index}`);
            let amt = price * qty;
            total.text(amt.toFixed(2));
            //total.val(amt);
        }

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