@extends('layout.app')

@section('content')

    @cannot('specific_management_services')
        <div class="card">
            <div class="card-body">
                <form action="{{ route('allClientDownloadExcel') }}" method="POST" id="search">
                    @csrf

                    <div class="row">
                        <div class="col-md-2 col-sm-3 col-xs-6">
                            <div class="form-group">
                                <label class="flex-1 block text-gray-700 text-sm font-bold mb-2" for="from_date">
                                    Manager Name
                                </label>
                                <select name="reseller" id="reseller" class="form-control select2 form-control-sm">
                                    <option value="all">ALL Manager</option>
                                    @foreach (userResellers() as $r)
                                        <option value="{{ $r->id }}">{{ $r->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="col-md-2 col-sm-3 col-xs-6">
                            <div class="form-group">
                                <label class="flex-1 block text-gray-700 text-sm font-bold mb-2" for="from_date">
                                    POP Name
                                </label>
                                <select name="pop" id="pop" class="form-control select2 form-control-sm" required>
                                    <option value="all"> ALL POP</option>

                                </select>
                            </div>
                        </div>

                        <div class="col-md-2 col-sm-3 col-xs-6">
                            <div class="form-group">
                                <label class="flex-1 block text-gray-700 text-sm font-bold mb-2" for="from_date">
                                    Select Area
                                </label>
                                {{-- <input class="form-control form-control-sm" name="area" type="text" placeholder=""> --}}
                                <select name="area" id="poparea" class="form-control select2 form-control-sm">

                                </select>
                            </div>
                        </div>
                        <div class="col-md-2 col-sm-3 col-xs-6">
                            @if (globalPermission('separate_billing_cycle_to_resellers'))
                                <div class="form-group">
                                    <label class="flex-1 block text-gray-700 text-sm font-bold mb-2" for="from_date">
                                        Billing Cycle
                                    </label>
                                    <select name="billing_cycle" id="billing_cycle"
                                        class="select2 form-control form-control-sm">
                                        <option value="all">ALL Billing Cycle</option>

                                    </select>

                                </div>
                            @else
                                <div class="form-group">
                                    <label class="flex-1 block text-gray-700 text-sm font-bold mb-2" for="from_date">
                                        Billing Cycle
                                    </label>
                                    <select name="billing_cycle" id="billing_cycle"
                                        class="select2 form-control form-control-sm">
                                        <option value="all">ALL Billing Cycle</option>
                                        @foreach (explode(',', $confday) as $conf)
                                            <option value="{{ $conf }}">{{ $conf }}</option>
                                        @endforeach
                                    </select>

                                </div>
                            @endif
                        </div>
                        <div class="col-md-2 col-sm-3 col-xs-6">
                            <div class="form-group">
                                <label class="flex-1 block text-gray-700 text-sm font-bold mb-2" for="from_date">
                                    User State
                                </label>
                                <select name="user_state" class="form-control form-control-sm">
                                    <option value="">ALL Customer Status</option>
                                    <option value="active">Active</option>
                                    <option value="disable">Disable</option>
                                    <option value="deactive">Deactive</option>
                                    <option value="expired">Expired</option>

                                </select>
                            </div>
                        </div>

                        <div class="col-md-2 col-sm-3 col-xs-6">
                            <div class="form-group">
                                <label class="flex-1 block text-gray-700 text-sm font-bold mb-2" for="from_date">
                                    Cable Type
                                </label>
                                <select name="cable_type" id="cable_type" class="form-control select2 form-control-sm">
                                    <option value="">Select Cable Type</option>
                                    <option value="cat5">Cat 5</option>
                                    <option value="cat6">Cat 6</option>
                                    <option value="fiber_optic">Fiber Optic</option>
                                </select>

                            </div>
                        </div>
                        @can('search-by-package-name')
                            <div class="col-md-2 col-sm-3 col-xs-6">
                                <div class="form-group">
                                    <label class="flex-1 block text-gray-700 text-sm font-bold mb-2" for="from_date">
                                        Select Packages
                                    </label>
                                    <select name="mother_package" class="select2 form-control  form-control-sm">
                                        <option value="">Select Package</option>
                                        @foreach ($packages as $package)
                                            <option value="{{ $package->id }}">{{ $package->package_name }}</option>
                                        @endforeach
                                    </select>

                                </div>
                            </div>
                        @endcan
                        <div class="col-md-2 col-sm-3 col-xs-6">
                            <div class="form-group">
                                <label class="flex-1 block text-gray-700 text-sm font-bold mb-2" for="from_date">
                                    Search By CID
                                </label>
                                <input class="form-control form-control-sm" name="user_id" type="text" placeholder="CID">
                            </div>
                        </div>
                        <div class="col-md-2 col-sm-3 col-xs-6">
                            <div class="form-group">
                                <label class="flex-1 block text-gray-700 text-sm font-bold mb-2" for="from_date">
                                    Search By Username
                                </label>
                                <input class="form-control form-control-sm" name="value" type="text"
                                    placeholder="Username">
                            </div>
                        </div>
                        @if (checkSettings('customer_code') == 'enable')
                            <div class="col-md-2 col-sm-3 col-xs-6">
                                <div class="form-group">
                                    <label class="flex-1 block text-gray-700 text-sm font-bold mb-2" for="code">
                                        Search By Code</label>
                                    <input class="form-control form-control-sm" name="code" type="text"
                                        placeholder="Code">
                                </div>
                            </div>
                        @endif
                        <div class="col-md-2 col-sm-3 col-xs-6">
                            <div class="form-group">
                                <label class="flex-1 block text-gray-700 text-sm font-bold mb-2" for="name">Search By
                                    Name</label>
                                <input class="form-control form-control-sm" name="name" type="text"
                                    placeholder="Name">
                            </div>
                        </div>
                        <div class="col-md-2 col-sm-3 col-xs-6">
                            <div class="form-group">
                                <label class="flex-1 block text-gray-700 text-sm font-bold mb-2" for="building_name">Search By
                                    Building Name</label>
                                <input class="form-control form-control-sm" name="building_name" id="building_name" type="text"
                                    placeholder="Building name">
                            </div>
                        </div>
                        <div class="col-md-2 col-sm-3 col-xs-6">
                            <div class="form-group">
                                <label class="flex-1 block text-gray-700 text-sm font-bold mb-2" for="from_date">
                                    Search By Contact
                                </label>
                                <input class="form-control form-control-sm" name="contact" type="text"
                                    placeholder="01234567891">
                            </div>
                        </div>
                        <div class="col-md-2 col-sm-3 col-xs-6">
                            <div class="form-group">
                                <label class="flex-1 block text-gray-700 text-sm font-bold mb-2" for="from_date">
                                    Search By Box
                                </label>
                                @if (checkSettings('select_option_for_box_and_ponsetting') == 'enable')
                                    <select name="map_box_id" id="map_box_id" class="form-control form-control-sm select2">
                                        <option value="">Select Map Box</option>
                                        @isset($tjBoxes)
                                            @foreach ($tjBoxes as $tjBox)
                                                <option value="{{ $tjBox->id }}">{{ $tjBox->name }}</option>
                                            @endforeach
                                        @endisset
                                    </select>
                                @else
                                    <input class="form-control form-control-sm" name="box" type="text"
                                        placeholder="">
                                @endif
                            </div>
                        </div>
                        @if (checkSettings('select_option_for_box_and_ponsetting') == 'enable')
                            <div class="col-md-2 col-sm-3 col-xs-6">
                                <div class="form-group">
                                    <label class="flex-1 block text-gray-700 text-sm font-bold mb-2" for="onu_serial">
                                        Search By ONU Serial
                                    </label>
                                    <select name="onu_serial" id="onu_serial" class="form-control form-control-sm select2">
                                        <option value="">Select ONU MAC/Pon No/Serial No</option>
                                        @isset($pons)
                                            @foreach ($pons as $pon)
                                                <option value="{{ $pon->id }}">{{ $pon->name }}</option>
                                            @endforeach
                                        @endisset
                                    </select>
                                </div>
                            </div>
                        @endif
                        <div class="col-md-2 col-sm-3 col-xs-6">
                            <div class="form-group">
                                <label class="flex-1 block text-gray-700 text-sm font-bold mb-2" for="from_date">
                                    Search By Expire Date From
                                </label>
                                <div class="input-group date" id="searchFrom" data-target-input="nearest">
                                    <input type="text" name="expire_date_from"
                                        class="form-control form-control-sm datetimepicker-input input-group-append"
                                        data-toggle="datetimepicker" data-target="#searchFrom" autocomplete="off">
                                </div>
                            </div>
                        </div>
                        <div class="col-md-2 col-sm-3 col-xs-6">
                            <div class="form-group">
                                <label class="flex-1 block text-gray-700 text-sm font-bold mb-2" for="from_date">
                                    Search By Expire Date To
                                </label>
                                <div class="input-group date" id="searchTo" data-target-input="nearest">
                                    <input type="text" name="expire_date_to"
                                        class="form-control form-control-sm datetimepicker-input input-group-append"
                                        data-toggle="datetimepicker" data-target="#searchTo" autocomplete="off">
                                </div>
                            </div>
                        </div>

                        <div class="col-md-2 col-sm-3 col-xs-6">
                            <div class="form-group">
                                <label class="flex-1 block text-gray-700 text-sm font-bold mb-2" for="finance">
                                    Accounts Status
                                </label>
                                <select name="finance" class="select2 form-control  form-control-sm">
                                    <option value="">Select One</option>
                                    <option value="withDue">With Due</option>
                                    <option value="withoutDue">Without Due</option>
                                </select>
                            </div>
                        </div>
                        @can('vip-client-search')
                            <div class="col-md-2 col-sm-3 col-xs-6">
                                <div class="form-group">
                                    <label class="flex-1 block text-gray-700 text-sm font-bold mb-2" for="experity_check">VIP
                                        Customer</label>
                                    <select name="experity_check" class="select2 form-control form-control-sm">
                                        <option value="">Select One</option>
                                        <option value="vip">VIP</option>
                                        <option value="non_vip">Non VIP</option>
                                    </select>
                                </div>
                            </div>
                        @endcan

                        <div class="col-md-2 col-sm-3 col-xs-6">
                            <div class="form-group">
                                <label class="flex-1 block text-gray-700 text-sm font-bold mb-2" for="from_date">
                                    Static IP
                                </label>
                                <input class="form-control form-control-sm" name="static_ip" type="text" placeholder="">
                            </div>
                        </div>
                        <div class="col-md-2 col-sm-3 col-xs-6 mt-4">
                            <div class="form-group">
                                <label class="flex-1 block text-gray-700 text-sm font-bold mb-2" for="from_date">
                                    All Static IP User
                                </label>
                                <input class="" name="check_ip" type="checkbox" placeholder="">
                            </div>
                        </div>
                        <div class="col-md-2 col-sm-3 col-xs-6 mt-4">
                            <div class="form-group">
                                <label class="flex-1 block text-gray-700 text-sm font-bold mb-2" for="remote_access">
                                    All Remote Access User
                                </label>
                                <input class="" name="remote_access" type="checkbox" placeholder="">
                            </div>
                        </div>
                        @if (globalPermission('client-usage-search'))
                            <div class="col-md-2 col-sm-3 col-xs-6">
                                <div class="form-group">
                                    <label class="flex-1 block text-gray-700 text-sm font-bold mb-2" for="usage">
                                        Search By Usage
                                    </label>
                                    <input class="form-control form-control-sm" name="usage" type="text"
                                        placeholder="Usage in GB">
                                </div>
                            </div>
                        @endif

                        {{-- <div class="col-md-2 col-sm-3 col-xs-6">
                        <div class="form-group">
                            <label class="flex-1 block text-gray-700 text-sm font-bold mb-2" for="area">
                                Search By Area
                            </label>
                            <input class="form-control form-control-sm" name="area" type="text" placeholder="">
                        </div>
                    </div> --}}




                    </div>
                    <div class="form-group float-right">
                        <input type="hidden" name="changeType" value="packageChange">

                        <button @click="search" class="btn btn-primary" type="submit" id="searchBtn"><i
                                class="fa fa-search"></i> Search</button>
                        <button class="btn btn-info" type="reset" id="reset">Reset</button>
                        @can('allClientDownloadExcel')
                            <button type="submit" class="noprint btn btn-primary">
                                <i class="fa fa-download"></i> Download Client
                            </button>
                        @endcan
                    </div>

                </form>

            </div>
        </div>

        <div class="card">
            <div class="card-body">
                <div id="result">
                    {{-- list will show in this box --}}
                </div>
            </div>
        </div>
    @endcannot







@endsection




@section('ajax')
    <script>
        $(window).on('hashchange', function() {
            if (window.location.hash) {
                var page = window.location.hash.replace('#', '');
                if (page == Number.NaN || page <= 0) {
                    return false;
                } else {
                    getPosts(page);
                }
            }
        });
        $(document).ready(function() {
            $(document).on('click', '.pagination a', function(e) {
                getPosts($(this).attr('href').split('page=')[1]);
                e.preventDefault();
            });
        });

        function getPosts(page) {
            $.ajax({
                url: 'clientSearchReport?page=' + page,
                dataType: 'html',
            }).done(function(data) {
                $('#result').html(data);
                location.hash = page;
            }).fail(function() {
                alert('Could not be loaded.');
            });
        }
    </script>


    <script type="text/javascript">
        function status(id, status) {
            if (confirm("Are you sure to change status?")) {
                url = "{{ url('/admin/') }}" + "/" + status + "/" + id;
                window.location.href = url;
            }

        }




        $(function() {

            $('#reset').click(function() {
                $('#result').html('');
                $('#pop').html('<option value="all">ALL POP</option>');
            });

            $('#searchBtn').on('click', function(e) {
                e.preventDefault();

                $('body').prepend('<div id="loading">Loading.....</div>');
                $.ajax({
                    type: 'get',
                    url: '{{ route('clientSearchReport') }}',
                    data: $('#search').serialize(),
                    dataType: "html",
                    success: function(result) {
                        $('#result').html(result);
                        $('#dataTable').DataTable({
                            'destroy': true,
                        });
                        $('#loading').remove();
                    }
                });
            });


            $('#reseller').on('change', function(e) {
                e.preventDefault();
                $('body').append('<div class="hidden" id="loading">Loading.....</div>');

                $.ajax({
                    type: 'get',
                    url: '{{ route('getResellerPopList') }}',
                    data: {
                        id: $(this).val()
                    },
                    success: function(result) {
                        $('#pop').html(result);
                        $('#loading').remove();

                    }
                });

                $.ajax({
                    type: 'get',
                    url: '{{ route('getResellerWiseArea') }}',
                    data: {
                        id: $(this).val()
                    },
                    success: function(result) {
                        $('#poparea').html(result);
                        $('#loading').remove();

                    }
                });

                // get all the billing cycle of this reseller
                @if (checkSettings('separate_billing_cycle_to_resellers') == 'enable')
                    $.ajax({
                        type: 'get',
                        data: {
                            reseller_id: $(this).val()
                        },
                        url: '{{ route('getBillingCyclesByResellerId') }}',
                        success: function(result) {
                            if (result.status == 'success') {
                                $('#billing_cycle').empty();
                                $('#billing_cycle').append(
                                    '<option value="all">ALL Billing Cycle</option>');
                                for (const cycle of result.data) {
                                    $('#billing_cycle').append(
                                        `<option value="${cycle.value}">${cycle.label}</option>`
                                    );
                                }
                                $('#loading').remove();
                            } else {
                                $('#billing_cycle').empty();
                                $('#billing_cycle').append(
                                    '<option value="all">ALL Billing Cycle</option>');
                            }
                        }
                    });
                @endif


            });



            $('#pop').on('change', function(e) {
                // console.log('come here');
                e.preventDefault();
                $('body').append('<div class="hidden" id="loading">Loading.....</div>');

                $.ajax({
                    type: 'get',
                    url: '{{ route('getPopWiseAreaList') }}',
                    data: {
                        id: $(this).val()
                    },
                    success: function(result) {
                        // console.log(result);
                        $('#poparea').html(result);
                        $('#loading').remove();

                    }
                });

            });

        



        });


        /*auto deactive date chnage end*/
        $(document).on('click', '.changeTemporaryExtend', function() {
            var id = $(this).attr('data-id');
            var extendedDay = $(this).attr('data-tmpExtend');
            $('#extend').val(extendedDay);
            $('#client_id').val(id);
        });
    </script>
@endsection