@extends('admin.layouts.app')

@section('content')
    @include('admin.layouts.partial.toolbar', ['breadcrumb' => 'Add 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">
<!--begin::Card-->
<div class="card mb-5">
    <div class="card-header">
        <div class="card-title fw-bold text-dark">Category Details</div>
        <div class="card-toolbar">
            <a class="btn btn-primary" href="{{ route('admin.mapping.list') }}">Back</a>
        </div>
    </div>
    <div class="card-body position-relative">
        <div class="d-flex flex-wrap py-5">
            <!--begin::Row-->
            <div class="flex-equal me-5">
                <!--begin::Details-->
                <table class="table fs-6 fw-semibold gs-0 gy-2 gx-2 m-0">
                    <!--begin::Row-->
                    <tbody>
                        <tr>
                            <td class="text-gray-400 min-w-175px w-175px">Category ID:</td>
                            <td class="text-gray-800 min-w-200px">
                                {{ $cat_data->id }}
                            </td>
                        </tr>
                        <!--end::Row-->
                        <!--begin::Row-->
                        <tr>
                            <td class="text-gray-400">Category Name:</td>
                            <td class="text-gray-800">{{ $cat_data->name }}</td>
                        </tr>
                        <!--end::Row-->
                        {{-- @foreach ($client->columns as $key => $value)
                            <!--begin::Row-->
                            <tr>
                                <td class="text-gray-400">{{ $key }}:</td>
                                <td class="text-gray-800">{{ $value }}</td>
                            </tr>
                            <!--end::Row-->
                        @endforeach --}}
                    </tbody>
                </table>
                <!--end::Details-->
            </div>
            <!--end::Row-->
        </div>
    </div>
</div>
<!--end::Card-->

                    <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" method="POST" action="{{ route('admin.mapping.service.store',$mapping_id) }}"
                                id="kt_add_client_user_form" data-kt-redirect="{{ route('admin.mapping.service.list',$mapping_id) }}"
                                data-kt-check-email="{{ route('admin.mapping.service.validate.column') }}">
                                @csrf
                                <button type="button" onclick="addService()" class="btn btn-primary btn-sm pull-right" style="float: right">Add More Service</button>
                                <!--begin::Input group-->
                                <div class="row mb-15 mt-5" id="add_sub_services">
                                    <div class="col-md-4">
                                        <!--begin::Label-->
                                        <label class="required fs-6 fw-semibold mb-2">Service</label>
                                        <!--end::Label-->
                                        <!--begin::Input-->

                                        <select name="service[]" onchange="subservice(1)" data-control="select2"
                                        class="form-select form-select-solid fw-bold" data-hide-search="true" id="add_new_service_1">
                                            <option value="">-Select-</option>
                                            @foreach ($services as $service)
                                            <option value="{{$service['id']}}">{{$service['name']}}</option>
                                            @endforeach
                                        </select>
                                        <!--end::Input-->
                                    </div>

                                    <div class="col-md-4">
                                        <!--begin::Label-->
                                        <label class="required fs-6 fw-semibold mb-2">Sub Service</label>
                                        <!--end::Label-->
                                        <!--begin::Input-->
                                        <select name="sub_service[]" id="add_sub_service_1" data-control="select2"
                                        class="form-select form-select-solid fw-bold" data-hide-search="true">
                                            <!-- <option value="2023">-Select-</option> -->
                                        </select>
                                        <!--end::Input-->
                                    </div>
                                    <div class="col-md-4">
                                        {{-- <span>
                                            <i class="fa fa-trash text-danger"></i>
                                        </span> --}}
                                    </div>

                                </div>
                                <div id ="sub_services"></div>
                                <!--end::Input group-->
                                    <div class="flex-center">
                                        <!--begin::Button-->
                                        <a href="{{ route('admin.mapping.service.list',$cat_data->id) }}" class="btn btn-light me-3">Close</a>
                                        <!--end::Button-->
                                        <!--begin::Button-->
                                        <button type="submit" id="kt_add_client_user_submit" class="btn btn-primary">
                                            <span class="indicator-label">Submit</span>
                                            <span class="indicator-progress">Please wait...
                                                <span
                                                    class="spinner-border spinner-border-sm align-middle ms-2"></span></span>
                                        </button>
                                        <!--end::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/user/create.js') }}"> --}}
        <script>
            var rows = 1;
            function addService()
                {
                    rows = rows+1;
                    // console.log('hi.',rows);
                    // alert(row_id);
                    html='<div class="row mt-5" id="add_sub_services'+rows+'">';
                        html+='<div class="col-md-4">';
                            html+='<label class="required fs-6 fw-semibold mb-2">Service</label>';
                            html+='<select name="service[]" id="add_new_service_'+rows+'" onchange="subservice('+rows+')" data-control="select2" class="form-select form-select-solid fw-bold" data-hide-search="true">';
                                html+='<option value="">-Select-</option>';
                                @foreach ($services as $service)
                                            html+='<option value="{{$service['id']}}">{{$service['name']}}</option>';
                                            @endforeach
                                html+='</select>';
                                html+='</div>';
                                html+='<div class="col-md-4">';
                                    html+='<label class="required fs-6 fw-semibold mb-2">Sub Service</label>';
                                    html+='<select id="add_sub_service_'+rows+'" name="sub_service[]" data-control="select2" class="form-select form-select-solid fw-bold" data-hide-search="true">';
                                        html+='<option value="">-Select-</option>';
                                        html+='</select>';
                                        html+='</div>';
                                        html+='<div class="col-md-4">';
                                            html+='<a href="javascript:void(0)" onclick="deleterow('+rows+')">';
                                            html+='<span>';
                                                html+='<i class="fa fa-trash text-danger"></i>';
                                                html+='</span>';
                                                html+='</a>';
                                                html+='</div>';
                                                html+='</div>';

                    $("#sub_services").html('');
                    $("#add_sub_services").append(html);
                }




            function subservice(id){
                // alert(id);
                var service_id = '#add_new_service_'+id;
                var sub_service_id = '#add_sub_service_'+id;
                let service_id_val = $(service_id).val();
                // alert(service_id_val);
                $.ajax({
                    method:'get',
                    url:'/admin/mapping/select-MappingSubService/'+service_id_val,
                    //data:{service_id:'service_id'},
                    success:function(res)
                    {
                        // document.getElementById(sub_service_id).innerHTML = res;
                        $(sub_service_id).append(res);
                    }

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


@endpush