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

@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => 'Supplier List'])
    <div class="container-fluid py-4">
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-header pb-0">
                        <h5 class="mb-0">Data Supplier</h5>
                        <p class="text-sm">Daftar supplier yang telah diproses dan dibuatkan akun.</p>
                    </div>
                    <hr class="horizontal dark mt-2">
                    <div class="card-body px-0 pt-0 pb-2">
                        @include('components.alert')
                        <div class="table-responsive p-3">
                            <table class="table display" id="list_supplier_processed">
                                <thead class="thead-light" style="background-color: #00b7bd4f;">
                                    <tr>
                                        <th>No</th>
                                        <th>Nama Material</th>
                                        <th>Supplier</th>
                                        <th>Email Supplier (PIC 1)</th>
                                        <th>Nama PIC 1</th>
                                        <th class="text-center">Detail</th>
                                        <th>Kontak</th>
                                        <th>Expired</th>
                                        <th>Status</th>
                                        <th class="text-center">Action</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @if(isset($purchasing_list))
                                        @foreach($purchasing_list as $index => $item)
                                                                <tr>
                                                                    <td>{{ $purchasing_list->firstItem() + $index }}</td>
                                                                    <td>{{ $item->material->nama_material }}</td>
                                                                    <td>{{ $item->supplier->nama_vendor }}</td>
                                                                    <td>{{ $item->email_pic }}</td>
                                                                    <td>{{ $item->nama_pic }}</td>
                                                                    <td class="text-center">
                                                                        <button type="button" class="btn btn-sm btn-primary mx-2 mb-0 w-90 btn-detail"
                                                                            data-bs-toggle="modal" data-bs-target="#detailModal"
                                                                            data-kode-material="{{ $item->material->kode_material ?? '' }}"
                                                                            data-nama-material="{{ $item->material->nama_material ?? '' }}"
                                                                            data-nama-supplier="{{ $item->supplier->nama_vendor ?? '' }}"
                                                                            data-produsen="{{ $item->supplier->produsen ?? '-' }}"
                                                                            data-expired="{{ $item->password_with_expired_date ? $item->password_with_expired_date->format('d/m/Y H:i') : '-' }}"
                                                                            data-status="{{ $item->status_password_with_expired === 'active' && (! $item->password_with_expired_date || ! $item->password_with_expired_date->isPast()) ? 'active' : 'inactive' }}"
                                                                            data-pic1-nama="{{ $item->nama_pic }}"
                                                                            data-pic1-email="{{ $item->email_pic }}"
                                                                            data-pic1-kontak="{{ $item->nomor_telepon_pic }}"
                                                                            data-pic2-nama="{{ $item->nama_pic2 ?? '' }}"
                                                                            data-pic2-email="{{ $item->email_pic2 ?? '' }}"
                                                                            data-pic2-kontak="{{ $item->nomor_telepon_pic2 ?? '' }}">
                                                                            Detail
                                                                        </button>
                                                                    </td>
                                                                    <td>
                                                                        @if($item->nomor_telepon_pic)
                                                                            @php
                                                                                $wa_number = preg_replace('/[^0-9]/', '', $item->nomor_telepon_pic);
                                                                                if (substr($wa_number, 0, 1) === '0') {
                                                                                    $wa_number = '62' . substr($wa_number, 1);
                                                                                }
                                                                                // dd($wa_number);
                                                                            @endphp
                                                                            @php
                                                                                $pesan = "Yth. Bapak/Ibu {$item->nama_pic},\n\n"
                                                                                    . "Akun supplier untuk {$item->supplier->nama_vendor} sudah dibuat.\n"
                                                                                    . "Silakan membuka email: {$item->email_pic} pada bagian kotak masuk atau spam untuk informasi login\n\n"
                                                                                    . "Terima kasih.";
                                                                                $pesan_encoded = urlencode($pesan);
                                                                            @endphp

                                                                            <a href="https://web.whatsapp.com/send?phone={{ $wa_number }}&text={{ $pesan_encoded }}"
                                                                                target="_blank" class="btn btn-success btn-sm mb-0">
                                                                                <i class="fab fa-whatsapp me-1"></i> Hubungi
                                                                            </a>
                                                                        @else
                                                                            -
                                                                        @endif
                                                                    </td>
                                                                    <td>
                                                                        {{ $item->password_with_expired_date
                                            ? $item->password_with_expired_date->format('d/m/Y')
                                            : '-' }}
                                                                    </td>
                                                                    <td>
                                                                        @if($item->status_password_with_expired == 'active')
                                                                            <span class="badge bg-success">Active</span>
                                                                        @else
                                                                            <span class="badge bg-danger">Expired</span>
                                                                        @endif
                                                                    </td>
                                                                    <td class="text-sm text-center">
                                                                        @if($item->status_password_with_expired == 'inactive')
                                                                            @if ($authorize->edit == '1')
                                                                                <button type="button" class="btn btn-info btn-sm mb-0 btn-resend"
                                                                                    data-id="{{ encrypt($item->purchasing_id) }}"
                                                                                    data-supplier="{{ $item->supplier->nama_vendor }}"
                                                                                    data-email="{{ $item->email_pic }}">
                                                                                    Resend Email
                                                                                </button>
                                                                            @endif
                                                                        @else
                                                                            -
                                                                        @endif
                                                                    </td>
                                                                </tr>
                                        @endforeach
                                    @endif
                                </tbody>
                            </table>
                            <div class="mt-3 px-4">
                                {{ $purchasing_list->links() }}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    {{-- Modal detail supplier --}}
    <div class="modal fade" id="detailModal" tabindex="-1" aria-labelledby="detailModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-centered">
            <div class="modal-content border-0 shadow-lg overflow-hidden">
                <div class="modal-header bg-gradient-primary border-0 px-4 py-3">
                    <div class="d-flex align-items-center">
                        <div class="icon icon-shape bg-white text-primary rounded-circle me-3">
                            <i class="fas fa-address-card"></i>
                        </div>
                        <div>
                            <h5 class="modal-title text-white mb-0" id="detailModalLabel">Detail Akun Supplier</h5>
                            <p class="text-white text-xs opacity-8 mb-0">Informasi penugasan, kontak, dan masa aktif akun</p>
                        </div>
                    </div>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"
                        aria-label="Close"></button>
                </div>
                <div class="modal-body bg-gray-100 p-4">
                    <div class="card border-0 shadow-sm mb-3">
                        <div class="card-body p-3">
                            <div class="row">
                                <div class="col-md-6 mb-3 mb-md-0">
                                    <span class="text-xs text-secondary d-block">Material</span>
                                    <h6 class="mb-1" id="modal-nama-material"></h6>
                                    <span class="badge bg-gradient-secondary" id="modal-kode-material"></span>
                                </div>
                                <div class="col-md-6">
                                    <span class="text-xs text-secondary d-block">Supplier</span>
                                    <h6 class="mb-1" id="modal-nama-supplier"></h6>
                                    <p class="text-sm text-secondary mb-0">Produsen: <span id="modal-produsen"></span></p>
                                </div>
                            </div>
                            <hr class="horizontal dark my-3">
                            <div class="row">
                                <div class="col-md-6">
                                    <span class="text-xs text-secondary d-block">Masa Berlaku Akun</span>
                                    <span class="font-weight-bold text-sm" id="modal-expired"></span>
                                </div>
                                <div class="col-md-6">
                                    <span class="text-xs text-secondary d-block">Status Akun</span>
                                    <span class="badge" id="modal-account-status"></span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-6 mb-3" id="modal-supply-pic1-card">
                            <div class="card border-0 shadow-sm h-100">
                                <div class="card-body p-3">
                                    <h6 class="mb-3"><i class="fas fa-user text-info me-2"></i>PIC Utama</h6>
                                    <h6 class="mb-2" id="modal-pic1-nama"></h6>
                                    <p class="text-sm mb-2">
                                        <i class="fas fa-envelope fa-fw text-info me-2"></i>
                                        <a href="#" id="modal-pic1-email-link"><span id="modal-pic1-email"></span></a>
                                    </p>
                                    <p class="text-sm mb-0">
                                        <i class="fas fa-phone fa-fw text-info me-2"></i>
                                        <a href="#" id="modal-pic1-kontak-link"><span id="modal-pic1-kontak"></span></a>
                                    </p>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6 mb-3" id="pic2-section">
                            <div class="card border-0 shadow-sm h-100">
                                <div class="card-body p-3">
                                    <h6 class="mb-3"><i class="fas fa-user text-secondary me-2"></i>PIC Alternatif</h6>
                                    <h6 class="mb-2" id="modal-pic2-nama"></h6>
                                    <p class="text-sm mb-2">
                                        <i class="fas fa-envelope fa-fw text-secondary me-2"></i>
                                        <a href="#" id="modal-pic2-email-link"><span id="modal-pic2-email"></span></a>
                                    </p>
                                    <p class="text-sm mb-0">
                                        <i class="fas fa-phone fa-fw text-secondary me-2"></i>
                                        <a href="#" id="modal-pic2-kontak-link"><span id="modal-pic2-kontak"></span></a>
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer border-0 px-4">
                    <button type="button" class="btn btn-secondary mb-0" data-bs-dismiss="modal">
                        <i class="fas fa-times me-1"></i> Tutup
                    </button>
                </div>
            </div>
        </div>
    </div>

    {{-- Modal konfirmasi resend email --}}
    <div class="modal fade" id="resendModal" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <form method="POST" action="{{ URL::to($url_menu) }}" id="{{ $dmenu }}-form" enctype="multipart/form-data">
                    @csrf
                    <input type="hidden" name="action" value="reactivate">
                    <input type="hidden" name="purchasing_id" id="modal-purchasing-id">

                    <div class="modal-header">
                        <h5 class="modal-title">Konfirmasi Resend Email</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>
                    <div class="modal-body">
                        <p>Anda akan mengaktifkan kembali akun supplier ini.</p>
                        <ul class="list-group">
                            <li class="list-group-item"><strong>Supplier:</strong> <span id="modal-supplier"></span></li>
                            <li class="list-group-item"><strong>Email:</strong> <span id="modal-email"></span></li>
                        </ul>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
                        <button type="submit" class="btn btn-primary">Ya, Resend Email</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

@endsection

@push('js')
    <script>
        $(document).ready(function () {
            // Init datatable
            //$('#list_supplier_processed').DataTable({
                //paging: false, info: false, searching: false, responsive: true,
                //language: { "zeroRecords": "Maaf - Data tidak ada" }
            //});
            // JAVASCRIPT UNTUK MODAL DETAIL
            $('.btn-detail').on('click', function () {
                const button = $(this);
                const status = button.data('status');
                const pic1Email = button.data('pic1-email');
                const pic1Kontak = button.data('pic1-kontak');
                const pic2Nama = button.data('pic2-nama');
                const pic2Email = button.data('pic2-email');
                const pic2Kontak = button.data('pic2-kontak');
                const hasPic2 = pic2Nama || pic2Email || pic2Kontak;

                $('#modal-kode-material').text(button.data('kode-material') || '-');
                $('#modal-nama-material').text(button.data('nama-material'));
                $('#modal-nama-supplier').text(button.data('nama-supplier'));
                $('#modal-produsen').text(button.data('produsen') || '-');
                $('#modal-expired').text(button.data('expired') || '-');
                $('#modal-pic1-nama').text(button.data('pic1-nama'));
                $('#modal-pic1-email').text(pic1Email || '-');
                $('#modal-pic1-kontak').text(pic1Kontak || '-');
                $('#modal-pic1-email-link').attr('href', pic1Email ? `mailto:${pic1Email}` : '#');
                $('#modal-pic1-kontak-link').attr('href', pic1Kontak ? `tel:${pic1Kontak}` : '#');

                $('#modal-account-status')
                    .text(status === 'active' ? 'Active' : 'Expired')
                    .removeClass('bg-gradient-success bg-gradient-danger')
                    .addClass(status === 'active' ? 'bg-gradient-success' : 'bg-gradient-danger');

                $('#pic2-section').toggle(!!hasPic2);
                $('#modal-supply-pic1-card')
                    .toggleClass('col-md-12', !hasPic2)
                    .toggleClass('col-md-6', !!hasPic2);
                $('#modal-pic2-nama').text(pic2Nama || '-');
                $('#modal-pic2-email').text(pic2Email || '-');
                $('#modal-pic2-kontak').text(pic2Kontak || '-');
                $('#modal-pic2-email-link').attr('href', pic2Email ? `mailto:${pic2Email}` : '#');
                $('#modal-pic2-kontak-link').attr('href', pic2Kontak ? `tel:${pic2Kontak}` : '#');
            });

            // Ketika tombol resend diklik
            $('.btn-resend').on('click', function () {
                console.log("Tombol Resend di-klik.");
                let id = $(this).data('id');
                console.log("Data ID yang terbaca dari tombol:", id);
                let supplier = $(this).data('supplier');
                let email = $(this).data('email');

                let targetInput = $('#modal-purchasing-id');
                console.log("Mencari target #modal-purchasing-id. Ditemukan:", targetInput.length);
                targetInput.val(id);
                console.log("Nilai input setelah di-set:", targetInput.val());

                // $('#modal-purchasing_id').val(id);
                $('#modal-supplier').text(supplier);
                $('#modal-email').text(email);

                $('#resendModal').modal('show');
            });
        });
    </script>
@endpush