@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">
        <div class="card-body p-3">
            <div class="row gx-4">
                <div class="col-lg">
                    <div class="nav-wrapper">
                        {{-- button back --}}
                        <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</span>
                        </button>
                        {{-- check authorize edit --}}
                        @if ($authorize->edit == '1')
                            {{-- button save --}}
                            <button class="btn btn-primary mb-0" id="save-btn">
                                <i class="fas fa-floppy-disk me-1"></i>
                                <span class="font-weight-bold">Simpan</span>
                            </button>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="container-fluid py-4">
        <div class="row">
            <div class="col-md-12">
                <div class="card p-4 mb-3">
                    <p class="text-uppercase text-sm">Edit {{ $title_menu }}</p>
                    @foreach ($list_header as $loker)
                        <input type="hidden" id="id" name="id_pintu" value="{{ $loker->id }}">
                        <div class="mb-3">
                            <label for="jenis_loker" class="form-label">Jenis Loker</label>
                            <input type="text" class="form-control" id="jenis_loker" name="idjenisloker"
                                value="{{ $loker->nama_loker }}" readonly>
                        </div>
                        <div class="mb-3">
                            <label for="gedung" class="form-label">Gedung</label>
                            <input type="text" class="form-control" id="gedung" name="idgedung"
                                value="{{ $loker->nama_gedung }}" readonly>
                        </div>
                        <div class="mb-3">
                            <label for="lokasi" class="form-label">Lokasi</label>
                            <input type="text" class="form-control" id="lokasi" name="idlokasi"
                                value="{{ $loker->nama_lokasi }}" readonly>
                        </div>
                        <div class="mb-3">
                            <label for="kode_lemari" class="form-label">Kode Loker</label>
                            <input type="text" class="form-control" id="kode_lemari" name="kode_lemari"
                                value="{{ $loker->kode_lemari }}" readonly>
                        </div>
                        <div class="mb-3">
                            <label for="jumlah_pintu" class="form-label">Jumlah Pintu</label>
                            <input type="text" class="form-control" id="jumlah_pintu" name="jumlah_pintu"
                                value="{{ $loker->jumlah_pintu }}" readonly>
                        </div>
                    @endforeach
                    <div class="card-body">
                        <p class="text-uppercase text-sm">Edit Master Pintu</p>
                        <hr class="horizontal dark mt-0">
                        <div class="row">
                            <form id="formPintu" method="POST" action="/mslokr/update/{{ $list_kunci[0]->id }}">
                                @csrf
                                @method('PUT')
                                <table class="table table-bordered">
                                    <thead>
                                        <tr>
                                            <th>Kode Pintu</th>
                                            <th>Quantity Default</th>
                                            <th>Quantity Stock</th>
                                            <th>Quantity User</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach ($list_kunci as $pintu)
                                            <tr>
                                                <!-- Kode Pintu -->
                                                <td>
                                                    <input name="kunci[{{ $pintu->kodepintu }}][kodepintu]"
                                                        id="kodepintu_{{ $pintu->kodepintu }}" class="form-control"
                                                        type="text" value="{{ $pintu->kodepintu }}" readonly>
                                                </td>
                                                <!-- Quantity Default -->
                                                <td>
                                                    <input name="kunci[{{ $pintu->kodepintu }}][qty_default]"
                                                        id="qty_default_{{ $pintu->kodepintu }}" class="form-control"
                                                        type="number" value="{{ $pintu->qty_default }}">
                                                </td>
                                                <!-- Quantity Stock -->
                                                <td>
                                                    <input name="kunci[{{ $pintu->kodepintu }}][qty_stock]"
                                                        id="qty_stock_{{ $pintu->kodepintu }}" class="form-control"
                                                        type="number" value="{{ $pintu->qty_stock }}">
                                                </td>
                                                <!-- Quantity User -->
                                                <td>
                                                    <input name="kunci[{{ $pintu->kodepintu }}][qty_user]"
                                                        id="qty_user_{{ $pintu->kodepintu }}" class="form-control"
                                                        type="number" value="{{ $pintu->qty_user }}">
                                                </td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                                {{-- <button class="btn" type="submit">TEST</button> --}}
                                {{-- </form> --}}
                        </div>
                    </div>
                </div>
                <hr class="horizontal dark">
            </div>
        </div>
    </div>

    {{-- AJAX Script --}}
    <script>
        var listK = [];
        var id = 0;
        // $(document).ready(function() {
        //     // ... kode lain ...
        // });

        document.getElementById('save-btn').addEventListener('click', function(e) {
            e.preventDefault();
            listK = [];
            // Ambil semua input dari form
            // let form = document.getElementById('formPintu');
            // let formData = new FormData(form);
            // for (let [key, value] of formData.entries()) {
            //     console.log(key + ': ' + value);
            // }

            var jmlArray = $('input[name="jumlah_pintu"]').val();
            var idPintu = $('input[name="id_pintu"]').val();

            console.log("idPintu", idPintu);

            var dataPintu = <br />
<b>Warning</b>:  Undefined variable $list_kunci in <b>/opt/lampp/htdocs/msjlocker/resources/views/master/mslokr/edit.blade.php</b> on line <b>140</b><br />
;
            if (dataPintu.length > 0) {
                for (var index in dataPintu) {
                    var kodePintu = $('input[name="kunci[' + dataPintu[index].kodepintu + '][kodepintu]"]').val();
                    var qtyDefault = $('input[name="kunci[' + dataPintu[index].kodepintu + '][qty_default]"]')
                        .val();
                    var qtyStock = $('input[name="kunci[' + dataPintu[index].kodepintu + '][qty_stock]"]').val();
                    var qtyUser = $('input[name="kunci[' + dataPintu[index].kodepintu + '][qty_user]"]').val();

                    var data = {
                        kodepintu: kodePintu,
                        qty_default: qtyDefault,
                        qty_stock: qtyStock,
                        qty_user: qtyUser
                    };

                    listK.push(data);
                }
            } else {
                console.log("Tidak ada data pintu");
            }

            console.log("list K", listK);

            var kirimData = {
                // _method: 'PUT', // Spoofing PUT method
                detail: listK
            };

            console.log('iki', kirimData);

            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')

                }
            });
            var url = '{{ route('mslokr.update', ':id') }}';
            url = url.replace(':id', idPintu);
            $.ajax({
                url: url,
                type: "PUT", // Use POST method
                data: JSON.stringify(kirimData),
                contentType: "application/json",
                success: function(response) {
                    Swal.fire({
                        icon: 'success',
                        title: 'Success!',
                        text: 'Data telah berhasil di update',
                        confirmButtonText: 'OK'
                        //window.location.href = response.redirect;
                    }).then((result) => {
                        if (result.isConfirmed) {
                            window.location.href = "/msjlocker/mslokr";
                        }
                    });
                },
                error: function(jqXHR, textStatus, errorThrown) {
                    console.log(textStatus, errorThrown);
                }
            });
        });
    </script>
@endsection


@push('js')
    <script>
        $(document).ready(function() {});
    </script>
@endpush