@extends('admin.layouts.app')

@section('content')
    @include('admin.layouts.partial.toolbar', ['breadcrumb' => 'Edit Client 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">Edit Client Price</h3>
                        </div>
                        <!--end::Header-->
                        <div class="card-body position-relative">
                            <form class="form" action="{{ route('admin.client.store', $client->id) }}"
                                id="kt_add_client_price_form" data-kt-redirect="{{ route('admin.client.list') }}"
                                data-kt-check-email="{{ route('admin.client.user.validate.column') }}">
                                <!--begin::Input group-->
                                <div class="fv-row mb-7 row">
                                    <div class="col-md-2">
                                        <!--begin::Label-->
                                        <label class="required fs-6 fw-semibold mb-2">Client Name</label>
                                    </div>
                                    <div class="col-md-5">
                                        <input type="text" class="form-control form-control-solid"
                                            placeholder="{{ $client->ShopCompany }}" name="name" value=""
                                            id="name" readonly />
                                        <!--end::Input-->
                                    </div>
                                    <div class="col-md-2">
                                        <label class="fs-6 fw-semibold mb-2">Special Service</label>
                                    </div>
                                    <div class="col-md-3">
                                        <input type="hidden" value="0" name="special_service">
                                        <input name="special_service" class="form-check-input" type="checkbox"
                                            value="1" @if ($client_price && $client_price->special_service == 1) checked @endif>
                                    </div>

                                </div>
                                <!--end::Input group-->
                                <!--begin::Input group-->
                                <div class="fv-row mb-7 row">
                                    <div class="col-md-2">
                                        <!--begin::Label-->
                                        <label class="required fs-6 fw-semibold mb-2">Branch Name</label>
                                    </div>
                                    <div class="col-md-5">
                                        <!--begin::Input-->
                                        <select name="branch_ids[]" data-control="select2"
                                            data-dropdown-parent="#kt_add_client_price_form"
                                            class="form-select form-select-solid fw-bold"
                                            data-ajax-search="{{ route('admin.client.select2.branch', $client->id) }}"
                                            multiple>
                                            @if ($client_price)
                                                @foreach ($client_price->branches as $branch)
                                                    <option value="{{ $branch->id }}" selected>{{ $branch->ShopName }}
                                                    </option>
                                                @endforeach
                                            @endif
                                        </select>
                                        <!--end::Input-->
                                        <!--end::Input-->
                                    </div>
                                    <div class="col-md-2">
                                        <label class="required fs-6 fw-semibold mb-2">Contract Closing Date</label>
                                    </div>
                                    <div class="col-md-3">
                                        <input name="closing_date" class="form-control form-control-solid" type="date"
                                            value="{{ $client_price->closing_date ?? '' }}">
                                    </div>

                                </div>
                                <!--end::Input group-->
                                <!--begin::Input group-->
                                <div class="fv-row mb-7 row">
                                    <div class="col-md-2">
                                        <!--begin::Label-->
                                        <label class="required fs-6 fw-semibold mb-2">Mobile</label>
                                    </div>
                                    <div class="col-md-5">
                                        <input type="text" class="form-control form-control-solid" placeholder=""
                                            name="mobile" value="{{ $client_price->mobile ?? '' }}" maxlength="15"/>
                                        <!--end::Input-->
                                    </div>
                                    <div class="col-md-2">
                                        <label class="fs-6 fw-semibold mb-2">Average Invoice(Total)</label>
                                    </div>
                                    <div class="col-md-3">-</div>

                                </div>
                                <!--end::Input group-->
                                <!--begin::Input group-->
                                <div class="fv-row mb-7 row">
                                    <div class="col-md-2">
                                        <!--begin::Label-->
                                        <label class="required fs-6 fw-semibold mb-2">Email</label>
                                    </div>
                                    <div class="col-md-5">
                                        <input type="email" class="form-control form-control-solid" placeholder=""
                                            name="email" value="{{ $client_price->email ?? '' }}" id="email" maxlength="100"/>
                                    </div>
                                    <div class="col-md-2">
                                        <label class="fs-6 fw-semibold mb-2">Storage Value</label>
                                    </div>
                                    <div class="col-md-3">-</div>

                                </div>
                                <!--end::Input group-->
                                <!--begin::Input group-->
                                <div class="fv-row mb-7 row">
                                    <div class="col-md-2">
                                        <!--begin::Label-->
                                        <label class="required fs-6 fw-semibold mb-2">Phone No</label>
                                    </div>
                                    <div class="col-md-5">
                                        <input type="text" class="form-control form-control-solid" placeholder=""
                                            name="phone" value="{{ $client_price->phone ?? '' }}" id="name" maxlength="15"/>
                                        <!--end::Input-->
                                    </div>
                                    <div class="col-md-2">
                                        <label class="fs-6 fw-semibold mb-2">Stock Quantity</label>
                                    </div>
                                    <div class="col-md-3">-</div>

                                </div>
                                <!--end::Input group-->
                                <!--begin::Input group-->
                                <div class="fv-row mb-7 row">
                                    <div class="col-md-2">
                                        <!--begin::Label-->
                                        <label class="required fs-6 fw-semibold mb-2">Address</label>
                                    </div>
                                    <div class="col-md-5">
                                        <textarea class="form-control form-control-solid" name="address">{{ $client_price->address ?? '' }}</textarea>
                                        <!--end::Input-->
                                    </div>
                                    <div class="col-md-2">
                                        <label class="fs-6 fw-semibold mb-2">Capacity</label>
                                    </div>
                                    <div class="col-md-3">-</div>

                                </div>
                                <!--end::Input group-->
                                <!--begin::Input group-->
                                <div class="fv-row mb-7 row">
                                    <div class="col-md-2">
                                        <!--begin::Label-->
                                        <label class="fs-6 fw-semibold mb-2">View Dropship Return</label>
                                    </div>
                                    <div class="col-md-5">
                                        <input type="hidden" value="0" name="dropship_return">
                                        <input class="form-check-input" type="checkbox" value="1"
                                            name="dropship_return" @if ($client_price && $client_price->dropship_return == 1) checked @endif>
                                    </div>
                                    <div class="col-md-2">
                                        <label class="fs-6 fw-semibold mb-2">Service Fee</label>
                                    </div>
                                    <div class="col-md-3">
                                        <input type="hidden" value="0" name="service_fee">
                                        <input class="form-check-input" type="checkbox" value="1"
                                            name="service_fee" @if ($client_price && $client_price->service_fee == 1) checked @endif>
                                    </div>

                                </div>
                                <!--end::Input group-->
                                <!--begin::Input group-->
                                <div class="fv-row mb-7 row">
                                    <div class="col-md-2">
                                        <!--begin::Label-->
                                        <!-- <label class="required fs-6 fw-semibold mb-2">Address</label> -->
                                    </div>
                                    <div class="col-md-5">
                                        <!-- <textarea class="form-control form-control-solid" id="exampleFormControlTextarea1"></textarea> -->
                                        <!--end::Input-->
                                    </div>
                                    <div class="col-md-2">
                                        <label class="fs-6 fw-semibold mb-2">Tax</label>

                                    </div>
                                    <div class="col-md-3">
                                        <select name="tax" data-control="select2"
                                            class="form-select form-select-solid fw-bold" data-hide-search="true">
                                            <option value="1" @if ($client_price && $client_price->tax == 1) checked @endif>Yes
                                            </option>
                                            <option value="0" @if ($client_price && $client_price->tax == 0) checked @endif>No
                                            </option>
                                        </select>
                                    </div>

                                </div>
                                <!--end::Input group-->
                                <!--begin::Input group-->
                                <div class="fv-row mb-7 row">
                                    <div class="col-md-2">
                                        <!--begin::Label-->
                                        <!-- <label class="required fs-6 fw-semibold mb-2">Address</label> -->
                                    </div>
                                    <div class="col-md-5">
                                        <!-- <textarea class="form-control form-control-solid" id="exampleFormControlTextarea1"></textarea> -->
                                        <!--end::Input-->
                                    </div>
                                    <div class="col-md-2">
                                        <label class="fs-6 fw-semibold mb-2">Tax ID</label>
                                    </div>
                                    <div class="col-md-3">
                                        <input class="form-control form-control-solid" type="text"
                                            value="{{ $client_price->tax_id ?? '' }}" name="tax_id" id="tax_id">
                                    </div>

                                </div>
                                <!--end::Input group-->
                                <!-- ============ -->
                                <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">
                                        @if ($client_price)
                                            @foreach ($client_price->clientServices as $service)
                                                @php($index = $loop->iteration)
                                                <div class="row pt-5 {{ $index > 1 ? 'border border-top-1 border-dark' : '' }}"
                                                    data-index="{{ $index }}">
                                                    <div class="col-7">
                                                        <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 }}">
                                                                <option value="{{ $service->category->id }}" selected>
                                                                    {{ $service->category->name }}</option>
                                                            </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 }}"
                                                                data-placeholder="Search..."
                                                                onchange="getSubService(this)">
                                                                <option value="{{ $service->service->id }}" selected>
                                                                    {{ $service->service->name }}</option>
                                                            </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 }}">
                                                                @foreach ($service->service->activeSubServices as $key => $sub_ser)
                                                                @php($sub = getArrayByColumn($service->sub_services, 'id', $sub_ser->id))
                                                                    <div class="d-flex flex-row">
                                                                        <div class="fv-row mb-7">
                                                                            <input type="hidden" value="{{ $sub_ser->id }}"
                                                                                name="client_service[{{ $index }}][sub_services][{{ $key }}][id]">
                                                                            <input type="text"
                                                                                class="form-control form-control-solid"
                                                                                placeholder="{{ $sub_ser->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="{{ $sub['price'] ?? '' }}" />
                                                                        </div>
                                                                    </div>
                                                                @endforeach
                                                            </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"
                                                                @if ($service->enable_threshold) checked @endif>
                                                        </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->id }}]" value="{{ $service->threshold_range[$threshold->id] ?? '' }}">
                                                            </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"
                                                                @if ($service->enable_calc_measurement) checked @endif>
                                                        </div>
                                                    </div>
                                                </div>
                                            @endforeach
                                        @endif
                                    </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="#" 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/client/create.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 pt-5 ${index > 1 ? 'border border-top-1 border-dark': ''}" data-index="${index}">
                <div class="col-7">
                    <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->id }}]">
                        </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>`;
            $('#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) => {
                        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="${element.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=""/>
                                </div>
                            </div>`;
                    });
                    $(`#sub_service_block_${index}`).html(html);
                }
            });

        }

        function deleterow(del_id) {
            var del_id = '#add_sub_services' + del_id;
            $(del_id).remove();
        }
    </script>
@endpush