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

            <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" required>
                                            <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" required>
                                            <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">Customer stock group :</label>
                                    <div class="col-sm-9">
                                        <select class="form-control input-customer" name='customer_stock'>
                                            <option value="">- Select Customer Stock Group -</option>
                                            @foreach($stock_group as $stock)
                                                <option value="{{ $stock->id }}">{{ $stock->name }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="control-label col-sm-3">Customer :</label>
                                    <div class="col-sm-9">
                                        <input type="text" name="customer" class="form-control" placeholder="Customer" autofocus autocomplete="off" />
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label class="control-label col-sm-3">Alamat Customer :</label>
                                    <div class="col-sm-9">
                                        <input type="text" name="customer_addr" class="form-control" placeholder="Customer Address" autofocus autocomplete="off" />
                                    </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") }}" autocomplete="off" />
                                    </div>
                                </div>

                                {{-- <div class="form-group">
                                    <label class="control-label col-sm-3">Invoice No. :</label>
                                    <div class="col-sm-9">
                                        <input type="text" name="inv_no" class="form-control" placeholder="Invoice No." autocomplete="off" />
                                    </div>
                                </div> --}}

                                <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="4" autocomplete="off"></textarea>
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label class="control-label col-sm-3">Notes 2:</label>
                                    <div class="col-sm-9">
                                        <textarea class="form-control" name="notes_2" placeholder="Notes" rows="1" autocomplete="off"></textarea>
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label class="control-label col-sm-3">Value 2:</label>
                                    <div class="col-sm-9">
                                        <input type="text" name="value_2" placeholder="Input Number" class="form-control" oninput="this.value = this.value.replace(/[^0-9]/g, '')" autofocus autocomplete="off" />
                                    </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">
                                            <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 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"></th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr class="tr-empty">
                                            <td class="text-center" colspan="4">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>
        @include('includes.footer')
    </div>
</div>
@endsection

@section("scripts")
<script type="text/javascript">
    var gold_brands = {!! json_encode($gold_brands) !!};

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

        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 html_temporary =
			"<tr class='data' data-idfragment='"+selected_option.val()+"' data-quantity='"+quantity+"'>" +
				"<td class='text-center'>"+selected_option.data("brandname")+"</td>" +
				"<td class='text-center'>"+selected_option.data("fragment")+" Gram</td>" +
				"<td class='text-right'>"+quantity+"</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[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');
		$(".input-goldbrand").focus();
    })

    $(".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")
                });
            });
            $(".input-gold").val(JSON.stringify(gold));

            $.ajax({
                url: '{{ url("stock/sell/module/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 = "{{ url('stock/sell/module') }}/" + response.id + "/detail";
                },
                error: function(response) {
                    var response = response.responseJSON;
                    alert(response.error);
                    $("#form").find(".submit").removeClass('hidden');
                    $("#form").find(".loading").addClass('hidden');
                }
            });
            return false;
        });


	function getInput(){
		var gold = [];
		if($(".table-gold tbody .data").length>0) $(".table-gold tbody .data").each(function() {
			gold.push({
				"id_fragment" : $(this).data("idfragment"),
				"quantity" : $(this).data("quantity")
			});
		});
		return JSON.stringify(gold);
	}

    $(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();
                            }
                        }
                    });
                }
            });
        });
</script>
@endsection