@extends('layouts.layout')
@section('body_class', 'nav-md')
@section('css')
<style>
    ul {margin:0;}
</style>
@endsection
@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>QA - Store List</h3>
                </div>
                <div class="clearfix"></div>
            </div>

            <div class="row">
                <div class="col-xs-12">
                    <form id="form" class="form-horizontal">

                        <div class="form-group">
                            <label class="col-xs-12 col-sm-3 control-label">Nik :</label>
                            <div class="col-xs-12 col-sm-9">
                                <input list="nik" name="nik" id="input_nik" class="form-control" value= "{{ $request["username"] }}">
                                <datalist id="nik" searchable="Search here" >
                                    <option value="" @if($request["username"] === 'all') selected @endif>Choose NIK</option>
                                    @foreach($all_users as $user)
                                        <option value="{{ $user->username }}" @if($request["username"] === $user->username) selected @endif >{{ $user->username }} - {{ $user->name }}</option>
                                    @endforeach
                                </datalist>
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-xs-12 col-sm-3 control-label">Nama :</label>
                            <div class="col-xs-12 col-sm-9">
                                <input disabled type="text" class="form-control" placeholder="User name" value="{{ @$selected_user->name }}">
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-xs-12 col-sm-3 control-label">Email :</label>
                            <div class="col-xs-12 col-sm-9">
                                <input disabled type="text" name="name" class="form-control" placeholder="Email" value="{{ @$selected_user->email }}">
                            </div>
                        </div>

                        <div class="form-group">
                            <div class="col-xs-12 col-sm-offset-3 col-sm-9">
                                <button type="submit" class="btn btn-default"><i class="fa fa-search" aria-hidden="true"></i>Search</button>
                            </div>
                        </div>
                    </form>

                    <hr>

                    <div class="title_left">
                        <h2>Store List</h2>
                    </div>

                    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#add_store_to_qa_modal" data-whatever="@getbootstrap">Add Store To QA</button>
                    <div class="modal fade" id="add_store_to_qa_modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
                        <div class="modal-dialog" role="document">
                            <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title" id="exampleModalLabel">Add Store to QA</h5>
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                                </button>
                            </div>
                            <div class="modal-body">
                                <div class="form-group">
                                    <select class="form-control" name="brand" id="modal_brand">
                                        <option value="">Brand Name</option>
                                        @foreach($modal_add_brand_lists as $brand_list)
                                            <option value="{{ $brand_list->id }}">{{ $brand_list->name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="form-group">
                                    <select class="form-control" name="store" id="modal_store">
                                        <option selected>---Choose Brand First---</option>
                                    </select>
                                </div>
                                <div class="form-group">
                                    <input type="checkbox" class="check_box" value="is_gadai">
                                    <label for="is_gadai">Gadai</label><br>
                                    <input type="checkbox" class="check_box" value="is_non_gadai">
                                    <label for="is_non_gadai">Non Gadai</label><br>
                                </div>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                                <button type="button" class="btn btn-primary" id="btn-submit-modal">Add Store to QA</button>
                            </div>
                            </div>
                        </div>
                    </div>
                    <hr>

                    <table class="table table-bordered table-striped">
                        <thead>
                            <tr>
                                <th class="text-center col-xs-2">ID</th>
                                <th class="text-center col-xs-5" >Brand</th>
                                <th class="text-center col-xs-5">Store</th>
                                <th class="text-center col-xs-5">Gadai</th>
                                <th class="text-center col-xs-5">Non Gadai</th>
                                <th width="100"></th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($qa_store_lists as $qa_store)
                                <tr>
                                    <td class="text-center">{{ $qa_store->id }}</td>
                                    <td class="text-center">{{ $qa_store->sgk_store->brand->name }}</td>
                                    <td class="text-center">{{ $qa_store->sgk_store->name }}</td>
                                    <td class="text-center">{{ $qa_store->is_gadai == "1" ? 'Yes' : 'No' }}</td>
                                    <td class="text-center">{{ $qa_store->is_non_gadai == "1" ? 'Yes' : 'No' }}</td>
                                    <td><input type="button" class="delete-btn" data-id={{ $qa_store->id }} value="Delete"/></td>
                                </tr>
                            @empty
                                <tr>
                                    <td class="text-center" colspan="6">No Data</td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                    <div class="text-center">{{ $qa_store_lists->appends($_GET)->links() }}</div>
                </div>
            </div>
        </div>
        @include('includes.footer')
    </div>
</div>
@endsection

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>

<meta name="csrf-token" content="{{ csrf_token() }}">

<script language="javascript">
    $(document).ready(function(){
        $('.delete-btn').click(function(){
            // Confirm
            if ( ! confirm('Are you sure want to delete this row?')){
                return false;
            }
            // id need to delete
            var id = $(this).attr('data-id');

            // Current button
            var obj = this;

            // Delete by ajax request
            $.ajax({
                url : '{{ route('butik/store/delete_store') }}',
                type : "post",
                dataType : "text",
                data : {
                    id : id,
                    _token: '{!! csrf_token() !!}',
                },
                success : function(result){
                    alert("Delete Success!");
                    $(obj).parent().parent().remove();
                },
                error : function(response) {
                    alert('Delete Fails!');
                }
            });
        });

        $('#modal_brand').on('change', function() {
            var id = $(this).val();
            if(id){
                $.ajax({
                type:"GET",
                url:'{{ route('butik/store/get_store_modal') }}',
                data : {
                    id : id,
                    _token: '{!! csrf_token() !!}',
                },
                success:function(res){
                    if(res){
                        $("#modal_store").empty();
                        $("#modal_store").append('<option>---Choose Store---</option>');
                        $.each(res,function(id, name){
                            $("#modal_store").append('<option value="'+id+'">'+name+'</option>');
                        });
                    }else{
                        $("#modal_store").empty();
                    }
                }
                });
            }else{
                $("#modal_store").empty();
            }
        });

        $( "#btn-submit-modal" ).click(function() {
            var modal_brand = $( "#modal_brand" ).val();
            var modal_store = $( "#modal_store" ).val();
            var nik = $( "#input_nik" ).val();
            var check_box_value = [];
            $('.check_box').each(function(){
					if($(this).is(":checked"))
					{
						check_box_value.push($(this).val());
					}
			});            

            $.ajax({
                url : '{{ route('butik/store/save_store_to_qa') }}',
                type : "post",
                dataType : "text",
                data : {
                    nik : nik,
                    store_id : modal_store,
                    check_box_value : check_box_value,
                    _token: '{!! csrf_token() !!}',
                },
                success : function(result){
                    alert("Save Success!");
                    location.reload();
                },
                error : function(error) {
                    alert(error.responseText);
                }
            });
        });
    });
</script>