@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>Apply Certificate</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_buy->id }}"
                                                class="form-control" />
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <label class="control-label col-sm-3">PO Number :</label>
                                        <div class="col-sm-9">
                                            <input type="text" disabled value="{{ $stock_buy->po_number }}"
                                                class="form-control" />
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="control-label col-sm-3">DO Number :</label>
                                        <div class="col-sm-9">
                                            <input type="text" disabled value="{{ $stock_buy->do_number }}"
                                                class="form-control" />
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <label class="control-label col-sm-3">Invoice :</label>
                                        <div class="col-sm-9">
                                            <input type="text" disabled value="{{ $stock_buy->invoice }}"
                                                class="form-control" />
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <label class="control-label col-sm-3">Date :</label>
                                        <div class="col-sm-9">
                                            <input type="text" class="form-control" value="{{ $stock_buy->date }}"
                                                disabled />
                                        </div>
                                    </div>
                                    @if ($stock_buy->request->actual_location_id)
                                        <div class="form-group">
                                            <label class="control-label col-sm-3">Group Lokasi :</label>
                                            <div class="col-sm-9">
                                                <input type="text" disabled
                                                    value="{{ $stock_buy->request->lokasi->group_lokasi->code }} - {{ $stock_buy->request->lokasi->group_lokasi->name }}"
                                                    class="form-control" />
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="control-label col-sm-3">Lokasi :</label>
                                            <div class="col-sm-9">
                                                <input type="text" readonly
                                                    value="{{ $stock_buy->request->lokasi->code }} - {{ $stock_buy->request->lokasi->name }}"
                                                    class="form-control" />
                                                <input type="hidden" id="lokasi_id"
                                                    value="{{ $stock_buy->request->lokasi->id }}" />
                                            </div>
                                        </div>
                                    @endif
                                </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="6">{{ $stock_buy->request->notes }}</textarea>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-xs-12">
                                <div class="col-xs-12 text-right">
                                    <a href="{{ url('stock/buy/module/buy_certificate_detail_export/' . $stock_buy->id) }}" class="btn btn-success">Excel</a>
                                </div>
                                <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">Production Year</th>
                                            <th class="text-center">Certificate</th>
                                            <th class="text-center">PLU Code</th>
                                            <th></th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach ($stock_buy->gold_detail as $gold)
                                            <tr>
                                                <td class="text-center">{{ $gold->id }}</td>
                                                <td class="text-center brand-emas">{{ $gold->gold_detail->brand_emas->brand }}</td>
                                                <td class="text-center">{{ $gold->gold_detail->pecahan }} Gram {{ ucwords(str_replace('_', ' ', $gold->gold_detail->special_name)) }}</td>
                                                <td class="text-center">
                                                    @if ($gold->gold_detail->brand_emas->id == '1')
                                                        @if (empty($gold->certificate))
                                                            <select class="form-control input-goldtahun" id="input-goldtahun" data-id="{{ $gold->id }}" data-brand="{{ $gold->gold_detail->brand_emas->brand }}">
                                                                <option value="">Pilih Tahun</option>
                                                                @foreach(array_reverse(range(2019, now()->year)) as $year)
                                                                    <option value="{{ $year }}">{{ $year }}</option>
                                                                @endforeach
                                                            </select>
                                                        @else
                                                            {{ $gold->year }}
                                                        @endif
                                                    @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>
                                                <td class="text-center">
                                                    @if (!empty($gold->certificate))
                                                        {{ $gold->stock_character ? $gold->stock_character->plu_code : '-' }}
                                                    @endif
                                                </td>
                                                <td class="text-center">
                                                    @if (!empty($gold->certificate))
                                                        <a class="btn btn-default btn-xs"
                                                            href="{{ route('stock/detail/print_barcode', ['id_stock_detail' => $gold->id]) }}"
                                                            target="_blank"><i class="fa fa-print"
                                                                aria-hidden="true"></i></a>
                                                    @endif
                                                </td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                            @if ($stock_buy->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>
                </div>
            </div>
        </div>
        @include('includes.footer')
    </div>
    </div>
@endsection

@section('scripts')
<script type="text/javascript">
    $(document).ready(function() {
        var tempData = {};
        var existingCertificates = [];

        @foreach ($stock_buy->gold_detail as $gold)
            @if (!empty($gold->certificate))
                existingCertificates.push("{{ $gold->certificate }}");
            @endif
        @endforeach

        // Function to handle certificate check
        function handleCertificateCheck(id) {
            var inputField = $(".certificate-input[data-id='" + id + "']");
            var yearField = $(".certificate-input[data-id='" + id + "']").closest("tr").find(".input-goldtahun");
            var year = yearField.val();
            var value = inputField.val();
            var checkButton = $(".check-btn[data-id='" + id + "']");
            var cancelButton = $(".cancel-btn[data-id='" + id + "']");
            var brand = $(".certificate-input[data-id='" + id + "']").closest("tr").find(".brand-emas").text().trim();

            if (brand === "Antam Certieye" && !year) {
                alert("Masukan Tahun Produksi Terlebih Dahulu untuk brand Antam Certieye.");
                return;
            }
            if (!value) {
                alert("Masukan Sertifikat Terlebih Dahulu.");
                return;
            }

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

            tempData[id] = value;

            inputField.prop("disabled", true);
            yearField.prop("disabled", true);
            checkButton.hide();
            cancelButton.show();
        }

        // Event listener for check button click
        $(".check-btn").on("click", function() {
            var id = $(this).data('id');
            handleCertificateCheck(id);
        });

        // Event listener for cancel button click
        $(".cancel-btn").on("click", function() {
            var id = $(this).data('id');
            var inputField = $(".certificate-input[data-id='" + id + "']");
            var yearField = $(".certificate-input[data-id='" + id + "']").closest("tr").find(".input-goldtahun");
            var checkButton = $(".check-btn[data-id='" + id + "']");
            var cancelButton = $(".cancel-btn[data-id='" + id + "']");

            delete tempData[id];

            inputField.prop("disabled", false).val('');
            yearField.prop("disabled", false).val('');
            checkButton.show();
            cancelButton.hide();
        });

        $(".cancel-btn").hide();

        // Event listener for "Enter" key press on input field
        $(".certificate-input").on("keypress", function(e) {
            if (e.which == 13) {  // 13 is the key code for "Enter"
                var id = $(this).data('id');
                handleCertificateCheck(id);
                e.preventDefault(); // Prevent form submission on Enter
            }
        });

        // Submit all certificates
        $(".submit-all-btn").on("click", function() {
            if (Object.keys(tempData).length > 0) {
                var lokasiId = $("#lokasi_id").val();
                var certificatesData = [];

                $(this).hide();
                $(".cancel-all-btn").hide();
                $(".loading").removeClass('hidden');

                Object.keys(tempData).forEach(function(key) {
                    var yearField = $(".input-goldtahun[data-id='" + key + "']").val();

                    certificatesData.push({
                        id: "{{ $stock_buy->id }}",
                        id_detail: key,
                        certificate: tempData[key],
                        gold_tahun: yearField
                    });
                });

                function processCertificate(index) {
                    if (index >= certificatesData.length) {
                        setTimeout(function() {
                            location.reload();
                        }, 2500);
                        return;
                    }

                    var certificate = certificatesData[index];

                    $.ajax({
                        url: '{{ url('stock/buy/module/apply_certificate/' . $stock_buy->id . '/process') }}',
                        method: "POST",
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        },
                        data: {
                            certificates: JSON.stringify([certificate]),
                            lokasi_id: lokasiId
                        },
                        success: function(response) {
                            processCertificate(index + 1);
                        },
                        error: function(response) {
                            var response = response.responseJSON;
                            alert(response.error + " " + certificate.certificate);

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

                processCertificate(0);

            } else {
                alert("Sertifikat Tidak Boleh Kosong");
            }
        });


        $(".cancel-all-btn").on("click", function() {
            $(".submit-all-btn").show();
            $(".loading").addClass('hidden');

            $(".certificate-input").prop("disabled", false).val('');
            $(".check-btn").show();
            $(".cancel-btn").hide();

            tempData = {};
        });
    });
</script>


@endsection