@extends('backend.master')
@section('title')
    বিল আদায়
@endsection
@section('body')
    @if(Auth::user()->user_type == 6 && count(bankPermission('water')) > 0)
        <!-- 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 active">বিল আদায়</li>
                        </ol>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-4 col-sm-12">
                <div class="card">
                    <div class="card-body">
                        <form id="search_client">
                            <div class="form-group mb-4">
                                <label for="word_no" class="form-label">ওয়ার্ড নং <span class="required">*</span></label>
                                <select name="word_no" class="form-control select2" id="word_no">
                                    <option style="color: red" selected value="all">সকল ওয়ার্ড</option>
                                    <option value="1" data-code="01">1</option>
                                    <option value="2" data-code="02">2</option>
                                    <option value="3" data-code="03">3</option>
                                    <option value="4" data-code="04">4</option>
                                    <option value="5" data-code="05">5</option>
                                    <option value="6" data-code="06">6</option>
                                    <option value="7" data-code="07">7</option>
                                    <option value="8" data-code="08">8</option>
                                    <option value="9" data-code="09">9</option>
                                    <option value="10" data-code="10">10</option>
                                    <option value="11" data-code="11">11</option>
                                    <option value="12" data-code="12">12</option>
                                </select>
                                <div class="invalid-feedback">
                                    ওয়ার্ড নং
                                </div>
                            </div>
                            <div class="form-group mb-4">
                                <label for="village_id" class="form-label">রাস্তা / মহল্লা <span class="required">*</span></label>
                                <select name="village_id" class="form-control select2" id="village_id">
                                    <option style="color: red" selected value="all">সকল রাস্তা / মহল্লা</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>
                                <select class="form-control select2" name="client_id" id="client_id" required>
                                    <option style="color: red" selected disabled value="">&mdash; চিহ্নিত করুন &mdash;</option>
                                    @foreach($clients as $item)
                                        <option value="{{ $item->client_id }}">({{ $item->client_id }}) {{ $item->client_name }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
            <div class="col-md-8 col-sm-12" id="bills_data">
                @if(isset($due_bills) || isset($paid_bills))
                    @include('backend.bank.water-bill.bill-data')
                @endif
            </div>
        </div>
    @else
        @include('backend.errors.404')
    @endif
@endsection
@section('script')
    <script>
        $("#word_no").on('change', function () {
            const word_no = $(this).val();
            $.ajax({
                url: '{{ route('bank.water-bill.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 value="all">সকল রাস্তা / মহল্লা</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();
            $.ajax({
                url: '{{ route('bank.water-bill.get-client-by-word_no-village') }}',
                method: "GET",
                data: {word_no, village_id},
                dataType: "json",
                success:function (res) {
                    var client_id = $('#client_id');
                    var client_id_option = '';
                    client_id_option += `<option style="color: red" selected disabled value="">&mdash; চিহ্নিত করুন &mdash;</option>`;
                    $.each(res, function (key, value) {
                        client_id_option +=  `<option value="${value.client_id}">(${value.client_id}) ${value.client_name}</option>`;
                    });
                    client_id.empty().append(client_id_option);
                }
            });
        })
        $("#client_id").on('change', function (){
            event.preventDefault()
            const client_id = $("#client_id").val();
            if (client_id === ''){
                return false;
            }
            localStorage.setItem('client_id_key', client_id);
            $.ajax({
                url: '{{ route('bank.water-bill.search-client') }}',
                method: "GET",
                data: {client_id, _token: '{{ csrf_token() }}'},
                dataType: "html",
                beforeSend: function(){
                    var div = '';
                    div += '<div class="col-md-12 text-center mb-2">';
                    div += '<div class="spinner-grow text-success m-1" role="status"> <span class="sr-only">Loading...</span></div><div class="spinner-grow text-info m-1" role="status"><span class="sr-only">Loading...</span></div><div class="spinner-grow text-warning m-1" role="status"><span class="sr-only">Loading...</span></div>';
                    div += '</div>';
                    $("#bills_data").empty().html(div);

                },
                success:function (res) {
                    var urlParams = new URLSearchParams(window.location.search);
                    urlParams.set("client_id", client_id);
                    var newUrl = "{{ route('bank.water-bill.search-client') }}"+"?" + urlParams.toString();
                    window.history.pushState(null, null, newUrl);
                    $("#bills_data").empty().html(res);
                }
            });
        });

        $(window).on('hashchange', function() {
            if (window.location.hash) {
                var page = window.location.hash.replace('#', '');
                if (page == Number.NaN || page <= 0) {
                    return false;
                }else{
                    getData(page);
                }
            }
        });

        $(document).ready(function()
        {
            $(document).on('click', '.pagination a',function(event)
            {
                event.preventDefault();
                $('li').removeClass('active');
                $(this).parent('li').addClass('active');
                var myurl = $(this).attr('href');
                var page=$(this).attr('href').split('page=')[1];
                getData(page);
            });
        });

        function getData(page){
            let  client_id = localStorage.getItem('client_id_key');
            $.ajax({
                url: '?page=' + page,
                type: "get",
                data:{client_id},
                datatype: "html"
            }).done(function(data){
                $("#bills_data").empty().html(data);
                var urlParams = new URLSearchParams(window.location.search);
                urlParams.set("page", page);
                var newUrl = window.location.origin + window.location.pathname + "?" + urlParams.toString();
                window.history.pushState(null, null, newUrl);
            }).fail(function(jqXHR, ajaxOptions, thrownError){
                alert('No response from server');
            });
        }
    </script>
@endsection