@section('optional_css')
    <!-- SweetAlert2 -->
    <link rel="stylesheet" href="{{ asset('plugins/sweetalert2-theme-bootstrap-4/bootstrap-4.min.css') }}">
@endsection
@section('optional_js')
    <!-- SweetAlert2 -->
    <script src="{{ asset('plugins/sweetalert2/sweetalert2.min.js') }}"></script>

    <script>
        $(document).ready(function () {
            $('.confirm-row').on('click', function() {
                Swal.fire({
                    title: 'Are you sure?',
                    text: "You won't be able to revert this!",
                    icon: 'success',
                    showCancelButton: true,
                    confirmButtonColor: '#3085d6',
                    cancelButtonColor: '#d33',
                    confirmButtonText: 'Yes, confirm it!'
                }).then((result) => {
                    if (result.isConfirmed) {
                        event.preventDefault();
                        Swal.fire(
                            'Confirm!',
                            'Your file has been confirmed.',
                            'success'
                            )
                        this.closest('form').submit();
                    }
                })
            })
            $('.delete-row').on('click', function() {
                Swal.fire({
                    title: 'Are you sure?',
                    text: "You won't be able to revert this!",
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#3085d6',
                    cancelButtonColor: '#d33',
                    confirmButtonText: 'Yes, delete it!'
                }).then((result) => {
                    if (result.isConfirmed) {
                        event.preventDefault();
                        Swal.fire(
                            'Deleted!',
                            'Your file has been deleted.',
                            'success'
                            )
                        this.closest('form').submit();
                    }
                })
            })
        })
    </script>
@endsection

<x-app-layout>
    <x-slot name="header">
        <div class="row mb-2">
            <div class="col-sm-6">
                <h1 class="m-0">{{ __('Tagihan BPJS') }}</h1>
            </div><!-- /.col -->
            <div class="col-sm-6">
            </div><!-- /.col -->
        </div><!-- /.row -->
    </x-slot>
    @if(session('success'))
        <x-alert-success>
            {{ session('success') }}
        </x-alert-success>
    @endif
    <x-card class="col-sm-12">
        <x-slot name="title">Tagihan BPJS</x-slot>
        <div class="col-md-12 col-md-12">
            <table class="table">
                <tbody>
                    <tr>
                        <td>{{ __('Kode Transaksi') }} :</td>
                        <td>{{ $transaction->transaction_code }}</td>
                        <td>{{ __('Nomer Telepon') }} :</td>
                        <td>{{ $transaction->msisdn }}</td>
                    </tr>
                    <tr>
                        <td>{{ __('Tagihan') }} :</td>
                        <td>Asuransi</td>
                        <td>{{ __('Nama Customer') }} :</td>
                        <td>{{ $transaction->customer_name }}</td>
                    </tr>
                    <tr>
                        <td>{{ __('Produk') }} :</td>
                        <td>BPJS</td>
                        <td>{{ __('Pinalty') }} :</td>
                        <td>{{ number_format($transaction->penalty, '0', ',', '.') }}</td>
                    </tr>
                    <tr>
                        <td>{{ __('Tanggal Transaksi') }} :</td>
                        <td>{{ $transaction->transaction_date }}</td>
                        <td>{{ __('Billing') }} :</td>
                        <td>{{ number_format($transaction->billing, '0', ',', '.') }}</td>
                    </tr>
                    <tr>
                        <td>{{ __('Customer ID') }} :</td>
                        <td>{{ $transaction->customer_id }}</td>
                        <td>{{ __('Biaya Admin') }} :</td>
                        <td>{{ number_format($transaction->admin, '0', ',', '.') }}</td>
                    </tr>
                    <tr>
                        <td>Struk :</td>
                        <td>
                            @if($transaction->status == '3')
                                @if(!empty($transaction->optional_data))
                                    <x-button-link href="{{ route('struct-bpjs', base64_encode($tagihanbpjs->transaction_code)) }}" class="btn btn-warning" target="_blank">Cetak Struk</x-button-link>
                                @endif
                            @endif
                        </td>
                        <td>{{ __('Pembayaran') }} :</td>
                        <td>{{ number_format($transaction->payment, '0', ',', '.') }}</td>
                    </tr>
                    <tr>
                        <td>{{ __('Message') }} :</td>
                        <td width="300">
                            @if(!empty(json_decode($transaction->message)))
                            <ul>
                            @foreach(json_decode($transaction->message) as $key => $message)
                                <li>{{ $key }} : {{ $message }}</li>
                            @endforeach
                            </ul>
                            @else
                                {{ $transaction->message }}
                            @endif
                        </td>
                        <td></td>
                        <td></td>
                    </tr>
                </tbody>
            </table>
        </div>
        @if($available_payment)
        @can('tagihanbpjs.edit')
            <form id="form" action="{{ route('admin.tagihanbpjs.payment') }}" method="POST">
                {{ csrf_field() }}
                {{ method_field('PUT') }}
                <input type="hidden" name="id" value="{{ $transaction->id }}">
                <div class="form-group float-right">
                    <input type="submit" class="btn btn-info" value="{{ __('Bayar') }}">
                </div>
            </form>
        @endcan
        @endif
    </x-card>
    
</x-app-layout>