@extends('layouts/acc_layout')
@section('title', 'Financial Budget MIS Part')
@section('content')

@include('accounting.misYearlyPlan.entry.style')

<style>
    .stRowStyle td {
        background-color: #cfe2f3
    }

    .gtRowStyle td {
        background-color: #9fc5e8
    }

    .control-label {
        text-shadow: 0px 3px 4px rgb(0 0 0 / 40%);
        color: #fff;
        margin-bottom: 8px !important;
    }

    .form-group,
    .form-control {
        font-size: 11px !important;
        color: #000 !important;
    }

    .budget-form-table tbody tr td {
        color: #000 !important;
        text-align: left;
    }

    .table>thead>tr>td,
    .table>tbody>tr>td,
    .table>thead>tr>th,
    .table>tbody>tr>th {
        padding: 8px 5px !important;
    }

    .form-group,
    .form-control {
        font-size: 11px !important;
        color: black !important;
    }

    .form-control {
        padding: 5px !important;
    }

    .panel .panel-heading {
        border-bottom: 1px solid #f5f5f5;
    }

    .table thead tr th,
    .table tbody tr th {
        font-size: 12px !important;
    }

    .table tbody tr td {
        font-size: 11px !important;
    }

    .table tbody tr td,
    .table thead tr th {
        padding: 8px 8px !important
    }

    .fa-lg {
        vertical-align: 0%;
    }

    .table thead tr th {
        background: #485058 !important;
    }

    .table tr:nth-child(odd) {
        background-color: #fff !important;
    }

    .table.table-bordered>thead>tr>td,
    .table.table-bordered>tbody>tr>td,
    .table.table-bordered>tfood>tr>td,
    .table.table-bordered>thead>tr>th,
    .table.table-bordered>tbody>tr>th,
    .table.table-bordered>tfood>tr>th {
        border-color: #ccc;
    }


    .table tr:hover {
        background-color: #eee !important;
    }

    .table>thead>tr>td:after,
    .table>thead>tr>th:after {
        height: 0px;
    }
</style>


<div class="row">
    <div class="col-md-12">
        <div class="panel panel-default" style="background-color:#708090;">
            <div class="panel-heading" style="padding-bottom:0px">
                <div class="panel-options" style="margin-top: 15px;">
                    <a href="{{ route('list.financial.budget.mis.part') }}" style="color: #fff;" id="reportSubmit" class="btn btn-primary">List</a>
                </div>
                <div>
                    <h3 style="font-family: Antiqua; letter-spacing: 2px; color: white;"> @if(!empty($data['fiscalYearSelected'])) Edit @else Add @endif Financial Budget MIS Part</h3>
                </div>
            </div>

            <div class="panel-body panelBodyView">
                <div class="row" style="display: flex; justify-content: center;">
                    <div class="col-lg-8">
                        <form id="searchForm" class="form-horizontal form-groups" action="{{ route('store.financial.budget.mis.part') }}" method="POST">
                            @csrf

                            @if(!empty($data['projectSelected']))
                                <input type="hidden" name="project" value="{{ $data['projectSelected'] }}">
                            @endif
                            @if(!empty($data['projectTypeSelected']))
                                <input type="hidden" name="projectType" value="{{ $data['projectTypeSelected'] }}">
                            @endif
                            @if(!empty($data['fiscalYearSelected']))
                                <input type="hidden" name="fiscalYear" value="{{ $data['fiscalYearSelected'] }}">
                            @endif

                            <div class="row">
                                {{-- Project level --}}
                                <div class="col-md-3" style="padding-right: 0;">
                                    <div class="form-group">
                                        <div class="col-md-12">
                                            <label for="project" class="control-label pull-left">Project</label>
                                        </div>
                                        <div class="col-md-12">
                                            <select name="project" class="form-control input-sm" onchange="getProjectType(this.value)" {{ $data['projectSelected'] ? 'disabled' : '' }} required>
                                                <option value="">Please Select</option>
                                                @foreach ($data['projects'] as $key => $project)
                                                    <option value="{{ $key }}" {{ $data['projectSelected']==$key ? 'selected' : '' }}>{{ $project }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                </div>
                                {{-- Project level end --}}

                                {{-- Start of Project Type level --}}
                                <div class="col-md-3" style="padding-right: 0;">
                                    <div class="form-group">
                                        <div class="col-md-12">
                                            <label for="projectType" class="control-label pull-left">Project Type</label>
                                        </div>
                                        <div class="col-md-12">
                                            <select name="projectType" id="projectTypes" class="form-control input-sm" {{ $data['projectTypeSelected'] ? 'disabled' : '' }} required>
                                                <option value="">Please Select</option>
                                                @foreach ($data['projectTypes'] as $key => $types)
                                                    <option value="{{ $key }}" {{ $data['projectTypeSelected']==$key ? 'selected' : '' }}>{{ $types }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                </div>
                                {{-- end of Project Type level --}}

                                {{-- fiscal year level --}}
                                <div class="col-md-2">
                                    <div class="form-group">
                                        <div class="col-md-12">
                                            <label for="fiscalYear" class="control-label pull-left">Fiscal Year</label>
                                        </div>
                                        <div class="col-md-12">
                                            <select name="fiscalYear" class="form-control input-sm" onchange="checkForExistingData()" {{ $data['fiscalYearSelected'] ? 'disabled' : '' }} required>
                                                <option value="">Please Select</option>
                                                @foreach ($data['fiscalYears'] as $key => $item)
                                                <option value="{{ $key }}" {{ $data['fiscalYearSelected']==$key ? 'selected' : '' }}>{{ $item }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                </div>
                                {{-- end fiscal year level --}}
                            </div>

                            <div class="row">
                                <div class="col-md-12" style="text-align:center; text-align: -webkit-center; padding-top:15px;">
                                    <table class="table table-sm table-bordered budget-form-table" style="border-top:0;">
                                        <thead>
                                            <tr>
                                                <th style="text-align:left; border-left-color: transparent; padding: 15px;">Name</th>
                                                <th style="border-right-color: transparent; padding: 15px;"></th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @foreach ($data['misBudgetStatementConfig']['firstTable'] as $config)
                                                @if ($config['hasValue'])
                                                <tr>
                                                    <td style="padding: 5px;">{{$config['name']}}</td>
                                                    <td style="text-align: left; padding:5px;">
                                                        <input type="number" name="{{ $config['keyName'] }}" class="form-control" step="0.0001" placeholder="0" {{ $isViewMode ? 'readonly' : '' }} />
                                                    </td>
                                                </tr>
                                                @endif
                                            @endforeach
                                        </tbody>
                                    </table>
                                    <div class="form-group" style="margin-top:15px;">
                                        <div class="col-md-12">
                                            {!! Form::submit('Submit', ['id' => 'reportSubmit', 'class' => 'btn btn-primary', 'disabled' => $isViewMode]) !!}
                                        </div>
                                    </div>

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

<script>
    $(document).ready(function() {
            $("#filReportLevel").change(function(event) {
                if ($(this).val() == "Branch") {
                    $("#branchDiv").show();
                    $("#areaDiv").hide();
                    $("#zoneDiv").hide();
                    $("#regionDiv").hide();
                } else if ($(this).val() == "Area") {
                    $("#branchDiv").hide();
                    $("#areaDiv").show();
                    $("#zoneDiv").hide();
                    $("#regionDiv").hide();
                } else if ($(this).val() == "Zone") {
                    $("#branchDiv").hide();
                    $("#areaDiv").hide();
                    $("#zoneDiv").show();
                    $("#regionDiv").hide();
                } else if ($(this).val() == "Region") {
                    $("#branchDiv").hide();
                    $("#areaDiv").hide();
                    $("#zoneDiv").hide();
                    $("#regionDiv").show();
                }
            });

            $("#filReportLevel").trigger('change');
        });

        $(document).ready(function() {

            // Trigger the function on page load using the passed parameters
            checkForExistingData();

            $("form").submit(function(event) {
                event.preventDefault();
                
                // Show the loader
                $('#loadingModal').show();

                var serializeValue = $(this).serialize();
                
                // Append the CSRF token to the serialized data
                serializeValue += '&_token=' + $('meta[name="csrf-token"]').attr('content');

                $.ajax({
                    url: $(this).attr('action'),
                    method: $(this).attr('method'),
                    data: serializeValue,
                    success: function(response) {
                        // Hide the loader
                        $('#loadingModal').hide();

                        toastr.success("Data inserted/updated successfully.", "Success");
                        // Redirect to the list page upon success
                        window.location.href = '{{ route("list.financial.budget.mis.part") }}';
                    },
                    error: function(response) {
                        // Hide the loader
                        $('#loadingModal').hide();

                        // Handle the error, e.g., show an error message
                        alert('An error occurred. Please try again.');
                    }
                });
            });

            $("#printIcon").click(function(event) {
                var mainContents = document.getElementById("reportingDiv").innerHTML;
                var win = window.open('', 'printwindow');
                win.document.write(mainContents);
                win.print();
                win.close();
            });

        });

        function getProjectType(project) {
            $.ajax({
                type: "POST",
                url: "{{ url('gnr/getProjectTypes') }}",
                data: {
                    projectId: project
                },
                dataType: "json",
                success: function(response) {
                    $('#projectTypes').empty();
                    $.each(response, function(index, val) {
                        $('#projectTypes').append("<option value='" + index + "'>" + val + "</option>");
                    });
                }
            });
        }

        function checkForExistingData() {
            var projectId = $('[name="project"]').val();
            var projectTypeId = $('[name="projectType"]').val();
            var fiscalYear = $('[name="fiscalYear"]').val();

            if(projectId && projectTypeId && fiscalYear) {
                $.ajax({
                    url: '{{ route("check.financial.budget.mis.part") }}',
                    method: 'GET',
                    data: {
                        projectId: projectId,
                        projectTypeId: projectTypeId,
                        fiscalYear: fiscalYear,
                    },
                    success: function(response) {
                         // If data is found, populate the inputs
                        if(response.data && Object.keys(response.data).length > 0) {
                            $.each(response.data, function(key, value) {
                                $('input[name="' + key + '"]').val(value);
                            });
                            // toastr.success("Data found and fields have been populated.", "Success");
                        } else {
                            // If no data is found, clear the input fields
                            console.log('No data found, clearing fields.');
                            $('input[name]').each(function() {
                                // Only clear the numeric inputs that are supposed to be cleared
                                if($(this).attr('type') === 'number') {
                                    $(this).val('');
                                }
                            });
                        }
                    },
                    error: function(response) {
                        console.error('Error fetching existing data:', response);
                    }
                });
            }
        }

</script>
@endsection