@extends('layouts.layout')

@section('body_class', 'nav-md')

@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>Merchant List</h3>
                </div>
                <div class="clearfix"></div>
            </div>

            <div class="row">
                <div class="col-xs-12">
                    <div class="x_panel">
                        <div class="x_title">
                            <h2>Filter</h2>
                            <ul class="nav navbar-right panel_toolbox">
                                <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a></li>
                            </ul>
                            <div class="clearfix"></div>
                        </div>
                        <div class="x_content">
                            <form id="form_filter" class="form-horizontal">
                                <div class="form-group">
                                    <label for="company_select" class="col-xs-12 col-sm-2 control-label">Program Select :</label>
                                    <div class="col-xs-12 col-sm-10">
                                        <select class="form-control" id="company_select" name="program">
                                            @if(!empty($program_list))
                                                @foreach($program_list as $list)
                                                    <option value="{{ $list->id }}" selected>{{$list->name}}</option>  
                                                @endforeach            
                                            @endif                     
                                        </select>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-xs-12 col-sm-2 control-label">Merchant name : </label>
                                    <div class="col-xs-12 col-sm-10">
                                        <input name="client_name" type="text" class="form-control" placeholder="Search client's name..." value="{{ $client_name }}" novalidate>
                                    </div>
                                </div>                                

                                <div class="form-group">
                                    <div class="col-xs-12 col-sm-offset-2 col-sm-10">
                                        <div class="alert_placeholder"></div>
                                    </div>
                                </div>

                                <div class="form-group">
                                    <div class="col-xs-12 col-sm-offset-2 col-sm-10">
                                        <button type="submit" class="btn btn-default">Search</button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>

                <div class="col-xs-12">
                    <div class="x_panel">
                        <div class="x_title">
                            <div class="container">
                                <div class="row">
                                    <div class="col-md-8"> <h2>Merchant List</h2></div>
                                    <div class="col-md-4" style="text-align:right;">
                                        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#add_single_merchant_modal" style="text-align:right;">Add Single Merchant</button>
                                        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#add_multiple_merchant_modal" style="text-align:right;">Add Multiple Merchant</button>
                                    </div>
                                </div>
                            </div>                           
                            <div class="clearfix"></div>                            
                        </div>   

                        <div class="modal fade" id="add_multiple_merchant_modal" tabindex="-1" role="dialog" aria-labelledby="addMultipleMerchantModal" aria-hidden="true">
                            <div class="modal-dialog" role="document">
                                <div class="modal-content">
                                <div class="modal-header">
                                    <h5 class="modal-title" id="exampleModalLabel"><strong>Add Multiple Merchant Form</strong></h5>
                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                    <span aria-hidden="true">&times;</span>
                                    </button>
                                </div>
                                <div class="modal-body">
                                    <form id="multiple_merchant_form">
                                        <div class="form-group">
                                            <label for="company_select" class="col-form-label">Program Select :</label>                                            
                                            <select class="form-control" id="company_select" name="program">
                                                @if(!empty($program_list))
                                                    @foreach($program_list as $list)
                                                        <option value="{{ $list->id }}">{{$list->name}}</option>  
                                                    @endforeach   
                                                @endif                              
                                            </select>                                            
                                        </div>
                                        <div class="form-group" >
                                            <label class="col-form-label">Select File (.xlsx):</label>                                            
                                            <input id="file_upload" type="file" class="form-control" name="select_file" />                                        
                                        </div>                                                                            
                                    </form>
                                </div>

                                <div class="modal-footer">
                                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                                    <button type="button" class="btn btn-primary save_multiple_merchant_button"><i class="fa fa-upload"></i> Upload</button>
                                     <a href="{{route('point_administrator/download_roles_format', ['roles' => "merchant"])}}" class="btn btn-default download-format" target="_blank"><i class="fa fa-download" aria-hidden="true"></i> Format</a>
                                </div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="modal fade" id="add_single_merchant_modal" tabindex="-1" role="dialog" aria-labelledby="addSingleMerchantModal" aria-hidden="true">
                            <div class="modal-dialog" role="document">
                                <div class="modal-content">
                                <div class="modal-header">
                                    <h5 class="modal-title" id="exampleModalLabel"><strong>Add Single Merchant Form</strong></h5>
                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                    <span aria-hidden="true">&times;</span>
                                    </button>
                                </div>
                                <div class="modal-body">
                                    <form id="single_merchant_form">
                                        <div class="form-group">
                                            <label for="company_select" class="col-form-label">Program Select :</label>                                            
                                            <select class="form-control" id="company_select" name="program">
                                                 @if(!empty($program_list))
                                                    @foreach($program_list as $list)
                                                        <option value="{{ $list->id }}">{{$list->name}}</option>  
                                                    @endforeach                 
                                                @endif                
                                            </select>                                            
                                        </div>
                                        <div class="form-group">
                                            <label for="merchant_name" class="col-form-label">Merchant Name:</label>
                                            <input type="text" class="form-control" name="merchant_name" id="merchant_name" maxlength="100">
                                        </div>                                    
                                        <div class="form-group">
                                            <label for="merchant_code" class="col-form-label">Code:</label>
                                            <input type="text" class="form-control" name="merchant_code" id="merchant_code" maxlength="100">
                                        </div>    
                                        <div class="form-group">
                                            <label for="company_select" class="col-form-label">Area :</label>                                            
                                            <select class="form-control" id="company_select" name="area">
                                                @if(!empty($area_list))
                                                    @foreach($area_list as $list)
                                                        <option value="{{ $list->id }}">{{$list->name}}</option>  
                                                    @endforeach  
                                                @endif                               
                                            </select>                                            
                                        </div>   
                                        <div class="form-group">
                                            <label for="owner_name" class="col-form-label">Owner Name:</label>
                                            <input type="text" class="form-control" name="owner_name" id="owner_name" maxlength="100">
                                        </div> 
                                        <div class="form-group">
                                            <label for="email" class="col-form-label">Email:</label>
                                            <input type="text" class="form-control" name="email" id="email" maxlength="100">
                                        </div> 
                                        <div class="form-group">
                                            <label for="phone_number" class="col-form-label">Handphone No. (start with(0) ex: 0812888):</label>
                                            <input type="text" class="form-control" name="phone_number" id="phone_number" maxlength="100">
                                        </div>                                       
                                    </form>
                                </div>

                                <div class="modal-footer">
                                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                                    <button type="button" class="btn btn-primary save_single_merchant_button">Save</button>
                                </div>
                                </div>
                            </div>
                        </div>

                        <div class="x_content">
                            <table class="table table-bordered table-striped">
                                <thead>
                                    <tr>
                                        <th class="text-center">ID</th>                                        
                                        <th class="text-center">Client User ID</th>                                        
                                        <th class="text-center">Merchant Code</th>                                        
                                        <th class="text-center">Merchant Name</th>
                                        <th class="text-center">Owner Name</th>
                                        <th class="text-center">Email</th>
                                        <th class="text-center">Area</th>
                                        <th class="text-center">Handphone</th>                                        
                                        <th class="text-center"></th>                                        
                                    </tr>
                                </thead>
                                <tbody>
                                    @if(is_array($datas) || is_object($datas))  
                                        @forelse($datas as $data)
                                            <tr>    
                                                @php
                                                    $role = App\Models\Au_point_client_users_model::where('id', $data->client_user_id)->first(); 
                                                @endphp        
                                                @php
                                                    $area = App\Models\Au_point_client_area_model::where('id', $data->client_area_id)->first(); 
                                                @endphp                                     
                                                <td class="text-center">{{ $data->id }}</td>                                                
                                                <td class="text-center">{{ $role->id }}</td>
                                                <td class="text-center">{{ $data->merchant_code }}</td>
                                               
                                                <td class="text-center">{{ $role->name }}</td>
                                                <td class="text-center">{{ $data->owner_name }}</td>                                                
                                                <td class="text-center">{{ $data->email }}</td>                                                
                                                <td class="text-center">{{ $area->name }}</td>                                                
                                                <td class="text-center">{{ $data->phone }}</td>                                                
                                                <td class="text-center">
                                                    <button type="button" class="btn btn-primary" onclick="reset_merchant_password('{{ $data->merchant_code }}')">Reset Password</button>    
                                                </td>                                                
                                            </tr>
                                        @empty
                                            <tr>
                                                <td class="text-center" colspan="6">No Data</td>
                                            </tr>
                                        @endforelse
                                    @endif
                                </tbody>
                            </table>
                            <div class="text-center">
                                @if(!empty($datas))
                                    {{ $datas->appends($_GET)->links("pagination::bootstrap-4") }} 
                                @endif
                            </div>                            
                        </div>
                    </div>
                </div>
            </div>
        </div>
        @include('includes.footer')
    </div>
</div>
@endsection

@section("scripts")
<script type="text/javascript">
    $(".save_single_merchant_button").on("click", function() {    
        var fdata = new FormData($("#single_merchant_form")[0]);       
        $.ajax({
            url: '/point_administrator/save_single_merchant_process',
            method: "POST",            
            headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
            data: fdata,
            processData: false,
            contentType: false,
            enctype:"multipart/form-data",
            success: function(response) {
                alert(response.success); 
                setTimeout(function(){
                    window.location.reload(); 
                }, 1500);                                     
            },
            error: function(response) {
                var data = response.responseJSON;
                alert(data.error);                
            }
        });
        return false;
    })

    $(".save_multiple_merchant_button").on("click", function() {    
        var fdata = new FormData($("#multiple_merchant_form")[0]);       
        $.ajax({
            url: '/point_administrator/save_multiple_merchant_process',
            method: "POST",            
            headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
            data: fdata,
            processData: false,
            contentType: false,
            enctype:"multipart/form-data",
            success: function(response) {              
                alert(response.success); 
                setTimeout(function(){
                    window.location.reload(); 
                }, 1500);                                     
            },
            error: function(response) {
                var data = response.responseJSON;              
                alert(data.error); 
                setTimeout(function(){
                    window.location.reload(); 
                }, 1500);                    
            }
        });
        return false;
    })

    function reset_merchant_password(merchant_code) {
        var new_password = prompt("Masukkan password baru");
        if (new_password != null) {

            // url:web_url+"/point_administrator/reset_merchant_password",
            $.ajax({
                url:"/point_administrator/reset_merchant_password",
                method:"POST",
                headers:{"X-CSRF-TOKEN":$('meta[name="csrf-token"]').attr("content")},
                data:{
                    merchant_code: merchant_code,
                    new_password: new_password
                },
                success: function(response) {
                    alert("Success, password reseted!");
                },
                error: function(response) {
                    var response = response.responseJSON;
                    alert(response.error);
                }
            });
        }
        return false;
    }
</script>
@endsection