    <?php
        $care_categories = array(['id'=>-1,'name'=>'Semua Katagory'],['id'=>1,'name'=>'Scent Diffuser'],['id'=>2,'name'=>'Fragrance']);

        function getCareCategoryName($categoryId){
            switch($categoryId){
                case 1: return "Scent Diffuser";
                case 2: return "Fragrance";
            }
        }
        /*
        function createPageNavigator2($data,$categoryId){
            $nav = '';
            $prev = $data->previousPageUrl();
            $next = $data->nextPageUrl();
        
            if($prev != null){
                $nav .= '<a href="'.$prev.'&categoryId='.$categoryId.'">Prev</a>';
            }
            
            if($prev != null && $next != null){
                $nav .= ' | ';
            }
            
            if($next != null){
                $nav .= '<a href="'.$next.'&categoryId='.$categoryId.'">Next</a>';
            }
            return $nav;
        }*/
        
    ?>

<x-layout>
    @section('title', $title.' - ')
    @section('page_title', $title)
    @include('admin/ar-css')
    @include('admin/ar-php-script')
    @include('admin/header_admin')
    
    <style>
        .pagination{
            margin:5px 0;
        }
    </style>

    <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 style="white-space:nowrap">
                        <a>Pilih Katagory:</a>
                        
                        <select id="select_category" name="select_category">
                            @foreach($care_categories as $category)
                                @if($category['id'] == $categoryId)
                                    <option value="{{ $category['id'] }}" selected>{{ $category['name'] }}</option>
                                @else
                                    <option value="{{ $category['id'] }}">{{ $category['name'] }}</option>
                                @endif
                            @endforeach
                        </select>
                    </div>
                    <a href="javascript:void(0)" id="btn-post" class="btn-regular">+ Product</a>
                </div>
                
                @if(count($items) > 0)
                    <div style="overflow:scroll">
                        <table id="ar-table">
                            <thead>
                                <th style="width:1%">ID</th>
                                <th>Name</th>
                                <th>Katagory</th>
                                <th>Image File</th>
                                <th>Action</th>
                            </thead>
                            
                            <tbody id="ar-table-body">
                                @foreach($items as $item)
                                    <tr id="index_{{ $item->id }}">
                                        <td>{{ $item->id }}</td>
                                        <td>{{ $item->name }}</td>
                                        <td>{{ getCareCategoryName($item->category) }}</td>
                                        <td>{{ $item->img }}</td>
                                        <td style="width:1%;white-space:nowrap">
                                            <a href="javascript:void(0)" id="edit" data-id="{{ $item->id }}" style="cursor:pointer;margin-left:10px;color:#000000">
                                                <i class="fa fa-pencil"></i>
                                            </a>
                                            <a href="javascript:void(0)" id="delete" data-id="{{ $item->id }}" style="cursor:pointer;margin-left:10px;color:#000000">
                                                <i class="fa fa-trash"></i>
                                            </a>
                                            <a href="/admin-care-items?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>
                    </div>
                    {{ $items->links() }}
                @endif
            </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 Product</h5></div>
            <form id="myForm">
                @csrf
                <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>File Name: <span id="image_file_name"></span></div>
                    <div>Image size: 350 x 350 pixel</div>
                </div>
                <div><ul id="thumbnail"></ul></div>
    
                <div class="form-group">
                    <label>Upload Image File :</label>
                    <input class="form-control"
                        type="file" 
                        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">
                    <label>Katagory :</label> 
                    <select id="category" name="category">
                            <option value="-1" selected>Pilih Katagory</option>
                            <option value="1">Scent Diffuser</option>
                            <option value="2">Fragrance</option>
                    </select>
                </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-post',function(e){
            $('#myForm').trigger("reset");
            $('#pic').attr("src","");
            document.getElementById('pic').style.display='none';

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

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

            let formData = new FormData($('#myForm')[0]);
            let id = $('#id').val();
            let name = $('#name').val();
            let photo = $('#photo').val();
            let category = document.getElementById('category')
            
            if(!name || category.value == -1){
                alert('Anda belum melengkapi data!');
                return;
            }

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

        });
        
        $('body').on('click','#edit',function(e){
            $('#myForm').trigger("reset");
            $('#modal-message').modal('show');
            let id = $(this).data('id');
            
            $.ajax({
                url: `admin-care/${id}`,
                type: 'GET',
                cache: false,
                success:function(response)
                {
                    /*
                    var data='';
                    for(i=0;i < response.imgs.length;i++){
                        data += '<li style="display:inline-block"><img style="width:50px;height:50px;border:solid thin lightgray;margin:0 3px" src="https://fashion.by-arsolution.com/imgs/care/' + response.imgs[i].img_file + '"></li>';
                    }
                    $('#thumbnail').replaceWith(data);
                    */
                    
                    $('#id').val(response.id);
                    $('#name').val(response.name);
                    $('#category').val(response.category);
                    $('#pic').attr("src","https://fashion.by-arsolution.com/imgs/care/" + response.img);
                    $('#pic').css('display','block');
                    $('#image_file').val(response.img);
                    $('#image_file_name').html(response.img);

                    $('#modal-message').modal('hide');
                    $('#modal').modal('show');
                }
            });
        });

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

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

        });

        function getCareCategoryName(categoryId){
            switch(categoryId){
                case "1": return "Scent Diffuser";
                case "2": return "Fragrance";
            }
        }
        document.getElementById('select_category').addEventListener("change",function(){
            if(this.value == -1){
                location.href="/admin-care";
            }else
            {
                location.href="/admin-care?categoryId=" + this.value;
            }
        });

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

</x-layout>
