@extends('admin.layouts.app')

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

    <!--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 Service</h3>
                        </div>
                        <!--end::Header-->
                        <div class="card-body position-relative">

                            <form class="form" method="POST"
                                action="{{ route('admin.mapping.service.edit', $mappingService->id) }}"
                                id="kt_add_client_user_form">
                                @csrf
                                <div class="row mb-15 mt-5" id="add_sub_services">
                                    <div class="col-6 mb-7">
                                        <!--begin::Label-->
                                        <label class="required fs-6 fw-semibold mb-2">Service</label>
                                        <select name="service_id" data-control="select2"
                                            class="form-select form-select-solid fw-bold" id="service"
                                            onchange="subservice()">
                                            @foreach ($services as $service)
                                                <option value="{{ $service->id }}"
                                                    @if ($mappingService->service_id == $service->id) selected @endif>{{ $service->name }}
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="col-6 mb-7">
                                        <!--begin::Label-->
                                        <label class="required fs-6 fw-semibold mb-2">Sub Service</label>
                                        <select name="sub_service_id" data-control="select2"
                                            class="form-select form-select-solid fw-bold" id="sub_service"
                                            onchange="getPrice()">
                                            <option value="{{ $mappingService->sub_service_id }}">
                                                {{ $mappingService->sub_service_name }}</option>
                                        </select>
                                    </div>
                                    <div class="col-6 mb-7">
                                        <label class="required fs-6 fw-semibold mb-2">Comment</label>
                                        <input type="text" class="form-control form-control-solid" name="comment"
                                            value="{{ $mappingService->comment }}">
                                    </div>
                                    <div class="col-6 mb-7">
                                        <label class="required fs-6 fw-semibold mb-2">Qty (Units)</label>
                                        <input type="text" class="form-control form-control-solid" name="qty"
                                            value="{{ $mappingService->qty }}">
                                    </div>

                                    <div class="col-6 mb-7">
                                        <label class="required fs-6 fw-semibold mb-2">Price</label>
                                        <input type="text" class="form-control form-control-solid" name="price"
                                            value="{{ $mappingService->price }}" id="price">
                                    </div>
                                </div>
                                <div class="flex-center">
                                    <!--begin::Button-->
                                    <button type="submit" id="kt_add_member_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.service.list', $mappingService->mapping_id) }}" class="btn btn-primary">Close</a>
                                    <!--end::Button-->
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
                <!--end::Content-->
            </div>
            <!--end::Layout-->
        </div>
        <!--end::Content container-->
    </div>
    <!--end::Content-->
@endsection

@push('scripts')
    <script>
        $(document).ready(function() {
            subservice();
        });

        function subservice() {
            if (!$.isEmptyObject(event)) {
                $(`#sub_service`).val(null).trigger("change");
            }
            let id = $("#service").val();
            let url = "{{ route('admin.invoice.select2.sub.service', '_id_') }}";
            url = url.replace('_id_', id);

            $(`#sub_service`).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 getPrice() {
            let priceEle = $('#price');
            let id = $('#sub_service').val();
            if (id !== null) {
                let map_id = "{{ $mappingService->id }}";
                let url = "{{ route('admin.mapping.service.price', '_id_') }}";
                url = url.replace(/_id_/g, id);

                axios({
                    method: "get",
                    url: url,
                    params: {
                        map_id: map_id
                    }
                }).then(function(res) {
                    data = res.data;
                    priceEle.val(data.price);
                    priceEle.prop('readonly', data.fixed);
                });
            }
        }
    </script>
@endpush