@extends('layouts.layout')
@section('body_class', 'nav-md')
@section('body_content')
    <div class="container body">
        <div class="main_container">
            @include('includes.sidebar')
            <div class="right_col" role="main">
                <div class="page-title">
                    <div class="title_left">
                        <h3>Move Request</h3>
                    </div>
                    <div class="clearfix"></div>
                </div>

                <div class="x_panel">
                    <div class="x_content">
                        <div class="row">
                            <div class="form-horizontal">
                                <div class="col-xs-12 col-sm-6">
                                    <div class="form-group">
                                        <label class="control-label col-sm-3">ID :</label>
                                        <div class="col-sm-9">
                                            <input type="text" disabled value="{{ $stock_move->id }}"
                                                class="form-control" />
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <label class="control-label col-sm-3">Reference Number :</label>
                                        <div class="col-sm-9">
                                            <input type="text" disabled
                                                value="{{ $stock_move->request->reference_number }}" class="form-control" />
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="control-label col-sm-3">From Group Lokasi :</label>
                                        <div class="col-sm-9">
                                            <input type="text" disabled
                                                value="{{ $stock_move->request->actual_location_from_id ? $stock_move->request->fromLokasi->code : '-' }} - {{ $stock_move->request->actual_location_from_id ? $stock_move->request->fromLokasi->group_lokasi->name : '-' }}"
                                                class="form-control" />
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <label class="control-label col-sm-3">From Lokasi :</label>
                                        <div class="col-sm-9">
                                            <input type="text" disabled
                                                value="{{ $stock_move->request->actual_location_from_id ? $stock_move->request->fromLokasi->code : '-' }} - {{ $stock_move->request->actual_location_from_id ? $stock_move->request->fromLokasi->name : '-' }}"
                                                class="form-control" />
                                            <input type="hidden" id="from_lokasi_id"
                                                value="{{ $stock_move->request->actual_location_to_id ? $stock_move->request->fromLokasi->id : '-' }}" />
                                        </div>
                                    </div>
                                </div>

                                <div class="col-xs-12 col-sm-6">
                                    <div class="form-group">
                                        <label class="control-label col-sm-3">Notes :</label>
                                        <div class="col-sm-9">
                                            <textarea class="form-control" disabled rows="4">{{ $stock_move->request->notes }}</textarea>
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <label class="control-label col-sm-3">To Group Lokasi :</label>
                                        <div class="col-sm-9">
                                            <input type="text" disabled
                                                value="{{ $stock_move->request->actual_location_to_id ? $stock_move->request->toLokasi->code : '-' }} - {{ $stock_move->request->actual_location_to_id ? $stock_move->request->toLokasi->group_lokasi->name : '-' }}"
                                                class="form-control" />
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <label class="control-label col-sm-3">To Lokasi :</label>
                                        <div class="col-sm-9">
                                            <input type="text" disabled
                                                value="{{ $stock_move->request->actual_location_to_id ? $stock_move->request->toLokasi->code : '-' }} - {{ $stock_move->request->actual_location_to_id ? $stock_move->request->toLokasi->name : '-' }}"
                                                class="form-control" />
                                            <input type="hidden" id="lokasi_id"
                                                value="{{ $stock_move->request->actual_location_to_id ? $stock_move->request->toLokasi->id : '-' }}" />
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="col-xs-12">
                                <hr>
                                <table class="table table-bordered table-striped">
                                    <thead>
                                        <tr>
                                            <th class="text-center">Brand</th>
                                            <th class="text-center">Fragment</th>
                                            <th class="text-center">Total</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @php
                                            $summaries = $stock_move
                                                ->gold_detail()
                                                ->groupBy('id_pecahan_emas_global')
                                                ->select(['*', DB::raw('count(id) as count')])
                                                ->get();
                                        @endphp
                                        @foreach ($summaries as $summary)
                                            <tr>
                                                <td class="text-center">{{ $summary->gold_detail->brand_emas->brand }}</td>
                                                <td class="text-center">{{ $summary->gold_detail->pecahan }} Gram {{ $summary->gold_detail->special_name }}</td>
                                                <td class="text-center">{{ $summary->count }}</td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>

                            <div class="col-xs-12">
                                <hr>

                                <table class="table table-bordered table-striped">
                                    <thead>
                                        <tr>
                                            <th class="text-center">ID</th>
                                            <th class="text-center">Brand</th>
                                            <th class="text-center">Fragment</th>
                                            <th class="text-center">Certificate</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach ($stock_move->gold_detail as $gold)
                                            <tr>
                                                <td class="text-center">{{ $gold->id }}</td>
                                                <td class="text-center">{{ $gold->gold_detail->brand_emas->brand }}</td>
                                                {{-- <td class="text-center">{{ $gold->gold_detail->pecahan }} Gram {{ $gold->gold_detail->special_name }}</td> --}}
                                                <td class="text-center">
                                                    <span class="pecahan-text">{{ $gold->gold_detail->pecahan }} Gram {{ $gold->gold_detail->special_name }}</span>
                                                    <br>
                                                    @if (empty($gold->certificate))
                                                        <button type="button" class="btn btn-default btn-xs edit-brand-btn"
                                                            data-id="{{ $gold->id }}"
                                                            data-gold-detail-id="{{ $gold->gold_detail->id }}"
                                                            data-brand-id="{{ $gold->gold_detail->brand_emas->id }}"
                                                            data-brand-name="{{ $gold->gold_detail->brand_emas->brand }}"
                                                            data-pecahan="{{ $gold->gold_detail->pecahan }}"
                                                            data-special-name="{{ $gold->gold_detail->special_name }}"
                                                            style="font-size:12px; margin-top:5px;">
                                                            <i class="fa fa-pencil" aria-hidden="true"></i> Edit
                                                    </button>
                                                    @endif

                                                </td>
                                                <td class="text-center">
                                                    @if (!empty($gold->certificate))
                                                        <img src="data:image/png;base64,{!! DNS2D::getBarcodePNG($gold->certificate, 'QRCODE', 2, 2) !!}"
                                                            alt="barcode" /> <br>
                                                        <small>{{ $gold->certificate }}</small>
                                                    @else
                                                        <div class="input-group certificate-group">
                                                            <input type="text" class="form-control certificate-input"
                                                                name="certificate" autocomplete="off"
                                                                data-id="{{ $gold->id }}">
                                                            <span class="input-group-btn">
                                                                <button type="button" class="btn btn-default check-btn"
                                                                    data-id="{{ $gold->id }}"
                                                                    style="font-size:14px;"><i class="fa fa-check"
                                                                        aria-hidden="true"></i></button>
                                                                <button type="button" class="btn btn-default cancel-btn"
                                                                    data-id="{{ $gold->id }}"
                                                                    style="font-size:14px; display: none;"><i
                                                                        class="fa fa-times" aria-hidden="true"></i></button>
                                                            </span>
                                                        </div>
                                                    @endif
                                                </td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                                @if ($stock_move->status == 'pending')
                                    <div class="col-xs-12 text-right">
                                        <button type="button" class="btn btn-warning cancel-all-btn"
                                            style="margin-top: 10px;">Clear</button>
                                        <button type="button" class="btn btn-primary submit-all-btn"
                                            style="margin-top: 10px;">Submit</button>
                                        <div class="loading hidden" style="margin-top: 10px;">
                                            <i class="fa fa-spinner fa-pulse"></i>
                                        </div>
                                    </div>
                                @endif
                            </div>

                            <div class="col-xs-12">
                                <hr>
                                <h5 style="margin-bottom:10px; font-weight:700">LOG</h5>

                                <table class="table table-bordered table-striped">
                                    <thead>
                                        <tr>
                                            <th class="text-center">ID</th>
                                            <th class="text-center">Date</th>
                                            <th class="text-center">User</th>
                                            <th class="text-center">Log</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach ($stock_move->request->log as $log)
                                            <tr>
                                                <td class="text-center">{{ $log->id }}</td>
                                                <td class="text-center">{{ $log->created_at }}</td>
                                                <td class="text-center">{{ $log->user->name }}</td>
                                                <td class="text-center">{{ $log->log }}</td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                            @if ($logined_user->is_supervisor == '1' && $stock_apply == '0' && $stock_move->request->status == 'approved')
                            <div class="col-xs-12">
                                <div class="form-group text-center">
                                    <div class="loading hidden"><i class="fa fa fa-spinner fa-pulse"></i></div>
                                        <div class="submit">
                                            <button class="btn btn-danger btn-cancel" type="button" onclick="cancel_popup()">
                                                <i class="fa fa-trash" aria-hidden="true"></i> Cancel
                                            </button>       
                                        </div>
                                </div>
                            </div>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal fade" id="editBrandModal" tabindex="-1" role="dialog" aria-labelledby="editBrandModalLabel">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <form id="editBrandForm">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                    <span aria-hidden="true">&times;</span>
                                </button>
                                <h4 class="modal-title" id="editBrandModalLabel">Edit Brand & Fragment</h4>
                            </div>
                            <div class="modal-body">
                                <input type="hidden" name="gold_id" id="edit_gold_id">
                                <input type="hidden" name="gold_detail_id" id="edit_gold_detail_id">

                                <div class="form-group">
                                    <label for="edit_brand_id">Brand</label>
                                    <select class="form-control" name="brand_id" id="edit_brand_id" required>
                                        {{-- isi opsi dari controller, contoh: --}}
                                        @foreach ($brands as $brand)
                                            <option value="{{ $brand->id }}">{{ $brand->brand }}</option>
                                        @endforeach
                                    </select>
                                </div>

                                <div class="form-group">
                                    <label for="edit_pecahan">Pecahan (Gram)</label>
                                    <input type="number" step="0.01" class="form-control" name="pecahan" id="edit_pecahan" readonly>
                                </div>

                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-default" data-dismiss="modal">Batal</button>
                                <button type="submit" class="btn btn-primary">Simpan</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
            @include('includes.footer')
        </div>
    </div>
@endsection

@section('scripts')
    <script type="text/javascript">
        $(document).on('click', '.edit-brand-btn', function () {
            var id = $(this).data('id');
            var goldDetailId = $(this).data('gold-detail-id');
            var brandId = $(this).data('brand-id');
            var pecahan = $(this).data('pecahan');
            var specialName = $(this).data('special-name');

            $('#edit_gold_id').val(id);
            $('#edit_gold_detail_id').val(goldDetailId);
            $('#edit_brand_id').val(brandId);
            $('#edit_pecahan').val(pecahan);
            $('#edit_special_name').val(specialName);

            $('#editBrandModal').modal('show');
        });

        // submit form via AJAX
        $('#editBrandForm').on('submit', function (e) {
            e.preventDefault();

            var $form = $(this);
            var $submitBtn = $form.find('button[type="submit"]');
            $submitBtn.prop('disabled', true).text('Menyimpan...');

            $.ajax({
                url: 'edit_brand', // sesuaikan dengan route-mu
                method: 'POST',
                data: {
                    _token: $('meta[name="csrf-token"]').attr('content'),
                    gold_id: $('#edit_gold_id').val(),
                    gold_detail_id: $('#edit_gold_detail_id').val(),
                    brand_id: $('#edit_brand_id').val(),
                    pecahan: $('#edit_pecahan').val(),
                },
                  success: function (res) {
                    $('#editBrandModal').modal('hide');
                    location.reload();
                },
                error: function (xhr) {
                    alert('Gagal menyimpan perubahan.');
                    $submitBtn.prop('disabled', false).text('Simpan');
                }
            });
        });
        $(document).ready(function() {
            var tempData = {};
            var existingCertificates = [];

            // Populate existing certificates
            @foreach ($stock_move->gold_detail as $gold)
                @if (!empty($gold->certificate))
                    existingCertificates.push("{{ $gold->certificate }}");
                @endif
            @endforeach

            // Handle check button click
            $(".check-btn").on("click", function() {
                var id = $(this).data('id');
                var inputField = $(".certificate-input[data-id='" + id + "']");
                var value = inputField.val().replace(/\s/g, "");
                var checkButton = $(".check-btn[data-id='" + id + "']");
                var cancelButton = $(".cancel-btn[data-id='" + id + "']");

                if (!value) {
                    alert("Masukan Sertifikat Terlebih Dahulu.");
                    return;
                }

                if (Object.values(tempData).includes(value) || existingCertificates.includes(value)) {
                    alert("Sertifikat sudah ada");
                    return;
                }

                // Add certificate to tempData
                tempData[id] = value;

                // Disable input and toggle buttons
                inputField.prop("disabled", true);
                checkButton.hide();
                cancelButton.show();
            });

            // Handle cancel button click
            $(".cancel-btn").on("click", function() {
                var id = $(this).data('id');
                var inputField = $(".certificate-input[data-id='" + id + "']");
                var checkButton = $(".check-btn[data-id='" + id + "']");
                var cancelButton = $(".cancel-btn[data-id='" + id + "']");

                // Remove certificate from tempData
                delete tempData[id];

                // Enable input and toggle buttons back
                inputField.prop("disabled", false).val('');
                checkButton.show();
                cancelButton.hide();
            });

            // Hide cancel buttons initially
            $(".cancel-btn").hide();

            // Handle clear all button click
            $(".cancel-all-btn").on("click", function() {
                $(".certificate-input").each(function() {
                    $(this).prop("disabled", false).val('');
                });

                tempData = {};

                $(".check-btn").show();
                $(".cancel-btn").hide();
            });

            // Function to process certificates one by one
            function processCertificate(index, certificatesData) {
                if (index >= certificatesData.length) {
                    setTimeout(function() {
                        location.reload();
                    }, 2500);
                    return;
                }

                var certificate = certificatesData[index];

                $.ajax({
                    url: certificate.url,
                    method: "POST",
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    data: {
                        certificates: JSON.stringify([certificate]),
                        id: certificate.id,
                        id_detail: certificate.id_detail,
                        from_lokasi_id: certificate.from_lokasi_id
                    },
                    success: function(response) {
                        processCertificate(index + 1, certificatesData);
                    },
                    error: function(response) {
                        var response = response.responseJSON;
                        alert(response.error + " " + certificate.certificate);

                        $(".submit-all-btn").show();
                        $(".cancel-all-btn").show();
                        $(".loading").addClass('hidden');
                    }
                });
            }

            // Handle submit all button click
            $(".submit-all-btn").on("click", function() {
                var certificatesData = [];
                var fromLokasiId = $('#from_lokasi_id').val();

                Object.keys(tempData).forEach(function(id) {
                    certificatesData.push({
                        id: "{{ $stock_move->id }}",
                        id_detail: id,
                        certificate: tempData[id],
                        url: '{{ $stock_move->id }}/apply_certificate',
                        from_lokasi_id: fromLokasiId // Add from_lokasi_id here
                    });
                });

                if (certificatesData.length > 0) {
                    $(".submit-all-btn").hide();
                    $(".cancel-all-btn").hide();
                    $(".loading").removeClass("hidden");

                    processCertificate(0, certificatesData);
                } else {
                    alert("No certificates to submit.");
                }
            });

            // Allow pressing Enter to trigger the "Check" button
            $(".certificate-input").on("keypress", function(e) {
                if (e.which == 13) { // Enter key code
                    e.preventDefault(); // Prevent form submission or default behavior
                    var id = $(this).data('id');
                    $(".check-btn[data-id='" + id + "']").trigger("click");
                }
            });
        });

        function cancel_popup() {
        if (confirm("Anda yakin ingin membatalkan move request ini?")) {
            $(".loading").removeClass("hidden");

            $.ajax({
                url: '{{ route("cancel_process", ["id" => $stock_move->id]) }}',
                method: "POST",
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                data: {
                    id: "{{ $stock_move->id }}"
                },
                success: function(response) {
                    alert("Berhasil cancel move request.");
                    window.location.href = "{{ route('stock/move/apply_certificate/detail', ['id' => $stock_move->id]) }}";
                },
                error: function(response) {
                    $(".loading").addClass("hidden");
                    let errorMsg = response.responseJSON?.error || "Terjadi kesalahan.";
                    alert("Gagal cancel: " + errorMsg);
                }
            });
            }
        }

    </script>

@endsection