@extends('backend.master')
@section('title')
    গ্রাহকের তথ্য
@endsection
@section('body')
    @if(Auth::user()->user_type == 4 || strpos(Auth::user()->permission, '1') !== false || 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>
                        </ol>
                    </div>
                </div>
            </div>
        </div>
        <!-- end page title -->
        <div class="row">
            <div class="col-12 m-auto">
                <div class="card">
                    <div class="card-body">
                        <div class="row mb-2">
                            <div class="col-sm-9">
                                <div class="search-box mr-2 mb-2 d-inline-block">
                                    <div class="position-relative">

                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-3">
                                @if(Auth::user()->user_type == 4 || strpos(Auth::user()->permission, '2') !== false)
                                <div class="text-sm-right">
                                    <a href="{{ route('water.client.create') }}" class="btn btn-success btn-rounded waves-effect waves-light mb-2 mr-2"><i class="mdi mdi-plus mr-1"></i> গ্রাহক যোগ করুন</a>
                                </div>
                                @endif
                            </div>
                            @if(Auth::user()->user_type == 4 || strpos(Auth::user()->permission, '1') !== false)
                            <div class="col-sm-12">
                                <form id="search">
                                    <div class="row">
                                        <div class="col-md-3 col-sm-12">
                                            <div class="form-group mb-2">
                                                <label for="client_id" class="form-label">গ্রাহকের আইডি</label>
                                                <input type="text" class="form-control" id="client_id">
                                            </div>
                                        </div>
                                        <div class="col-md-3 col-sm-12">
                                            <div class="form-group mb-2">
                                                <label for="client_name" class="form-label">গ্রাহকের নাম</label>
                                                <input type="text" class="form-control" id="client_name">
                                            </div>
                                        </div>
                                        <div class="col-md-3 col-sm-12">
                                            <div class="form-group mb-2">
                                                <label for="holding_no" class="form-label">হোল্ডিং নং</label>
                                                <input type="text" class="form-control" id="holding_no">
                                            </div>
                                        </div>
                                        <div class="col-md-3 col-sm-12">
                                            <div class="form-group mb-2">
                                                <label for="phone" class="form-label">মোবাইল নম্বর</label>
                                                <input type="text" class="form-control" id="phone">
                                            </div>
                                        </div>
                                        <div class="col-md-3 col-sm-12">
                                            <div class="form-group mb-2">
                                                <label for="word_no" class="form-label">ওয়ার্ড নং</label>
                                                <select class="form-control select2" id="word_no">
                                                    <option value="all">&mdash;সকল ওয়ার্ড &mdash;</option>
                                                    @foreach(words() as $word)
                                                        <option value="{{ $word->number }}">{{ $word->number }}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        </div>
                                        <div class="col-md-3 col-sm-12">
                                            <div class="form-group mb-2">
                                                <label for="village_id" class="form-label">সকল রাস্তা / মহল্লা</label>
                                                <select 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>
                                        </div>
                                        <div class="col-md-3 col-sm-12">
                                            <div class="form-group mb-2">
                                                <label for="water_connection_type" class="form-label">সংযোগের ধরন</label>
                                                <select 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>
                                        </div>
                                        <div class="col-md-3 col-sm-12">
                                            <div class="form-group mb-2">
                                                <label for="client_type" class="form-label">গ্রাহকের ধরন</label>
                                                <select class="form-control select2" id="client_type">
                                                    <option style="color: red" selected value="">&mdash; চিহ্নিত করুন &mdash;</option>
                                                    @foreach($clientTypes as $item)
                                                        <option value="{{ $item->id }}">{{ $item->client_type }}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        </div>
                                        <div class="col-md-3 col-sm-12">
                                            <div class="form-group mb-2">
                                                <label for="dia_type" class="form-label">ডায়া টাইপ</label>
                                                <select class="form-control select2" id="dia_type">
                                                    <option style="color: red" selected value="">&mdash; চিহ্নিত করুন &mdash;</option>
                                                    @foreach($diaTypes as $item)
                                                        <option value="{{ $item->id }}">{{ $item->dia_type }}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        </div>
                                        <div class="col-md-3 col-sm-12">
                                            <div class="form-group mb-2">
                                                <label for="is_active" class="form-label">সক্রিয় কিনা</label>
                                                <select class="form-control select2" id="is_active">
                                                    <option style="color: red" selected value="">&mdash; চিহ্নিত করুন &mdash;</option>
                                                    <option value="1">হাঁ</option>
                                                    <option value="0">না</option>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="col-md-3 col-sm-12">
                                            <div class="form-group mb-2">
                                                <label for="connection_fee" class="form-label">সংযোগ ফি পরিশোধিত কিনা</label>
                                                <select class="form-control select2" id="connection_fee">
                                                    <option style="color: red" selected value="">&mdash; চিহ্নিত করুন &mdash;</option>
                                                    <option value="1">হাঁ</option>
                                                    <option value="0">না</option>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="col-md-3 col-sm-12">
                                            <div class="form-group mb-2">
                                                <label for="is_freedom_fighter" class="form-label">মুক্তিযোদ্ধা / দাতব্য প্রতিষ্ঠান কিনা?</label>
                                                <select class="form-control select2" id="is_freedom_fighter">
                                                    <option style="color: red" selected value="">&mdash; চিহ্নিত করুন &mdash;</option>
                                                    <option value="1">হাঁ</option>
                                                    <option value="0">না</option>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="col-md-3 col-sm-12">
                                            <div class="form-group mb-2">
                                                <label for="connection_date" class="form-label">সংযোগ তারিখ</label>
                                                <input type="date" class="form-control" id="connection_date">
                                            </div>
                                        </div>
                                        <div class="col-md-3 col-sm-12">
                                            <div class="form-group mb-2">
                                                <label for="connection_type" class="form-label">সংযোগের প্রকার</label>
                                                <select class="form-control select2" id="connection_type">
                                                    <option style="color: red" selected value="">&mdash; চিহ্নিত করুন &mdash;</option>
                                                    <option value="1">নতুন</option>
                                                    <option value="0">পুরাতন</option>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="col-md-3 col-sm-12">
                                            <div class="form-group mb-2">
                                                <label class="form-label"></label>
                                                <button type="submit" class="btn btn-light mb-2 btn-block mt-2"><i class="bx bx-search-alt"></i> সার্চ</button>
                                            </div>
                                        </div>
                                    </div>
                                </form>
                            </div>
                            @endif
                        </div>
                        @if(Auth::user()->user_type == 4 || strpos(Auth::user()->permission, '1') !== false)
                        <div id="tag_container">
                            @include('backend.water.client.index-data')
                        </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    @else
        @include('backend.errors.404')
    @endif
@endsection
@section('script')
    <script type="text/javascript">
        $(".select2").select2({
            width: "100%",
        });
        $('#search').submit(function (){
            event.preventDefault();
            let client_id = $("#client_id").val();
            let client_name = $("#client_name").val();
            let holding_no = $("#holding_no").val();
            let phone = $("#phone").val();
            let word_no = $("#word_no").val();
            let village_id = $("#village_id").val();
            let water_connection_type = $("#water_connection_type").val();
            let client_type = $("#client_type").val();
            let dia_type = $("#dia_type").val();
            let is_active = $("#is_active").val();
            let connection_fee = $("#connection_fee").val();
            let is_freedom_fighter = $("#is_freedom_fighter").val();
            let connection_date = $("#connection_date").val();
            let connection_type = $("#connection_type").val();
            localStorage.setItem('client_id_key', client_id);
            localStorage.setItem('client_name_key', client_name);
            localStorage.setItem('holding_no_key', holding_no);
            localStorage.setItem('phone_key', phone);
            localStorage.setItem('word_no_key', word_no);
            localStorage.setItem('village_id_key', village_id);
            localStorage.setItem('water_connection_type_key', water_connection_type);
            localStorage.setItem('client_type_key', client_type);
            localStorage.setItem('dia_type_key', dia_type);
            localStorage.setItem('is_active_key', is_active);
            localStorage.setItem('connection_fee_key', connection_fee);
            localStorage.setItem('is_freedom_fighter_key', is_freedom_fighter);
            localStorage.setItem('connection_date_key', connection_date);
            localStorage.setItem('connection_type_key', connection_type);
            $.ajax({
                type:"GET",
                data:{client_id, client_name, holding_no, phone, word_no, village_id, water_connection_type, client_type, dia_type, is_active, connection_fee, is_freedom_fighter, connection_date, connection_type},
                url:"{{ route('water.client.search') }}",
                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>';
                    $("#tag_container").empty().html(div);

                },
                success: function(res){
                    var urlParams = new URLSearchParams(window.location.search);
                    urlParams.set("client_id", client_id);
                    urlParams.set("client_name", client_name);
                    urlParams.set("holding_no", holding_no);
                    urlParams.set("phone", phone);
                    urlParams.set("word_no", word_no);
                    urlParams.set("village_id", village_id);
                    urlParams.set("water_connection_type", water_connection_type);
                    urlParams.set("client_type", client_type);
                    urlParams.set("dia_type", dia_type);
                    urlParams.set("is_active", is_active);
                    urlParams.set("connection_fee", connection_fee);
                    urlParams.set("is_freedom_fighter", is_freedom_fighter);
                    urlParams.set("connection_date", connection_date);
                    urlParams.set("connection_type", connection_type);
                    var newUrl = "{{ route('water.client.search') }}"+"?" + urlParams.toString();
                    window.history.pushState(null, null, newUrl);
                    console.log(res);
                    $("#tag_container").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');
            let  client_name = localStorage.getItem('client_name_key');
            let  holding_no = localStorage.getItem('holding_no_key');
            let  phone = localStorage.getItem('phone_key');
            let  word_no = localStorage.getItem('word_no_key');
            let  village_id = localStorage.getItem('village_id_key');
            let  water_connection_type = localStorage.getItem('water_connection_type_key');
            let  client_type = localStorage.getItem('client_type_key');
            let  dia_type = localStorage.getItem('dia_type_key');
            let  is_active = localStorage.getItem('is_active_key');
            let  connection_fee = localStorage.getItem('connection_fee_key');
            let  is_freedom_fighter = localStorage.getItem('is_freedom_fighter_key');
            let  connection_date = localStorage.getItem('connection_date_key');
            let  connection_type = localStorage.getItem('connection_type_key');
            $.ajax({
                url: '?page=' + page,
                type: "get",
                data:{client_id, client_name, holding_no, phone, word_no, village_id, water_connection_type, client_type, dia_type, is_active, connection_fee, is_freedom_fighter, connection_date, connection_type},
                datatype: "html"
            }).done(function(data){
                $("#tag_container").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