@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])
{{-- section content --}}
@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => ''])

    <div class="card shadow-lg mx-4" style="margin-bottom: 30px;">
        <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="window.location='{{ URL::to($url_menu) }}'">
                            <i class="fas fa-chevron-left me-1"></i>Kembali
                        </button>
                        @php
                            $authUsers = DB::table('sys_enum')
                                ->where('idenum', 'auth_posting')
                                ->where('isactive', '1')
                                ->pluck('value')
                                ->toArray();

                            $graceDays = max(0, (int) (DB::table('sys_enum')->where('idenum', 'tglpost')->where('isactive', '1')->value('name') ?? 0));
                            $isPostablePeriod = false;
                            if (!empty($list->tanggal)) {
                                $transactionDate = \Carbon\Carbon::parse($list->tanggal);
                                $isPostablePeriod = \Carbon\Carbon::now()->between($transactionDate->copy()->startOfMonth(), $transactionDate->copy()->endOfMonth()->addDays($graceDays)->endOfDay());
                            }

                            $isCurrentMonth =
                                !empty($list->tanggal) &&
                                \Carbon\Carbon::parse($list->tanggal)->isSameMonth(now(), true);

                            $canPost = in_array(auth()->user()->username, $authUsers) && $isPostablePeriod;
                        @endphp
                        @if ($list->status == 'E' && $isPostablePeriod)
                            <button class="btn btn-warning mb-0"
                                onclick="window.location='{{ url($url_menu . '/edit' . '/' . encrypt($list->id_transaksi)) }}'"><i
                                    class="fas fa-pen me-1"> </i><span class="font-weight-bold">Edit</span></button>
                            @if ($canPost)
                                <button onclick="addToTransaksiList('{{ encrypt($list->id_transaksi) }}')"
                                    class="btn btn-success mb-0"><i class="fas fa-check me-1"></i><span
                                        class="font-weight-bold">Post</span></button>
                            @endif
                        @elseif($list->status == 'P' && $isPostablePeriod)
                            <button onclick="reverseTransaksi('{{ encrypt($list->id_transaksi) }}')"
                                class="btn btn-danger mb-0"><i class="fas fa-check me-1"></i><span
                                    class="font-weight-bold">Reverse</span></button>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="container-fluid py-2">
        <div class="row">
            <div class="col-12">
                <div class="row mx-1">
                    <div class="card">
                        <div class="card-header py-2" style="margin-top: 20px;">
                            <h5 class="mb-0 pb-2">Header {{ $title_menu }}</h5>
                        </div>
                        <div class="card-body py-3">
                            <form id="my-form" autocomplete="off">
                                @csrf
                                {{-- gunakan id record sebagai data-key untuk update --}}
                                <input type="hidden" id="record_id" value="{{ $list->id ?? '' }}">

                                <!-- ROW 1 -->
                                <div class="row mb-2">
                                    <div class="col-md-4">
                                        <div class="d-flex align-items-center">
                                            <label for="id_transaksi" class="form-label me-2" style="min-width:100px;">ID
                                                Transaksi</label>
                                            <input type="text" class="form-control" id="id_transaksi" name="id_transaksi"
                                                value="{{ $list->id_transaksi ?? '' }}" placeholder="--" readonly>
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="d-flex align-items-center">
                                            <label for="tanggal" class="form-label me-2"
                                                style="min-width:100px;">Tanggal</label>
                                            <input type="text" class="form-control" id="tanggal" name="tanggal"
                                                value="{{ $list->tanggal ?? '' }}" placeholder="--" readonly>
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="d-flex align-items-center">
                                            <label for="jenis" class="form-label me-2"
                                                style="min-width:100px;">Jenis</label>
                                            <input type="text" class="form-control" id="jenis" name="jenis"
                                                value="{{ $list->jenis_name ?? '' }}" placeholder="--" readonly>
                                        </div>
                                    </div>
                                </div>

                                <!-- ROW 2 -->
                                <div class="row mb-2">
                                    <div class="col-md-4">
                                        <div class="d-flex align-items-center">
                                            <label for="petugas" class="form-label me-2"
                                                style="min-width:100px;">Petugas</label>
                                            <input type="text" class="form-control" id="petugas" name="petugas"
                                                value="{{ $list->petugas ?? '' }}" placeholder="--" readonly>
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="d-flex align-items-center">
                                            <label for="shift" class="form-label me-2"
                                                style="min-width:100px;">Shift</label>
                                            <input type="text" class="form-control" id="shift" name="shift"
                                                value="{{ $list->shift ?? '' }}" placeholder="--" readonly>
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="d-flex align-items-center">
                                            <label for="group" class="form-label me-2"
                                                style="min-width:100px;">Group</label>
                                            <input type="text" class="form-control" id="group" name="group"
                                                value="{{ $list->group ?? '' }}" placeholder="--" readonly>
                                        </div>
                                    </div>
                                </div>

                                <!-- ROW 3 -->
                                <div class="row mb-2">
                                    <div class="col-md-4">
                                        <div class="d-flex align-items-center">
                                            <label for="pengambil" class="form-label me-2"
                                                style="min-width:100px;">Pengambil</label>
                                            <input type="text" class="form-control" id="pengambil" name="pengambil"
                                                value="{{ $list->pengambil_nama ?? '' }}" placeholder="--" readonly>
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="d-flex align-items-center">
                                            <label for="status" class="form-label me-2"
                                                style="min-width:100px;">Status</label>
                                            <input type="text" class="form-control" id="status" name="status"
                                                value="{{ $list->status == 'E' ? 'Entry' : ($list->status == 'P' ? 'Posted' : $list->status) }}"
                                                placeholder="--" readonly>
                                        </div>
                                    </div>
                                </div>

                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="container-fluid py-2">
        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-header d-flex align-items-center justify-content-between">
                        <h5 class="mb-0">Detail {{ $title_menu }}</h5>
                    </div>
                    <div class="card-body">
                        @php
                            $hasInactiveBarang = $details->contains(function ($d) {
                                return ($d->barang_isactive ?? '1') == '0';
                            });
                        @endphp
                        @if ($hasInactiveBarang)
                            <div class="alert alert-danger alert-dismissible fade show d-flex align-items-center p-3 mb-3 text-white"
                                role="alert"
                                style="background-color: #dc3545 !important; border: 1px solid #b02a37 !important; color: #ffffff !important; border-radius: 8px; box-shadow: 0 2px 6px rgba(220, 53, 69, 0.2);">
                                <i class="fas fa-exclamation-circle me-2 fs-5 text-white"
                                    style="color: #ffffff !important;"></i>
                                <div style="font-size: 14px; line-height: 1.5; color: #ffffff !important;">
                                    <strong style="color: #ffffff !important;">Perhatian:</strong> Transaksi ini memuat
                                    barang yang berstatus <strong style="color: #ffffff !important;">Non-Aktif</strong> di
                                    Master Barang. Transaksi tidak dapat diposting sebelum barang diaktifkan kembali.
                                </div>
                                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="alert"
                                    aria-label="Close" style="filter: brightness(0) invert(1);"></button>
                            </div>
                        @endif
                        <div class="table-responsive">
                            <table id="tgrpo-tbl-detail" class="table table-bordered table-striped">
                                <thead style="background-color: #daecff;">
                                    <tr>
                                        <th style="text-align:center; border-color: #daecff; width: 5%;">No</th>
                                        <th style="text-align:center; border-color: #daecff; width: 20%;">Nama Barang</th>
                                        <th style="text-align:center; border-color: #daecff; width: 14%;">Kode Lama</th>
                                        <th style="text-align:center; border-color: #daecff; width: 14%;">Kode Baru</th>
                                        <th style="text-align:center; border-color: #daecff; width: 8%;">QTY</th>
                                        <th style="text-align:center; border-color: #daecff; width: 8%;">Satuan</th>
                                        <th style="text-align:center; border-color: #daecff; width: 15%;">Keperluan</th>
                                        <th style="text-align:center; border-color: #daecff; width: 16%;">Catatan</th>
                                    </tr>
                                </thead>
                                <tbody id="tbody-detail">
                                    @foreach ($details as $index => $detail)
                                        <tr class="form-row" data-id="{{ $detail->id }}">
                                            <td class="text-center">{{ ($index + 1) * 10 }}</td>
                                            <td>
                                                <span>{{ $detail->barang_name }}</span>
                                                @if (($detail->barang_isactive ?? '1') == '0')
                                                    <span class="badge bg-danger ms-1" style="font-size: 10px;">Tidak
                                                        Aktif</span>
                                                @endif
                                            </td>
                                            <td>{{ $detail->kode_lama }}</td>
                                            <td>{{ $detail->kode_baru }}</td>
                                            <td style="text-align: right;">
                                                {{ ($detail->qty ?? 0) == floor($detail->qty ?? 0) ? number_format($detail->qty ?? 0, 0, '.', ',') : number_format($detail->qty ?? 0, 2, '.', ',') }}
                                            </td>
                                            <td>{{ $detail->satuan_nama }}</td>
                                            <td>{{ $detail->deskripsi }}</td>
                                            <td>{{ $detail->catatan }}</td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    {{-- check flag js on dmenu --}}
    @if ($jsmenu == '1')
        @if (view()->exists("js.{$dmenu}"))
            @push('addjs')
                {{-- file js in folder (resources/views/js) --}}
                @include('js.' . $dmenu);
            @endpush
        @else
            @push('addjs')
                <script>
                    Swal.fire({
                        title: 'JS Not Found!!',
                        text: 'Please Create File JS',
                        icon: 'error',
                        confirmButtonColor: '#028284'
                    });
                </script>
            @endpush
        @endif
    @endif
@endsection
@push('js')
    <script>
        function addToTransaksiList(encryptedId) {
            const escapeHtml = (value) => {
                return String(value ?? '')
                    .replaceAll('&', '&amp;')
                    .replaceAll('<', '&lt;')
                    .replaceAll('>', '&gt;')
                    .replaceAll('"', '&quot;')
                    .replaceAll("'", '&#039;');
            };

            const formatNumber = (value) => {
                return Number(value || 0).toLocaleString('id-ID', {
                    maximumFractionDigits: 2
                });
            };

            Swal.fire({
                title: 'Konfirmasi',
                text: 'Apakah Anda yakin transaksi ini akan dipost dan stok akan terupdate?',
                icon: 'question',
                showCancelButton: true,
                confirmButtonText: 'Ya',
                cancelButtonText: 'Batal',
                allowOutsideClick: () => !Swal.isLoading(),
                allowEscapeKey: () => !Swal.isLoading(),
                preConfirm: async () => {
                    Swal.showLoading();

                    try {
                        const response = await fetch(
                            '{{ url($url_menu . '/add-to-list') }}', {
                                method: 'POST',
                                headers: {
                                    'Content-Type': 'application/json',
                                    'Accept': 'application/json',
                                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                                },
                                body: JSON.stringify({
                                    id_transaksi: encryptedId
                                })
                            }
                        );

                        const data = await response.json();

                        return {
                            ...data,
                            httpOk: response.ok
                        };
                    } catch (error) {
                        Swal.showValidationMessage(
                            'Terjadi kesalahan saat menghubungi server.'
                        );

                        return false;
                    }
                }
            }).then((result) => {
                if (!result.isConfirmed || !result.value) {
                    return;
                }

                const data = result.value;

                if (data.success) {
                    Swal.fire({
                        title: 'Berhasil!',
                        text: data.message,
                        icon: 'success',
                        confirmButtonText: 'OK',
                        allowOutsideClick: false
                    }).then(() => {
                        window.location.href = '{{ URL::to($url_menu) }}';
                    });

                    return;
                }

                // Tampilkan daftar barang yang stoknya kurang
                if (Array.isArray(data.items) && data.items.length > 0) {
                    const rows = data.items.map((item, index) => `
                <tr>
                    <td>${index + 1}</td>
                    <td>${escapeHtml(item.kode_baru || item.kode)}</td>
                    <td>${escapeHtml(item.nama)}</td>
                    <td class="text-end">${formatNumber(item.stok)}</td>
                    <td class="text-end">${formatNumber(item.qty)}</td>
                    <td class="text-end text-danger fw-bold">
                        ${formatNumber(item.kurang)}
                    </td>
                </tr>
            `).join('');

                    Swal.fire({
                        title: 'Stok Tidak Mencukupi',
                        icon: 'warning',
                        width: 850,
                        html: `
                    <div class="table-responsive text-start">
                        <table class="table table-bordered table-sm">
                            <thead>
                                <tr>
                                    <th>No.</th>
                                    <th>Kode Barang</th>
                                    <th>Nama Barang</th>
                                    <th class="text-end">Stok Saat Ini</th>
                                    <th class="text-end">Permintaan</th>
                                    <th class="text-end">Selisih</th>
                                </tr>
                            </thead>
                            <tbody>
                                ${rows}
                            </tbody>
                        </table>
                    </div>
                `,
                        confirmButtonText: 'OK'
                    });

                    return;
                }

                // Tampilkan pesan HTML jika ada (misal: barang non-aktif)
                if (data.message_html) {
                    Swal.fire({
                        title: 'Posting Dibatalkan!',
                        icon: 'error',
                        html: data.message_html,
                        width: 750,
                        confirmButtonText: 'OK'
                    });
                    return;
                }

                // Error selain kekurangan stok
                Swal.fire({
                    title: 'Gagal!',
                    text: data.message || 'Transaksi gagal diproses.',
                    icon: 'error',
                    confirmButtonText: 'OK'
                });
            });
        }

        function reverseTransaksi(encryptedId) {
            Swal.fire({
                title: 'Konfirmasi Reverse',
                text: 'Apakah Anda yakin ingin me-reverse transaksi ini? Stok akan dikembalikan ke kondisi semula.',
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#d33',
                cancelButtonColor: '#3085d6',
                confirmButtonText: 'Ya, Reverse!',
                cancelButtonText: 'Batal'
            }).then((result) => {
                if (result.isConfirmed) {
                    Swal.fire({
                        title: 'Memproses...',
                        text: 'Mohon tunggu sebentar',
                        allowOutsideClick: false,
                        showConfirmButton: false,
                        willOpen: () => {
                            Swal.showLoading();
                        }
                    });

                    fetch('{{ url($url_menu . '/reverse') }}/' + encryptedId, {
                            method: 'POST',
                            headers: {
                                'Content-Type': 'application/json',
                                'X-CSRF-TOKEN': '{{ csrf_token() }}'
                            }
                        })
                        .then(response => response.json())
                        .then(data => {
                            Swal.close();
                            if (data.success) {
                                Swal.fire({
                                    title: 'Berhasil!',
                                    text: data.message,
                                    icon: 'success',
                                    confirmButtonText: 'OK'
                                }).then(() => {
                                    location.reload();
                                });
                            } else {
                                Swal.fire({
                                    title: 'Gagal!',
                                    text: data.message,
                                    icon: 'error',
                                    confirmButtonText: 'OK'
                                });
                            }
                        })
                        .catch(error => {
                            Swal.close();
                            console.error('Error:', error);
                            Swal.fire({
                                title: 'Error!',
                                text: 'Terjadi kesalahan',
                                icon: 'error',
                                confirmButtonText: 'OK'
                            });
                        });
                }
            });
        }
    </script>
@endpush