@extends('frontend.layouts_finance.master')

<link href="{{ asset('/assets/plugins/plugin.css') }}" rel="stylesheet">
<style>
   th {
      background-color: #148AFB;
      color: white;
   }
</style>

<link href="https://cdn.datatables.net/2.0.2/css/dataTables.dataTables.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.5/css/jquery.dataTables.css">
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.js"></script>
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/izitoast/1.4.0/css/iziToast.css" integrity="sha512-DIW4FkYTOxjCqRt7oS9BFO+nVOwDL4bzukDyDtMO7crjUZhwpyrWBFroq+IqRe6VnJkTpRAS6nhDvf0w+wHmxg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/izitoast/1.4.0/css/iziToast.min.css" integrity="sha512-O03ntXoVqaGUTAeAmvQ2YSzkCvclZEcPQu1eqloPaHfJ5RuNGiS4l+3duaidD801P50J28EHyonCV06CUlTSag==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/izitoast/1.4.0/js/iziToast.min.js" integrity="sha512-Zq9o+E00xhhR/7vJ49mxFNJ0KQw1E1TMWkPTxrWcnpfEFDEXgUiwJHIKit93EW/XxE31HSI5GEOW06G6BF1AtA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/izitoast/1.4.0/js/iziToast.js" integrity="sha512-OmBbzhZ6lgh87tQFDVBHtwfi6MS9raGmNvUNTjDIBb/cgv707v9OuBVpsN6tVVTLOehRFns+o14Nd0/If0lE/A==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    
    <link href="https://cdn.datatables.net/2.0.2/css/dataTables.dataTables.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.5/css/jquery.dataTables.css">
    <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.js"></script>



{{-- sweet alert --}}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11">
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
@section('content')
<div class="container">
    <center>
        <h4>DATA AR OPEN</h4>
    </center>
</div>

{{-- notifikasi form validasi --}}
@if($errors->has('file'))
<span class="invalid-feedback" role="alert">
    <strong>{{ $errors->first('file')}}</strong>
</span>
@endif

{{-- notifikasi sukses --}}
@if($sukses = Session::get('sukses'))
<div class="alert alert-success alert-block">
    <button type="button" class="close" data-dismiss="alert">x</button>
    <strong>{{$sukses}}</strong>
</div>
@endif

<a onclick="doExport()" href="#!" class="btn btn-dark btn-md">AR Export</a>

<button type="button" class="btn btn-primary my-3" data-toggle="modal" data-target="#importExcel">Import Excel</button>

{{-- Import Excel --}}
<div class="modal fade" id="importExcel" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <form method="POST" action="/public/ar_import/import_excel" enctype="multipart/form-data">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Import Excel</h5>
                </div>
                <div class="modal-body">
                    {{ csrf_field() }}

                    <label>Pilih File Excel</label>
                    <div class="form-group">
                        <input type="file" name="file" required="required">
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-primary">Import</button>
                </div>
            </div>
        </form>
    </div>
</div>

<table class="table table-bordered table-responsive" id="myTable">
    <thead>
        <tr style="text-align: center">
            <th>No</th>
            <th>Accountnum</th>
            <th>Name</th>
            <th>Invoice</th>
            <th>Amount</th>
            <th>DueDate</th>
            <th>RealDueDate</th>
        </tr>
    </thead>
    <tbody>
        @php $i=1 @endphp
        @foreach($data as $s)
        <tr>
            <td>{{ $i++ }}</td>
            <td>{{ $s->accountnum}}</td>
            <td>{{ $s->name}}</td>
            <td>{{ $s->invoice}}</td>
            <td>Rp {{ number_format(floatval($s->amount)) }}</td>
            <td>{{ $s->duedate}}</td>
            <td>{{ $s->realduedate}}</td>
        </tr>
        @endforeach
    </tbody>
</table>
</div>
</div>

@endsection

<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<script>
   var isAjax = null
             jQuery(document).ready(function($) {
                 isAjax = $
                 console.log($)
                 console.log(isAjax)
             })
             
    $(document).ready(function() {
        $('#myTable').DataTable({
            "responsive": true,
            "width" : 15,
            paging: true, // Enable pagination
            lengthChange: false, // Disable number of rows per page dropdown
            pageLength: 10, // Set default number of rows per page
            searching: true,
        });
    });
    
 
             
    function ajaxGET(url, data){
        return new Promise((resolve) => {
            isAjax.ajax({
                type: "GET", url: `${url}`, data: data, processData: false, contentType: false, dataType: "JSON",
                beforeSend:function(){ },
                success:function(r){ 
                    resolve({ 'code': 200, 'message': 'success', 'data': r })
                }, error:function(){ resolve({ 'code': 400, 'message': 'Periksa koneksi internet kamu dan coba kembali!' }) }
            })
        })
    }

async function doExport() {
    try {
        const response = await ajaxGET(`{{url('doDeleteExport')}}`);
        if (response.code === 200) {
            window.open('http://indoparts.co.id:90/ARExport', '_blank');
            setTimeout(() => {
                location.reload();
            }, 1000); // Adjust the delay if necessary
        } else {
            Swal.fire('Error', 'Failed to delete export', 'error');
        }
    } catch (error) {
        Swal.fire('Error', 'An error occurred', 'error');
    }
}

    



   
</script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.js"></script>

   
<script src="{{ asset('/assets/plugins/chartjs/chart.min.js') }}"></script>
<script src="{{ asset('/assets/plugins/jquery-sparkline/jquery.sparkline.min.js')}}"></script>
<script src="{{ asset('/assets/js/dashboard.js')}}"></script>