@extends('layout/admin/main')
@section('content')
    <div class="container-fluid py-4">
        <div class="row">
            <div class="col-12">
                <div class="card mb-4">
                    <div class="card-header pb-0">
                        <h6>Data {{ $title }}</h6>
                    </div>
                    <div class="px-4">
                        <div class="btn-group" role="group">
                            <a href="{{ route('downloadReportTransaksi') }}" class="btn btn-sm btn-info">Laporan</a>
                        </div>
                        <form action="{{ route('indexBooking') }}" method="get">
                            <input class="form-control" type="text" name="search" placeholder="Cari"
                                value="{{ $search }}" style="width: 13%; display: inline;">
                            <button class="btn btn-outline-success"style="margin-bottom: 1px; padding: 8px 18px;">
                                <i class="fa fa-search"></i>
                            </button>
                        </form>
                    </div>
                    <div class="card-body px-0 pt-0 pb-2">
                        <div class="table-responsive p-0">
                            <table class="table align-items-center mb-0">
                                <thead>
                                    <tr>
                                        <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">
                                            Detail</th>
                                        <th
                                            class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 ps-2">
                                            Jenis Produk</th>
                                        <th
                                            class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 ps-2">
                                            Status Transaksi</th>
                                        <th
                                            class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 ps-2">
                                            Total</th>
                                        <th
                                            class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 ps-2">
                                            Aksi</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($params as $key => $value)
                                        <tr>
                                            <td>
                                                <div class="d-flex px-2 py-1">
                                                    <div class="d-flex flex-column justify-content-center">
                                                        <h6 class="mb-0 text-sm">{{ $value->penyewa->nama }}</h6>
                                                        <p class="text-xs text-secondary mb-0">{{ $value->nama }}</p>
                                                    </div>
                                                </div>
                                            </td>
                                            <td>
                                                <h6 class="text-secondary text-xs font-weight-bold">
                                                    {{ strtoupper($value->jenis) }}</h6>
                                            </td>
                                            <td>
                                                <span
                                                    class="text-secondary text-xs font-weight-bold">{{ $value::getStatusText($value->status) }}</span>
                                            </td>
                                            <td>
                                                <h6 class="mb-0 text-sm">Rp
                                                    {{ number_format($value->total_sum, 0, ',', '.') }}
                                                </h6>
                                            </td>
                                            <td>
                                                <a href="{{ route('showTransaksi', ['id' => $value->id]) }}"
                                                    class="rounded btn btn-info px-2 py-1" data-original-title="Edit">
                                                    <i class="fa-solid fa-info" style="font-size: 13px;"></i>
                                                </a>
                                                <a href="{{ route('destroyTransaksi', ['id' => $value->id]) }}"
                                                    class="rounded btn btn-danger px-2 py-1" data-original-title="Hapus">
                                                    <i class="fa-solid fa-trash" style="font-size: 13px;"></i>
                                                </a>
                                            </td>
                                        </tr>
                                    @endforeach
                                    @if (count($params) < 1)
                                        <tr>
                                            <td colspan="5"
                                                class="my-5 text-center text-secondary text-xs font-weight-bold">Data tidak
                                                ditumukan</td>
                                        </tr>
                                    @endif
                                    <tr>
                                        <td colspan="5">
                                            {{ $params->onEachSide(1)->links() }}
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <form action="{{ route('uploadImagesTransaksi') }}" method="POST" enctype="multipart/form-data" id="formImages"
        hidden>
        @csrf
        <input type="text" name="slug">
        <input type="number" name="type">
        <input type="file" name="image">
        <button type="submit">Upload</button>
    </form>

    <!-- Modal -->
    <div class="modal fade" id="nota" tabindex="-1" aria-labelledby="notaLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="notaLabel">Nota</h5>
                    <button type="button" class="btn px-3 py-2 h6" data-bs-dismiss="modal" aria-label="Close">
                        <i class="fa fa-times"></i>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="col-12 row">
                        <div class="col-4">
                            <img src="{{ url('images/logo-monggopro.png') }}" class="w-100">
                        </div>
                        <div class="col-4" style="font-size: 13px;">
                            <div style="line-height: 11px;">
                                <i class="fa fa-whatsapp h6 my-0"></i>
                                <b>+62 811-264-1104</b>
                            </div>
                            <div style="line-height: 11px;">
                                <i class="fa fa-envelope h6 my-0"></i>
                                <b>monggoprorental@gmail.com</b>
                            </div>
                            <div>
                                <i class="fa fa-map-marker h6 my-0" aria-hidden="true"></i>
                                <b>Jl. Letjen Suprapto, Gang Molkemis, Ngampilan NG1/34 RT02 RW01, Kota Yogyakarta, DIY.</b>
                            </div>
                        </div>
                        <div class="col-4 h6" style="font-size: 13px;">
                            <table class="col-12">
                                <tbody>
                                    <tr>
                                        <td>Nomor</td>
                                        <td>:</td>
                                        <td class="nomor_nota"></td>
                                    </tr>
                                    <tr>
                                        <td>Pinjam</td>
                                        <td>:</td>
                                        <td class="tanggal_pinjam"></td>
                                    </tr>
                                    <tr>
                                        <td>Kembali</td>
                                        <td>:</td>
                                        <td class="tanggal_kembali"></td>
                                    </tr>
                                    <tr>
                                        <td>Telpon</td>
                                        <td>:</td>
                                        <td class="telpon"></td>
                                    </tr>
                                    <tr>
                                        <td>Jaminan</td>
                                        <td>:</td>
                                        <td class="jaminan"></td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                    <hr>
                    <div>
                        <table class="table">
                            <thead class="table-light">
                                <tr>
                                    <th scope="col">Seri</th>
                                    <th scope="col">Produk</th>
                                    <th scope="col">Kelengkapan</th>
                                    <th scope="col">Harga</th>
                                </tr>
                            </thead>
                            <tbody class="content-nota"></tbody>
                            <tfoot class="table-light">
                                <tr>
                                    <th scope="col" colspan="3" class="text-end">Total</th>
                                    <th scope="col" class="total"></th>
                                </tr>
                            </tfoot>
                        </table>
                    </div>
                    <div class="row col-12 text-end pt-4 pb-2">
                        <h6><u>Tanggal, {{ date('Y-m-d') }}</u></h6>
                    </div>
                    <div class="row col-12 text-center">
                        <div class="col-6">
                            <h6>Admin</h6>
                            <span id="qrCodeAdmin"></span>
                            <h6><u id="namaAdmin"></u></h6>
                        </div>
                        <div class="col-6">
                            <h6>Penyewa</h6>
                            <span id="qrCodePenyewa"></span>
                            <h6><u id="namaPenyewa"></u></h6>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-warning">Save changes</button>
                </div>
            </div>
        </div>
    </div>
    <script>
        $(document).ready(function() {
            $('.uploadImage').click(function(e) {
                e.preventDefault();
                $('[name="type"]').val($(this).attr('type'));
                $('[name="slug"]').val($(this).attr('slug'));
                $('[name="image"]').trigger('click');
            });

            $('[name="image"]').change(function() {
                const selectedImage = $('[name="image"]');
                const file = this.files[0];
                if (file) {
                    new Compressor(file, {
                        quality: 0.6,
                        maxWidth: 800,
                        maxHeight: 800,
                        success(result) {
                            $('.loading-modal').modal('show');
                            const compressedImage = result;
                            const formData = new FormData();
                            formData.append('slug', $('[name="slug"]').val());
                            formData.append('type', $('[name="type"]').val());
                            formData.append('image', compressedImage);

                            $.ajax({
                                url: '{{ route('uploadImagesTransaksi') }}',
                                headers: {
                                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr(
                                        'content')
                                },
                                type: 'POST',
                                data: formData,
                                processData: false,
                                contentType: false,
                                dataType: 'json',
                                success: function(response) {
                                    window.location.href = response.data.url;
                                    $('.loading-modal').modal('hide');
                                },
                                error(err) {
                                    console.log(err.message);
                                    $('.loading-modal').modal('hide');
                                },
                            });
                        },
                        error(err) {
                            console.log(err.message);
                            $('.loading-modal').modal('hide');
                        },
                    });
                }
                $('.loading-modal').modal('hide');
            });

            $('.notaButton').on('click', function(e) {
                var loading = '<i class="spinner-border spinner-border-sm text-warning"></i>';
                var baseUrl = window.location.origin;
                $('.content-nota, .nomor_nota, .tanggal_pinjam, .tanggal_kembali, .telpon, .jaminan, #qrCodeAdmin, #qrCodePenyewa, #namaPenyewa, #namaAdmin')
                    .html(loading);
                $('#nota').modal('show');
                $.ajax({
                    url: baseUrl + '/admin-sistem/transaksi/get-data/' + $(this).attr('slug'),
                    type: 'GET',
                    dataType: 'json',
                    success: function(res) {
                        $('.nomor_nota').text(res?.nomor_transaksi);
                        $('.tanggal_pinjam').text(moment(res?.take_date).format(
                            "DD MMMM YYYY"));
                        $('.tanggal_kembali').text(moment(res?.return_date).format(
                            "DD MMMM YYYY"));
                        $('.telpon').text(res?.no_telp);
                        $('.jaminan').text(res?.jaminan);
                        $('.total').text('Rp ' + parseFloat(res?.total).toLocaleString(
                            'id-ID', {
                                minimumFractionDigits: 0
                            }));

                        $('.content-nota').html(
                            '<td>' + res?.nomor_seri + '</td>' +
                            '<td>' + res?.nama + '</td>' +
                            '<td>' + Object.keys(JSON.parse(res?.kelengkapan)).join(', ') +
                            '</td>' +
                            '<td>' + 'Rp ' + parseFloat(res?.biaya).toLocaleString(
                                'id-ID', {
                                    minimumFractionDigits: 0
                                }) + '</td>'
                        );

                        $('#qrCodeAdmin, #qrCodePenyewa').empty();
                        $('#qrCodeAdmin').qrcode({
                            text: res?.qrCodeAdmin,
                            height: 250
                        });

                        $('#qrCodePenyewa').qrcode({
                            text: res?.qrCodePenyewa,
                            height: 250
                        });

                        if (res?.ttd_admin != null) {
                            $('#qrCodeAdmin').empty();
                            $('#qrCodeAdmin').html('<img class="w-100" height="250" src="' +
                                baseUrl + '/images/tanda-tangan/' + res.ttd_admin + '">');
                        }

                        if (res?.ttd_penyewa != null) {
                            $('#qrCodePenyewa').empty();
                            $('#qrCodePenyewa').html('<img class="w-100" height="250" src="' +
                                baseUrl + '/images/tanda-tangan/' + res?.ttd_penyewa + '">');
                        }

                        $('#namaAdmin').text(res?.namaAdmin);
                        $('#namaPenyewa').text(res?.namaPenyewa);
                    }
                });
            });
        });
    </script>
@endsection