<?php
if ($permissions->hasPermission('amendPaymentAccount')) {
    include("Views/Accounting/addContra.php");
}
?>
<style>
    #tableWithSearch thead tr >th{
        background-color:#4c0870;
        width:16% !important;
        color:#fff;
    }
    #tableWithSearch thead tr th[class*='sorting_'] {
        color: #fff;
    }
    .bg-master-lighter {
        border:none;
        background-color:#fff;
        border-top:1px solid #ddd;  
    }
    .datepicker thead tr .dow {
        color:#4c0870  !important;
    }
    .datepicker table tr td.day:hover {
        background: #4c0870  !important;
        color:#fff;
    }
    .datepicker table tr td.active {
        background-color: #4c0870  !important;
    }
    .datepicker thead tr .datepicker-switch {
        color: #4c0870   !important;
        font-size: 13px;
    }
    .datepicker table tr td span.active {
        background-color: #4c0870  !important;
    }
    .datepicker table tr td span:hover {
        background-color: #4c0870  !important;
        color:#fff;
    }
    datepicker thead tr .next:before, .datepicker thead tr .prev:before {
        color: #4c0870  !important;
        font-family: 'FontAwesome';
        font-size: 10px;
    }
    .datepicker thead tr .next:before, .datepicker thead tr .prev:before {
        color: #4c0870  !important;
        font-family: 'FontAwesome';
        font-size: 10px;
    }
    .btn-default:hover{
        background-color:#ed9421 !important;
        color:#fff;
        border: none;
    }
    .complete ,.btn-group  .active{
        background-color:#ed9421 !important;
        color:#fff;
    }
    .MonthPicker,.YearPicker,.FromToPicker{
        display:none;
    }
    #selected_entry{
        height:90px;
        color: black;
        margin-top:20px;
        font-size: 16px;
        padding-top: 2%;
    }
    .select_table td{
        padding-left: 70px;
    }
</style>

<script src="<?php echo THEME_PATH; ?>/plugins/moment/moment.min.js"></script>
<div class="container-fluid container-fixed-lg bg-white">
    <div class="panel panel-transparent">
        <div class="panel-heading">
            <div class="panel-title"><?php print CommonLanguage::getMessage('contra_list'); ?></div>
            <div class="col-md-12"> 
             <div class="input-group  col-md-3" >
                    <span class="input-group-addon bg-complete"><i class="fa fa-calendar"></i></span>
                    <input id="From_To_Date" type="text" class="form-control" name="From_To_Date" >
                </div> 
                        <?php echo Forms::FloatingAddButton('4c0870', '#add_contra', CommonLanguage::getMessage('add_contra')); ?>

            </div>

        </div>
        <div class="panel-body">
            <table class="table table-bordered table-hover demo-table-search" id="tableWithSearch">
                <thead>
                    <tr>
                        <th class="text-center" ><?php print CommonLanguage::getMessage('From'); ?></th>
                        <th class="text-center" ><?php print CommonLanguage::getMessage('transfered_amount'); ?></th>
                        <th class="text-center" > <?php print CommonLanguage::getMessage('To'); ?></th>
                        <th class="text-center" ><?php print CommonLanguage::getMessage('received_amount'); ?></th>
                        <th class="text-center" ><?php print CommonLanguage::getMessage('Date'); ?></th>
                        <th class="text-center" ><?php print CommonLanguage::getMessage('note'); ?></th>
                    </tr> 
                </thead>
                <tbody>

                </tbody>
            </table>
        </div> 

    </div>
</div>


<script>
    var title = <?php echo json_encode(CommonLanguage::getMessage('contra_list')); ?>;
    $(function () {
        ChangeTable()
//        $('#tableWithSearch').dataTable()
//        $("#ViewMode label.btn").on("change", function () {
//            setTimeout('switchcase()', 100)
//            ChangeTable()
//        })
//        $("#Daily_Date").datepicker({autoclose: true}).on("changeDate", function (e) {
//            ChangeTable()
//        })
//        $("#Month_Date").datepicker({autoclose: true, viewMode: "months", minViewMode: "months", }).on("changeDate", function (e) {
//            ChangeTable()
//        })
//        $("#Year_Date").datepicker({autoclose: true, viewMode: "years", minViewMode: "years", }).on("changeDate", function (e) {
//            ChangeTable()
//        })
//        $("#From-range,#To-range").datepicker({autoclose: true}).on("changeDate", function (e) {
//            ChangeTable()
//        })
$("input[name=From_To_Date]").daterangepicker({
        }, function (start, end, label) {
            window.startDate = start.format("YYYY-MM-DD"),
                    window.endDate = end.format("YYYY-MM-DD")
            ChangeTable();

        });
    })
    function ChangeTable() {
//        var CheckedValue = parseInt($("#ViewMode input:checked").val());
        var Date = {
//        if (CheckedValue == 4) {

            Contra_List_Date_From : (window.startDate ? window.startDate : today),
                    Contra_List_Date_To : (window.endDate ? window.endDate : today)}


//        } else {
//            CurrentDate(CheckedValue)
//
//            Date.Contra_List_Date = FinalDate
//
//
//        }



        RebuildDataTable(title, [0, 1, 2, 3, 4, 5], "ACCAjax/ContraListRequest", Date);
    }
//    function switchcase() {
//        var CheckedValue = parseInt($("#ViewMode input:checked").val());
//        switch (CheckedValue) {
//            case 1:
//                $(".DatePicker").show();
//                $(".MonthPicker").hide();
//                $(".YearPicker").hide();
//                $(".FromToPicker").hide();
//                break;
//            case 2:
//                $(".DatePicker").hide();
//                $(".MonthPicker").show();
//                $(".YearPicker").hide();
//                $(".FromToPicker").hide();
//                break;
//            case 3:
//                $(".DatePicker").hide();
//                $(".MonthPicker").hide();
//                $(".YearPicker").show();
//                $(".FromToPicker").hide();
//                break;
//            case 4:
//                $(".DatePicker").hide();
//                $(".MonthPicker").hide();
//                $(".YearPicker").hide();
//                $(".FromToPicker").show();
//                $("#From-range").datepicker({autoclose: true})
//                $("#To-range").datepicker({autoclose: true})
//                break;
//        }
//    }
</script>      
