@extends('layouts.app')

@section('content')

    <h1 class="page-header">Customers SOA</h1>
    <div class="row">
        <div class="col-md-3">
            
        </div>
		
        <div class="col-md-9">
            <div class="card mb-3 border-0">
                
                <div class="card-body border-bottom p-4">
				<center><strong><p style="font-size: 14px;">STATEMENT OF ACCOUNT</p></strong></center>
								
				<div class="row">	
					<table>
						<tr>
							<td class="col-md-9 text-start" style="font-size: 12px;"><strong>JOHOR LAND BERHAD</strong></td>
							<td class="col-md-1 text-start" style="font-size: 12px;">Date</td>
							<td class="col-md-1" style="font-size: 12px; text-align: center;">:</td>
							<td class="col-md-1 text-end" style="font-size: 12px;">31/12/2024</td>
						</tr>
						<tr>
							<td class="col-md-9 text-start" style="font-size: 12px;">Kompleks Mutiara Johor Land,</td>
							<td class="col-md-1 text-start" style="font-size: 12px;">Ref</td>
							<td class="col-md-1" style="font-size: 12px; text-align: center;">:</td>
							<td class="col-md-1 text-end" style="font-size: 12px;">112-JLB</td>
						</tr>
						<tr>
							<td class="col-md-9 text-start" style="font-size: 12px;">81100 Johor Bahru.</td>
							<td class="col-md-1 text-start" style="font-size: 12px;">Currency</td>
							<td class="col-md-1" style="font-size: 12px; text-align: center;">:</td>
							<td class="col-md-1 text-end" style="font-size: 12px;">RM</td>
						</tr>
						<tr>
							<td class="col-md-9 text-start" style="font-size: 12px;">&nbsp;</td>
							<td class="col-md-1 text-start" style="font-size: 12px;">Page</td>
							<td class="col-md-1" style="font-size: 12px; text-align: center;">:</td>
							<td class="col-md-1 text-end" style="font-size: 12px;">1 of 1</td>
						</tr>
						<tr>
							<td class="col-md-9 text-start" style="font-size: 12px;">&nbsp;</td>
							<td class="col-md-1 text-start" style="font-size: 12px;">Term</td>
							<td class="col-md-1" style="font-size: 12px; text-align: center;">:</td>
							<td class="col-md-1 text-end" style="font-size: 12px;">Immediate</td>
						</tr>
						<tr>
							<td class="col-md-9 text-start" style="font-size: 12px;"> Attn. : jlgs.adminsupport@jlandgroup.com.my</td>
							<td class="col-md-1 text-start" style="font-size: 12px;">Deposit (RM)</td>
							<td class="col-md-1" style="font-size: 12px; text-align: center;">:</td>
							<td class="col-md-1 text-end" style="font-size: 12px;">-</td>
						</tr>
					</table>
                </div>
				</br>
                    
					<form action="{{ route('generate.pdf') }}" method="GET">
						<button type="submit">Download PDF</button>
					</form>
                </div>

            </div>
        </div>
    </div>
@endsection

@push('css')
    <style>
        .profile-userpic img {
            float: none;
            margin: 0 auto;
            width: 50%;
            height: 50%;
            -webkit-border-radius: 50% !important;
            -moz-border-radius: 50% !important;
            border-radius: 50% !important;
        }

        .p-card{
            width: 320px;
            height: 190px;
            -webkit-perspective: 600px;
            -moz-perspective: 600px;
            perspective:600px;
        }

        .card__part{
            box-shadow: 1px 1px #aaa3a3;
            top: 0;
            position: absolute;
            z-index: 1000;
            left: 0;
            display: inline-block;
            width: 320px;
            height: 190px;
            background-image: linear-gradient(to right bottom, #fd696b, #fa616e, #f65871, #f15075, #ec4879); /*linear-gradient(to right bottom, #fd8369, #fc7870, #f96e78, #f56581, #ee5d8a)*/
            background-repeat: no-repeat;
            background-position: center;
            background-size: cover;
            border-radius: 8px;

            /* -webkit-transition: all .5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            -moz-transition: all .5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            -ms-transition: all .5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            -o-transition: all .5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            transition: all .5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            -webkit-transform-style: preserve-3d;
            -moz-transform-style: preserve-3d;
            -webkit-backface-visibility: hidden;
            -moz-backface-visibility: hidden; */
        }

        .card__front{
            padding: 18px;
            /* -webkit-transform: rotateY(0);
            -moz-transform: rotateY(0); */
        }

        /* .card__back {
            padding: 18px 0;
            -webkit-transform: rotateY(-180deg);
            -moz-transform: rotateY(-180deg);
        } */

        .card__black-line {
            margin-top: 5px;
            height: 38px;
            background-color: #303030;
        }

        .card__logo {
            height: 16px;
        }

        .card__front-logo{
            position: absolute;
            top: 18px;
            right: 18px;
        }
        .card__square {
            border-radius: 5px;
            height: 30px;
        }

        .card_numer {
            display: block;
            width: 100%;
            word-spacing: 4px;
            font-size: 20px;
            letter-spacing: 2px;
            color: #fff;
            text-align: end;
            margin-bottom: 20px;
            margin-top: 20px;
        }

        .card__space-75 {
            width: 75%;
            float: left;
        }

        .card__space-25 {
            width: 25%;
            float: left;
        }

        .card__label {
            font-size: 10px;
            text-transform: uppercase;
            color: rgba(255,255,255,0.8);
            letter-spacing: 1px;
        }

        .card__info {
            margin-bottom: 0;
            margin-top: 5px;
            font-size: 16px;
            line-height: 18px;
            color: #fff;
            letter-spacing: 1px;
            text-transform: uppercase;
        }

        .card__back-content {
            padding: 15px 15px 0;
        }
        .card__secret--last {
            color: #303030;
            text-align: right;
            margin: 0;
            font-size: 14px;
        }

        .card__secret {
            padding: 5px 12px;
            background-color: #fff;
            position:relative;
        }

        .card__secret:before{
            content:'';
            position: absolute;
            top: -3px;
            left: -3px;
            height: calc(100% + 6px);
            width: calc(100% - 42px);
            border-radius: 4px;
            background: repeating-linear-gradient(45deg, #ededed, #ededed 5px, #f9f9f9 5px, #f9f9f9 10px);
        }

        .card__back-logo {
            position: absolute;
            bottom: 15px;
            right: 15px;
        }

        .card__back-square {
            position: absolute;
            bottom: 15px;
            left: 15px;
        }

        .card:hover .card__front {
            /* -webkit-transform: rotateY(180deg);
            -moz-transform: rotateY(180deg); */

        }

        .card:hover .card__back {
            /* -webkit-transform: rotateY(0deg);
            -moz-transform: rotateY(0deg); */
        }
    </style>
@endpush

@push('js')
    <script>
        const addAdjustment = document.getElementById('addAdjustment')
        if (addAdjustment) {
            addAdjustment.addEventListener('show.bs.modal', event => {

                // Button that triggered the modal
                const button = event.relatedTarget
                // Extract info from data-payment attributes
                const payment = button.getAttribute('data-payment')

                $('<input>', {
                    type: 'hidden',
                    id: 'payment',
                    name: 'payment',
                    value: payment
                }).appendTo('form');

            })

            @if (count($errors) > 0)
            let addAAdjustmentModal = new bootstrap.Modal(document.getElementById('addAdjustment'), {});
            addAAdjustmentModal.show();

            @endif
        }
    </script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script>
        $('input[name="type"]').change(e => {
            const type = $(e.target).val();

            if (type === "DN") {
                $('#description').val("Debit Note");
            } else if (type === "CN") {
                $('#description').val("Credit Note");
            }
        });



        $(document).on('click', '#delete', function (e) {
            e.preventDefault();
            let self = $(this);
            Swal.fire({
                title: "Are you sure?",
                text: "You will not be able to recover this record!",
                icon: "warning",
                confirmButtonColor: '#276baa',
                showCancelButton: true,
                dangerMode: true,
            })
                .then((result) => {
                    if (result.isConfirmed) {
                        self.parents("#deleteForm").submit();
                    }
                });
        });
    </script>
@endpush