@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>

                    <div class="col-xs-12">
                        <form id="form" class="form-horizontal">
                            <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">NIK :</label>
                                                <div class="col-sm-9">
                                                    <input type="text" disabled value="{{ $logined_user->username }}"
                                                        class="form-control" />
                                                </div>
                                            </div>

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

                                            <div class="form-group">
                                                <label class="control-label col-sm-3">Team :</label>
                                                <div class="col-sm-9">
                                                    <input type="text" disabled
                                                        value="{{ $logined_user->users_team->name }}"
                                                        class="form-control" />
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <label class="control-label col-sm-3">Group Lokasi :</label>
                                                <div class="col-sm-9">
                                                    <select id="grouplokasi" name="grouplokasi" class="form-control">
                                                        <option value="">-- Pilih Group Lokasi --</option>
                                                        @foreach ($group as $item)
                                                            <option value="{{ $item->id }}">{{ $item->name }}</option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <label class="control-label col-sm-3">Lokasi :</label>
                                                <div class="col-sm-9">
                                                    <select id="lokasi" name="actual_location_id" class="form-control">
                                                        <option value="">-- Pilih Lokasi --</option>
                                                    </select>
                                                </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" name="notes" placeholder="Notes" rows="6" autofocus autocomplete="off"></textarea>
                                                </div>
                                            </div>
                                        </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" id="input-goldfragment">
                                                        <option value="">- Select Fragment -</option>
                                                    </select>
                                                </div>
                                            </div>

                                            <input type="text" name="id_fragment" id="id_fragment" class="id_fragment"
                                                value="{{ $request['id'] }}" hidden>
                                            <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" required>
                                                </div>
                                            </div>

                                            {{-- <input type="text" name="stock" id="stock" class="stock"> --}}

                                            <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">
                                            <hr>
                                            <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 width="50">Stock Current</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>
                                            <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>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
                @include('includes.footer')
            </div>
        </div>
    @endsection

    @section('scripts')
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
        <script type="text/javascript">
            var gold_brands = {!! json_encode($gold_brands) !!};
            var fragment = document.getElementById('id_fragment').value;

            $(".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);
                });
            })

            $(".btn-addgold").on("click", function() {
                var quantity = $(".input-quantity").val();
                var selected_option = $(".input-goldfragment").find("option:selected");
                var brandname = selected_option.data("brandname");
                var fragment = selected_option.data("fragment");
                var fragmentId = selected_option.val();

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

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

                var totalQtyDisplayId = 'totalQtyDisplay_' + fragmentId;

                var html_temporary =
                    "<tr class='data' data-idfragment='" + fragmentId + "' data-stock='" + quantity + "' data-quantity='" + quantity + "'>" +
                    "<td class='text-center'>" + brandname + "</td>" +
                    "<td class='text-center'>" + fragment + " Gram</td>" +
                    "<td class='text-right'>" + quantity + "</td>" +
                    "<td class='text-right' id='" + totalQtyDisplayId + "'></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>";

                html_temporary += "<input type='hidden' name='id_fragment[]' value='" + fragmentId + "'>";

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

                $(".table-gold tbody .tr-empty").addClass("hidden");
                if ($(".table-gold tbody tr[class='data']").length == 0) $(".table-gold tbody .tr-empty").removeClass(
                    "hidden");
                $(".input-goldbrand").prop('selectedIndex', 0);
                $(".input-goldfragment").prop('selectedIndex', 0);
                $(".input-quantity").val('1');

                // Update the totalQtyDisplay dynamically using AJAX
                updateTotalQtyDisplay(fragmentId, totalQtyDisplayId);
            });

            function updateTotalQtyDisplay(fragmentId, totalQtyDisplayId) {
                $.ajax({
                    url: '/stock/getFragments/' + fragmentId,
                    type: "GET",
                    data: {
                        "_token": "{{ csrf_token() }}"
                    },
                    dataType: "json",
                    success: function(hasil) {
                        if (hasil && hasil.hasil && hasil.hasil.length > 0) {
                            var totalQty = hasil.hasil[0].total_qty;

                            console.log("fragment_id:", hasil);
                            console.log("New Total Quantity:", totalQty);

                            // Check if totalQty is defined before updating the content
                            if (totalQty !== undefined && totalQty !== null) {
                                $("#" + totalQtyDisplayId).text(totalQty);
                                // Update data-stock attribute with totalQty value
                                $(".table-gold tbody tr[data-idfragment='" + fragmentId + "']").attr("data-stock",
                                    totalQty);
                            } else {
                                $("#" + totalQtyDisplayId).text("0");
                                // Update data-stock attribute with default value
                                $(".table-gold tbody tr[data-idfragment='" + fragmentId + "']").attr("data-stock",
                                    "0");
                            }
                        }
                    },
                    error: function(error) {
                        console.error("Error fetching: ", error);
                    }
                });
            }



            $(".table-gold").on("click", ".btn-deletegoldfragment", function() {
                $(this).parents("tr").remove();
                $(".table-gold tbody .tr-empty").addClass("hidden");
                if ($(".table-gold tbody tr[class='data']").length == 0) $(".table-gold tbody .tr-empty").removeClass(
                    "hidden");
            })

            $("#form").on("submit", function() {
                // Check if there are any rows with data in the table
                if ($(".table-gold tbody tr.data").length === 0) {
                    alert("Data Emas Tidak Boleh Kosong");
                    return false; // Prevent form submission
                }

                $("#form").find(".submit").addClass("hidden");
                $("#form").find(".loading").removeClass("hidden");

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

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

                $.ajax({
                    url: 'add/save',
                    method: "POST",
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    data: $("#form").serialize(),
                    success: function(response) {
                        alert("Data saved, you will be redirected to the detail page");
                        location.href = response.id;
                    },
                    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() {
                $('#grouplokasi').on('change', function() {
                    
                    var IdToko = $(this).val();
                    if (IdToko) {
                        $.ajax({
                            url: '/getLokasi/' + IdToko,
                            type: "GET",
                            data: {
                                "_token": "{{ csrf_token() }}"
                            },
                            dataType: "json",
                            success: function(data) {
                                if (data) {
                                    $('#lokasi').empty();
                                    $('#lokasi').append('<option>-- Pilih  Lokasi --</option>');
                                    $.each(data, function(key, toko) {
                                        $('select[name="actual_location_id"]').append(
                                            '<option value="' +
                                            toko.id + '">' + toko.code + " - " +
                                            toko.name +
                                            // key.code + '">' + toko.nama +
                                            '</option>');
                                    });
                                } else {
                                    $('#toko').empty();
                                }
                            }
                        });
                    }
                });
            });
            $(document).ready(function() {
                $('#id_fragment').on('change', function() {
                    var getFragment = $(this).val();
                    $.ajax({
                        url: '/getFragments/' + getFragment,
                        type: "GET",
                        data: {
                            "_token": "{{ csrf_token() }}"
                        },
                        dataType: "json",
                        success: function(hasil) {
                            if (hasil) {
                                totalQty = hasil.total_qty;

                                console.log("fragment_id:", hasil);
                                console.log("New Total Quantity:", totalQty);
                            }
                        },
                        error: function(error) {
                            console.error("Error fetching: ", error);
                        }
                    });
                });
            });
        </script>
    @endsection