@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><i class="fa fa-file-text"></i> Sell Apply Certificate Request
                            {{ $request_list->request->spk_number }}</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="{{ $request_list->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="{{ $request_list->request->reference_number }}" class="form-control" />
                                    </div>
                                </div>
                                --}}

                                    <div class="form-group">
                                        <label class="control-label col-sm-3">Status :</label>
                                        <div class="col-sm-9">
                                            <input type="text" disabled
                                                value="{{ \App\Models\Stock_request_sell_model::STATUS[$request_list->request->status]['TEXT'] }}"
                                                class="form-control" />
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="control-label col-sm-3">Goup Lokasi :</label>
                                        <div class="col-sm-9">
                                            <input type="text" disabled
                                                value="{{ $request_list->request->actual_location_id ? $request_list->request->lokasi->group_lokasi->code : '-' }} - {{ $request_list->request->actual_location_id ? $request_list->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" disabled
                                                value="{{ $request_list->request->actual_location_id ? $request_list->request->lokasi->code : '-' }} - {{ $request_list->request->actual_location_id ? $request_list->request->lokasi->name : '-' }}"
                                                class="form-control" />
                                            <input type="hidden" name="lokasi_id" id="lokasi_id"
                                                value="{{ $request_list->request->actual_location_id ? $request_list->request->lokasi->id : '-' }}" />
                                        </div>
                                    </div>
                                </div>

                                <div class="col-xs-12 col-sm-6">
                                    <div class="form-group">
                                        <label class="control-label col-sm-3">Customer :</label>
                                        <div class="col-sm-9">
                                            <input type="text" class="form-control" disabled
                                                value="{{ $request_list->customer }}" />
                                        </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" disabled
                                                value="{{ $request_list->date }}" />
                                        </div>
                                    </div>

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

                                    <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">{{ $request_list->notes }}</textarea>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="col-xs-12">
                                <hr>
                                @if ($request_list->status == 'pending')
                                    <div class="col-xs-12 text-right">
                                        <a href="{{ url('stock/sell/module/sell_certificate_detail_export/' . $request_list->id) }}" class="btn btn-success">Excel</a>
                                    </div>    
                                @endif
                                <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>
                                            <th class="text-center">PLU Code</th>
                                            <th></th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach ($request_list->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</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->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_pecahan_emas_global_detail]) }}"
                                                            target="_blank"><i class="fa fa-print"
                                                                aria-hidden="true"></i></a>
                                                    @endif
                                                </td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                                @if ($request_list->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

                                @if ($request_list->request->status == \App\Models\Stock_request_sell_model::STATUS['done']['ID'] && $expired == 0 && ($user == 4 || $user == 1))
                                    <div class="col-xs-12 text-center">
                                            <button class="btn btn-danger btn-void" type="button"><i
                                                        class="fa fa-trash" aria-hidden="true"></i> Void</button>
                                    </div>
                                @endif

                                <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 ($request_list->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>
                            </div>
                        </div>
                    </div>
                </div>
                @include('includes.footer')
            </div>
        </div>
    @endsection

    @section('scripts')
    <script type="text/javascript">
    $(".btn-void").on("click", function() {
                        $("#form").find(".submit").addClass("hidden");
                        $("#form").find(".loading").removeClass("hidden");

                        $.ajax({
                            url: '{{ route("stock/sell/request/void_sell", $request_list->id) }}',
                            
                            method: "POST",
                            headers: {
                                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                            },
                            data: $("#form").serialize(),
                            success: function(response) {
                                alert("Data saved, page will be refresh");
                                location.reload();
                            },
                            error: function(response) {
                                var response = response.responseJSON;
                                alert(response.error);
                                $("#form").find(".submit").removeClass('hidden');
                                $("#form").find(".loading").addClass('hidden');
                            }
                        });
                        return false;
                    })
        $(document).ready(function() {
            var tempData = {}; // Temporary data storage for certificates
            var existingCertificates = []; // Store existing certificates
    
            // Fetch existing certificates on page load
            @foreach ($request_list->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();
                var checkButton = $(".check-btn[data-id='" + id + "']");
                var cancelButton = $(".cancel-btn[data-id='" + id + "']");
    
                // Check if input is empty
                if (!value) {
                    alert("Masukan Sertifikat Terlebih Dahulu.");
                    return;
                }
    
                // Check if the certificate already exists in tempData or existingCertificates
                if (Object.values(tempData).includes(value) || existingCertificates.includes(value)) {
                    alert("Sertifikat sudah ada");
                    return;
                }
    
                // Add certificate to tempData if no duplicate exists
                tempData[id] = value;
    
                // Disable input and toggle buttons
                inputField.prop("disabled", true);
                checkButton.hide();
                cancelButton.show();
            });
    
            // Handle Enter key press in certificate input
            $(".certificate-input").on("keypress", function(e) {
                if (e.which === 13) { // Key code 13 is Enter
                    var id = $(this).data('id');
                    $(".check-btn[data-id='" + id + "']").trigger('click');
                }
            });
    
            // 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(''); // Clear the input
                checkButton.show();
                cancelButton.hide();
            });
    
            $(".cancel-btn").hide();
    
            // Handle clear all button click
            $(".cancel-all-btn").on("click", function() {
                // Clear all inputs in the form
                $(".certificate-input").each(function() {
                    $(this).prop("disabled", false).val(''); // Enable inputs and clear values
                });
    
                // Reset temporary data
                tempData = {};
    
                // Show check buttons and hide cancel buttons
                $(".check-btn").show();
                $(".cancel-btn").hide();
            });
    
            // Handle submit-all button click
            $(".submit-all-btn").on("click", function() {
                if (Object.keys(tempData).length > 0) {
                    var lokasiId = $("#lokasi_id").val();
                    var certificatesData = [];
    
                    // Hide submit and cancel buttons, show loading spinner
                    $(this).hide();
                    $(".cancel-all-btn").hide();
                    $(".loading").removeClass('hidden');
    
                    Object.keys(tempData).forEach(function(key) {
                        certificatesData.push({
                            id: "{{ $request_list->id }}",
                            id_detail: key,
                            certificate: tempData[key]
                        });
                    });
    
                    // Function to process certificates one by one
                    function processCertificate(index) {
                        if (index >= certificatesData.length) {
                            // All certificates processed, reload the page
                            setTimeout(function() {
                                location.reload();
                            }, 2500);
                            return;
                        }
    
                        var certificate = certificatesData[index];
    
                        $.ajax({
                            url: '{{ url('stock/sell/module/apply_certificate/' . $request_list->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) {
                                // Process the next certificate
                                processCertificate(index + 1);
                            },
                            error: function(response) {
                                var response = response.responseJSON;
                                alert(response.error + " " + certificate.certificate);
    
                                // Show buttons and hide loading if an error occurs
                                $(".submit-all-btn").show();
                                $(".cancel-all-btn").show();
                                $(".loading").addClass('hidden');
                            }
                        });
                    }
    
                    // Start processing certificates from the first one
                    processCertificate(0);
    
                } else {
                    alert("Sertifikat Tidak Boleh Kosong");
                }
            });
    
            // Handle clear all button click (reset form)
            $(".cancel-all-btn").on("click", function() {
                // Show submit button and hide loading
                $(".submit-all-btn").show();
                $(".loading").addClass('hidden');
    
                // Enable certificate inputs, clear values, reset UI
                $(".certificate-input").prop("disabled", false).val('');
                $(".check-btn").show();
                $(".cancel-btn").hide();
    
                // Reset temporary data
                tempData = {};
            });
        });
    </script>
    
    @endsection