<x-layout>
    @section('title', $title.' - ')
    @section('page_title', $title)
    @include('admin/ar-css')
    @include('admin/ar-php-script')
    @include('admin/header_admin')

    <section id="dashboard" class="ar-dashboard-height">
        <div class="ar-dashboard-row" style="height:100%">
            <div id="ar-left-nav">
                @include('admin/left_nav')
            </div>

            <div id="ar-dashboard-content">
                <div style="display:flex;align-items:center;margin:3px 0;justify-content:space-between">
                    <div><a>Item name: {{ $name }}</a></div>
                    <div><a href="javascript:void(0)" id="btn-new" class="btn-regular">+ New Size</a></div>
                </div>

                <div style="overflow:scroll;margin:3px;min-height:300px">
                    <table id="ar-table">
                        <tr>
                            <th>ID</th>
                            <th>Kemasan(ml)</th>
                            <th>Quantity</th>
                            <th>Price (Rp)</th>
                            <th>Weight(gr)</th>
                            <th>Action</th>
                        </tr>
                        
                        <tbody id="ar-table-body">
                            @foreach($items as $item)
                                <tr id="index_{{ $item->id }}">
                                    <td>{{ $item->id }}</td>
                                    <td>{{ $item->size }}</td>
                                    <td>{{ $item->quantity }}</td>
                                    <td style="white-space:nowrap">{{ rupiah($item->price) }}</td>
                                    <td>{{ $item->weight }}</td>
                                    <td style="width:1%">
                                        <div class="dropdown">
                                            <button class="dropdown-ar1_exp" style="outline:none;border:none;background:none" data-toggle="dropdown">
                                                <i class="fa fa-ellipsis-v"></i>
                                            </button>
                                            <div class="dropdown-menu dropdown-menu-right dropdown-content1">
                                                <a href="javascript:void(0)" id="btn-edit" data-id="{{ $item->id }}">Edit</a>
                                                <a href="javascript:void(0)" id="btn-delete" data-id="{{ $item->id }}">Delete</a>
                                            </div>
                                        </div>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
                
            </div>
        </div>
    </section>

    <div id="modal" class="modal" style="z-index:10000">
        <div class="form-popup ar-view-modal" style="max-height:90%;background-color:#f8f8f8;overflow:scroll">
            <div style="text-align:center"><h5>Manage Care Items</h5></div>

            <form id="myForm">
                <input id="id" name="id" type="hidden">
                <input id="product_id" name="product_id" type="hidden" value="{{ $product_id }}">

                <div id="kemasan" class="form-group">
                    <label>Kemasan :</label>
                    <input class="form-control" id="size" name="size" type="text" placeholder="Size">
                </div>

                <div class="form-group">
                    <label>Jumlah :</label> 
                    <input class="form-control" id="quantity" name="quantity" type="text" placeholder="Quantity" value="" required>
                </div>
                
                <div class="form-group">
                    <label>Harga :</label>
                    <input class="form-control" id="price" name="price" type="text" placeholder="Price" required>
                </div>
                
                <div class="form-group">
                    <label>Berat :</label>
                    <input class="form-control" id="weight" name="weight" type="text" placeholder="Weight">
                </div>
    
                <div class="form-group">
                    <label>Spesifikasi : (Under development)</label>
                    <textarea class="form-control" id="specifications" name="specifications" rows="5"></textarea>
                </div>

                <div class="form-group">
                    <button id="btn-store" class="btn btn-primary" type="">Simpan</button>
                    <button class="btn btn-secondary" data-dismiss="modal">Close</button>
                </div>
            </form>
        </div>        
    </div>
    
    <div id="modal-message" class="modal">
        <div class="ar-view-modal">
            Mohon tunggu. Sedang proses...
        </div>
    </div>

    <script>
        $('body').on('click','#btn-new',function(e){
            $('#myForm').trigger("reset");

            $('#id').val("");
            $('#modal').modal('show');
        });
        
        function isValidate(){
            let quantity = document.getElementById('quantity');
            let price = document.getElementById('price');
            let weight = document.getElementById('weight');
            
            if(quantity.value.trim() === ''){return false;}
            if(price.value.trim() === ''){return false;}
            if(weight.value.trim() === ''){return false;}
            return true;
        }

        $('#btn-store').click(function(e){
            e.preventDefault();
            
            if(!isValidate()){
                alert("Data belum lengkap!");
            }else{
                    
                $('#modal-message').modal('show');
                let formData = new FormData($('#myForm')[0]);
                let id = $('#id').val();
    
                $.ajax({
                    headers: {
                        'X-CSRF-Token': "{{ csrf_token() }}" 
                    },
                    url: "/admin-care-items",
                    method: "POST",
                    cache: false,
                    contentType: false,
                    processData: false,
                    data: formData,
                    success: function(response){
                        $('#modal-message').modal('hide');
                        document.location.reload();
                    }
                });
            }

        });

        $('body').on('click','#btn-edit',function(e){
            $('#modal-message').modal('show');
            let id = $(this).data('id');

            $.ajax({
                url: `/admin-care-items/${id}`,
                type: 'GET',
                cache: false,
                success:function(response){
                    $('#id').val(response.data.id);
                    $('#quantity').val(response.data.quantity);
                    $('#price').val(response.data.price);
                    $('#size').val(response.data.size);
                    $('#weight').val(response.data.weight);
                    $('#specifications').val(response.data.specifications);
                    
                    $('#modal-message').modal('hide');
                    $('#modal').modal('show');
                }
            });
            
        });

        $('body').on('click','#btn-delete',function(e){
            e.preventDefault();
            
            if(!confirm('Data akan di hapus dan tidak dapat dikembaliokan. Lanjutkan?')){
                return;
            }
            
            $('#modal-message').modal('show');
            
            let id =$(this).data('id');
            let token = "{{ csrf_token() }}";

            $.ajax({
                url: `/admin-care-items`,
                type: "DELETE",
                cache: false,
                data:{'id':id,'_token':token},
                success:function(response){
                    $('#modal-message').modal('hide');
                    if(response.success){
                        document.location.reload();
                    }else{
                        alert(response.message);
                    }
                }
            });
        });

    </script>
    
    @include('admin/ar-script')

</x-layout>