@extends('layouts.app')

@section('content')

<div class="container-fluid">
    <div class="row ">
        <div class="col-md-11 mx-auto card p-4">
            <div class="nav nav-tabs" id="nav-tab" role="tablist">
                <button  type="button" class="btn btn-light" ><a href="javascript:window.history.go(-1);"><h3><i class="fas fa-arrow-alt-circle-left"></i></h3></a></button>
              </div>
            @if ($message = Session::get('success'))
            <div class="alert alert-success">
                <p>{{ $message }}</p>
            </div>
            @endif
            <div class="container">
                <div class="row mb-2">
                    <div class="col-md-12 mx-auto card p-4" style="margin-top:2%; margin-bottom:2%;">
                        <p> <b>Nama Pembida : </b> {{ $userdetails['name'] }}</p>
                        <p> <b>No Kad Pengenalan : </b> {{ $userdetails['nokp'] }}</p>
                        <p> <b>No Telefon : </b> {{ $userdetails['notelbimbit'] }}</p>
                    </div>
                </div>
            </div>
            <form action="{{ route('account.sahbayaronline') }}" method="POST" id="formsahbayaronline">
                            @csrf
                <input type="hidden" name="lelong_id" value="{{ $lelong_id }}" />
                <input type="hidden" name="user_id" value="{{ $user_id }}" />
                <input type="hidden" name="senarai_sag" value="{{ $senaraisag }}" />
                <table class="table table-striped  table-xl text-center" id="tablekaunter" style="width:100%">
                    <thead class="bg-primary text-white">
                            <tr>
                                <th>No</th>
                                <th>No Rujukan</th>
                                <th>Tarikh Lelong</th>
                                <th>Harga Asas (RM)</th>
                                <th>Harga Bida (RM)</th>
                                <th>Masa Bidaan</th>
                                <th>No Resit</th>
                                <th>Nota</th>
                                <th class="text-center">Status</th>
                            </tr>
                    </thead>
                    <tbody>
                        @foreach($senaraisag as $sag)
                                <tr>
                                <td> {{ $loop->iteration }} </td>
                                <td>{{ $sag['norujukan'] }}</td>
                                <td>@php
                                    $myDateTime = DateTime::createFromFormat('Y-m-d', $sag['t_lelong'] );
                                    $t_lelong =  $myDateTime->format('d-m-Y');
                                echo($t_lelong);
                                @endphp</td>
                                <td>{{ number_format($sag['hargaasas'], 2, '.', ',') }}</td>
                                <td>{{ number_format($sag['hargabida'], 2, '.', ',') }}</td>
                                <td>{{ $sag['masa_bidaan'] }}</td>
                                <td>{{ $sag['reference_no'] }}</td>
                                <td>
                                    <button class="btn btn-outline-success btn-sm" disabled><b>{{ $sag['remark'] }}</b></button>
                                </td>
                                <td>
                                    <span class="btn btn-success btn-sm hovernone-success" disabled>TELAH DIBAYAR</span>                        
                                </td>
                                </tr>
                        @endforeach
                    </tbody>
                <tr>
                    <td colspan="2"><b> Jumlah Bayaran</b></td>
                    <td colspan="2"></td>
                    <td><b>RM{{ number_format($senaraisag->sum('hargabida'), 2, '.', ',') }}</b></td>
                    <td></td>
                    <td>
                        @if($getresit)
                            <button type="button" class="btn btn-outline-secondary" data-toggle="modal" data-target="#exampleModal">
                                Lihat Resit <i class="fas fa-file-alt"></i>
                            </button>
                        @else
                        @endif
                    </td>
                    <td></td>
                    <td></td>
                </tr>
                </table>
                <div class="modal-footer" style="margin-top:2%;">
                    {{-- <a  href="{{ route('account.listbayaranonline', [$lelong_id,$caw_code]) }}" class="btn btn-primary">Kembali</a> --}}
                    {{-- @foreach($senaraisag as $senarai) --}}
                        @if($sag['checking_payment'])
                            <button type="button" class="btn btn-success" disabled>Berjaya Disahkan</button>
                        @else
                            <button type="button" class="btn btn-warning" onclick="confirm()" >Sahkan</button>
                        @endif
                    {{-- @endforeach --}}
                </div>
            </form> 
        </div>
    </div>
</div>

<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">Resit Bayaran CDM</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button> 
        </div>
        <div class="modal-body text-center" style="padding:3rem">
          @foreach($getresit as $resit)
            <div class=".col-6 .col-sm-4 form-check form-check-inline">
                <img src="data:image/png;base64, {{ $resit['filename'] }}" alt="Image Preview" style="max-width:700px; maxheight:650px; border: 1px solid #dee2e6"/>
            </div>
          @endforeach
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Kembali</button>
        </div>
      </div>
    </div>
</div>

<script>

    function confirm() {
        $.confirm({
        title: 'Confirmation',
        content: 'Anda pasti?',
        type: 'orange',
        typeAnimated: true,
        buttons: {
            Sahkan: {
                btnClass: 'btn-warning',
                action: function () {
                    $("#formsahbayaronline").submit();
                }
            },  
            Batal: {
                btnClass: 'btn-default',
                action: function () {}
            }
        }
        });
    }
    var tablekaunter = $('#tablekaunter').DataTable({
            "columnDefs": [ 
                {
                "targets": 0,
                "orderable": false
                }, 
                {
                "targets": 7,
                "orderable": false
                }
            ],
            order: [[0, 'asc']],
            "info": false,
            "lengthChange": false,
            "pageLength": 15,
            dom: 'Bfrtip',
            // buttons: [
            //     {
            //         className: 'btn btn-outline-success pl-4 pr-4 btn-sm addcaw',
            //         text: '<i class="fas fa-plus" id="test"></i>',
            //         titleAttr: 'Tambah Cawangan',
            //         action: function ( e, dt, node, config ) {
            //             // alert( 'Button activated' );
            //             // console.log('hye');
                        
            //             $('#myModal').modal("show");
            //             $('#myModal').on('shown.bs.modal', function () {
            //                 $('#rolename').trigger('focus')
            //             })
            //         }
            //     },
            //     {
            //         className: 'btn btn-outline-secondary pl-4 pr-4 btn-sm  export',
            //         titleAttr: 'Export to CSV',
            //         text: '<i class="fas fa-download"></i>',
            //         action: function ( e, dt, node, config ) {
            //             $("#exportform").submit();
            //         }
            //     }
            // ]
    });

        // $('.addcaw').tooltip();
        // $('.export').tooltip();
        // // $( '.dt-buttons').addClass('btn-group');
        // $( '.addcaw').removeClass('dt-button');
        // $( '.export').removeClass('dt-button');
</script>

@endsection