
<style type="text/css">
    table , tr , td , td {
        text-align: center;
        border: 2px solid;
    }
</style>
<div class="row">
    <div class="container">
        <ol class="breadcrumb">
            <li><a href="#">التقارير</a></li>
            <li><a href="reportprovinces.php">مديونية فواتير العملاء بالمناطق  </a></li>
            <li class="active">عرض التقرير</li>
        </ol>
        <div class="panel panel-default panel-m">
            <!-- Default panel contents -->
            <div class="panel-heading " >تقرير  مديونية فواتير العملاء بالمناطق
                <a href="{$youtubes[167]->url}" target="_blank" class="hidden-print"><img src="../views/default/assets/img/youtube.png" class="pull-left" alt="Youtube" style="width: 2%;"></a>
            </div>
            <div class="panel-body">

                <form class="form-inline hidden-print " action="savedailyController.php?do=show" method="post">

                    <!--
                                        <div class="form-group">
                                            <label class="sr-only">من التاريخ</label>
                                            <input type="text" class="form-control awdatepicker " id="fromdate"   data-date-format="yyyy-mm-dd"  >
                                        </div>
                                        <div class="form-group">
                                            <label class="sr-only">إلى التاريخ</label>
                                            <input type="text" class="form-control awdatepicker "  id="todate"   data-date-format="yyyy-mm-dd"  >
                                        </div> -->
                    <div class="form-group" style="min-width: 310px;">
                        <label class="sr-only">المحافظات</label>
                        <input type="text" class=" wdt100" id="select2government" data-placeholder="اختر " />

                    </div>
                    <div class="form-group" style="min-width: 310px;">
                        <label class="sr-only">المناطق</label>
                        <input type="text" class=" wdt100" id="select2clientarea" data-placeholder="اختر " />
                    </div>
                    <div class="form-group" style="min-width: 310px;">
                        <label class="sr-only">العملاء</label>
                        <input type="text" class=" wdt100" id="select2client" data-placeholder="اختر " />
                    </div>
                    <div class="form-group" style="min-width: 60px;">
                        <input type="button" class="wdt100" id="resetdata" value="rest"  style="background: red;
                               color: #fff;border-radius: 8px;font-size: 13px;font-weight: 900;" />
                    </div>
                    <div class="form-group" style="min-width: 60px;">
                        <input type="button" class="wdt100" id="printdata" value="طباعه"  style="background: #ccc;
                               color: #000;border-radius: 8px;font-size: 13px;font-weight: 900;" />
                    </div>
                    <div class="form-group" style="min-width: 60px;">
                        <input type="button" class="wdt100" id="searchdata" value="بحث"  style="background: #000;
                               color: #fff;border-radius: 8px;font-size: 13px;font-weight: 900;" />
                    </div>
                </form>

            </div>
            <input type="hidden" id="firstGovid" value="{$firstGov['governmetid']}"/>
            <input type="hidden" id="firstGovName" value="{$firstGov['governmentname']}"/>
            <input type="hidden" id="firstGovAreaid" value="{$firstGovArea['id']}"/>
            <input type="hidden" id="firstGovAreaName" value="{$firstGovArea['name']}"/>
            <div class="clearfix"></div>
            <hr class="printhide" />
            <div id="content" style="text-align: center !important;">


            </div>

        </div>
    </div>
</div>
{literal}
<script type="text/javascript">


    $(document).ready(function () {
        var formatResult;
        formatResult = function (data) {
            return  data.text;
        }


        $("#select2client").select2({
            placeholder: "إسم  المشروع",
            multiple: false,
            quietMillis: 100,
            ajax: {
                url: "reportprovinces.php?do=select2client",
                type: "post",
                dataType: 'json',
                data: function (term, page) {
                    return {
                        searchTerm: term,
                    };
                },
                results: function (data) {
                    return {results: data};
                }
            },
            formatResult: formatResult,
            initSelection: function (element, callback) {
                var item = element.val().split(':');
                var data = {id: item[0], text: item[1]};
                callback(data);
            }
        });

        $("#select2government").select2({
            placeholder: "إسم  المشروع",
            multiple: false,
            quietMillis: 100,
            ajax: {
                url: "reportprovinces.php?do=select2government",
                type: "post",
                dataType: 'json',
                data: function (term, page) {
                    return {
                        searchTerm: term,
                    };
                },
                results: function (data) {
                    return {results: data};
                }
            },
            formatResult: formatResult,
            initSelection: function (element, callback) {
                var item = element.val().split(':');
                var data = {id: item[0], text: item[1]};
                callback(data);
            }
        });

        $("#select2clientarea").select2({
            placeholder: "إسم  المشروع",
            multiple: false,
            quietMillis: 100,
            ajax: {
                url: "reportprovinces.php?do=select2clientarea",
                type: "post",
                dataType: 'json',
                data: function (term, page) {
                    var governmentid = $('#select2government').val();
                    if (!governmentid) {
                        alert('اختر المحافظه اولا');
                        return false;
                    }
                    return {
                        searchTerm: term,
                        governmentid: governmentid,
                    };
                },
                results: function (data) {
                    return {results: data};
                }
            },
            formatResult: formatResult,
            initSelection: function (element, callback) {
                var item = element.val().split(':');
                var data = {id: item[0], text: item[1]};
                callback(data);
            }
        });
        $("#select2government").select2('data', {id: $('#firstGovid').val(), text: $('#firstGovName').val()})
        $("#select2clientarea").select2('data', {id: $('#firstGovAreaid').val(), text: $('#firstGovAreaName').val()})

        $('body').on('click', '#searchdata', function () {
            $('.printhide').show();
            var fromdate = $('#printhide').val();
            var todate = $('#todate').val();
            var clientid = $('#select2client').val();
            var governmentid = $('#select2government').val();
            var clientareaid = $('#select2clientarea').val();
            $.post('reportprovinces.php?do=getdata', {fromdate: fromdate, todate: todate, clientid: clientid, governmentid: governmentid, clientareaid: clientareaid}, function (result) {
                $("#content").html(result);

            });
        });

        $('body').on('click', '#printdata', function () {
            $('.printhide').hide();
            print_Custom('mycustomheader');
            $('.printhide').show();
        });

        $('body').on('click', '#resetdata', function () {
            $('.printhide').show();
            $('#select2government').val('').trigger('change');
            $('#select2client').val('').trigger('change');
            $('#select2clientarea').val('').trigger('change');
            $("#content").html('');

        });


        $('#searchdata').click();




    });







</script>
{/literal}
