@extends('backend.master')
@section('title')
    গ্রাহক যোগ করুন
@endsection
@section('body')
    @if(Auth::user()->user_type == 4 || strpos(Auth::user()->permission, '2') !== false)
        <!-- start page title -->
        <div class="row">
            <div class="col-12">
                <div class="page-title-box d-flex align-items-center justify-content-between">
                    <h4 class="mb-0 font-size-18">গ্রাহক যোগ করুন</h4>
                    <div class="page-title-right">
                        <ol class="breadcrumb m-0">
                            <li class="breadcrumb-item"><a href="">গ্রাহকের তথ্য</a></li>
                            <li class="breadcrumb-item active">গ্রাহক যোগ করুন</li>
                        </ol>
                    </div>
                </div>
            </div>
        </div>
        <!-- end page title -->
        <form action="{{ route('water.client.store') }}" method="POST" class="needs-validation" novalidate enctype="multipart/form-data">
            @csrf
            <div class="row">
                <div class="col-md-12">
                    <ul class="nav nav-tabs" role="tablist">
                        <li class="nav-item">
                            <a class="nav-link active" data-toggle="tab" href="#home" role="tab">
                                <span class="d-block d-sm-none"><i class="fas fa-home"></i></span>
                                <span class="d-none d-sm-block">গ্রাহকের তথ্য</span>
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" data-toggle="tab" href="#profile" role="tab">
                                <span class="d-block d-sm-none"><i class="far fa-user"></i></span>
                                <span class="d-none d-sm-block">মাসিক চার্জ নির্ধারণ</span>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="tab-content p-3 text-muted">
                <div class="tab-pane active" id="home" role="tabpanel">
                    <div class="row">
                        <div class="col-md-12">
                            <div class="card">
                                <div class="card-body">
                                    <div class="row">
                                        <div class="col-md-6 col-sm-12">
                                            <div class="form-group mb-4">
                                                <label for="holding_info" class="form-label">হোল্ডিং তথ্য<span class="required">*</span></label>
                                                <div class="input-group">
                                                    <input class="form-control DisableSpace" name="holding_info" type="text" autocomplete="off" id="holding_info" placeholder="Search by holding no, name, phone number" required>
                                                    <button type="button" style="border-top-left-radius: 0; border-bottom-left-radius: 0" class="btn btn-dark" id="search_holding_info">Search</button>
                                                </div>
                                            </div>
                                            <div class="form-group mb-4">
                                                <label for="word_no" class="form-label">ওয়ার্ড নং <span class="required">*</span></label>
                                                <select name="word_no" required class="form-control select2" id="word_no">
                                                    <option style="color: red" selected value="">&mdash; চিহ্নিত করুন &mdash;</option>
                                                    @foreach(words() as $word)
                                                        <option value="{{ $word->number }}" data-code="{{ $word->number }}">{{ $word->number }}</option>
                                                    @endforeach
                                                </select>
                                                <div class="invalid-feedback">
                                                    ওয়ার্ড নং
                                                </div>
                                            </div>
                                            <div class="form-group mb-4">
                                                <label for="account_number" class="form-label">হিসাব নং<span class="required">*</span></label>
                                                <input class="form-control DisableSpace" name="account_number" type="text" id="account_number" required>
                                                <p>সর্বশেষ হিসাব নং <span id="lastAccountNumber" class="text-success">0</span></p>
                                            </div>
                                            <div class="form-group mb-4">
                                                <label for="client_nid" class="form-label">এনআইডি নম্বর<span class="required">*</span></label>
                                                <div class="input-group">
                                                    <input class="form-control DisableSpace" name="client_nid" type="text" id="client_nid" required>
                                                    <button type="button" class="btn btn-dark" style="border-top-left-radius: 0; border-bottom-left-radius: 0" id="dataBySearch"><i class="fas fa-running"></i></button>
                                                </div>
                                            </div>
                                            <div class="form-group mb-4">
                                                <label for="client_name" class="form-label">গ্রাহকের নাম<span class="required">*</span></label>
                                                <input class="form-control" name="client_name" type="text" id="client_name" required>
                                            </div>
                                            <div class="form-group mb-4">
                                                <label for="client_mother_name" class="form-label">মাতার নাম<span class="required">*</span></label>
                                                <input class="form-control" name="client_mother_name" type="text" id="client_mother_name" required>
                                            </div>
                                            <div class="form-group mb-4">
                                                <label for="connection_date" class="form-label">সংযোগ তারিখ<span class="required">*</span></label>
                                                <input class="form-control" name="connection_date" type="date" id="connection_date" required>
                                            </div>
                                        </div>
                                        <div class="col-md-6 col-sm-12">
                                            <div class="form-group mb-4">
                                                <label for="holding_no" class="form-label">হোল্ডিং নং ও আইডি<span class="required">*</span></label>
                                                <div class="input-group">
                                                    <input class="form-control DisableSpace" name="holding_no" type="text" autocomplete="off" id="holding_no" placeholder="হোল্ডিং নং" readonly required>
                                                    <input class="form-control DisableSpace" name="holding_unique_id" type="hidden" autocomplete="off" id="holding_unique_id" placeholder="হোল্ডিং আইডি" readonly required>
                                                </div>
                                            </div>
                                            <div class="form-group mb-4">
                                                <label for="village_id" class="form-label">রাস্তা / মহল্লা <span class="required">*</span></label>
                                                <select name="village_id" required class="form-control select2" id="village_id">
                                                    <option style="color: red" selected value="">&mdash; চিহ্নিত করুন &mdash;</option>
                                                    @foreach($villages as $item)
                                                        <option value="{{ $item->id }}" data-code="{{ $item->code }}">({{ $item->code }}) {{ $item->bn_village_name }}</option>
                                                    @endforeach
                                                </select>
                                                <div class="invalid-feedback">
                                                    রাস্তা / মহল্লা
                                                </div>
                                            </div>
                                            <div class="form-group mb-4">
                                                <label for="client_id" class="form-label">গ্রাহকের আইডি<span class="required">*</span></label>
                                                <input class="form-control DisableSpace" name="client_id" type="text" autocomplete="off" id="client_id" readonly required>
                                                <p class="text-danger" id="clientIdValidation"></p>
                                            </div>
                                            <div class="form-group mb-4">
                                                <label for="client_father_or_husband_name" class="form-label">পিতা/ স্বামীর নাম<span class="required">*</span></label>
                                                <input class="form-control" name="client_father_or_husband_name" type="text" id="client_father_or_husband_name" required>
                                            </div>
                                            <div class="form-group mb-4">
                                                <label for="client_address" class="form-label">গ্রাহকের ঠিকানা<span class="required">*</span></label>
                                                <input class="form-control" name="client_address" type="text" id="client_address" required>
                                            </div>
                                            <div class="form-group mb-4">
                                                <label for="client_phone" class="form-label">মোবাইল নম্বর<span class="required">*</span></label>
                                                <input class="form-control DisableSpace" name="phone" type="number" min="0" minlength="11" maxlength="11" id="client_phone" required>
                                            </div>
                                            <div class="form-group mb-4">
                                                <label for="client_pic" class="form-label">ছবি</label>
                                                <div class="custom-file">
                                                    <input type="file" accept="image/jpeg,jpg,png" name="client_pic" class="custom-file-input form-control" id="client_pic">
                                                    <label class="custom-file-label" for="client_pic">Choose file</label>
                                                </div>
                                            </div>
                                            <div class="form-group mb-4">
                                                <div class="custom-control custom-checkbox custom-control-right">
                                                    <input type="checkbox" class="custom-control-input" name="is_freedom_fighter" value="1" id="is_freedom_fighter">
                                                    <label class="custom-control-label" for="is_freedom_fighter">মুক্তিযোদ্ধা / দাতব্য প্রতিষ্ঠান কিনা?</label>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-12">
                            <div class="card">
                                <div class="card-body">
                                    <div class="form-group row mb-4">
                                        <label for="bank_account_id" class="form-label">ব্যাংকের তথ্য</label>
                                        <select name="bank_account_id" class="form-control select2" id="bank_account_id">
                                            <option style="color: red" selected disabled value="">&mdash; চিহ্নিত করুন &mdash;</option>
                                            @foreach($bankAccount as $item)
                                                <option value="{{ $item->id }}">{{ $item->bankInfo->bank_name.', '.$item->bank_branch.' ('.$item->account_number.')' }}</option>
                                            @endforeach
                                        </select>
                                        <div class="invalid-feedback">
                                            ব্যাংকের তথ্য
                                        </div>
                                    </div>
                                    <div class="form-group row mb-4">
                                        <div class="custom-control custom-checkbox custom-control-right">
                                            <input type="checkbox" class="custom-control-input" checked name="connection_status" value="1" id="connection_status">
                                            <label class="custom-control-label" for="connection_status">সক্রিয় কিনা?</label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="tab-pane" id="profile" role="tabpanel">
                    <div class="col-md-12">
                        <h4 class="text-center">মাসিক চার্জ নির্ধারণ</h4>
                    </div>
                    <div class="col-md-12">
                        <div class="card">
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-md-6 col-sm-12">
                                        <div class="form-group mb-4">
                                            <label for="water_connection_type" class="form-label">সংযোগের ধরন <span class="required">*</span></label>
                                            <select name="water_connection_type" class="form-control select2" id="water_connection_type">
                                                <option style="color: red" selected value="">&mdash; চিহ্নিত করুন &mdash;</option>
                                                <option value="0">মিটার</option>
                                                <option value="1">ডায়া</option>
                                            </select>
                                            <div class="invalid-feedback">
                                                সংযোগের ধরন
                                            </div>
                                        </div>
                                        <div class="form-group mb-4">
                                            <label for="client_type_id" class="form-label">গ্রাহকের ধরন <span class="required">*</span></label>
                                            <select name="client_type_id" class="form-control select2" id="client_type_id">
                                                <option style="color: red" selected value="">&mdash; চিহ্নিত করুন &mdash;</option>
                                                @foreach($clientTypes as $item)
                                                    <option value="{{ $item->id }}">{{ $item->client_type }}</option>
                                                @endforeach
                                            </select>
                                            <div class="invalid-feedback">
                                                সংযোগের ধরন
                                            </div>
                                        </div>
                                        <div class="meter_type" style="display: none;">
                                            <div class="form-group mb-4">
                                                <label for="per_unit_rate" class="form-label">প্রতি ইউনিটের মূল্য<span class="required">*</span></label>
                                                <input class="form-control DisableSpace" name="per_unit_rate" value="0.00" type="number" min="0" step="any" id="per_unit_rate" required readonly disabled>
                                            </div>
                                            <div class="form-group mb-4">
                                                <label for="min_unit" class="form-label">সর্বনিম্ন ইউনিট<span class="required">*</span></label>
                                                <input class="form-control DisableSpace" name="min_unit" value="0.00" type="number" min="0" step="any" id="min_unit" required readonly disabled>
                                            </div>
                                            <div class="form-group mb-4">
                                                <label for="min_fee" class="form-label">সর্বনিম্ন ফি<span class="required">*</span></label>
                                                <input class="form-control DisableSpace" name="min_fee" value="0.00" type="number" min="0" step="any" id="min_fee" required readonly disabled>
                                            </div>
                                            <div class="form-group mb-4">
                                                <label for="meter_no" class="form-label">মিটার নং<span class="required">*</span></label>
                                                <input class="form-control DisableSpace" name="meter_no" type="text" id="meter_no" required disabled>
                                            </div>
                                        </div>
                                        <div class="dia_type" style="display: none;">
                                            <div class="form-group mb-4">
                                                <label for="monthly_charges" class="form-label">মাসিক চার্জ<span class="required">*</span></label>
                                                <input class="form-control DisableSpace" name="monthly_charges" value="0.00" type="text" id="monthly_charges" readonly required disabled>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6 col-sm-12">
                                        <div class="form-group mb-4">
                                            <label class="col-form-label">সংযোগের প্রকার</label>
                                            <br/>
                                            <div class="form-check form-check-inline">
                                                <input class="form-check-input" type="radio" name="connection_type" id="connection_type1" value="1">
                                                <label class="form-check-label" for="connection_type1">নতুন</label>
                                            </div>
                                            <div class="form-check form-check-inline">
                                                <input class="form-check-input" type="radio" name="connection_type" id="connection_type2" value="0">
                                                <label class="form-check-label" for="connection_type2">পুরাতন</label>
                                            </div>
                                        </div>
                                        <div class="form-group mb-4">
                                            <label for="dia_type_id" class="form-label">ডায়া টাইপ<span class="required">*</span></label>
                                            <select name="dia_type_id" class="form-control select2" id="dia_type_id">
                                                <option style="color: red" selected value="">&mdash; চিহ্নিত করুন &mdash;</option>
                                                @foreach($diaTypes as $item)
                                                    <option value="{{ $item->id }}">{{ $item->dia_type }}</option>
                                                @endforeach
                                            </select>
                                            <div class="invalid-feedback">
                                                সংযোগের ধরন
                                            </div>
                                        </div>
                                        <div class="meter_type" style="display: none;">
                                            <div class="form-group mb-4">
                                                <label for="charged_unit_rate" class="form-label">ধার্যকৃত ইউনিটের মূল্য<span class="required">*</span></label>
                                                <input class="form-control DisableSpace" name="charged_unit_rate" type="number" value="0.00" min="0" step="any" id="charged_unit_rate" required disabled>
                                            </div>
                                            <div class="form-group mb-4">
                                                <label for="charged_min_unit" class="form-label">ধার্যকৃত সর্বনিম্ন ইউনিট<span class="required">*</span></label>
                                                <input class="form-control DisableSpace" name="charged_min_unit" type="number" value="0.00" min="0" step="any" id="charged_min_unit" required disabled>
                                            </div>
                                            <div class="form-group mb-4">
                                                <label for="charged_min_fee" class="form-label">ধার্যকৃত সর্বনিম্ন ফি<span class="required">*</span></label>
                                                <input class="form-control DisableSpace" name="charged_min_fee" type="number" value="0.00" min="0" step="any" id="charged_min_fee" required disabled>
                                            </div>
                                            <div class="form-group mb-4">
                                                <label for="initial_meter_reading" class="form-label">প্রারম্ভিক মিটার রিডিং</label>
                                                <input class="form-control DisableSpace" name="initial_meter_reading" type="number" min="0" step="any" id="initial_meter_reading" disabled>
                                            </div>
                                        </div>
                                        <div class="dia_type" style="display: none;">
                                            <div class="form-group mb-4">
                                                <label for="charged_monthly_charges" class="form-label">ধার্যকৃত মাসিক চার্জ<span class="required">*</span></label>
                                                <input class="form-control DisableSpace" name="charged_monthly_charges" type="number" value="0.00" min="0" step="any" id="charged_monthly_charges" required disabled>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-12 initial_div" style="display: none">
                        <div class="card">
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-md-6 col-sm-12">
                                        <div class="form-group mb-4">
                                            <label for="initial_dues" class="form-label">প্রারম্ভিক বকেয়া<span class="required">*</span></label>
                                            <input class="form-control DisableSpace" name="initial_dues" type="number" value="0.00" min="0" step="any" id="initial_dues" required disabled>
                                        </div>
                                        <div class="form-group mb-4">
                                            <label for="initial_dues_start_month" class="form-label">প্রারম্ভিক বকেয়া শুরুর মাস<span class="required">*</span></label>
                                            <select name="initial_dues_start_month" required class="form-control select2" id="initial_dues_start_month" disabled>
                                                <option style="color: red" selected value="">&mdash; চিহ্নিত করুন &mdash;</option>
                                                <option class="" value="01">জানুয়ারী</option>
                                                <option class="" value="02">ফেব্রুয়ারী</option>
                                                <option class="" value="03">মার্চ</option>
                                                <option class="" value="04">এপ্রিল</option>
                                                <option class="" value="05">মে</option>
                                                <option class="" value="06">জুন</option>
                                                <option class="" value="07">জুলাই</option>
                                                <option class="" value="08">আগস্ট</option>
                                                <option class="" value="09">সেপ্টেম্বর</option>
                                                <option class="" value="10">অক্টোবর</option>
                                                <option class="" value="11">নভেম্বর</option>
                                                <option class="" value="12">ডিসেম্বর</option>
                                            </select>
                                            <div class="invalid-feedback">
                                                প্রারম্ভিক বকেয়া শুরুর মাস
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6 col-sm-12">
                                        <div class="form-group mb-4">
                                            <label for="initial_dues_start_year" class="form-label">প্রারম্ভিক বকেয়া শুরুর বছর<span class="required">*</span></label>
                                            <select name="initial_dues_start_year" required class="form-control select2" id="initial_dues_start_year" disabled>
                                                <option style="color: red" selected value="">&mdash; চিহ্নিত করুন &mdash;</option>
                                                    <option value='1900' >1900</option><option value='1901' >1901</option><option value='1902' >1902</option><option value='1903' >1903</option><option value='1904' >1904</option><option value='1905' >1905</option><option value='1906' >1906</option><option value='1907' >1907</option><option value='1908' >1908</option><option value='1909' >1909</option><option value='1910' >1910</option><option value='1911' >1911</option><option value='1912' >1912</option><option value='1913' >1913</option><option value='1914' >1914</option><option value='1915' >1915</option><option value='1916' >1916</option><option value='1917' >1917</option><option value='1918' >1918</option><option value='1919' >1919</option><option value='1920' >1920</option><option value='1921' >1921</option><option value='1922' >1922</option><option value='1923' >1923</option><option value='1924' >1924</option><option value='1925' >1925</option><option value='1926' >1926</option><option value='1927' >1927</option><option value='1928' >1928</option><option value='1929' >1929</option><option value='1930' >1930</option><option value='1931' >1931</option><option value='1932' >1932</option><option value='1933' >1933</option><option value='1934' >1934</option><option value='1935' >1935</option><option value='1936' >1936</option><option value='1937' >1937</option><option value='1938' >1938</option><option value='1939' >1939</option><option value='1940' >1940</option><option value='1941' >1941</option><option value='1942' >1942</option><option value='1943' >1943</option><option value='1944' >1944</option><option value='1945' >1945</option><option value='1946' >1946</option><option value='1947' >1947</option><option value='1948' >1948</option><option value='1949' >1949</option><option value='1950' >1950</option><option value='1951' >1951</option><option value='1952' >1952</option><option value='1953' >1953</option><option value='1954' >1954</option><option value='1955' >1955</option><option value='1956' >1956</option><option value='1957' >1957</option><option value='1958' >1958</option><option value='1959' >1959</option><option value='1960' >1960</option><option value='1961' >1961</option><option value='1962' >1962</option><option value='1963' >1963</option><option value='1964' >1964</option><option value='1965' >1965</option><option value='1966' >1966</option><option value='1967' >1967</option><option value='1968' >1968</option><option value='1969' >1969</option><option value='1970' >1970</option><option value='1971' >1971</option><option value='1972' >1972</option><option value='1973' >1973</option><option value='1974' >1974</option><option value='1975' >1975</option><option value='1976' >1976</option><option value='1977' >1977</option><option value='1978' >1978</option><option value='1979' >1979</option><option value='1980' >1980</option><option value='1981' >1981</option><option value='1982' >1982</option><option value='1983' >1983</option><option value='1984' >1984</option><option value='1985' >1985</option><option value='1986' >1986</option><option value='1987' >1987</option><option value='1988' >1988</option><option value='1989' >1989</option><option value='1990' >1990</option><option value='1991' >1991</option><option value='1992' >1992</option><option value='1993' >1993</option><option value='1994' >1994</option><option value='1995' >1995</option><option value='1996' >1996</option><option value='1997' >1997</option><option value='1998' >1998</option><option value='1999' >1999</option><option value='2000' >2000</option><option value='2001' >2001</option><option value='2002' >2002</option><option value='2003' >2003</option><option value='2004' >2004</option><option value='2005' >2005</option><option value='2006' >2006</option><option value='2007' >2007</option><option value='2008' >2008</option><option value='2009' >2009</option><option value='2010' >2010</option><option value='2011' >2011</option><option value='2012' >2012</option><option value='2013' >2013</option><option value='2014' >2014</option><option value='2015' >2015</option><option value='2016' >2016</option><option value='2017' >2017</option><option value='2018' >2018</option><option value='2019' >2019</option><option value='2020' >2020</option><option value='2021' >2021</option><option value='2022' >2022</option><option value='2023' >2023</option><option value='2024' >2024</option><option value='2025' >2025</option><option value='2026' selected="selected">2026</option>                                            </select>
                                            <div class="invalid-feedback">
                                                প্রারম্ভিক বকেয়া শুরুর বছর
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-12 col-sm-12">
                <div class="card">
                    <div class="card-body">
                        <button type="submit" class="btn btn-primary disabled_button waves-effect btn-label waves-light btn-block"><i class="bx bx-check-double label-icon"></i>সাবমিট</button>
                    </div>
                </div>
            </div>
        </form>
        <div id="modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-lg">
                <div class="modal-content" id="info-modal-content">

                </div>
            </div>
        </div>
    @else
        @include('backend.errors.404')
    @endif
@endsection
@section('script')
    <script>
        $(".select2").select2({
            width: "100%"
        })
        $("#search_holding_info").on('click', function () {
            const holding_info = $("#holding_info").val();
            if (holding_info == ''){
                alert('Type search keyword')
                return false;
            }
            $('#info-modal-content').html('<div class="c-preloader text-center absolute-center"><i class="fa fa-spinner fa-spin fa-3x"></i></div>');
            $('#modal').modal('show');
            $.ajax({
                url: '{{ route('water.client.get-holding-info-by-search') }}',
                method: "POST",
                data: {holding_info: holding_info, _token: '{{ csrf_token() }}'},
                dataType: "html",
                success:function (res) {
                    $('#info-modal-content').html(res);
                }
            });
        })
        function getHoldingInfo(holding_no, unique_id) {
            $('#modal').modal('hide');
            $("#holding_no").val(holding_no);
            $("#holding_unique_id").val(unique_id);
        }
        $("#word_no").on('change', function () {
            const word_no = $(this).val();
            $.ajax({
                url: '{{ route('water.client.get-village-by-word_no') }}',
                method: "GET",
                data: {word_no: word_no},
                dataType: "json",
                success:function (res) {
                    var village_id = $('#village_id');
                    var village_option = '';
                    village_option += '<option style="color: red" selected disabled value="">&mdash; চিহ্নিত করুন &mdash;</option>';
                    $.each(res, function (key, value) {
                        village_option +=  `<option value="${value.id}" data-code="${value.code}">(${value.code}) ${value.bn_village_name}</option>`;
                    });
                    village_id.empty().append(village_option);
                }
            });
        })
        $("#word_no, #village_id").on('change', function () {
            const word_no = $("#word_no").val();
            const village_id = $("#village_id").val();
            if(word_no == '' || village_id == ''){
                return false;
            }
            $.ajax({
                url: '{{ route('water.client.get-last-account-number') }}',
                method: "GET",
                data: {word_no: word_no,village_id: village_id},
                dataType: "json",
                success:function (res) {
                    $("#lastAccountNumber").empty().html(res);
                }
            });
        });
        $("#word_no, #account_number, #village_id").on('change keyup', function () {
            const word_no = $("#word_no option:selected").data("code");
            const account_number = $("#account_number").val();
            const village_id = $("#village_id").val();
            const village_code = $("#village_id option:selected").data("code");

            if(word_no == '' || account_number == '' || village_id == ''){
                return false;
            }
            const client_id = `${word_no}-${village_code}-${account_number}`;
            $("#client_id").val(client_id)

            $.ajax({
                url: '{{ route('water.client.check-client-id') }}',
                method: "GET",
                data: {client_id: client_id},
                dataType: "json",
                success:function (res) {
                    $("#clientIdValidation").empty().html(res);
                }
            });
        })
        $("#dataBySearch").on('click', function () {
            const client_nid = $("#client_nid").val();
            $.ajax({
                url: '{{ route('water.client.get-data-by-nid') }}',
                method: "GET",
                data: {client_nid},
                dataType: "json",
                success:function (res) {
                    $("#client_name").val(res?.bangla_name);
                    $("#client_mother_name").val(res?.bn_mother_name);
                    $("#client_father_or_husband_name").val(res?.bn_father_name ?? res?.bn_Husband_name);
                    $("#client_address").val(res?.p_bn_address);
                    $("#client_phone").val(res?.phone);
                    console.log(res);
                }
            });
        });
        $("#water_connection_type").on('change', function () {
            const water_connection_type = $(this).val();
            if(water_connection_type == 0){
                $(".meter_type").show();
                $(".meter_type input").attr('disabled', false);
                $(".dia_type").hide();
                $(".dia_type input").attr('disabled', true);
            }else if(water_connection_type == 1) {
                $(".dia_type").show();
                $(".dia_type input").attr('disabled', false);
                $(".meter_type").hide();
                $(".meter_type input").attr('disabled', true);
            }
        })
        $("#client_type_id, #dia_type_id, #water_connection_type").on('change', function () {
            const client_type_id = $("#client_type_id").val();
            const dia_type_id = $("#dia_type_id").val();
            const water_connection_type = $("#water_connection_type").val();
            if(client_type_id == '' || dia_type_id == '' || water_connection_type == ''){
                return false;
            }
            $.ajax({
                url: '{{ route('water.client.get-charge-by-connection-info') }}',
                method: "GET",
                data: {client_type_id: client_type_id,dia_type_id: dia_type_id,connection_type: water_connection_type},
                dataType: "json",
                success:function (res) {
                    if(res !== 0){
                        if(water_connection_type == 0){
                            $("#per_unit_rate").val(res?.per_unit_rate);
                            $("#min_unit").val(res?.min_unit);
                            $("#min_fee").val(res?.min_fee);
                            $("#charged_unit_rate").val(res?.per_unit_rate);
                            $("#charged_min_unit").val(res?.min_unit);
                            $("#charged_min_fee").val(res?.min_fee);
                        }else if (water_connection_type == 1){
                            $("#monthly_charges").val(res?.rate);
                            $("#charged_monthly_charges").val(res?.rate);
                        }
                    }
                }
            });
        })
        $("#connection_type1, #connection_type2").on('change', function () {
            if($("#connection_type2").is(':checked')){
                $(".initial_div").show();
                $(".initial_div input").attr('disabled', false);
                $(".initial_div select").attr('disabled', false);
                $(".select2").select2({
                    width: "100%"
                })
            } else {
                $(".initial_div").hide();
                $(".initial_div input").attr('disabled', true);
                $(".initial_div select").attr('disabled', true);
            }
        })
    </script>
@endsection