@extends('admin.layouts.app')

@section('content')
    @include('admin.layouts.partial.toolbar', ['breadcrumb' => 'Edit 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">Edit Mapping</h3>
                        </div>
                        <!--end::Header-->
                        <div class="card-body position-relative">
                            <form class="form" action="{{ route('admin.mapping.update', $mapping->id) }}"
                                id="kt_edit_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" disabled>
                                        <option value="{{ $mapping->branch_id }}" selected>{{ $mapping->branch_name }}
                                        </option>
                                    </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">{{ $mapping->comment }}</textarea>
                                    <!--end::Input-->
                                </div>
                                <!--end::Input group-->
                                <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">
                                        @foreach ($mapping->services as $index => $service)
                                            <tr data-editable="true">
                                                <td style="width:150px !important">
                                                    <input type="hidden" name="mapping[{{ $index }}][id]"
                                                        value="{{ $service->id }}">
                                                    <select name="mapping[{{ $index }}][category_id]"
                                                        data-control="select2" class="form-select form-select-solid fw-bold"
                                                        id="category_{{ $index }}"
                                                        data-ajax-search="{!! route('admin.mapping.select2.category', ['branch_id' => $mapping->branch_id]) !!}"
                                                        onchange="setServices({{ $index }})">
                                                        <option value="{{ $service->category_id }}" selected>
                                                            {{ $service->category_name }}</option>
                                                    </select>
                                                </td>
                                                <td style="width:150px !important">
                                                    <select name="mapping[{{ $index }}][service_id]"
                                                        data-control="select2" class="form-select form-select-solid fw-bold"
                                                        id="service_{{ $index }}"
                                                        data-ajax-search="{!! route('admin.mapping.select2.service', [
                                                            'category_id' => $service->category_id,
                                                            'branch_id' => $mapping->branch_id,
                                                        ]) !!}"
                                                        onchange="setSubService({{ $index }})">
                                                        <option value="{{ $service->service_id }}" selected>
                                                            {{ $service->service_name }}</option>
                                                    </select>
                                                </td>
                                                <td style="width:150px !important">
                                                    <select name="mapping[{{ $index }}][sub_service_id]"
                                                        data-control="select2" class="form-select form-select-solid fw-bold"
                                                        id="sub_service_{{ $index }}"
                                                        data-ajax-search="{!! route('admin.invoice.select2.sub.service', [
                                                            'service_id' => $service->service_id,
                                                            'category_id' => $service->category_id,
                                                            'branch_id' => $mapping->branch_id,
                                                        ]) !!}"
                                                        onchange="getPrice({{ $index }})">
                                                        <option value="{{ $service->sub_service_id }}" selected>
                                                            {{ $service->sub_service_name }}</option>
                                                    </select>
                                                </td>
                                                <td>
                                                    <input class="form-control form-control-solid" type="text"
                                                        name="mapping[{{ $index }}][comment]"
                                                        value="{{ $service->comment }}" id="comment_{{ $index }}">
                                                </td>
                                                <td>
                                                    <input class="form-control form-control-solid" type="number"
                                                        step="any" name="mapping[{{ $index }}][quantity]"
                                                        value="{{ $service->qty }}" id="quantity_{{ $index }}"
                                                        oninput="calculateTotal({{ $index }})">
                                                </td>
                                                <td>
                                                    <input class="form-control form-control-solid" type="number"
                                                        step="any" name="mapping[{{ $index }}][price]"
                                                        value="{{ $service->price }}" id="price_{{ $index }}"
                                                        oninput="calculateTotal({{ $index }})">
                                                </td>
                                                <td class="align-middle" id="total_{{ $index }}">
                                                    {{ $service->qty * $service->price }}
                                                </td>
                                                <td><button type="button" class="btn btn-sm btn-danger"
                                                        onclick="deleteRow({{ $service->id }})"><i class="fa fa-trash"
                                                            onclick="deleteRow({{ $service->id }})"></i></button></td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>

                                <div class="flex-center">
                                    <!--begin::Button-->
                                    <button type="submit" id="kt_edit_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/edit.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="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(id = null) {
            let target = event.target;
            if (id !== null) {
                Swal.fire({
                    text: "Are you sure you want to delete?",
                    icon: "warning",
                    showCancelButton: true,
                    buttonsStyling: false,
                    confirmButtonText: "Yes, delete!",
                    cancelButtonText: "No, cancel",
                    customClass: {
                        confirmButton: "btn fw-bold btn-danger",
                        cancelButton: "btn fw-bold btn-active-light-primary",
                    },
                }).then(function(result) {
                    if (result.value) {
                        let url = "{!! route('admin.mapping.destroy.service', '__id') !!}";
                        url = url.replace('__id', id);
                        axios.post(url).then(function(res) {
                            if (res.data.status) {
                                $(target).closest('tr').remove();
                            } else {
                                Swal.fire({
                                    text: res.data.message,
                                    icon: "info",
                                    buttonsStyling: false,
                                    confirmButtonText: "Ok, got it!",
                                    customClass: {
                                        confirmButton: "btn fw-bold btn-primary",
                                    },
                                });
                            }
                        });
                    }
                });
            } else {
                $(target).closest('tr').remove();
            }
        }
    </script>
@endpush