@push('styles')
    <!-- JQuery DataTable Css -->
    <link href="{{ url('material') }}/plugins/jquery-datatable/skin/bootstrap/css/dataTables.bootstrap.css" rel="stylesheet">
    <!-- JQuery DataTable Css -->

    <style>
        .image-upload {
            width: 200px;
            height: 200px;
            background-color: gainsboro;
            display: block;
            margin: auto;
            background-size: contain;
        }

        .image-upload>input {
            display: none;
        }

        .pilih-bentuk svg {
            width: 100px;
            height: 100px;
            display: block;
            margin: auto;
        }

        .pilih-bentuk i {
            font-size: 100px;
            color: grey;
            position: absolute;
            left: 0%;
            top: 0%;
            right: 0%;
            bottom: 0%;
        }

        .qty {
            width: 55px;
        }

        .upload-container {
            background-color: white;
            border-radius: 8px; /* Sudut yang sedikit membulat */
            /* Bayangan (elevation) khas Material Design */
            box-shadow: 0 2px 4px rgba(0,0,0,0.08), 0 2px 8px rgba(0,0,0,0.08);
            padding: 2.5rem;
            margin-top: 50px;
            transition: box-shadow 0.3s cubic-bezier(.25,.8,.25,1);
        }

        .upload-container:hover {
            box-shadow: 0 4px 12px rgba(0,0,0,0.1), 0 4px 16px rgba(0,0,0,0.1);
        }

        /* Menyembunyikan input file default */
        #imageUpload {
            display: none;
        }

        /* Tombol upload kustom bergaya Material Design (Contained Button) */
        .material-upload-btn {
            position: relative; /* Diperlukan untuk efek ripple */
            overflow: hidden; /* Menyembunyikan ripple yang meluap */
            display: inline-flex; /* Mengatur item di dalamnya */
            align-items: center;
            gap: 8px; /* Jarak antara ikon dan teks */
            padding: 10px 24px;
            background-color: #1976d2; /* Warna primer Material Blue */
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
            font-weight: 500;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
            transition: box-shadow 0.3s cubic-bezier(.25,.8,.25,1);
        }

        .material-upload-btn:hover {
            box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
        }

        /* Efek Ripple */
        .ripple {
            position: absolute;
            border-radius: 50%;
            background-color: rgba(255, 255, 255, 0.6);
            transform: scale(0);
            animation: ripple-effect 0.6s linear;
        }

        @keyframes ripple-effect {
            to {
                transform: scale(4);
                opacity: 0;
            }
        }


        /* Area Pratinjau Gambar */
        #imagePreview {
            width: 100%;
            margin-top: 2rem;
            border-radius: 8px;
            min-height: 250px;
            display: flex;
            justify-content: center;
            align-items: center;
            overflow: hidden;
            background-color: #f5f5f5;
            border: 2px dashed #bdbdbd;
            transition: border-color 0.3s ease;
        }
        
        #imagePreview.has-image {
             border: 2px solid #1976d2;
             padding: 8px;
             background-color: white;
        }

        #imagePreview img {
            max-width: 100%;
            max-height: 400px;
            display: none; /* Sembunyikan secara default */
            border-radius: 4px;
        }

        #imagePreview .preview-text {
            color: #757575;
            font-weight: 500;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 12px;
        }
    </style>
@endpush

@push('scripts')
    {{-- data Table --}}
    <script src="{{ url('material') }}/js/pages/tables/jquery-datatable.js"></script>
    <script src="{{ url('material') }}/plugins/jquery-datatable/jquery.dataTables.js"></script>
    <script src="{{ url('material') }}/plugins/jquery-datatable/skin/bootstrap/js/dataTables.bootstrap.js"></script>
    {{-- data Table --}}

    <script>
        const itemDeleteButton = document.querySelectorAll(".item-delete");
        const itemQtyInput = document.querySelectorAll(".qty");
        const biayaItemInput = document.querySelectorAll(".biaya_item");

        
        const numberFormat = new Intl.NumberFormat({
            style: 'currency'
        });
        $(function() {
            $('#table-pilih-item').DataTable({
                responsive: true,
            });

      
            $(document).on('click','.item-select',function(){
                const item = $(this).data('item');
                alert(item.nama_item + " Ditambahkan");
                const tableDetail = document.getElementById('table-detail-item');

                let row = tableDetail.querySelector("tbody").insertRow(-1);
                let cell0 = row.insertCell(0);
                let cell1 = row.insertCell(1);
                let cell2 = row.insertCell(2);
                let cell3 = row.insertCell(3);
                let cell4 = row.insertCell(4);


                let namaSparepartText = document.createTextNode(item.nama_item);
                let hargaBeliText = document.createTextNode(numberFormat.format(item.biaya_item));
                let jumlahText = document.createTextNode(item.qty);
                let subTotalText = document.createTextNode(numberFormat.format(item.biaya_item * item.qty));
                let hapusButtonText = document.createTextNode("X");

                let hapusButton = document.createElement("button");
                hapusButton.classList.add("btn", "btn-danger", "item-delete");
                hapusButton.appendChild(hapusButtonText);
                hapusButton.setAttribute('type', "button");

                //hidden input for form request
                let jumlahInput = document.createElement("input");
                jumlahInput.classList.add("qty");
                jumlahInput.setAttribute('name', "jumlah[]");
                jumlahInput.setAttribute('type', "number");
                jumlahInput.setAttribute('min', 0);
                jumlahInput.setAttribute('value', item.qty);

                let hargaInput = document.createElement("input");
                hargaInput.setAttribute('name', "harga[]");
                hargaInput.classList.add("harga");
                hargaInput.setAttribute('type', "number");
                hargaInput.setAttribute('value', item.biaya_item);
                hargaInput.setAttribute('hidden', true);

                //hidden input for form request
                let idInput = document.createElement("input");
                idInput.setAttribute('name', "id[]");
                idInput.classList.add("item_id");
                idInput.setAttribute('type', "text");
                idInput.setAttribute('value', item.item_id);
                idInput.setAttribute('hidden', true);

                let detail_garansi_id = document.createElement("input");
                detail_garansi_id.setAttribute('name', "detail_garansi_id[]");
                detail_garansi_id.setAttribute('type', "text");
                detail_garansi_id.setAttribute('value', item.detail_garansi_id ? item.detail_garansi_id : "");
                detail_garansi_id.setAttribute('hidden', true);

                let detail_retur_pembelian_id = document.createElement("input");
                detail_retur_pembelian_id.setAttribute('name', "detail_retur_pembelian_id[]");
                detail_retur_pembelian_id.setAttribute('type', "text");
                detail_retur_pembelian_id.setAttribute('value', item.detail_retur_pembelian_id ? item.detail_retur_pembelian_id : "");
                detail_retur_pembelian_id.setAttribute('hidden', true);

                let detail_retur_penjualan = document.createElement("input");
                detail_retur_penjualan.setAttribute('name', "detail_retur_penjualan_id[]");
                detail_retur_penjualan.setAttribute('type', "text");
                detail_retur_penjualan.setAttribute('value', item.detail_retur_penjualan_id ? item.detail_retur_penjualan_id : "");
                detail_retur_penjualan.setAttribute('hidden', true);

                let hargaBeliInput = document.createElement("input");
                hargaBeliInput.classList.add("biaya_item");
                hargaBeliInput.setAttribute('name', "biaya_item[]");
                hargaBeliInput.setAttribute('type', "number");
                hargaBeliInput.setAttribute('min', 0);
                hargaBeliInput.setAttribute('value', item.biaya_item);

                cell0.appendChild(namaSparepartText);
                var hargaAsliText = document.createElement("small");
                hargaAsliText.innerHTML = ` <small>(${numberFormat.format(item.biaya_item)})</small>`;

                cell0.appendChild(hargaAsliText);


                cell1.appendChild(jumlahInput);
                cell1.appendChild(idInput);
                cell1.appendChild(hargaInput);

                cell1.appendChild(detail_garansi_id);
                cell1.appendChild(detail_retur_pembelian_id);
                cell1.appendChild(detail_retur_penjualan);


                cell2.appendChild(hargaBeliInput);


                cell3.appendChild(subTotalText);
                cell3.classList.add("subTotal");
                cell4.appendChild(hapusButton);

                addEventHapus(hapusButton);
                addEventQty(jumlahInput);
                addEventQty(hargaBeliInput);
                countGrandTotal();
            });

            function countGrandTotal() {
                let subTotal = document.querySelectorAll(".subTotal");
                let grandTotal = document.querySelector("#grandTotal");
                let grandTotalValue = 0;
                subTotal.forEach((element) => {
                    subTotalValue1 = element.textContent.replaceAll(",", "");
                    subTotalValue = parseFloat(subTotalValue1.replaceAll(".", ""));
                    grandTotalValue += subTotalValue;
                });

                grandTotal.textContent = numberFormat.format(grandTotalValue);
            }

            function addEventHapus(element) {
                element.addEventListener("click", function(event) {
                    this.parentElement.parentElement.remove();
                    countGrandTotal();
                });
            }

            function addEventQty(e) {
                countSubTotal(e);
            }

            itemDeleteButton.forEach((e) => {
                e.addEventListener("click", function(event) {
                    this.parentElement.parentElement.remove();
                    countGrandTotal();
                });
            });

            itemQtyInput.forEach((e) => {
                countSubTotal(e);
            });

            biayaItemInput.forEach((e) => {
                countSubTotal(e);
            });

            function countSubTotal(e) {
                e.addEventListener("input", function(event) {
                    let qtyInput = this.closest('tr').querySelector('[name="jumlah[]"]');
                    let qty = qtyInput.value;
                    // let hargaItem = this.parentElement.parentElement.children[2];
                    let hargaBeliInput = this.closest('tr').querySelector('[name="biaya_item[]"]');
                    let hargaItem = hargaBeliInput.value;
                    let subTotalElement = this.parentElement.parentElement.children[3];

                    let subtotal = hargaItem * qty;

                    subTotalElement.textContent = numberFormat.format(subtotal);

                    countGrandTotal();
                });
            }


            //bagian upload preview
            const imageUpload = document.getElementById('imageUpload');
            const imagePreview = document.getElementById('imagePreview');
            const imagePreviewImg = document.getElementById('imagePreviewImg');
            const previewText = imagePreview.querySelector('.preview-text');

            imageUpload.addEventListener('change', function(event) {
                const file = event.target.files[0];
                if (file) {
                    const reader = new FileReader();
                    reader.onload = function(e) {
                        imagePreviewImg.style.display = 'block';
                        imagePreviewImg.src = e.target.result;
                        previewText.style.display = 'none';
                        imagePreview.classList.add('has-image');
                    };
                    reader.readAsDataURL(file);
                } else {
                    imagePreviewImg.style.display = 'none';
                    imagePreviewImg.src = '';
                    previewText.style.display = 'flex';
                    imagePreview.classList.remove('has-image');
                }
            });

            // --- LOGIKA EFEK RIPPLE (MATERIAL DESIGN) ---
            const uploadButton = document.querySelector('.material-upload-btn');
            
            uploadButton.addEventListener('click', function (e) {
                const rect = e.target.getBoundingClientRect();
                // Menghitung posisi klik relatif terhadap tombol
                const x = e.clientX - rect.left;
                const y = e.clientY - rect.top;

                // Membuat elemen span untuk ripple
                const ripple = document.createElement('span');
                ripple.classList.add('ripple');
                ripple.style.left = `${x}px`;
                ripple.style.top = `${y}px`;

                this.appendChild(ripple);

                // Menghapus elemen ripple setelah animasi selesai
                setTimeout(() => {
                    ripple.remove();
                }, 600); // Harus sama dengan durasi animasi
            });
        });
    </script>
@endpush
<div class="row">
    <!-- Task Info -->
    <div class="col-xs-12 col-sm-12 col-md-12">
        <div class="card">
            <div class="header">
                <a href="{{ request()->back ? route(request()->back) :  route('retur-dan-garansi.index') }}" class="btn btn-warning">Kembali</a>
            </div>
            <div class="body">

                <div class="row">
                    <div class="col-md-3">
                        <b>No Pengiriman</b>
                        <div class="input-group ">
                            <div class="form-line focused">
                                <input type="text" class="form-control" name="no_kirim"
                                    value="{{ old('no_kirim', @$data->no_kirim ?? 'KS-' . date('Ymdhis')) }}"
                                    required>
                            </div>
                            <span class="input-group-addon">
                                <i style="background-color: rgb(0, 170, 187);"></i>
                            </span>
                        </div>
                    </div>
                  
                    <div class="col-md-3">
                        <b>Tanggal</b>
                        <div class="input-group ">
                            <div class="form-line focused">
                                <input type="text" class="form-control" name="tanggal" value="{{ date('Y-m-d') }}"
                                    required>
                            </div>
                            <span class="input-group-addon">
                                <i style="background-color: rgb(0, 170, 187);"></i>
                            </span>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <b>Supplier</b>
                        <div class="input-group ">
                            <div class="form-line focused">
                                <select class="form-control" name="supplier_id" required>
                                    <option value="" disabled selected hidden>-pilih supplier-</option>
                                    @foreach ($suppliers as $supplier)
                                        <option value="{{ $supplier->id }}" @selected(old('supplier_id',@$data->supplier_id) == $supplier->id)>{{ $supplier->nama_supplier }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <span class="input-group-addon">
                                <i style="background-color: rgb(0, 170, 187);"></i>
                            </span>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <b>Keterangan</b>
                        <div class="input-group ">
                            <div class="form-line focused">
                                <input type="text" name="keterangan" class="form-control"
                                    placeholder="Keterangan" value="{{ old('keterangan', @$data->keterangan) }}">
                            </div>
                        </div>
                    </div>
                </div>

                <button type="submit" class="btn btn-success">Simpan</button>
              

            </div>
        </div>
    </div>
    <!-- #END# Task Info -->
</div>


<div class="row">
    <div class="col-md-6">
        <div class="card">
            <div class="body">
              
                    <p class="text-muted mb-4">Gambar bukti.</p>

                    <!-- Input file yang disembunyikan -->
                    <input type="file" accept="image/*,application/pdf" id="imageUpload" name="file_bukti" accept="image/png, image/jpeg, image/gif">

                    <!-- Label yang berfungsi sebagai tombol upload Material -->
                    <label for="imageUpload" class="material-upload-btn">
                        <!-- Ikon Upload SVG -->
                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-cloud-arrow-up-fill" viewBox="0 0 16 16">
                          <path d="M8 2a5.53 5.53 0 0 0-3.594 1.342c-.766.66-1.321 1.52-1.464 2.383C1.266 6.095 0 7.555 0 9.318 0 11.366 1.708 13 3.781 13h8.906C14.502 13 16 11.57 16 9.773c0-1.636-1.242-2.969-2.834-3.194C12.923 3.999 10.69 2 8 2zm2.354 5.146a.5.5 0 0 1-.708.708L8.5 6.707V10.5a.5.5 0 0 1-1 0V6.707L6.354 7.854a.5.5 0 1 1-.708-.708l2-2a.5.5 0 0 1 .708 0l2 2z"/>
                        </svg>
                        Pilih File
                    </label>

                    <!-- Area untuk menampilkan pratinjau gambar -->
                    <div id="imagePreview" class="mt-4">
                        @if ((isset($data)  && $data->file_bukti != null))
                            <span class="preview-text" style="display: none;">
                                <svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" fill="#bdbdbd" class="bi bi-image" viewBox="0 0 16 16">
                                    <path d="M6.002 5.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z"/>
                                    <path d="M2.002 1a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V3a2 2 0 0 0-2-2h-12zm12 1a1 1 0 0 1 1 1v6.5l-3.777-1.947a.5.5 0 0 0-.577.093l-3.71 3.71-2.66-1.772a.5.5 0 0 0-.63.062L1.002 12V3a1 1 0 0 1 1-1h12z"/>
                                </svg>
                                Pratinjau Gambar
                            </span>
                            <img src="{{ (isset($data)  && $data->file_bukti != null) ? route('storage.gambar',['path'=>$data->file_bukti]) : '' }}" alt="Pratinjau Gambar" id="imagePreviewImg" class="block"  style="display: block;">
                        @else
                            <span class="preview-text">
                            <svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" fill="#bdbdbd" class="bi bi-image" viewBox="0 0 16 16">
                                <path d="M6.002 5.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z"/>
                                <path d="M2.002 1a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V3a2 2 0 0 0-2-2h-12zm12 1a1 1 0 0 1 1 1v6.5l-3.777-1.947a.5.5 0 0 0-.577.093l-3.71 3.71-2.66-1.772a.5.5 0 0 0-.63.062L1.002 12V3a1 1 0 0 1 1-1h12z"/>
                            </svg>
                            Pratinjau Gambar
                        </span>
                        <img src="" alt="Pratinjau Gambar" id="imagePreviewImg" >
                        @endif
                    </div>
            </div>
        </div>
    </div>
</div>


<div class="row">
    <!-- Task Info -->
    <div class="col-xs-12 col-sm-12 col-md-12">
        <div class="card">
            <div class="header">
                <h2 class="m-b-10">Data Barang</h2>
                <button type="button" class="btn btn-primary waves-effect" data-toggle="modal" data-target="#largeModal">PILIH BARANG</button>
            </div>
            <div class="body">
                <div class="table-responsive">
                    <table id="table-detail-item" class="table table-hover">
                        <thead>
                            <tr>
                                <th>Nama Barang</th>
                               
                                <th>Jumlah</th>
                                <th>Harga Beli</th>
                                <th>Sub Total</th>
                                <th>Tools</th>
                            </tr>
                        </thead>
                        <tbody>

                            @if (isset($data->detail_kirim_supplier))
                                @foreach ($data->detail_kirim_supplier as $detail)
                                    <tr>
                                        <td>
                                            {{ $detail->nama_item }} <small>({{ number_format($detail->item->biaya_item) }})</small>
                                        </td>
                                        
                                        <td>
                                            <input class="qty" name="jumlah[]" value="{{ $detail->qty }}"
                                                min="0" type="number">
                                            <input class="item_id" name="id[]" value="{{ $detail->item_id }}" hidden>
                                            <input class="harga" name="harga[]" value="{{ $detail->biaya_item }}" hidden>

                                            <input class="detail_garansi_id" name="detail_garansi_id[]" value="{{ $detail->detail_garansi_id }}" hidden>
                                            <input class="detail_retur_pembelian_id" name="detail_retur_pembelian_id[]" value="{{ $detail->detail_retur_pembelian_id }}" hidden>
                                            <input class="detail_retur_penjualan_id" name="detail_retur_penjualan_id[]" value="{{ $detail->detail_retur_penjualan_id }}" hidden>
                                        </td>
                                        <td>
                                            <input type="number" name="biaya_item[]" value="{{ $detail->biaya_item }}" class="biaya_item">
                                        </td>
                                        <td class="subTotal">
                                            {{ number_format($detail->qty * $detail->biaya_item) }}
                                        </td>

                                        <td>
                                            <button
                                                class="btn
                                                btn-danger item-delete"
                                                type="button">X</button>
                                        </td>
                                    </tr>
                                @endforeach
                            @endif
                            
                        </tbody>
                        <tfoot>
                            <tr>
                                <td colspan="3">
                                    
                                </td>
                                <td>
                                    <div class="text-right">
                                        <p style="font-weight:bold;">Grand Total : </p>
                                    </div>
                                </td>
                                <td>
                                    <div class="text-left">
                                        <p style="font-weight:bold;" id="grandTotal">0</p>
                                    </div>
                                </td>
                            </tr>
                        </tfoot>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <!-- #END# Task Info -->
</div>


<!-- Large Size -->
<div class="modal fade" id="largeModal" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="largeModalLabel">Pilih Barang</h4>
            </div>
            <div class="modal-body">
                <div class="table-responsive">
                    <table id="table-pilih-item" class="table table-hover">
                        <thead>
                            <tr>
                                <th>Nama Barang</th>
                                <th>Dari</th>
                                <th>Jumlah</th>
                                <th>Harga Beli</th>
                                <th>Tools</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($items as $item)
                                <tr>
                                    <td>{{ $item['nama_item'] }}</td>
                                    <td>

                                        @if (isset($item['garansi']))
                                            Garansi : <br>
                                            <a href="{{ route('garansi.show',$item['garansi']['id']) }}" target="_blank">{{ $item['garansi']['no_garansi'] }}</a>
                                        @elseif (isset($item['retur_pembelian']))
                                            Retur Pembelian : <br>
                                            <a href="{{ route('retur_pembelian.show',$item['retur_pembelian']['id']) }}" target="_blank">{{ $item['retur_pembelian']['no_retur'] }}</a> <br>
                                            @if (isset($item['supplier']))
                                                Supplier : <br>
                                                <b>{{ $item['supplier']['nama_supplier'] }} </b>
                                            @endif
                                        @elseif (isset($item['retur_penjualan']))
                                            Retur Penjualan : <br>
                                            <a href="{{ route('retur_penjualan.show',$item['retur_penjualan']['id']) }}" target="_blank">{{ $item['retur_penjualan']['no_retur'] }}</a>
                                        @endif

                                    </td>
                                    <td>
                                        <input class="qty"  value="{{ $item['qty'] ?? 0 }}" min="0" type="number">
                                        
                                    </td>
                                    <td>
                                        {{ number_format($item['biaya_item']) }}
                                    </td>

                                
                                    
                                    <td>
                                        <button class="btn btn-primary item-select" type="button" data-item="{{ json_encode($item) }}">Pilih</button>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                        <tfoot>
                            <tr>
                                <td colspan="2">
                                    
                                </td>
                                <td>
                                    <div class="text-right">
                                        <p style="font-weight:bold;">Grand Total : </p>
                                    </div>
                                </td>
                                <td>
                                    <div class="text-left">
                                        <p style="font-weight:bold;" id="grandTotal">0</p>
                                    </div>
                                </td>
                            </tr>
                        </tfoot>
                    </table>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-link waves-effect" data-dismiss="modal">CLOSE</button>
            </div>
        </div>
    </div>
</div>