@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])

@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => ''])
    <div class="card shadow-lg mx-4">
        <div class="card-body p-3">
            <div class="row gx-4">
                <div class="col-lg">
                    <div class="nav-wrapper">
                        <button class="btn btn-secondary mb-0" onclick="history.back()"><i class="fas fa-circle-left me-1">
                            </i><span class="font-weight-bold">Kembali</button>
                        @if ($pemakaian->status == 'E')
                            {{-- button save --}}
                            <button class="btn btn-primary mb-0" style="display: none;" id="{{ $dmenu }}-save"
                                onclick="event.preventDefault(); document.getElementById('{{ $dmenu }}-form').submit();"><i
                                    class="fas fa-floppy-disk me-1"> </i><span class="font-weight-bold">Simpan</button>
                            @if ($authorize->edit == '1')
                                {{-- button edit --}}
                                <a id="editButton" class="btn btn-warning mb-0">
                                    <span class="fa fa-edit me-1"></span>Edit</a>
                                <form id="postForm_{{ $pemakaian->id }}"
                                    action="{{ url('pemakaian/post/' . $pemakaian->id) }}" method="POST"
                                    style="display: inline-block;">
                                    @csrf
                                    <button type="button" class="btn btn-primary mb-0"
                                        onclick="showConfirmation('{{ $pemakaian->id }}', '{{ $pemakaian->status }}')">
                                        <span class="fa fa-send me-1"></span>Post
                                    </button>
                                </form>

                                <form id="reverseForm_{{ $pemakaian->id }}"
                                    action="{{ url('pemakaian/reverse/' . $pemakaian->id) }}" method="POST"
                                    style="display: inline-block;">
                                    @csrf
                                    <button type="button" class="btn btn-danger mb-0"
                                        onclick="showConfirmationReverse('{{ $pemakaian->id }}')">
                                        <span class="fa fa-trash me-1"></span>Hapus
                                    </button>
                                </form>
                            @endif
                        @elseif ($pemakaian->status === 'F')
                            @if ($authorize->delete == '1')
                                <form id="reverseForm_{{ $pemakaian->id }}"
                                    action="{{ url('pemakaian/reverse/' . $pemakaian->id) }}" method="POST"
                                    style="display: inline-block;">
                                    @csrf
                                    <button type="button" class="btn btn-danger mb-0"
                                        onclick="showConfirmationReverse('{{ $pemakaian->id }}')">
                                        <span class="fa fa-trash me-1"></span>Reverse
                                    </button>
                                </form>
                            @endif
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
    <form role="form" method="POST">
        @csrf
        @method('PUT')
        <div class="container-fluid py-4">
            <div class="row">
                <div class="col-12">
                    <div class="card mb-4">
                        <div class="card-header pb-0">
                            <h5>Header</h5>
                            <hr>
                            <div class="card-body px-0 pt-0 pb-2">
                                <div class="table-responsive p-0">
                                    <div class="mb-3">
                                        <label for="id" class="text-lg">ID</label>
                                        <input type="text" value="{{ $pemakaian->id }}" name="id"
                                            class="form-control" readonly />
                                    </div>
                                    <div class="mb-3">
                                        <label for="tanggal" class="text-lg">Tanggal</label>
                                        <input type="text" name="tanggal" value="{{ $pemakaian->tanggal }}"
                                            class="form-control" id="tanggal" readonly />
                                    </div>
                                    <div class="mb-3">
                                        <label for="keterangan" class="text-lg">Keterangan</label>
                                        <input type="text" value="{{ $pemakaian->keterangan }}" name="keterangan"
                                            class="form-control" readonly />
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-12">
                    <div class="card mb-4">
                        <div class="card-header pb-0">
                            <h5>Detail</h5>
                            <hr>
                        </div>
                        <div class="card-body">
                            <div class="table-responsive">

                                <table class="table table-bordered table-striped" style="width:100%">
                                    <thead style="background-color: #daecff;">
                                        <tr>
                                            <th scope="col">Item</th>
                                            <th scope="col">Kode Obat</th>
                                            <th scope="col">Nama</th>
                                            <th scope="col">Dosis</th>
                                            <th scope="col">Kemasan</th>
                                            <th scope="col">Jumlah</th>
                                            <th scope="col">Satuan</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach ($details as $d)
                                            <tr>
                                                <td>{{ $d->item }}</td>
                                                <td>{{ $d->idobat }}</td>
                                                <td>{{ $d->nama_obat }}</td>
                                                <td>{{ $d->dosis }}</td>
                                                <td>{{ $d->nama_kemasan }}</td>
                                                <td class="text-end">{{ $d->qty }}</td>
                                                <td>{{ $d->nama_satuan }}</td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>
@endsection
@push('js')
    {{-- datatables --}}
    <script src="assets/js/dataTables.js"></script>
    <script>
        $('#myTable').DataTable({
            "language": {
                "search": "Cari :",
                "lengthMenu": "Tampilkan _MENU_ baris",
                "zeroRecords": "Maaf - Data tidak ada",
                "info": "Halaman _PAGE_ dari _PAGES_",
                "infoEmpty": "Tidak ada data",
                "infoFiltered": "(pencarian dari _MAX_ data)"
            },
            responsive: true,
        });

        function deleteData(name, msg) {
            pesan = confirm('Apakah Anda Yakin ' + msg + ' Data ' + name + ' ini ?');
            if (pesan) return true
            else return false
        }
    </script>
    <script>
        function showConfirmation(id, status) {
            var postUrl = "{{ url('pemakaian/post/') }}/" + id;
            Swal.fire({
                title: 'Apakah Anda yakin?',
                text: 'Ingin memposting data pemakaian obat dengan ID ' + id + ' ?',
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#d33',
                cancelButtonColor: '#3085d6',
                confirmButtonText: 'Ya, lanjutkan!',
                cancelButtonText: 'Batal'
            }).then((result) => {
                if (result.isConfirmed) {
                    postPemakaian(postUrl); // Panggil fungsi untuk melakukan posting
                }
            });
        }

        function postPemakaian(postUrl) {
            $.ajax({
                url: postUrl,
                type: "POST",
                data: {
                    _token: '{{ csrf_token() }}',
                },
                success: function(response) {
                    Swal.fire({
                        title: 'Sukses',
                        text: 'Data pemakaian obat berhasil diposting.',
                        icon: 'success',
                        showConfirmButton: true,
                        // timer: 1500
                    }).then((result) => {
                        window.location.href = "{{ url($url_menu) }}";
                    });
                },
                error: function(jqXHR, textStatus, errorThrown) {
                    Swal.fire({
                        title: 'Gagal',
                        text: 'Terjadi kesalahan saat memposting data.',
                        icon: 'error',
                        showConfirmButton: true
                    });
                    console.error(textStatus, errorThrown);
                }
            });
        }

        function showConfirmationReverse(id) {
            var reverseUrl = "{{ url('pemakaian/reverse') }}/" + id;
            Swal.fire({
                title: 'Apakah Anda yakin?',
                text: 'Ingin membatalkan pemakaian obat dengan ID ' + id + ' ?',
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#d33',
                cancelButtonColor: '#3085d6',
                confirmButtonText: 'Ya, batalkan!',
                cancelButtonText: 'Batal'
            }).then((result) => {
                if (result.isConfirmed) {
                    // Jika konfirmasi diterima, kirim permintaan pembatalan
                    reversePemakaian(reverseUrl);
                }
            });
        }

        function reversePemakaian(reverseUrl) {
            $.ajax({
                url: reverseUrl,
                type: "POST",
                data: {
                    _token: '{{ csrf_token() }}'
                },
                success: function(response) {
                    Swal.fire({
                        title: 'Sukses',
                        text: 'Pemakaian obat berhasil dibatalkan.',
                        icon: 'success',
                        showConfirmButton: true,
                        // timer: 1500
                    }).then((result) => {
                        window.location.href = "{{ url($url_menu) }}";
                    });
                },
                error: function(jqXHR, textStatus, errorThrown) {
                    Swal.fire({
                        title: 'Gagal',
                        text: 'Terjadi kesalahan saat membatalkan pemakaian obat.',
                        icon: 'error',
                        showConfirmButton: true
                    });
                    console.error(textStatus, errorThrown);
                }
            });
        }
        document.addEventListener('DOMContentLoaded', function() {
            var encryptedId = "{{ $encryptedId }}";
            var status = "{{ $pemakaian->status }}"; // Mengambil ID pemakaian
            if (status == 'E') {
                var editButton = document.getElementById('editButton');
                editButton.style.display = 'inline-block';
                editButton.href = "{{ url($url_menu . '/edit' . '/') }}/" + encryptedId;
            }
        });
    </script>
@endpush