<?php $title="AR Fashion"; ?>
<x-layout>
    @section('title', $title.' - ')
    @section('page_title', $title)
    @include('admin/header_admin')
    @include('admin/ar-css')
    @include('admin/ar-php-script')

    <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">
                <a href="javascript:void(0)" id="btn-create" class="btn-regular">+ New Fashion</a>

                <div class="table-container">
                    @if(isset($items))
                    <table id="ar-table">
                        <tr>
                            <th style="width:1%">ID</th>
                            <th>Name</th>
                            <th>Image File</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->name }}</td>
                                    <td>{{ $item->img }}</td>
                                    <td style="width:1%;white-space:nowrap">
                                        <a id="btn-edit" data-id="{{ $item->id }}" style="cursor:pointer;margin-left:10px;color:#000000"><i class="fa fa-pencil"></i></a>
                                        <a id="btn-delete" data-id="{{ $item->id }}" style="cursor:pointer;margin-left:10px;color:#000000"><i class="fa fa-trash"></i></a>
                                        <a href="/admin-fashion-details?id={{ $item->id }}&name={{ $item->name }}" style="cursor:pointer;margin-left:10px;color:#000000">
                                            <i class="fa fa-arrow-right"></i>
                                        </a>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                    {!! createPageNavigator($items) !!}
                    @endif
                </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>Manage Fashion Product</h5></div>
            <form id="myForm">
                <input id="id" name="id" type="hidden">
                <input id="image_file" name="image_file" type="hidden">
                
                <div class="form-group">
                    <div style="height:200px" class="form-control">
                        <img id="pic" name="pic" alt="Image" style="height:100%;background:none;display:none;margin-left:auto;margin-right:auto">
                    </div>
                </div>
    
                <div class="form-group">
                    <label>Image File :</label>
                    <input class="form-control" type="file" id="photo" name="photo" oninput="pic.src=window.URL.createObjectURL(this.files[0]);document.getElementById('pic').style.display='block'">
                </div>

                <div class="form-group">
                    <label>Nama Barang :</label> 
                    <input class="form-control" id="name" name="name" type="text" placeholder="Nama Barang" value="" required>
                </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){
            $('#myForm').trigger("reset");
            $('#pic').attr("src","");
            document.getElementById('pic').style.display='none';
            
            $('#id').val(""); // Clear id value
            $('#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",
                type: "POST",
                cache: false,
                contentType: false,
                processData: false,
                data: formData,
                success: function(response){
                    document.location.reload();                    
                }
            });
            
        });
        
        $('body').on('click','#btn-edit',function(e){
            e.preventDefault();

            $('#modal-message').modal('show');
            let id = $(this).data('id');

            $.ajax({
                url: `admin-fashion/${id}`,
                type: 'GET',
                cache: false,
                success:function(response){
                    if(!response.error){
                        let item = response.data;
    
                        $('#id').val(item.id);
                        $('#name').val(item.name);
                        $('#image_file').val(item.img);
                        $('#pic').attr("src","/imgs/polosh/" + item.img);
                        document.getElementById('pic').style.display='block'
    
                        $('#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`,
                type: "DELETE",
                cache: false,
                data: {'id':id},
                success:function(response){
                    document.location.reload();
                }
            });
        });
    </script>
    
    @include('admin/ar-script')    

</x-layout>