@extends('layouts/acc_layout')
@section('title', '| View Opening Balance')
@section('content')
@include('successMsg')
<style>
    #importBtn{
        margin-right: 5px;
        border: 2px solid #525659;
        border-radius: 5px;
        padding: 6px 10px 7px 10px;
        background-color: #708090;
    }
    #importBtn:hover{
        background-color: #525659;
    }
    #importBtn i::before{
        padding-right: 3px;
    }
    .file-container {
        color: #444;
        padding: 20px;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1), 0 3px 10px rgba(0, 0, 0, 0.05);
        border-radius: 5px;
    }
    label {
        margin-bottom: 10px;
        font-weight: bold;
        font-size: 14px;
    }
    .custom-file-upload {
        padding: 8px 20px;
        background-color: #4caf50;
        color: white;
        border-radius: 5px;
        cursor: pointer;
        transition: background-color 0.3s ease;
        display: inline-block;
        font-size: 12px;
        margin-bottom: 0px;
        margin-right: 3px;
    }

    .custom-file-upload:hover {
        background-color: #45a049;
    }
    .file-name {
        font-size: 12px;
        color: #444;
        font-style: italic;
    }
    #rpsSubmit {
        padding: 7px 15px;
        border-radius: 4px;
        font-weight: 600;
        margin-bottom: 0;
        background: #34495e !important;
        color: #fff;
        border-radius: 5px;
        border: none;
        cursor: pointer;
        transition: all 0.3s ease;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    }

    #rpsSubmit:hover {
        background: #2c3e50;
        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
    }
    #rpsSubmit:active {
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
        transform: translateY(2px);
    }
    .closeBtn {
        padding: 7px 15px;
        font-weight: 600;
        margin-bottom: 0;
        border-radius: 5px;
        border: none;
        cursor: pointer;
        transition: all 0.3sease;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    }
    #rpsImportError {
        margin-top: 10px;
    }
    #rpsImportError p {
        color:#E91E63 !important;
        font-weight: 600;
        font-size: 12px;
        margin: 10px 0 0px 0px;
    }
    .panel .panel-heading > .panel-options {
        margin-top: 12px;
        margin-bottom: 8px;
    }
</style>
<div class="row">
    <div class="col-md-12">
        <div class="" style="">
            <div class="">
                <div class="panel panel-default" style="background-color:#708090;">
                    <div class="panel-heading" style="padding-bottom:0px">
                        <div class="panel-options">
                            <button type="button" class="btn btn-primary" id="importBtn" data-bs-toggle="modal" data-bs-target="#importModal" onclick="toggleImportView()">
                                <i class="fas fa-upload" aria-hidden="true"></i> Import Opening Balance
                            </button>
                            <a href="{{url('addOpeningBalance/')}}" class="btn btn-info pull-right addViewBtn"
                               style=""><i class="glyphicon glyphicon-plus-sign addIcon"></i>Add Opening Balance</a>
                        </div>
                        <h3 style=" text-align: center; font-family: Antiqua; letter-spacing: 2px; color: white;">
                            OPENING BALANCE</h3>
                        {{-- <div class="col-sm-6"><h3 align="right" style="font-family: Antiqua; letter-spacing: 2px; color: white;">ACCOUNT TYPE</h3></div>
                        <div class="panel-options col-sm-6">
                            <a href="{{url('addAccountType/')}}" class="btn btn-info pull-right addViewBtn" style=""><i class="glyphicon glyphicon-plus-sign addIcon"></i>Add Account Type</a>
                        </div> --}}

                    </div>
                    <div class="panel-body panelBodyView">
                        <div>
                            <script type="text/javascript">
                                jQuery(document).ready(function ($) {
                                    // $("#accOpeningBalanceTable").dataTable().yadcf([]);
                                    $("#accOpeningBalanceTable").dataTable({
                                        "lengthMenu": [[10, 25, 50,100, -1], [10, 25, 50,100, "All"]]
                                    });
                                });
                            </script>
                        </div>
                        <table class="table table-striped table-bordered" id="accOpeningBalanceTable">
                            <thead>
                            <tr>
                                <th width="32">SL#</th>
                                {{-- <th>Fiscal Year</th> --}}
                                <th>Opening Date</th>
                                <th>Project</th>
                                <th>Branch</th>
                                <th>Project Type</th>
                                <th class="" width="80">Actions</th>
                            </tr>
                            {{ csrf_field() }}
                            </thead>
                            <tbody style="color: black;">
                                                        @foreach($openingBalances as $openingBalance)
                                <tr class="item{{$openingBalance->id}}">
                                    <td class="text-center slNo">{{++$no}}</td>
                                    {{-- <td>
                                        @php
                                            echo DB::table('gnr_fiscal_year')->where('id', $openingBalance->fiscalYearId)->value('name');
                                        @endphp                                        
                                    </td> --}}
                                    <td>{{$openingBalance->openingDate}}</td>

                                    <td>
                                        @php
                                            echo DB::table('gnr_project')->where('id', $openingBalance->projectId)->value('name');
                                        @endphp                                        
                                    </td>
                                    <td>
                                        @php
                                            echo DB::table('gnr_branch')->where('id', $openingBalance->branchId)->value('name');
                                        @endphp                                        
                                    </td>
                                    <td>
                                        @php
                                            echo DB::table('gnr_project_type')->where('id', $openingBalance->projectTypeId)->value('name');
                                        @endphp                                        
                                    </td>
                                    

                                    <td class="text-center" width="80">
                                        <a id="editIcone" href="{{url('editOpeningBalance/'.encrypt($openingBalance->id))}}" target="_blank" class="edit-modal" data-id="{{$openingBalance->id}}">
                                            <span class="glyphicon glyphicon-edit"></span>
                                        </a>&nbsp;
                                        {{-- <a id="deleteIcone" href="javascript:;" class="delete-modal" data-id="{{$openingBalance->id}}">
                                            <span class="glyphicon glyphicon-trash"></span>
                                        </a> --}}

                                    </td>

                                </tr>
                            @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


<div id="myModal" class="modal fade" style="margin-top:3%">
<div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
          <h4 class="modal-title" style="clear:both"></h4>
      </div>
      <div class="modal-body">        
          <div class="deleteContent" style="padding-bottom:20px;">
            <h4>You are about to delete this item this procedure is irreversible !</h4>
            <h4>Do you want to proceed ?</h4> 
            <span class="hidden id"></span>
          </div>
        <div class="modal-footer">
            <p id="MSGE" class="pull-left" style="color:red"></p>
            <p id="MSGS" class="pull-left" style="color:green"></p>
          {!! Form::button('<span id=""></span>', ['class' => 'btn actionBtn', 'id' => 'footer_action_button'] ) !!}
          {!! Form::button('<span id=""></span>', ['class' => 'btn actionBtn',  'data-dismiss' => 'modal', 'id' => 'footer_action_button2'] ) !!}
          
          {!! Form::button('<span id=""> Close</span>',['class' => 'btn btn-warning', 'data-dismiss' => 'modal' , 'id' => 'footer_action_button_dismis'] ) !!}
          
        </div>
      </div>
    </div>
  </div>
</div>

<div id="importModal" class="modal fade" tabindex="-1" aria-labelledby="importModalLabel">
    <div class="modal-dialog modal-lg" style="top: 22%;" >
        <div class="modal-content" style="border-radius: 10px; padding: 0; box-shadow: 0 5px 15px rgba(0, 0, 0, .5); ">
            <div class="modal-header" style="padding-bottom:0; border-bottom-width: 1px;"> 
                <h4 class="modal-title" id="importModalLabel"style="clear:both; padding:15px 20px; font-weight: 600;">Import Opening Balance</h4>
            </div>
            <form id="rpsImportForm" enctype="multipart/form-data">
                <div class="modal-body" style="padding: 20px 20px;">
                    <div class="preview-container">
                        <div class="file-container">
                            <label>Upload Receipt Payment Statement File:</label>
                            <input type="file" name="rps_file" id="rps_file" class="file-input" style="display: none" />
                            <div>
                                <label for="rps_file" class="custom-file-upload">
                                    <i class="fas fa-upload"></i> Choose File
                                </label>
                                <span id="file-name" class="file-name">No file chosen</span>
                            </div>
                            <div id="rpsImportError"></div>
                        </div>
                        <div style="text-align: center;">
                        </div>
                    </div>
                    <div class="modal-footer" style="padding-top: 20px;border:none;">
                        <button class="btn btn-danger closeBtn" data-dismiss="modal" id="footer_action_button_dismis" type="button"><span> Close</span></button>
                        <button type="submit" id="rpsSubmit" class="btn btn-primary" form="rpsImportForm">Submit</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

@include('dataTableScript')



<script type="text/javascript">
    $(document).ready(function() {
        
//delete function
        $(document).on('click', '.delete-modal', function() {
            $('#MSGE').empty();
            $('#MSGS').empty();
            $('.actionBtn').removeClass('edit');
            $('#footer_action_button2').text(" Yes");
            $('#footer_action_button2').removeClass('glyphicon glyphicon-check');
            //$('#footer_action_button').addClass('glyphicon-trash');
            $('#footer_action_button_dismis').text(" No");
            $('#footer_action_button_dismis').removeClass('glyphicon glyphicon-remove');
            $('.actionBtn').removeClass('btn-success');
            $('.actionBtn').addClass('btn-danger');
            $('.actionBtn').addClass('delete');
            $('.modal-title').text('Delete');
            $('.modal-header').css({"background-color":"black", "color":"white", "padding":"10px"});
            $('.modal-dialog').css('width','30%');
            $('.id').text($(this).data('id'));
            $('.deleteContent').show();
            $('.form-horizontal').hide();
            $('#footer_action_button2').show();
            $('#footer_action_button').hide();
            $('.title').html($(this).data('uname'));
            $('#myModal').modal('show');
            });

            $('.modal-footer').on('click', '.delete', function() {

                $.ajax({
                    type: 'post',
                    url: './deleteOpeningBalanceItem',
                    data: {
                      '_token': $('input[name=_token]').val(),
                      'id': $('.id').text()
                    },
                    success: function(data) {                        
                        window.location.href = '{{url('viewOpeningBalance/')}}';
                    }
                });
            });

    });
    function toggleImportView() {
        $('#importModal').modal('show');
        $('#rpsImportForm')[0].reset();
        $('#file-name').text('No file chosen');
        $('#rpsImportError').html('');
    }
</script>
<script>
    $(document).ready(function() {
        // Handle form submission
        $('#rpsImportForm').on('submit', function(event) {
            event.preventDefault();
            
            const form = document.getElementById('rpsImportForm');
            const submitButton = document.getElementById('rpsSubmit');
            const errorContainer = $('#rpsImportError');
            const fileInput = $('#rps_file')[0];

            submitButton.disabled = true;
            submitButton.textContent = 'Submitting...';
            errorContainer.html('');

            if (fileInput.files.length === 0) {
                errorContainer.html('<p>* Please select a file to upload.</p>');
                errorContainer.fadeIn(500);
                setTimeout(function() {
                    submitButton.disabled = false;
                    submitButton.textContent = 'Submit';
                }, 500);
                return;
            }

            // Create a FormData object to handle the file upload
            const formData = new FormData(form);

            $.ajax({
                url: "{{ route('importRpsOpeningBalance') }}",
                type: 'POST',
                data: formData,
                contentType: false, // Important for file upload
                processData: false, // Important for file upload
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                },
                success: function(response) {
                    // Handle the success response
                    if (response.success) {
                        alert('File imported successfully');
                        form.reset();
                        $('#file-name').text('No file chosen');
                        $('#importModal').modal('hide');
                    }
                },
                error: function(xhr) {
                    if (xhr.status === 422) {
                        let errorHtml = '';
                        const errors = xhr.responseJSON.errors;
                        $.each(errors, function(key, errorMessages) {
                            if (Array.isArray(errorMessages)) {
                                errorHtml += '<p>'+ '* ' + errorMessages.join(' | ') + '</p>';
                            } else {
                                errorHtml += '<p>'+ '* ' + errorMessages + '</p>';
                            }
                        });
                        errorContainer.html(errorHtml);
                    } else {
                        errorContainer.html('<p>* An error occurred. Please try again.</p>');
                    }
                },
                complete: function() {
                    // Re-enable the submit button
                    submitButton.disabled = false;
                    submitButton.textContent = 'Submit';
                }
            });
        });

        // Update the file name display when a file is selected
        $('#rps_file').on('change', function() {
            const fileName = this.files.length > 0 ? this.files[0].name : 'No file chosen';
            $('#file-name').text(fileName);
        });
    });
</script>






@endsection

{{-- <script src="{{asset('js/jquery-1.11.1.min.js')}}"></script> --}}