
<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;margin:3px">
                    <div style="flex:0 0 50%;margin:auto"><a>Item name: {{ $name }}</a></div>
                    <div style="flex:0 0 50%;text-align:right"><button id="btn-create" class="btn btn-primary">+ Ukuran Baru</button></div>
                </div>

                <div style="margin:3px;overflow:scroll;height:90vh">
                    
                    <table id="ar-table">
                        <thead>
                        <tr>
                            <th>ID</th>
                            <th>Size</th>
                            <th>Quantity</th>
                            <th style="white-space:nowrap">Price (Rp.)</th>
                            <th>Weight</th>
                            <th>Action</th>
                        </tr>
                        </thead>

                        <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>{{ rupiahBasic($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 id="btn-edit" data-id="{{ $item->id }}">Edit</a>
                                                <a 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">
        <div class="form-popup ar-view-modal" style="max-height:80%;background-color:#f8f8f8;overflow:scroll">
            <div style="text-align:center"><h5>Kelola Produk Fashion</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 class="form-group">
                    <label>Size :</label>
                    <input class="form-control" id="size" name="size" type="text" placeholder="Size">
                </div>

                <div class="form-group">
                    <label>Quantity :</label> 
                    <input class="form-control" id="quantity" name="quantity" type="text" placeholder="Quantity" value="" required>
                </div>
                
                <div class="form-group">
                    <label>Price :</label>
                    <input class="form-control" id="price" name="price" type="text" placeholder="Price" required>
                </div>
                
                <div class="form-group">
                    <label>Weight :</label>
                    <input class="form-control" id="weight" name="weight" type="text" placeholder="Weight">
                </div>
    
                <div class="form-group">
                    <button id="btn-store" class="btn btn-primary">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-create',function(e){
            e.preventDefault();
            $('#myForm').trigger("reset");

            $('#id').val("");
            $('#modal').modal('show');
        });


        $('#btn-store').click(function(e){
            e.preventDefault();

            let formData = new FormData($('#myForm')[0]);
            let id = $('#id').val();
            if(id != ''){
                formData.append('_method','PUT');
            }

            $.ajax({
                headers: {
                    'X-CSRF-Token': "{{ csrf_token() }}" 
                    },
                url: "/admin-fashion-details",
                method: "POST",
                cache: false,
                contentType: false,
                processData: false,
                data: formData,
                success: function(response){
                    document.location.reload();
                }
            });
        });

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

            $.ajax({
                url: `/admin-fashion-details/${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);

                    $('#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');

            $.ajax({
                headers: {
                    'X-CSRF-Token': "{{ csrf_token() }}" 
                },
                url: `/admin-fashion-details`,
                type: "DELETE",
                cache: false,
                data:{'id':id},
                success:function(response){
                    document.location.reload();
                }
            });
        });

    }

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