@extends('admin.layouts.app')

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

    <!--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">Add Branch Price</h3>
                        </div>
                        <!--end::Header-->
                        <div class="card-body position-relative">
                            <form class="form" action="{{ route('admin.client.branch.price.store', $branch->id) }}"
                                id="kt_add_client_price_form"
                                data-kt-redirect="{{ route('admin.client.branch.price.list', $branch->id) }}">
                                <!-- ============ -->
                                <div class="card shadow-none border-0 rounded-0">
                                    <!--begin::Header-->
                                    <div class="card-header" id="kt_activities_header">
                                        <div class="card-title ">
                                            <h3 class="fw-bold text-dark">Add Services</h3>
                                        </div>
                                        <div class="card-toolbar">
                                            <div class="d-flex justify-content-end" data-kt-table-toolbar="base">
                                                <button type="button" onclick="addServiceBlock()"
                                                    class="btn btn-primary btn-sm pull-right" style="">Add
                                                    Service</button>
                                            </div>
                                        </div>
                                    </div>
                                    <!--end::Header-->
                                    <div class="card-body position-relative" id="client_service_block">
                                    </div>
                                </div>

                                <!-- ============ -->
                                <div class="flex-center">
                                    <!--begin::Button-->
                                    <button type="submit" id="kt_add_client_price_submit" class="btn btn-primary">
                                        <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.client.branch.price.list', $branch->id) }}"
                                        class="btn btn-primary me-3">Close</a>
                                    <!--end::Button-->
                                </div>
                            </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/branch/create-price.js') }}"></script>
    <script>
        function addServiceBlock() {
            let index = parseInt(localStorage.getItem('client_service_block')) + 1;
            localStorage.setItem('client_service_block', index);
            let html = `<div class="row ${index > 1 ? 'pt-10 border border-top-1 border-secondary': 'pt-5'}" data-index="${index}" id="service_block_${index}">
                <div class="col-6">
                    <div class="fv-row mb-7">
                                    <label class="required fs-6 fw-semibold mb-2">Category</label>
                                    <select name="client_service[${index}][category_id]" data-control="select2"
                                        class="form-select form-select-solid fw-bold"
                                        data-ajax-search="{{ route('admin.client.select2.category') }}"
                                        onchange="getServices(this)" data-parent-index="${index}" id="category_id_${index}">
                                    </select>
                    </div>
                    <div class="fv-row mb-7">
                                    <label class="required fs-6 fw-semibold mb-2">Service</label>
                                    <select name="client_service[${index}][service_id]" data-control="select2"
                                        class="form-select form-select-solid fw-bold"
                                        id="service_id_${index}" data-parent-index="${index}" onchange="getSubService(this)">
                                    </select>
                    </div>
                    <div class="fv-row mb-7">
                        <label class="required fs-6 fw-semibold mb-2">Sub Service</label>
                        <div id="sub_service_block_${index}"></div>
                    </div>
                </div>
                <div class="col-5">
                    <div class="d-flex fv-row mb-7">
                        <label class="fs-6 fw-semibold mb-2">Enable Threshold</label>
                        <input type="hidden" name="client_service[${index}][enable_threshold]" value="0">
                        <input type="checkbox" class="form-check-input mx-5" name="client_service[${index}][enable_threshold]" id="enable_threshold_${index}" data-parent-index="${index}" value="1">
                    </div>
                    @foreach ($thresholds as $key => $threshold)
                        <div class="d-flex fv-row mb-7">
                            <label class="fs-6 fw-semibold mb-2" style="width:7rem">{{ $threshold->from }}-{{ $threshold->to }}</label>
                            <input type="text" class="form-control form-control-solid" name="client_service[${index}][threshold_range][{{ $threshold->from . '-' . $threshold->to }}]" value="0">
                        </div>
                    @endforeach

                    <div class="d-flex fv-row mb-7">
                        <label class="fs-6 fw-semibold mb-2">Enable Calculation with Measurement</label>
                        <input type="hidden" name="client_service[${index}][enable_calc_measurement]" value="0">
                        <input type="checkbox" class="form-check-input mx-5" name="client_service[${index}][enable_calc_measurement]" id="enable_calc_measurement_${index}" data-parent-index="${index}" value="1">
                    </div>
                </div>
                <div class="col-1">
                    <button class="btn btn-danger btn-sm" type="button" onclick="deleteServiceBlock('${ index }')"><i class="fa fa-trash"></i></button>
                </div>
                </div>`;
            $('#client_service_block').append(html);
            handleSelect2Ajax();
        }

        function getServices(ele) {
            let index = ele.getAttribute('data-parent-index');
            let value = ele.value;
            let url = "{{ route('admin.client.select2.service', '_id_') }}";
            url = url.replace('_id_', value);
            $(`#service_id_${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 ...",
            });
        }

        function getSubService(ele) {
            let index = ele.getAttribute('data-parent-index');
            let value = ele.value;
            let url = "{{ route('admin.client.subservice', '_id_') }}";
            url = url.replace('_id_', value);

            $.ajax({
                url: url,
                method: "GET",
                success: function(res) {
                    let html = ``;
                    res.results.forEach((element, key) => {
                        let name = element.name ? element.name : element.packing_material_name;
                        html += `<div class="d-flex flex-row">
                                <div class="fv-row mb-7">
                                    <input type="hidden" value="${element.id}" name="client_service[${index}][sub_services][${key}][id]">
                                    <input type="text" class="form-control form-control-solid" placeholder="${name}" readonly/>
                                </div>
                                <div class="fv-row mx-5 mb-7">
                                    <input type="text" class="form-control form-control-solid" placeholder="Add Price"
                                        name="client_service[${index}][sub_services][${key}][price]" value="0"/>
                                </div>
                            </div>`;
                    });
                    $(`#sub_service_block_${index}`).html(html);
                }
            });

        }

        function deleteServiceBlock(index) {
            let del_id = '#service_block_' + index;
            $(del_id).remove();
        }
    </script>
@endpush