@extends('layouts.guest')

@section('content')
    <section class="water_scenario">
        <div class="container">
            @if (session()->has('login_error'))
                <div class="alert alert-danger">
                    {{ session()->get('login_error') }}
                </div>
            @endif
            <!-- Filter State & Year -->
            <div class="card mb-3">
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6 col-lg-2">
                            <div class="form-group">
                                <label for="">States</label>
                                <select id="StateCode" name="StateCode" class="form-control select"
                                    required>
                                    <option value="">--Select--</option>
                                    <option value="National">All States</option>
                                    @foreach ($states as $state)
                                        <option value="{{ $state->StateName }}">{{ $state->StateName }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                        </div>

                        <div class="col-md-6 col-lg-2">
                            <div class="form-group">
                                <label for="">Year</label>
                                <select id="year_id" name="year_id" class="form-control select" required>
                                    <option value="">--Select--</option>
                                    @for ($year = 2024; $year >= 2010; $year--)
                                        <option value="{{ $year }}">{{ $year }}</option>
                                    @endfor
                                </select>
                            </div>
                        </div>

                        <div class="col-md-6 col-lg-2">
                            <div class="form-group">
                                <label for="" class="visibility-hidden">Search</label>
                                <div>
                                    <button class="btn btn-sm btn-primary text-white filter_btn mr-2"
                                        id="filter_data" style="margin-right: 5px;">Filter</button>
                                    <button class="btn btn-sm btn-primary" id="reset_filter">Reset</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="page-body">
                <div class="row">
                    <div class="col-sm-12">
                        <!-- Zero config.table start -->
                        <div class="card">
                            <div class="card-block">

                                @include('common.error')
                                <div class="table-responsive">
                                    <table id="well_info_summary_table" class="table table-striped table-bordered nowrap">
                                        <thead>
                                            <th width="5%">Sr. No.</th>
                                            <th width="15%">State Name</th>
                                            <th width="15%">Year</th>
                                            <th width="20%">File Name</th>
                                            <th width="5%">Download</th>
                                        </thead>
                                        <tbody>
                                            @foreach ($directoryFiles as $directoryFile)
                                                <tr>
                                                    <td>{{ $loop->iteration }}</td>
                                                    <td>{{ $directoryFile->StateName }} </td>
                                                    <td>{{ $directoryFile->Year }}</td>
                                                    <td>{{ $directoryFile->file_name }}</td>
                                                    <td>
                                                        <a href="{{ url('/download/' . $currentDirectory . '/' . basename($directoryFile->file_name)) }}"
                                                            class="btn btn-sm btn-success" title="Download">
                                                            <i class="feather icon-download"></i>
                                                        </a>
                                                    </td>
                                                </tr>
                                            @endforeach
                                        </tbody>
                                    </table>
                                </div>
                                
                            </div>
                        </div>

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

    <style>
        ul.directory-list {
            list-style: none;
            padding: 0;
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
        }

        ul.directory-list li {
            margin: 10px;
            padding: 15px;
            border: 1px solid #ddd;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s ease, background 0.3s ease;
            width: 140px;
            text-align: center;
            border-radius: 8px;
            overflow: hidden;
            position: relative;
        }

        ul.directory-list li:hover {
            transform: translateY(-5px) scale(1.05);
        }

        ul.directory-list li a {
            text-decoration: none;
            display: block;
            padding: 0px 0;
            /* padding: 10px 0; */
            position: relative;
            z-index: 1;
        }

        ul.directory-list li a .folder-icon {
            display: block;
            font-size: 48px;
            margin-bottom: 10px;
            color: #ffbb33;
        }

        ul.directory-list li a .pdf-icon {
            display: block;
            /* width: 100px; */
            width: 70px;
            height: 80px;
            /* height: 130px; */
            background: #d9534f;
            color: #fff;
            font-size: 16px;
            line-height: 130px;
            text-align: center;
            margin: 0 auto 10px;
            border-radius: 4px;
            position: relative;
        }

        ul.directory-list li a .pdf-icon::before {
            content: "PDF";
            position: absolute;
            top: 1px;
            left: 18px;
            font-size: 13px;
            font-weight: bold;
        }

        ul.directory-list li a .pdf-icon::after {
            content: "";
            position: absolute;
            top: 0;
            right: 0;
            width: 30px;
            height: 30px;
            background: #fff;
            border-top-left-radius: 4px;
            clip-path: polygon(0 0, 100% 0, 100% 100%);
        }

        ul.directory-list li::before {
            content: '';
            background: rgba(255, 255, 255, 0.1);
            position: absolute;
            top: 0;
            left: -75%;
            width: 50%;
            height: 100%;
            transform: skewX(-25deg);
            transition: left 0.5s ease;
            z-index: 0;
        }

        ul.directory-list li:hover::before {
            left: 125%;
        }
    </style>


    <script src="{{ asset('assets\js\jquery.min.js') }}"></script>
    <link href="{{ asset('assets\leaflet\leaflet.css') }}" rel="stylesheet" />
    <link href="{{ asset('assets\leaflet\leaflet.fullscreen.css') }}" rel="stylesheet" type="text/css" />
    <link href="{{ asset('assets\leaflet\leaflet.zoomhome.css') }}" rel="stylesheet" type="text/css" />
    <link href="{{ asset('assets\leaflet\MarkerCluster.css') }}" rel="stylesheet" />
    <link href="{{ asset('assets\leaflet\MarkerCluster.Default.css') }}" rel="stylesheet" />
    <script type="text/javascript" src="{{ asset('assets\leaflet\leaflet.js') }}"></script>
    <script src="{{ asset('assets\leaflet\mlcluster.js') }}"></script>
    <script src="{{ asset('assets\leaflet\leaflet.markercluster-src.js') }}"></script>
    <script src="{{ asset('assets\leaflet\leaflet.fullscreen.min.js') }}"></script>
    <script src="{{ asset('assets\leaflet\leaflet.groupedlayercontrol.min.js') }}"></script>
    <script src="{{ asset('assets\leaflet\leaflet.zoomhome.min.js') }}"></script>

    <script src="{{ asset('bower_components\datatables.net\js\jquery.dataTables.min.js') }}"></script>
    <script src="{{ asset('bower_components\datatables.net-buttons\js\dataTables.buttons.min.js') }}"></script>
    <script src="{{ asset('bower_components\datatables.net-bs4\js\dataTables.bootstrap4.min.js') }}"></script>
    {{-- <script>
        $('#simpletable').DataTable();
    </script> --}}
    <script>
        // $(document).ready(function() {
        //     var dataTable = $('#simpletable').DataTable({
        //         "paging": true, // Enable pagination
        //         "searching": true, // Disable searching (we'll use custom filtering)
        //         "info": true, // Enable info display
        //         "processing": true, // Show processing indicator
        //         "serverSide": false, // Fetch data on the client side
        //         "ordering": true, // Enable ordering
        //         "lengthMenu": [10, 25, 50, 75, 100], // Define page length menu
        //         "pageLength": 10 // Set default page length
        //     });

        //     // Handle filter button click
        //     $('#filter_data').click(function() {
        //         var stateCode = $('#StateCode').val();
        //         var yearId = $('#year_id').val();

        //         // Apply filters
        //         dataTable.columns(1).search(stateCode).draw();
        //         dataTable.columns(2).search(yearId).draw();
        //     });

        //     // Handle reset button click
        //     $('#reset_filter').click(function() {
        //         $('#StateCode').val('').trigger('change');
        //         $('#year_id').val('').trigger('change');

        //         // Reset filters
        //         dataTable.columns().search('').draw();
        //     });
        // });



        $(document).ready(function() {
            var dataTable = $('#well_info_summary_table').DataTable({
                "paging": true,
                "searching": true,
                "info": true,
                "processing": true,
                "serverSide": false, // Assuming data is fetched on the client side
                "ordering": true,
                "lengthMenu": [10, 25, 50, 75, 100],
                "pageLength": 10
            });

            // Handle filter button click
            $('#filter_data').click(function() {
                var stateCode = $('#StateCode').val(); // Selected StateCode
                var year = $('#year_id').val(); // Selected Year

                // Apply filters
                dataTable.columns(1).search(stateCode).draw(); // Assuming StateCode column index is 1
                dataTable.columns(2).search(year).draw(); // Assuming Year column index is 2
            });

            // Handle reset button click
            $('#reset_filter').click(function() {
                $('#StateCode').val('').trigger('change');
                $('#year_id').val('').trigger('change');

                // Reset filters
                dataTable.columns().search('').draw();
            });
        });


        // $(function() {
        //     var table = $('#simpletable').DataTable({
        //         "processing": true,
        //         "serverSide": true, //Feature control DataTables' servermside processing mode.
        //         "bFilter": true,
        //         "bLengthChange": false,
        //         "ordering": false,
        //         "iDisplayLength": 10,
        //         "responsive": true,
        //         "ajax": {
        //             "url": '{{ route('states.index') }}',
        //             "type": "GET",
        //             "dataType": "json",
        //             "dataSrc": function(jsonData) {
        //                 return jsonData.data;
        //             }
        //         },
        //         //Set column definition initialisation properties.
        //         "columnDefs": [{
        //             "targets": [0], //first column / numbering column
        //             "orderable": false, //set not orderable
        //         }, ],
        //         dom: 'Bfrtip',
        //         lengthMenu: [
        //             [25, -1],
        //             ['10 rows', '25 rows', '50 rows', 'Show all']
        //         ],
        //         buttons: [{
        //             extend: 'excelHtml5',
        //             text: 'Export',
        //             title: 'State',
        //             exportOptions: {
        //                 columns: [0, 1, 2] // Specify the columns to export (0-indexed)
        //             }
        //         }]
        //     });
        //     // dataTable();
        //     $('#pageLengthSelect').on('change', function() {
        //         var newLength = parseInt($(this).val());
        //         table.page.len(newLength).draw();
        //     });
        // });
        // $(function() {
        //     $('#simpletable').DataTable({
        //         "processing": true,
        //         "serverSide": false, // Disable server-side processing
        //         "searching": true, // Enable searching
        //         "bFilter": true,
        //         "bLengthChange": true, // Enable length change
        //         "ordering": true, // Enable ordering
        //         "responsive": true,
        //         "paging": true, // Enable pagination
        //         "info": true, // Enable info display
        //         "lengthMenu": [
        //             [10, 25, 50, 75, 100],
        //             [10, 25, 50, 75, 100]
        //         ], // Define page length menu
        //         "pageLength": 10, // Set default page length
        //         "dom": 'Bfrtip',
        //         "buttons": [] // Remove export button
        //     });
        // });
    </script>


    <script type="text/javascript">
        $(document).ready(function() {
            var mapOptions = {
                center: [22.309425, 72.136230],
                zoom: 4,
                maxZoom: 12,
                minZoom: 3,
                zoomSnap: 0.97,
                fullscreenControl: {
                    pseudoFullscreen: false
                },
                zoomControl: false,
                zoomsliderControl: true,
                scrollWheelZoom: false,
            };
            var map = L.map('map', mapOptions);

            var outdoors = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
            }).addTo(map);
            // map.addControl(new L.Control.Fullscreen());

            L.Control.zoomHome({
                position: 'topleft'
            }).addTo(map);

            function StategetColor(d) {
                debugger;

                if (d == 20) {
                    return '#008FFB';
                } else {
                    return '#c4c4c4';
                }


            }

            function Statestyle(feature) {
                return {
                    //fillColor: StategetColor(feature.properties.gid),
                    weight: 1,
                    opacity: 1,
                    color: '#2B9FB2 ',
                    dashArray: '0',
                    fillOpacity: 0
                };
            }

            var State = L.geoJson(null, {
                style: Statestyle
            }).addTo(map);

            // Add GeoJSON to road layer
            $.getJSON(
                "http://20.198.96.251:8080/geoserver/ne/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=ne%3Aindia_2000-2014_state&maxFeatures=500000&outputFormat=application%2Fjson",
                function(data) {
                    State.addData(data);
                });

            var Region = L.geoJson(null, {
                style: Statestyle
            });

            // // Add GeoJSON to road layer
            // $.getJSON("http://20.198.96.251:8080/geoserver/ne/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=ne%3Aindia_2000-2014_state&maxFeatures=500000&outputFormat=application%2Fjson", function (data) {
            //     State.addData(data);
            // });


            // var DistLyr = new L.geoJson(gjgeojson, { style: polystyle}).addTo(map);
            // var basin = new L.geoJson(gjgeojson, { style: polystyle }); 

            var baseMaps = {
                "Street": outdoors
                // ,
                // "Hybrid": L.tileLayer('http://{s}.google.com/vt/lyrs=s,h&x={x}&y={y}&z={z}', { maxZoom: 20, subdomains: ['mt0', 'mt1', 'mt2', 'mt3'] }),
                // "Satellite": L.tileLayer('http://{s}.google.com/vt/lyrs=s&x={x}&y={y}&z={z}', { maxZoom: 20, subdomains: ['mt0', 'mt1', 'mt2', 'mt3'] }),
                // "Terrain": L.tileLayer('http://{s}.google.com/vt/lyrs=p&x={x}&y={y}&z={z}', { maxZoom: 20, subdomains: ['mt0', 'mt1', 'mt2', 'mt3'] })
            }

            var overlayMaps = {
                "Boundary Layers": {
                    "State": State,
                    "Region": Region


                }
            };

            var options = {
                // Make the "Landmarks" group exclusive (use radio inputs)
                exclusiveGroups: ["Boundary Layers"],
                // Show a checkbox next to non-exclusive group labels for toggling all
                groupCheckboxes: true,
                position: 'topleft'
            };

            var layerControl = L.control.groupedLayers(baseMaps, overlayMaps, options);
            map.addControl(layerControl);
            // console.log(response);


            fillMap(map);
            //BindRainFallChart();
            // setInterval(function () {
            //     $('span .mod-next').trigger();

            // }, 2000);
            // $.get("/Default/Get_AboutInfo", {}, function (data) {
            //     $('#abtSec').html(data);

            // });
            // $.get("/Default/Get_TopGal", {}, function (data) {
            //     $('#def_Gal').html(data);

            // });
            // $.get("/Default/Get_ContactInfo", {}, function (data) {
            //     $('#col_Info').html(data);

            // });
            // $.get("/Default/Get_GalleInfo", {}, function (data) {
            //     $('#defGallInfo').html(data);
            //     //loadGalleriesDe();

            // });
            // $.get("/Default/DisclaimerContent", {}, function (data) {
            //     $('#DisSec').html(data);
            //    // loadGalleriesDe();

            // });
            // $.get("/Default/TermsAndCond", {}, function (data) {
            //     $('#TermSec').html(data);

            // });
        });

        function DiscTerm(DescCont) {
            $('.ClsTerm').hide(500);
            $('#' + DescCont).toggle(500);

        }

        function RedirectToPage(page) {

            if (page == 'rainfall')
                window.location.assign("/RPT_NormalandActualCumulativeRainfall/Index");
            else if (page == 'quality')
                window.location.assign("/RPT_GroundWaterQuality/Index");
            else if (page == 'levels') {
                window.location.assign("/RPT_NoOfWellsInDifferentFluctuationRange/Index");
            } else if (page == 'monitoring') {
                window.location.assign("/WaterLevelDistrictWise/WaterLevelDistrictWise");
            } else if (page == 'scenario') {
                window.location.assign("/RPt_WL_Comparision_DecadalAnnualSeasonal/Index");
            } else if (page == 'assessment') {
                //window.location.assign("/DynamicGWResources/Index");
                window.location.assign("/GEC/Index");
            } else {
                return;
            }
        }

        function ShowImg_Popup(th) {
            var igsrc = $(th).attr("src");
            var img = "<img src='../" + igsrc + "' alr=''>";
            $('#myModalTtGal .modal-body').html(img);
            $('#myModalTtGal .modal-body').css({
                width: 'auto',
                height: 'auto',
                'max-height': '100%',
                'overflow': 'scroll;'
            });
            $('#myModalTtGal').modal({
                backdrop: 'static', //////////// Show backgroud opacity(true or false) and static (close on button click)
                keyboard: false ///////////Closes the modal when escape key is pressed
            });
        }

        function SubmitContacts() {
            var dta = new FormData();
            var msg = "";
            $('#frmPostContact input[type="text"], input[type="textarea"]').each(function() {
                if ($(this).empty()) {
                    Show_ModalAlert_Popups("All fields are required", "Alert");
                    msg = "1";
                    return false;
                }
            });
            if (msg == "") {
                dta = {
                    name: $('#txt_Name').val(),
                    email: $('#txt_Email').val(),
                    mob: $('#txt_Mobile').val(),
                    sub: $('#txt_Sub').val(),
                    msg: $('#txtmsg').val(),
                };
                var datafrm = JSON.stringify(dta);

                $.ajax({
                    url: '/Default/ContactInfo',
                    type: 'POST',
                    dataType: 'json',
                    data: datafrm,
                    async: false,
                    contentType: 'application/json; charset=utf-8',
                    success: function(data) {
                        if (data != null) {
                            Show_ModalAlert_Popups(data.success, "Alert");
                        }
                    }
                });
            }
        }

        function fillMap(map) {
            //    alert('in');
            $.ajax({
                url: '/Dashboard/GetDashboardMapData',
                type: 'GET',
                data: {},
                success: function(response) {
                    // var map = L.map('map').setView([22.309425, 72.136230], 7);




                    var markers = L.markerClusterGroup();
                    // // alert(response.length);

                    $.each(response, function(i, n) {
                        // console.log("lat: "+n.Latitude+", long"+ n.Longitude);
                        markers.addLayer(L.circle([n.Latitude, n.Longitude], {
                            color: '#006fcc',
                            fillColor: '#008bff',
                            fillOpacity: 0.5,
                            radius: 500
                        }).bindPopup(
                            '<div><table class="table table-borderless text-center" style="width:100%; font-size:14px;"> <thead><tr><td colspan="2"><b>' +
                            n.LocationName +
                            ' </b></td></tr></thead> <tbody> <tr> <td colspan="2">' + n
                            .Village + '/' + n.Block_Taluk + '/' + n.DistrictName +
                            '</td></tr> <tr> <td colspan="2">' + n.Location +
                            '</td> </tr> <tr> <td colspan="2">' + n.GECBasin +
                            '</td></tr><tr class="border-top border-left border-right"> <td colspan="2">Well depth: ' +
                            n.Well_Depth +
                            '</td></tr><tr class="border-top border-left border-right"> <td colspan="2">Gwl: ' +
                            n.Water_level +
                            '</td></tr><tr class="border-bottom border-left border-right"> <td colspan="2">Date: ' +
                            n.date +
                            '</td></tr> <tr class="mt-2"> <td colspan="2"></td> </tr></tbody> </table></div>'
                        ).openPopup());
                    });


                    map.addLayer(markers);

                    // function polystyle(feature) {
                    //     return {
                    //         fillColor: '#F9E79F',
                    //         weight: 1,
                    //         opacity: 2, //1
                    //         color: '#17202A',  //Outline color
                    //         fillOpacity: 0.5 //5
                    //     };
                    // }

                    // L.geoJson(gjgeoson, { style: polystyle }).addTo(map);

                },
                error: function(xhr, status, error) {}
            });
        }

        function BindRainFallChart() {
            $.ajax({
                url: '/Default/BindRainfallChart',
                type: 'GET',
                data: {},
                success: function(result) {
                    $('#rain-fall').html(result);
                },
                error: function(xhr, status, error) {}
            });
        }
    </script>
@endsection