<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->

{% include './admin_header.html' %}    

<div class="app-main__outer">
    <div class="app-main__inner" id="product_info">
        <div class="tab-content">
            <div class="tab-pane tabs-animation fade show active" id="tab-content-0" role="tabpanel">
                <div class="row">
                    <div class="col-md-12">
                        <div class="main-card mb-3 card">
                            <div class="card-body" id="product_data">
                                {% if User_language=="ENGLISH" %}                                
                                <h5 class="card-title">Village Summary</h5>
                                {% endif %}
                                {% if User_language=="GUJARATI" %}                                
                                <h5 class="card-title">ગામની સમરી </h5>
                                {% endif %}

                                <div class="" method="post" id="product_detail">
                                    <div class="row">

                                        <div class="position-relative form-group col-md-2">
                                            {% if User_language=="ENGLISH" %}                                
                                            <label for="exampleSelect" class="">District Name </label>
                                            {% endif %}
                                            {% if User_language=="GUJARATI" %}                                
                                            <label for="exampleSelect" class="">જિલ્લાનું નામ </label>
                                            {% endif %}
                                            <select name="select" id="select_district" tabindex="3" class="form-control">
                                                <option id="Select" value="Select">Select</option>
                                                {% for j in district %}
                                                <option id="{{ j.district_id }}" value="{{ j.name}}">{{ j.name }}</option>
                                                {% endfor %}
                                            </select>
                                            <div id="msg_select_district"></div>
                                        </div>

                                        <div class="position-relative form-group col-md-2">

                                            {% if User_language=="ENGLISH" %}                                
                                            <label for="exampleSelect" class="">Select Taluka </label>
                                            {% endif %}
                                            {% if User_language=="GUJARATI" %}                                
                                            <label for="exampleSelect" class="">તાલુકાનું નામ </label>
                                            {% endif %}
                                            <select name="select" id="select_taluka" tabindex="4" class="form-control">
                                                <option id="Select" value="Select">Select</option>
                                                <!--                                            {% for j in district %}
                                                                                            <option id="{{ j.id }}" value="{{ j.district}}">{{ j.district }}</option>
                                                                                            {% endfor %}-->
                                            </select>
                                            <div id="msg_select_taluka"></div>
                                        </div>

<!--                                        <div class="form-group col-md-2">
                                            <label>Search Mode</label><br>
                                            <div class="form-check form-switch">
                                                <input class="form-check-input" type="checkbox" id="toggleSearchMode">
                                                <label class="form-check-label" for="toggleSearchMode">Taluka Wise</label>
                                            </div>
                                        </div>

                                        <div class="position-relative form-group col-md-2">
                                            {% if User_language=="ENGLISH" %}                                
                                            <label for="exampleSelect" class="">Village Name </label>
                                            {% endif %}
                                            {% if User_language=="GUJARATI" %}                                
                                            <label for="exampleSelect" class="">ગામ </label>
                                            {% endif %}
                                            <select name="select" id="select_village" tabindex="3" class="form-control">
                                                <option id="Select">Select</option>
                                            </select>
                                            <div id="msg_select_village"></div>
                                        </div>-->

                                        {% if User_language=="ENGLISH" %}  
                                        <div class="col-md-2" style="margin-top: 28px">
                                            <button tabindex="7" type="button" class=" fa fa-search btn-success btnsave form-control" > Search</button>
                                        </div><div class="col-md-2" style="margin-top: 28px">
                                            <button type="button" class="fa fa-print form-control btn-primary clear" onclick="printContent('tablebody')" tabindex="8"> Print</button>
                                        </div>
                                        {% endif %}
                                        {% if User_language=="GUJARATI" %} 
                                        <div class="col-md-2" style="margin-top: 28px">
                                            <button type="button" class="fa fa-search btn-success btnsave form-control" id="btn-submit" tabindex="9"> શોધો</button>
                                        </div><div class="col-md-2" style="margin-top: 28px">
                                            <button type="button" class="fa fa-print form-control btn-primary clear" onclick="printContent('tablebody')" tabindex="10"> પ્રિન્ટ</button>
                                        </div>
                                        {% endif %}
                                        <div id="msg_success" style="display:none;font-size: 16px;color: green;padding: 5px">
                                            * Data Insert Successfully!
                                        </div>
                                        <!--</div>-->
                                        <!--</div>-->

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

            <div class="tab-content" id="makepdf">
                <div class="tab-pane tabs-animation fade active show" id="tab-content-0" role="tabpanel" style="display: grid">
                    <div class="mb-3 card">
                        <div class="card-body" id="tablebody" tabindex="11" style="padding: 0px">
                            
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>
<!--</div>
</div>-->

<script>

//    function printContent(el) {
//        debugger;
//        var restorepage = document.body.innerHTML;
//        var printcontent = document.getElementById(el).innerHTML;
//        document.body.innerHTML = printcontent;
//        window.print();
//
//        document.body.innerHTML = restorepage;
//    }
    function printContent(el) {
//        alert('print');
        var printWindow = window.open('', '_blank');
        var printContent = document.getElementById(el).innerHTML;

        printWindow.document.write(`
        <html>
            <head>
                <title>Print</title>
                <style>
                    /* Add your styles here if needed */
                </style>
            </head>
            <body onload="window.print(); window.close();">
                ${printContent}
            </body>
        </html>
    `);
        printWindow.document.close();
    }

</script>
<script type="text/javascript">

    $(document).ready(function () {

        let check_mode = 0;
        $('#toggleSearchMode').change(function () {
            if ($(this).is(':checked')) {
                // Taluka-wise ON
                $('#select_taluka').show();
                $('#select_village').hide();
                $(this).next('label').text('Taluka Wise');
                check_mode = 1;
            } else {
                // Village-wise ON
//                $('#div_taluka').hide();
                $('#select_village').show();
                $(this).next('label').text('Village Wise');
                check_mode = 0;
            }
        });

        $(document.body).on('blur', '#select_district', function (e) {
            e.preventDefault();
//            alert('select_menu_category ' + $("#select_menu_category").val());
            if ($("#select_district").val() == "Select")
            {
                $("#msg_select_district").fadeIn(500);
                $("#msg_select_district").html("* Select District").css({'color': 'red'});
                $("#msg_select_district").focusin();
            } else
            {
                $("#msg_select_district").fadeOut(1000);

                var id = $('#select_district').find('option:selected').attr('id');
//        var std_val = $(this).find('option:selected').attr('value');

                var data = {};
                data.id = id;
                $.ajax({
                    type: 'POST',
                    data: JSON.stringify(data),
                    contentType: 'application/json',
                    url: '/adminpanel/select_taluka',
                    success: function (data) {
                        debugger;
                        $('#select_taluka').html('');
                        $('#select_taluka').html(data);
                        $("#select_taluka").val('Select');
                    }, error: function (xhr, err) {
                        alert('Error ' + err.message);
                    }
                });
            }
        });

        $(document.body).on('blur', '#select_taluka', function (e) {
            e.preventDefault();
//            alert('select_menu_category ' + $("#select_menu_category").val());
            if ($("#select_taluka").val() == "Select")
            {
                $("#msg_select_taluka").fadeIn(500);
                $("#msg_select_taluka").html("* Select Taluka").css({'color': 'red'});
                $("#msg_select_taluka").focusin();
            } else
            {
                $("#msg_select_taluka").fadeOut(1000);

                var id = $('#select_taluka').find('option:selected').attr('id');
                var data = {};
                data.id = id;
                $.ajax({
                    type: 'POST',
                    data: JSON.stringify(data),
                    contentType: 'application/json',
                    url: '/adminpanel/select_village',
                    success: function (data) {
                        debugger;
                        $('#select_village').html('');
                        $('#select_village').html(data);
                        $("#select_village").val('Select');
                    }, error: function (xhr, err) {
                        alert('Error ' + err.message);
                    }
                });
            }
        });

        $(document.body).on('blur', '#select_village', function (e) {
            e.preventDefault();
            //            alert('select_menu_category ' + $("#select_menu_category").val());
            if ($("#select_village").val() == "Select")
            {
                $("#msg_select_village").fadeIn(500);
                $("#msg_select_village").html("* Select Village").css({'color': 'red'});
                $("#msg_select_village").focusin();
            } else
            {
                $("#msg_select_village").fadeOut(1000);
//                var id = $('#select_village').find('option:selected').attr('id');
//                var data = {};
//                data.id = id;
//                $.ajax({
//                    type: 'POST',
//                    data: JSON.stringify(data),
//                    contentType: 'application/json',
//                    url: '/adminpanel/select_village_mandli',
//                    success: function (data) {
//                        debugger;
//                        $('#select_mandli_name').html('');
//                        $('#select_mandli_name').html(data);
//                        $("#select_mandli_name").val('Select');
//                    }, error: function (xhr, err) {
//                        alert('Error ' + err.message);
//                    }
//                });
            }
        });


        function clear()
        {
            $("#select_division").val('Select');
            $("#select_section").val('Select');
            $("#select_village").val('Select');
            $("#select_mandli_name").val('Select');
            $("#select_year").val('Select');
            $("#select_season").val('Select');
            $("#select_crop").val('Select');
            $("#select_water_type").val('Select');
            $("#crop_area").val('0');
            $("#take_water").val('0');
            $("#water_price").val('0');
            $("#aakar").val('0');
            $("#local_fund").val('0');
            $("#total_rakam").val('0');
            $("#note").val('');
        }


        $(document.body).on('click', '.btnsave', function (e) {
            debugger;
            var select_district = $("#select_district").children(":selected").attr("id");
            var select_taluka = $("#select_taluka").children(":selected").attr("id");
            var select_village = $("#select_village").children(":selected").attr("id");
//            let val = $('#toggleSearchMode').val();

//            alert('check_mode ' + check_mode);

            if (select_district == 'Select')
            {
                $("#msg_select_district").fadeIn(500);
                $("#msg_select_district").html("* Select District").css({'color': 'red'});
                $("#msg_select_district").focusin();
            } else if (select_taluka == 'Select')
            {
                $("#msg_select_taluka").fadeIn(500);
                $("#msg_select_taluka").html("* Select Taluka Name").css({'color': 'red'});
                $("#msg_select_taluka").focusin();
//            } else if (select_village == 'Select')
//            {
//                $("#msg_select_village").fadeIn(500);
//                $("#msg_select_village").html("* Select Village").css({'color': 'red'});
//                $("#msg_select_village").focusin();
            } else
            {
                debugger;
                var data = {};
                data.select_district = select_district;
                data.select_taluka = select_taluka;
                data.select_village = select_village;
                data.check_mode = check_mode;

                $.ajax({
                    type: 'POST',
                    data: JSON.stringify(data),
                    contentType: 'application/json',
                    url: '/adminpanel/view_village_summary',
                    success: function (data) {
                        debugger;
//                    alert('data ' + data);
                        $('#msg_success').fadeIn(500);
                        $('#msg_success').text('* Data Fetch Successfully!');
                        $('#msg_success').fadeOut(5000);
                        $('#tablebody').html('');
                        $('#tablebody').html(data);
                        $('html,body').animate({
                            scrollTop: $("#tablebody").offset().top},
                                'slow');
                    }, error: function (xhr, err) {
                        alert('Error ' + err.message);
                    }
                });
            }
        });

        $(document.body).on('click', '.edit', function (e) {
            debugger;
            var id = $(this).attr('id');
            var data = {};
            data.id = id;
            $('html,body').animate({
                scrollTop: $(".app-main").offset().top},
                    'slow');
            $.ajax({
                type: 'POST',
                data: JSON.stringify(data),
                contentType: 'application/json',
                url: '/adminpanel/project_edit',
                success: function (data) {
                    debugger;
                    $('#product_data').html('');
                    $('#product_data').html(data);
//                    console.log('success');
//                    console.log(JSON.stringify(data));
//                    alert('data ' + data);
                }, error: function (xhr, err) {
                    alert('Error ' + err.message);
                }
            });
        });
        $(document.body).on('click', '.btnupdate', function (e) {
//        $('.btnupdate').click(function () {
            debugger;
            e.preventDefault();
            var product_id_update = $(this).attr('id');
            var select_taluka = $("#select_taluka").children(":selected").attr("id");
            var select_district = $("#select_district").children(":selected").attr("id");
            var select_village = $("#select_village").children(":selected").attr("id");
            var select_project_year = $("#select_project_year").children(":selected").attr("id");
            var select_yojana_name = $("#select_yojana_name").children(":selected").attr("id");
            var select_project_sector = $("#select_project_sector").children(":selected").attr("id");
            var select_project_status = $("#select_project_status").children(":selected").attr("id");
            var project_name = $("#project_name").val();
            var project_detail = $("#project_detail").val();
//            var work_id = $("#work_id").val();
            var agency_name = $("#agency_name").val();
            var project_start_date = $("#project_start_date").val();
            var project_est_completion_date = $("#project_est_completion_date").val();
            var select_officer = $("#select_officer").children(":selected").attr("id");
            var project_end_date = $("#project_end_date").val();
            var total_expense = $("#total_expense").val();
            var saving = $("#saving").val();
            var refunded_grant = $("#refunded_grant").val();
            var remark = $("#remark").val();
            var project_importance = $("#project_importance").val();
//            var project_sadar = $("#project_sadar").val();

            var img_url = $("#img_url").attr('src');
            var img_url_2 = $("#img_url_2").attr('src');
//        alert('year_id '+year_id+' std_id '+std_id+' class_name '+class_name);
            if (select_project_year == 'Select')
            {
                $("#msg_select_project_year").fadeIn(500);
                $("#msg_select_project_year").html("* Select Project Year").css({'color': 'red'});
                $("#msg_select_project_year").focusin();
            } else if (select_yojana_name == 'Select')
            {
                $("#msg_select_yojana_name").fadeIn(500);
                $("#msg_select_yojana_name").html("* Select Yojana Name").css({'color': 'red'});
                $("#msg_select_yojana_name").focusin();
            } else if (select_project_sector == 'Select')
            {
                $("#msg_select_project_sector").fadeIn(500);
                $("#msg_select_project_sector").html("* Select Project Sector").css({'color': 'red'});
                $("#msg_select_project_sector").focusin();
            } else if (project_name == '')
            {
                $("#msg_project_name").fadeIn(500);
                $("#msg_project_name").html("* Project Name Is Empty").css({'color': 'red'});
                $("#msg_project_name").focusin();
            } else if (project_detail == '')
            {
                $("#msg_project_detail").fadeIn(500);
                $("#msg_project_detail").html("* Project Detail Is Empty").css({'color': 'red'});
                $("#msg_project_detail").focusin();
            } else if (select_district == 'Select')
            {
                $("#msg_select_district").fadeIn(500);
                $("#msg_select_district").html("* Select District").css({'color': 'red'});
                $("#msg_select_district").focusin();
            } else if (select_taluka == 'Select')
            {
                $("#msg_select_taluka").fadeIn(500);
                $("#msg_select_taluka").html("* Select Taluka").css({'color': 'red'});
                $("#msg_select_taluka").focusin();
            } else if (select_village == 'Select')
            {
                $("#msg_select_village").fadeIn(500);
                $("#msg_select_village").html("* Village Name Is Empty").css({'color': 'red'});
                $("#msg_select_village").focusin();
            } else if (agency_name == '')
            {
                $("#msg_agency_name").fadeIn(500);
                $("#msg_agency_name").html("* Agency Name Is Empty").css({'color': 'red'});
                $("#msg_agency_name").focusin();
            } else if (project_start_date == '')
            {
                $("#msg_project_start_date").fadeIn(500);
                $("#msg_project_start_date").html("* Project Start Date Is Empty").css({'color': 'red'});
                $("#msg_project_start_date").focusin();
            } else if (project_est_completion_date == '')
            {
                $("#msg_project_est_completion_date").fadeIn(500);
                $("#msg_project_est_completion_date").html("* Estimate Project Completion Date Is Empty").css({'color': 'red'});
                $("#msg_project_est_completion_date").focusin();
            } else if (select_officer == 'Select')
            {
                $("#msg_select_officer").fadeIn(500);
                $("#msg_select_officer").html("* Implementation Officer Is Empty").css({'color': 'red'});
                $("#msg_select_officer").focusin();
            } else
            {
//            alert('Success ');

                if (img_url == '' || img_url == undefined)
                {
                    img_url = "";
                }
                if (img_url_2 == '' || img_url_2 == undefined)
                {
                    img_url_2 = "";
                }

                var id = $(this).attr('id');
                var data = {};
                data.project_id = id;
                data.select_project_year = select_project_year;
                data.select_yojana_name = select_yojana_name;
                data.select_project_sector = select_project_sector;
                data.project_name = project_name;
                data.project_detail = project_detail;
                data.select_taluka = select_taluka;
                data.select_district = select_district;
                data.select_village = select_village;
                data.agency_name = agency_name;
                data.project_start_date = project_start_date;
                data.project_end_date = project_end_date;
                data.project_est_completion_date = project_est_completion_date;
                data.select_officer = select_officer;
                data.total_expense = total_expense;
                data.saving = saving;
                data.refunded_grant = refunded_grant;
                data.remark = remark;
                data.project_importance = project_importance;
                data.project_status = select_project_status;
                data.project_image = img_url;
                data.project_video = img_url_2;
                $.ajax({
                    type: 'POST',
                    data: JSON.stringify(data),
                    contentType: 'application/json',
                    url: '/adminpanel/project_update',
                    success: function (data) {
                        debugger;
                        console.log('success ', data);
//                    console.log(JSON.stringify(data));
//                    alert('data ' + data);
                        $('#product_info').html('');
                        $('#product_info').html(data);
                        $('#msg_success').fadeIn(50);
                        $('#msg_success').text('* Data Update Successfully!');
                        $('#msg_success').fadeOut(5000);
//                    var a = $('#zero_config tr:last').attr('id');
                        $("tr[id=" + id + "]").css({'background-color': '#adb3d6'});
                        $('html,body').animate({
                            scrollTop: $("tr[id=" + id + "]").offset().top},
                                'slow');
                        clear();
                        setTimeout(function () {
                            // Do something after 1 second 
                            $('#tablebody tr').css({'background-color': '#d0dee9'});
                        }, 10000);
//                    window.location.href = "/customers/add";
                    }, error: function (xhr, err) {
                        alert('Error ' + err.message);
                    }
                });
            }
        });
//        $(document.body).on('click', '.clear', function (e) {
//            debugger;
//            clear();
//        });
        $(document.body).on('click', '.delete_set_id', function (e) {
            debugger;
            var id = $(this).attr('id');
//        alert('id is ' + id);
            $('#myModal').find('.delete').attr('id', id);
        });
        $(document.body).on('click', '.delete', function (e) {
            e.preventDefault();
            var id = $(this).attr('id');
//        alert('id is ' + id);
            var data = {};
            data.id = id;
            if (id == '')
            {
            } else {

                $.ajax({
                    cache: false,
                    type: 'POST',
                    async: false,
                    data: JSON.stringify(data),
                    contentType: 'application/json',
                    url: '/adminpanel/delete_project',
                    success: function (data) {
                        debugger;
//                        alert('data ' + data);

                        $('#myModal_msg').modal('show');
                        $('#tablebody').html('');
                        $('#tablebody').html(data);
//                    console.log('success');
//                    console.log(JSON.stringify(data));
                    }, error: function (xhr, err) {
                        alert('Error ' + err.message);
                    }
                });
            }
        });
        $(document.body).on('click', '.show_image', function (e) {
            debugger;
            var src = $(this).attr('src');
            $('#show_image_model').find('#img1_path').attr('src', src);
            $('#show_image_model').modal('show');
        });
        $(document.body).on('click', '.show_video', function (e) {
            debugger;
            var src = $(this).attr('name');
            $('#show_video_model').find('#video1_path').attr('src', src);
            $('#show_video_model').modal('show');
        });
        $("body").click(function () {
//            alert('change event');
            if ($(".modal").is(":visible")) {
//                alert('if event');
                $(".modal").hide();
                $("#show_video_model iframe").attr("src", "");
            }
        });
        $(document.body).on('click', '.model_hide_ok', function (e) {
            debugger;
            $('#myModal_msg').modal('hide');
        });
    });
    function add_project() {
        window.location.href = '/manage_project';
    }

</script>


{% include './admin_footer.html' %}

<div class="modal fade" id="show_image_model" role="dialog">
    <div class="modal-dialog" style="max-width:750px; max-height:800px;">
        <!-- Modal content-->
        <div class="modal-content">
            <!--<div class="row">-->
            <div>
                <img id="img1_path" style="height: 750px;width: 800px" src="">
            </div>
            <!--</div>-->
        </div>

    </div>
</div>

<div class="modal fade" id="show_video_model" role="dialog">
    <div class="modal-dialog" style="max-width:950px; max-height:800px;">
        <!-- Modal content-->
        <div class="modal-content">
            <!--<div class="row">-->
            <div style="padding: 20px">
                <iframe id="video1_path" class="embed-responsive-item"
                        width="910px" height="650px" src="" allowfullscreen></iframe>
            </div>
            <!--</div>-->
        </div>

    </div>
</div>

<div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <!--<button type="button" class="close" data-dismiss="modal">&times;</button>-->
                <h4 class="modal-title">Confirmation Message</h4>
            </div>
            <div class="modal-body">
                <p style="color: red"> Are you sure to delete this record ? </p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-danger delete" data-dismiss="modal">Delete</button>
                <button type="button" class="btn btn-primary close_model" data-dismiss="modal">Cancel</button>
            </div>
        </div>

    </div>
</div>

<div class="modal fade" id="myModal_msg" role="dialog">
    <div class="modal-dialog">

        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <!--<button type="button" class="close" data-dismiss="modal">&times;</button>-->
                <h4 class="modal-title">Message</h4>
            </div>
            <div class="modal-body">
                <p style="color: green"> * Record Delete Successfully. </p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-danger model_hide_ok" data-dismiss="modal">Ok</button>
            </div>
        </div>

    </div>
</div>

