@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>Convert</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">Customer Email :</label>
                                        <div class="col-sm-9">
                                            <input type="text" name="email" class="form-control" />
                                        </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">
                                                <option value="">- Select Fragment -</option>                                            
                                            </select>
                                        </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 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")
<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 selected_option = $(".input-goldfragment").find("option:selected");
        var html_temporary = 
            "<tr class='data' data-idfragment='"+selected_option.val()+"'>" +
                "<td class='text-center'>"+selected_option.data("brandname")+"</td>" +
                "<td class='text-center'>"+selected_option.data("fragment")+" Gram</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");
    })

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