@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>Move 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"> From Group Lokasi :</label>
                                            <div class="col-sm-9">
                                                <select id="fromgrouplokasi" name="fromgrouplokasi" 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">From Lokasi :</label>
                                            <div class="col-sm-9">
                                                <select id="fromlokasi" name="actual_location_from_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="2" autofocus autocomplete="off"></textarea>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="control-label col-sm-3 mt-2">Move type :</label>
                                            <div class="col-sm-9">
                                                <select id="move_type" name="move_type_id" class="form-control" required>
                                                    <option value="">-- Pilih Move Type --</option>
                                                    @foreach ($move_type as $item)
                                                        <option value="{{ $item->id }}">{{ $item->name }}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="control-label col-sm-3">No Detail :</label>
                                            <div class="col-sm-9">
                                                <input type="text" id="kode_transaksi" name="kode_transaksi" disabled
                                                    class="form-control" />
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="control-label col-sm-3 mt-2"> To Group Lokasi :</label>
                                            <div class="col-sm-9">
                                                <select id="togrouplokasi" name="togrouplokasi" 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">To Lokasi :</label>
                                            <div class="col-sm-9">
                                                <select id="tolokasi" name="actual_location_to_id" class="form-control">
                                                    <option value="">-- Pilih Lokasi --</option>
                                                </select>
                                            </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>
            </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) !!};

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

        $(".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 specialName = selected_option.data("specialname");


            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-center'>" + fragment + " Gram " + specialName + "</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');
        })

        $(".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");
        })
        document.addEventListener("DOMContentLoaded", function() {
            var moveTypeSelect = document.getElementById("move_type");
            var kodeTransaksiInput = document.querySelector("input[name='kode_transaksi']");

            moveTypeSelect.addEventListener("change", function() {
                if (this.value === "6") {
                    kodeTransaksiInput.disabled = false;
                    kodeTransaksiInput.required = true;
                } else {
                    kodeTransaksiInput.disabled = true;
                    kodeTransaksiInput.required = false;
                    kodeTransaksiInput.value = "";
                }
            });
        });

        $("#form").on("submit", function() {

            $("#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: '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 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() {
            $('#fromgrouplokasi').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) {
                                $('#fromlokasi').select2();
                                $('#fromlokasi').empty();
                                $('#fromlokasi').append('<option>-- Pilih  Lokasi --</option>');
                                $.each(data, function(key, toko) {
                                    $('select[name="actual_location_from_id"]').append(
                                        '<option value="' +
                                        toko.id + '">' + toko.cmk_code + " - " +
                                        toko.name +
                                        // key.code + '">' + toko.nama +
                                        '</option>');
                                });
                            } else {
                                $('#toko').empty();
                            }
                        }
                    });
                }
            });
        });
        $(document).ready(function() {
            $('#togrouplokasi').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) {
                                $('#tolokasi').select2();
                                $('#tolokasi').empty();
                                $('#tolokasi').append('<option>-- Pilih  Lokasi --</option>');
                                $.each(data, function(key, toko) {
                                    $('select[name="actual_location_to_id"]').append(
                                        '<option value="' +
                                        toko.id + '">' + toko.cmk_code + " - " +
                                        toko.name +
                                        // key.code + '">' + toko.nama +
                                        '</option>');
                                });
                            } else {
                                $('#toko').empty();
                            }
                        }
                    });
                }
            });
        });
    </script>
@endsection