@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>Buy Request</h3>
                    </div>
                    <div class="clearfix"></div>
                </div>

                <form id="form" class="form-horizontal">
                    <input type="hidden" name="id" value="{{ $request->id }}">
                    <input type="hidden" name="gold" value="" class="input-gold">

                    <div class="x_panel">
                        <div class="x_content">
                            <div class="row">
                                <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->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->reference_number }}"
                                                class="form-control" />
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <label class="control-label col-sm-3">Supplier :</label>
                                        <div class="col-sm-9">
                                            <input type="text" name="supplier" class="form-control"
                                                placeholder="Supplier Name" />
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <label class="control-label col-sm-3">PO Notes :</label>
                                        <div class="col-sm-9">
                                            <input type="text" name="fpp_note" 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" name="invoice" class="form-control"
                                                placeholder="Invoice Number *optional" />
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <label class="control-label col-sm-3">Date :</label>
                                        <div class="col-sm-9">
                                            <input type="date" name="date" class="form-control"
                                                value="{{ date('Y-m-d') }}" />
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <label class="control-label col-sm-3">Group Lokasi :</label>
                                        <div class="col-sm-9">
                                            <input type="text" disabled
                                                value="{{ $request->lokasi->group_lokasi->code }} - {{ $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->lokasi->code }} - {{ $request->lokasi->name }}"
                                                class="form-control" />
                                            <input type="hidden" id="lokasi_id" value="{{ $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">Notes :</label>
                                        <div class="col-sm-9">
                                            <textarea class="form-control" disabled rows="6">{{ $request->notes }}</textarea>
                                        </div>
                                    </div>
                                </div>

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

                                    <h5 style="margin-bottom:10px; font-weight:700">Remaining</h5>

                                    <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-right">Quantity</th>
                                                <th class="text-right">Remaining</th>
                                                {{-- <th class="text-center">Is Processed</th> --}}
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @foreach ($data_detail as $gold)
                                                <tr>
                                                    <td class="text-center">{{ $gold->brand }}</td>
                                                    <td class="text-center">{{ $gold->pecahan }} Gram {{ ucwords(str_replace('_', ' ', $gold->special_name)) }}</td>
                                                    <td class="text-right">{{ $gold->quantity }}</td>
                                                    <td class="text-right">{{ $gold->remaining }} </td>
                                                    {{-- <td class="text-center">{{ (\App\Models\Stock_request_buy_detail_model::IS_PROCESSED)[[$gold->is_processed]]["TEXT"] }}</td> --}}
                                                </tr>
                                            @endforeach
                                        </tbody>
                                    </table>
                                </div>

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

                                    <div class="form-group">
                                        <label class="control-label col-sm-3">Gold Brand :</label>
                                        <div class="col-sm-9">
                                            <select class="form-control input-goldbrand">
                                                <option value="">- Select Gold Brand -</option>
                                                @foreach ($gold_brands as $gold_brand)
                                                    <option value="{{ $gold_brand->id }}">{{ $gold_brand->brand }}
                                                    </option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <label class="control-label col-sm-3">Fragment :</label>
                                        <div class="col-sm-9">
                                            <select class="form-control input-goldfragment">
                                                <option value="">- Select Fragment -</option>
                                            </select>
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <label class="control-label col-sm-3">Quantity :</label>
                                        <div class="col-sm-9">
                                            <input type="number" min="1" class="form-control input-quantity"
                                                value="1" step="1">
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <label class="control-label col-sm-3">Unit Price :</label>
                                        <div class="col-sm-9">
                                            <input type="text" id="unit_price" min="1"
                                                class="form-control input-unitprice" value="1" step="1">
                                        </div>
                                    </div>

                                    <div class="form-group text-right">
                                        <div class="loading hidden"><i class="fa fa fa-spinner fa-pulse"></i></div>
                                        <div class="submit">
                                            <button class="btn btn-default btn-addgold" type="button"><i
                                                    class="fa fa-plus" aria-hidden="true"></i> Add</button>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-xs-12">
                                    <table class="table table-bordered table-striped table-gold">
                                        <thead>
                                            <tr>
                                                <th class="text-center">Brand</th>
                                                <th class="text-center">Fragment</th>
                                                <th class="text-right">Quantity</th>
                                                <th class="text-right">Unit Price</th>
                                                <th width="50"></th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr class="tr-empty">
                                                <td class="text-center" colspan="5">No Data</td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </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 ($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 class="col-xs-12">
                                    <hr>
                                    <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-primary" type="submit"><i class="fa fa-check"
                                                    aria-hidden="true"></i> Proceed</button>
                                            <button class="btn btn-danger btn-cancel" type="button"><i
                                                    class="fa fa-trash" aria-hidden="true"></i> Cancel</button>

                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            @include('includes.footer')
        </div>
    </div>
@endsection

@section('scripts')
    <script type="text/javascript">
        var gold_brands = {!! json_encode($gold_brands) !!};
        $(".btn-cancel").on("click", function() {
            if (confirm("Apakah Anda yakin ingin membatalkan?")) {
                $("#form").find(".submit").addClass("hidden");
                $("#form").find(".loading").removeClass("hidden");

                $.ajax({
                    url: '{{ url('stock/buy/module/' . $request->id . '/cancel') }}',
                    method: "POST",
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    data: $("#form").serialize(),
                    success: function(response) {
                        window.location.href = '{{ url("stock/buy/module/" . $request->id . "/detail") }}';
                    },
                    error: function(response) {
                        var response = response.responseJSON;
                        alert(response.error || "Terjadi kesalahan, coba lagi.");
                        $("#form").find(".submit").removeClass('hidden');
                        $("#form").find(".loading").addClass('hidden');
                    }
                });
            }
            return false;
        });

        $(document).ready(function() {
            function formatNumber(value) {
                return value.replace(/\D/g, "") // Remove non-digit characters
                    .replace(/\B(?=(\d{3})+(?!\d))/g, ","); // Add commas
            }

            $('#unit_price').on('input', function() {
                var input = $(this);
                var value = input.val();
                input.val(formatNumber(value));
            });

            $('#spj_out').on('submit', function() {
                var priceInput = $('#unit_price');
                var priceValue = priceInput.val().replace(/,/g, ''); // Remove commas
                priceInput.val(priceValue); // Set the input value without commas
            });
        });

        // $(".input-goldbrand").on("change", function() {
        //     var html = "<option>- Select Fragment -</option>";
        //     var goldbrand_id = $(this).val();
        //     $.each(gold_brands, function(index, gold_brand) {
        //         if (gold_brand.id == goldbrand_id) {
        //             $.each(gold_brand.pecahan_emas_global, function(index, fragment) {
        //                 html += "<option value='" + fragment.id + "' data-brandid='" + fragment
        //                     .id_brand_emas + "' data-brandname='" + gold_brand.brand +
        //                     "' data-fragment='" + fragment.pecahan + "'>" + fragment.pecahan +
        //                     " Gram</option>";
        //             });
        //         }
        //         $(".input-goldfragment").html(html);
        //     });
        // })

        $(".input-goldbrand").on("change", function() {
                    var html = "<option>- Select Fragment -</option>";
                    var goldbrand_id = $(this).val();

                    $.each(gold_brands, function(index, gold_brand) {
                        if (gold_brand.id == goldbrand_id) {
                            $.each(gold_brand.pecahan_emas_global, function(index, fragment) {
                                // Cek apakah special_name ada isinya
                                var specialNameText = fragment.special_name 
                                    ? " " + fragment.special_name 
                                    : "";

                                html += "<option value='" + fragment.id + 
                                        "' data-brandid='" + fragment.id_brand_emas + 
                                        "' data-brandname='" + gold_brand.brand +
                                        "' data-specialname='" + fragment.special_name +
                                        "' data-fragment='" + fragment.pecahan + "'>" + 
                                        fragment.pecahan + " Gram" + specialNameText + 
                                        "</option>";
                            });
                        }
                        $(".input-goldfragment").html(html);
                    });
                });

        $(document).ready(function() {
            function formatNumber(value) {
                return value.replace(/\D/g, "")
                    .replace(/\B(?=(\d{3})+(?!\d))/g, ",");
            }

            $('#unit_price').on('input', function() {
                var input = $(this);
                var value = input.val();
                input.val(formatNumber(value));
            });

            $('#unit_price').on('submit', function() {
                var priceInput = $('#unit_price');
                var priceValue = priceInput.val().replace(/,/g, '');
                priceInput.val(priceValue);
            });
        });

        $(".btn-addgold").on("click", function() {
            var quantity = parseInt($(".input-quantity").val());
            var unitprice = parseInt($(".input-unitprice").val().replace(/,/g, ''));
            var selected_option = $(".input-goldfragment").find("option:selected");
            var brandname = selected_option.data("brandname");
            var fragment = selected_option.data("fragment");
            var specialName = selected_option.data("specialname");


            // Validasi input
            if (quantity <= 0 || !Number.isInteger(quantity)) {
                alert("Quantity harus lebih besar dari 0 dan harus merupakan bilangan bulat.");
                return;
            }

            if (unitprice <= 0 || !Number.isInteger(unitprice)) {
                alert("Unitprice harus lebih besar dari 0 dan harus merupakan bilangan bulat.");
                return;
            }

            if (!brandname || !fragment) {
                alert("Brandname dan Fragment harus diisi.");
                return;
            }

            var html_temporary =
                "<tr class='data' data-idfragment='" + selected_option.val() + "' data-quantity='" + quantity +
                "' data-unitprice='" + unitprice + "'>" +
                "<td class='text-center'>" + brandname + "</td>" +
                // "<td class='text-center'>" + fragment + " Gram</td>" +
                "<td class='text-center'>" + fragment + " Gram " + specialName + "</td>" +
                "<td class='text-right'>" + quantity + "</td>" +
                "<td class='text-right'>" + unitprice.toLocaleString('en-US') + "</td>" +
                "<td class='text-center'><button type='button' class='btn btn-danger btn-xs btn-deletegoldfragment'><i class='fa fa-minus-circle' aria-hidden='true'></i></button></td>" +
                "</tr>";

            $(".table-gold").find("tbody").append(html_temporary);

            $(".table-gold tbody .tr-empty").addClass("hidden");
            if ($(".table-gold tbody tr.data").length == 0) {
                $(".table-gold tbody .tr-empty").removeClass("hidden");
            }

            $(".input-goldbrand").prop('selectedIndex', 0);
            $(".input-goldfragment").prop('selectedIndex', 0);
            $(".input-quantity").val('1');
            $("#unit_price").val('0');

            updateTotals();
        });


        $(".table-gold").on("click", ".btn-deletegoldfragment", function() {
            $(this).parents("tr").remove();

            updateTotals();

            $(".table-gold tbody .tr-empty").addClass("hidden");
            if ($(".table-gold tbody tr[class='data']").length == 0) $(".table-gold tbody .tr-empty").removeClass(
                "hidden");
        });

        function formatNumber(number) {
            // Use the toLocaleString method to format the number
            return Number(number).toLocaleString('en-US');
        }

        function updateTotals() {
            var totalQuantity = 0;
            var totalUnitPrice = 0;

            $(".table-gold tbody tr[class='data']").each(function() {
                var rowQuantity = parseFloat($(this).data("quantity")) || 0;
                var rowUnitPrice = parseFloat($(this).data("unitprice")) || 0;

                totalQuantity += rowQuantity;
                totalUnitPrice += rowUnitPrice;
            });

            // Format totalQuantity and totalUnitPrice as currency with commas
            var formattedQuantity = totalQuantity.toLocaleString();
            var formattedUnitPrice = totalUnitPrice.toLocaleString();

            var html_footer =
                "<tfoot>" +
                "<tr>" +
                "<td colspan='2' class='text-right'><strong>Total:</strong></td>" +
                "<td class='text-right'>" + formattedQuantity + "</td>" +
                "<td class='text-right'>" + formattedUnitPrice + "</td>" +
                "<td></td>" +
                "</tr>" +
                "</tfoot>";

            $(".table-gold").find("tfoot").remove();
            $(".table-gold").append(html_footer);
        }


        $("#form").on("submit", function() {
            $("#form").find(".submit").addClass("hidden");
            $("#form").find(".loading").removeClass("hidden");
            var lokasiId = $("#lokasi_id").val();

            var gold = [];
            $(".table-gold tbody .data").each(function() {
                gold.push({
                    "id_fragment": $(this).data("idfragment"),
                    "quantity": $(this).data("quantity"),
                    "unitprice": $(this).data("unitprice")
                });
            });

            if (gold.length === 0) { // Cek jika gold kosong
                alert("Data emas tidak boleh kosong!");
                $("#form").find(".submit").removeClass('hidden');
                $("#form").find(".loading").addClass('hidden');
                return false; // Hentikan proses submit
            }

            $(".input-gold").val(JSON.stringify(gold));

            $.ajax({
                url: '{{ url('stock/buy/module/processing/' . $request->id . '/process') }}',
                method: "POST",
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                data: $("#form").serialize() + "&lokasi_id=" + lokasiId,
                success: function(response) {
                    alert("Data saved, you will be redirected to list page");
                    location.href = "{{ url('stock/buy/module') }}";
                },
                error: function(response) {
                    var response = response.responseJSON;
                    alert(response.error);
                    $("#form").find(".submit").removeClass('hidden');
                    $("#form").find(".loading").addClass('hidden');
                }
            });
            return false;
        })
    </script>
@endsection