@extends('layouts.app')
@section('content')
    <div class="app-main flex-column flex-row-fluid" id="kt_app_main">
        <!--begin::Content wrapper-->
        <div class="d-flex flex-column flex-column-fluid">
            <!--begin::Toolbar-->
            <div id="kt_app_toolbar" class="app-toolbar py-3 py-lg-6">
                <!--begin::Toolbar container-->
                <div id="kt_app_toolbar_container" class="app-container container-xxl d-flex flex-stack">
                    <!--begin::Page title-->
                    <div class="page-title d-flex flex-column justify-content-center flex-wrap me-3">
                        <!--begin::Title-->
                        <h1 class="page-heading d-flex text-dark fw-bold fs-3 flex-column justify-content-center my-0">
                            Add Configuration</h1>
                        <!--end::Title-->
                        <!--begin::Breadcrumb-->
                        <ul class="breadcrumb breadcrumb-separatorless fw-semibold fs-7 my-0 pt-1">
                            <!--begin::Item-->
                            <li class="breadcrumb-item text-muted">
                                <a href="{{ route('dashboard') }}" class="text-muted text-hover-primary">Home</a>
                            </li>
                            <!--end::Item-->
                            <!--begin::Item-->
                            <li class="breadcrumb-item">
                                <span class="bullet bg-gray-400 w-5px h-2px"></span>
                            </li>
                            <!--end::Item-->
                            <!--begin::Item-->
                            <li class="breadcrumb-item text-muted">product</li>
                            <li class="breadcrumb-item">
                                <span class="bullet bg-gray-400 w-5px h-2px"></span>
                            </li>
                            <!--end::Item-->
                            <!--begin::Item-->
                            <li class="breadcrumb-item text-muted">Add configuration</li>

                            <!--end::Item-->
                        </ul>
                        <!--end::Breadcrumb-->
                    </div>
                </div>
                <!--end::Toolbar container-->
            </div>
            <!--end::Toolbar-->
            <!--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::Form-->
                    <form id="kt_add_config_form" class="form d-flex flex-column flex-lg-row"
                        data-action="{{ $url }}">
                        @csrf
                        <div class="d-flex flex-column flex-row-fluid gap-7 gap-lg-10">
                            <!--begin::Tab content-->
                            <div class="tab-content">
                                <!--begin::Tab pane-->
                                <div class="tab-pane fade show active" role="tab-panel">
                                    <div class="d-flex flex-column gap-7 gap-lg-10">
                                        <!--begin::General options-->
                                        <div class="card card-flush py-4">
                                            <div class="card-body pt-0">
                                                <!--begin::Input group-->
                                                <h3 class="mb-2">Set Retailer</h3>
                                                <div class="row pb-2">
                                                    <div class="col-md-12">
                                                        <div class="row">
                                                            <div class="col-md-6">
                                                                <!--begin::Radio-->
                                                                <div class="form-check form-check-custom form-check-solid">
                                                                    <!--begin::Input-->
                                                                    <input class="form-check-input me-3"
                                                                        name="customer_type" type="radio" value="1"
                                                                        id="kt_modal_update_role_option_0">
                                                                    <!--end::Input-->
                                                                    <!--begin::Label-->
                                                                    <label class="form-check-label"
                                                                        for="kt_modal_update_role_option_0">
                                                                        <div class="fw-bold text-gray-800">
                                                                            Retailer Category Wise</div>
                                                                        <div class="text-gray-600">Set Configuration for
                                                                            Retailer category wise</div>
                                                                    </label>
                                                                    <!--end::Label-->
                                                                </div>
                                                                <!--end::Radio-->
                                                            </div>
                                                            <div class="col-md-6">
                                                                <!--begin::Radio-->
                                                                <div class="form-check form-check-custom form-check-solid">
                                                                    <!--begin::Input-->
                                                                    <input class="form-check-input me-3"
                                                                        name="customer_type" type="radio" value="2"
                                                                        id="kt_modal_update_role_option_1">
                                                                    <!--end::Input-->
                                                                    <!--begin::Label-->
                                                                    <label class="form-check-label"
                                                                        for="kt_modal_update_role_option_0">
                                                                        <div class="fw-bold text-gray-800">
                                                                            Retailer Wise</div>
                                                                        <div class="text-gray-600">Set Configuration for
                                                                            Retailer Wise</div>
                                                                    </label>
                                                                    <!--end::Label-->
                                                                </div>
                                                                <!--end::Radio-->
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <h3 class="mb-2">Set Product</h3>
                                                <div class="row">
                                                    <div class="col-md-12">
                                                        <div class="row">
                                                            <div class="col-md-6">
                                                                <!--begin::Radio-->
                                                                <div class="form-check form-check-custom form-check-solid">
                                                                    <!--begin::Input-->
                                                                    <input class="form-check-input me-3" name="product_type"
                                                                        type="radio" value="1"
                                                                        id="kt_modal_update_product_option_0">
                                                                    <!--end::Input-->
                                                                    <!--begin::Label-->
                                                                    <label class="form-check-label"
                                                                        for="kt_modal_update_product_option_0">
                                                                        <div class="fw-bold text-gray-800">
                                                                            Product Category Wise</div>
                                                                        <div class="text-gray-600">Set Configuration for
                                                                            Product category wise</div>
                                                                    </label>
                                                                    <!--end::Label-->
                                                                </div>
                                                                <!--end::Radio-->
                                                            </div>
                                                            <div class="col-md-6">
                                                                <!--begin::Radio-->
                                                                <div class="form-check form-check-custom form-check-solid">
                                                                    <!--begin::Input-->
                                                                    <input class="form-check-input me-3" name="product_type"
                                                                        type="radio" value="2"
                                                                        id="kt_modal_update_product_option_1">
                                                                    <!--end::Input-->
                                                                    <!--begin::Label-->
                                                                    <label class="form-check-label"
                                                                        for="kt_modal_update_product_option_1">
                                                                        <div class="fw-bold text-gray-800">
                                                                            Product Wise</div>
                                                                        <div class="text-gray-600">Set Configuration for
                                                                            Product Wise</div>
                                                                    </label>
                                                                    <!--end::Label-->
                                                                </div>
                                                                <!--end::Radio-->
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="row mt-5">
                                                    <div class="col-md-12">
                                                        <div class="row">
                                                            <div class="col-md-6 fv-row retailer-types d-none">
                                                                <!--begin::Label-->
                                                                <label class="required form-label">Retailer</label>
                                                                <!--end::Label-->
                                                                <!--begin::Input-->
                                                                <select name="retailer_category_id" data-control="select2"
                                                                    class="form-select form-select-solid"
                                                                    data-hide-search="true">
                                                                    <option value="">Select Category</option>
                                                                    @forelse ($customerCategory as $category)
                                                                        <option value="{{ $category->id }}">
                                                                            {{ $category->name }}
                                                                        </option>
                                                                    @empty
                                                                        <option value="">
                                                                            No Data
                                                                        </option>
                                                                    @endforelse
                                                                </select>
                                                                <!--end::Input-->
                                                            </div>
                                                            <div class="col-md-6 fv-row retailer-show d-none">
                                                                <!--begin::Label-->
                                                                <label class="required form-label">Retailer</label>
                                                                <!--end::Label-->
                                                                <!--begin::Input-->
                                                                <select name="retailer_id" data-control="select2"
                                                                    class="form-select form-select-solid"
                                                                    data-hide-search="true">
                                                                    <option value="">Select Retailer</option>
                                                                    @forelse ($mappedRetailers as $retailer)
                                                                        <option value="{{ $retailer->id }}" {{ isset($productUploadConfig->user_id) && $productUploadConfig->user_id != null && $productUploadConfig->user_id == $retailer->id ? 'selected' : '' }} >
                                                                            {{ $retailer->company_name }}
                                                                        </option>
                                                                    @empty
                                                                        <option value="">
                                                                            No Data
                                                                        </option>
                                                                    @endforelse
                                                                </select>
                                                                <!--end::Input-->
                                                            </div>
                                                            <div class="col-md-6 fv-row product-category-show d-none">
                                                                <!--begin::Label-->
                                                                <label class="required form-label">Product Category</label>
                                                                <!--end::Label-->
                                                                <!--begin::Input-->
                                                                <select name="product_category_id" data-control="select2"
                                                                    class="form-select form-select-solid"
                                                                    data-hide-search="true">
                                                                    <option value="">Select Category</option>
                                                                    @forelse ($productCategories as $category)
                                                                        <option value="{{ $category->id }}"{{ isset($productUploadConfig->product_category_id) && $productUploadConfig->product_category_id != null && $productUploadConfig->product_category_id == $category->id ? 'selected' : '' }}>
                                                                            {{ $category->name }}
                                                                        </option>
                                                                    @empty
                                                                        <option value="">
                                                                            No Data
                                                                        </option>
                                                                    @endforelse
                                                                </select>
                                                                <!--end::Input-->
                                                            </div>
                                                            <div class="col-md-6 fv-row product-show d-none">
                                                                <!--begin::Label-->
                                                                <label class="required form-label">Product</label>
                                                                <!--end::Label-->
                                                                <!--begin::Input-->
                                                                <select name="product_id" data-control="select2"
                                                                    class="form-select form-select-solid">
                                                                    <option value="">Select Product</option>
                                                                    @forelse ($products as $product)
                                                                        <option value="{{ $product->id }}">
                                                                            {{ $product->name }}
                                                                        </option>
                                                                    @empty
                                                                        <option value="">
                                                                            No Data
                                                                        </option>
                                                                    @endforelse
                                                                </select>
                                                                <!--end::Input-->
                                                            </div>
                                                        </div>
                                                        <br>
                                                        <div class="row">
                                                            <div class="col-md-6 fv-row">
                                                                <!--begin::Label-->
                                                                <label class="required form-label">Base Rate</label>
                                                                <!--end::Label-->
                                                                <!--begin::Input-->
                                                                <select name="base_rate" data-control="select2"
                                                                    class="form-select form-select"
                                                                    data-hide-search="true">
                                                                    <option value="">Select Product</option>
                                                                    <option value="1">MRP</option>
                                                                    <option value="2">COST</option>
                                                                    <option value="3">Prate</option>
                                                                </select>
                                                            </div>
                                                            <div class="col-md-6 fv-row">
                                                                <!--begin::Label-->
                                                                <label class="required form-label">Percentage for
                                                                    PTR</label>
                                                                <!--end::Label-->
                                                                <!--begin::Input-->
                                                                <input type="text" name="percentage_for_ptr"
                                                                    class="form-control mb-2"
                                                                    placeholder="Enter percentage of PTR" maxlength="6"
                                                                    oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*?)\..*/g, '$1');" value="">
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <br>
                                                <div class="row">
                                                    <div class="col-md-6 fv-row">
                                                        <!--begin::Label-->
                                                        <label class="required fs-6 fw-semibold mb-2">Percentage for
                                                            Discount</label>
                                                        <!--end::Label-->
                                                        <!--begin::Input-->
                                                        <input type="text" name="percentage_for_discount"
                                                            class="form-control mb-2"
                                                            placeholder="Enter percentage for discount" maxlength="6"
                                                            oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*?)\..*/g, '$1');" >
                                                        <!--end::Input-->
                                                    </div>
                                                    <div class="col-md-6 fv-row">
                                                        <!--begin::Label-->
                                                        <label class="required fs-6 fw-semibold mb-2">Scheme</label>
                                                        <!--end::Label-->
                                                        <!--begin::Input-->
                                                        <input type="text" name="scheme" class="form-control mb-2"
                                                            placeholder="Enter Scheme">
                                                        <!--end::Input-->
                                                    </div>
                                                </div>
                                                <br>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                            </div>
                            <br>
                            <!--end::Tab content-->
                            <div class="d-flex justify-content-end">
                                <!--begin::Button-->
                                <a href="{{ route('dealer.upload-config.list') }}" id="kt_add_config_cancel" class="btn btn-light me-5">Cancel</a>
                                <!--end::Button-->
                                <!--begin::Button-->
                                <button type="submit" id="kt_add_config_submit" class="btn btn-primary">
                                    <span class="indicator-label">{{ $button }}</span>
                                    <span class="indicator-progress">Please wait...
                                        <span class="spinner-border spinner-border-sm align-middle ms-2"></span></span>
                                </button>
                                <!--end::Button-->
                            </div>
                        </div>
                        <!--end::Main column-->
                    </form>
                </div>
                <!--end::Form-->
            </div>
            <!--end::Content container-->
        </div>
        <!--end::Content-->
    </div>
@endsection
@push('script')
    <script>
        $(document).ready(function() {
            $('#kt_modal_update_role_option_0').on('change', function(e) {
                $('.retailer-types').removeClass('d-none');
                $('.retailer-show').addClass('d-none');
            });
            $('#kt_modal_update_role_option_1').on('change', function(e) {
                $('.retailer-show').removeClass('d-none');
                $('.retailer-types').addClass('d-none');
            });
            $('#kt_modal_update_product_option_0').on('change', function(e) {
                $('.product-category-show').removeClass('d-none');
                $('.product-show').addClass('d-none');
            });
            $('#kt_modal_update_product_option_1').on('change', function(e) {
                $('.product-show').removeClass('d-none');
                $('.product-category-show').addClass('d-none');
            });
        });
    </script>
    {{-- <script>
       $(document).ready(function() {
            if ($('#kt_modal_update_role_option_0').is(':checked')) {
                $('.retailer-types').removeClass('d-none');
                $('.retailer-show').addClass('d-none');
            } else {
                $('.retailer-show').removeClass('d-none');
                $('.retailer-types').addClass('d-none');
            }

            if ($('#kt_modal_update_product_option_0').is(':checked')) {
                $('.product-category-show').removeClass('d-none');
                $('.product-show').addClass('d-none');
            } else {
                $('.product-show').removeClass('d-none');
                $('.product-category-show').addClass('d-none');
            }

            // Changes as per on check also
            $('.retailer-types').removeClass('d-none');
            $('.retailer-show').addClass('d-none');

            $('.retailer-show').removeClass('d-none');
            $('.retailer-types').addClass('d-none');
        });
    </script> --}}
    <script src="{{ asset('assets/js/product_upload_config/add-config.js') }}"></script>
    <script src="{{ asset('assets/js/google_location.js') }}"></script>
@endpush