@extends('layouts.admin.main')

@section('title')
    <title>{{ adminPageTitle('APK List') }}</title>
@endsection

@section('page-specific-styles')
<!-- jquery validation message color change -->
<style>
span.error, label.error {
    color:red
}
</style>
@endsection

@section('content')
    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper">
        <!-- Content Header (Page header) -->
        <section class="content-header">
            <div class="container-fluid">
                <div class="row mb-2">
                    <div class="col-sm-8">
                        <h1>APK</h1>
                    </div>
                    <div class="col-md-4">
                        <a href="javascript:void(0);" class="btn btn-primary float-right" data-url="add" id="addApkBtn"><i class="fa fa-plus"></i> Add</a>
                    </div>
                </div>
            </div>
            <!-- /.container-fluid -->
        </section>
        <!-- Main content -->
        <section class="content feedback-wrapper">
            <div class="container-fluid">
                <!-- <div class="row">
                    <div class="col-xl-9">
                        <div class="text-success" id="successMessage">               
                        </div>
                        <div class="text-danger" id="errorMessage" style="display:none;">
                        </div>
                    </div> 
                </div> -->
                <div class="row">
                    <div class="col-12">
                        <div class="card">
                            <div class="card-body table-responsive-md">
                                <table class="table table-bordered dt-responsive nowrap vertical_middle " id="apkDatatable" width="100%" cellspacing="0">
                                    <thead class="thead-light">
                                    <tr>
                                        <th scope="col">Version</th>
                                        <th scope="col">Status</th>
                                        <th scope="col">Force Update</th>
                                        <th scope="col" data-orderable="false">Action</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                        @foreach($mobileAppVerions as $key => $mobileAppVersion)    
                                    <tr id="DT_Row{{$mobileAppVersion->id}}">
                                        <td>{{ $mobileAppVersion->version }}</td>
                                        @if($mobileAppVersion->status == 1)
                                            <td><label class="badge badge-success">Active</label></td>
                                        @else
                                            <td><label class="badge badge-danger">In active</label></td>
                                        @endif
                                        @if($mobileAppVersion->force_update == 1)
                                            <td><label>Yes</label></td>
                                        @else
                                            <td><label>No</label></td>
                                        @endif
                                        <td>
                                            <a href="javascript:;" onclick="deleteAPK({{ $mobileAppVersion->id }})" class="btn btn-danger btn-circle btn-sm delete_apk delete-btn-table" title="Delete"><i class="fas fa-trash"></i></a>
                                        </td>  
                                    </tr>
                                    @endforeach  
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- /.container-fluid -->
        </section>
        <!-- /.content -->
    </div>
    <!-- /.content-wrapper -->
    <!-- Add apk Modal -->
    <div class="modal fade" id="addApkModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Add APK</h5>
                    <button type="button" class="modal-close close closeModal" data-dismiss="modal" aria-label="Close">
                            <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
                    <g>
                        <g>
                            <path d="M493.297,159.693c-12.477-30.878-31.231-59.828-56.199-84.792c-24.965-24.969-53.917-43.723-84.795-56.2
                                C321.421,6.22,288.611,0,255.816,0c-32.747,0-65.495,6.249-96.311,18.744c-30.813,12.491-59.693,31.244-84.603,56.158
                                c-24.915,24.911-43.668,53.792-56.158,84.607C6.249,190.324,0,223.072,0,255.822c0,32.794,6.222,65.602,18.701,96.485
                                c12.477,30.877,31.231,59.828,56.2,84.792c24.964,24.967,53.914,43.722,84.792,56.199c30.882,12.48,63.69,18.701,96.484,18.703
                                c32.748,0,65.497-6.249,96.315-18.743c30.814-12.49,59.695-31.242,84.607-56.158c24.915-24.912,43.668-53.793,56.158-84.608
                                c12.494-30.817,18.743-63.565,18.744-96.315C512,223.383,505.778,190.575,493.297,159.693z M461.611,339.66
                                c-10.821,26.683-27.018,51.648-48.659,73.292c-21.643,21.64-46.608,37.837-73.291,48.659
                                c-26.679,10.818-55.078,16.241-83.484,16.241c-28.477,0-56.947-5.406-83.688-16.214c-26.744-10.813-51.76-27.008-73.441-48.685
                                C77.37,391.27,61.174,366.255,50.363,339.51c-10.808-26.741-16.214-55.212-16.213-83.689c-0.001-28.405,5.423-56.802,16.24-83.482
                                c10.821-26.683,27.018-51.648,48.659-73.291c21.643-21.64,46.607-37.837,73.289-48.659c26.678-10.818,55.075-16.242,83.48-16.242
                                c28.478,0,56.95,5.405,83.691,16.213c26.745,10.811,51.762,27.007,73.445,48.686c21.678,21.682,37.873,46.697,48.685,73.441
                                c10.808,26.741,16.214,55.211,16.214,83.688C477.852,284.582,472.429,312.98,461.611,339.66z"/>
                        </g>
                    </g>
                    <g>
                        <g>
                            <path d="M279.627,256.001l82.693-82.693c6.525-6.525,6.525-17.102,0-23.627c-6.524-6.524-17.102-6.524-23.627,0L256,232.375
                                l-82.693-82.693c-6.525-6.524-17.102-6.524-23.627,0c-6.524,6.524-6.524,17.102,0,23.627l82.693,82.693l-82.693,82.693
                                c-6.524,6.523-6.524,17.102,0,23.627c6.525,6.524,17.102,6.524,23.627,0L256,279.628l82.693,82.693
                                c6.525,6.524,17.102,6.524,23.627,0c6.525-6.524,6.525-17.102,0-23.627L279.627,256.001z"/>
                        </g>
                    </g>
                </svg>
                    </button>
                </div>
                <form method="POST" enctype="multipart/form-data" id="addApkFrm">
                    @csrf
                    <div class="modal-body">  
                        <!-- APK Version -->
                        <div class="form-group">
                            <label class="mdl-lbl">APK Version</label>
                            <input type="text" class="form-control" id="apkVersion" name="version" value="{{ old('apkVersion') }}" placeholder="Enter APK Version" onkeyup="hideError('version-error')" />
                            <span id="version-error" class="error"></span>
                        </div>    
                        <!-- APK File -->
                        <div class="form-group">
                            <label class="mdl-lbl">APK File</label>
                            <input type="file" class="form-control" id="apkFile" name="app_url" onchange="hideError('app_url-error')" />
                            <span id="app_url-error" class="error"></span>
                        </div>      
                        <!-- Force update check -->
                        <div class="form-group">
                            <h4 class="mdl-lbl">Force Update: </h4>
                            <div class="settorpchekf">
                                <span  class="custom_check_div">
                                    <input type="radio" name="force_update" value="1" id="forceUpdateCheck1">
                                    <label for="forceUpdateCheck1" class="custom_radio">Yes</label> 
                                </span>
                                <span  class="custom_check_div">
                                    <input type="radio" name="force_update" value="0" id="forceUpdateCheck2" checked>
                                    <label for="forceUpdateCheck2" class="custom_radio">No</label> 
                                </span>
                                <span id="force_update-error" class="error"></span>
                            </div> 
                        </div>              
                    </div>
                    <div class="modal-footer">
                        <button type="submit" class="btn btn-primary" id="saveApkBtn">Save</button>
                        <div class="spinner-border text-success btn-hide-loader" id="saveBtnLoader" role="status" style="display:none;">
                            <span class="sr-only">Loading...</span>
                        </div>
                        <button type="button" class="btn btn-danger closeModal" data-dismiss="modal" id="modalCancelBtn">Cancel</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <!-- / Add apk modal -->
@endsection
@section('page-specific-scripts')
<!-- jQuery validation cdn -->
<script type="text/javascript" charset="utf8" src="{{ asset('js/jquery.validate.min.js') }}"></script>
<!-- jQuery validation additional methods cdn -->
<script type="text/javascript" charset="utf8" src="{{ asset('js/additional-methods.min.js') }}"></script>
<script>
    // global app configuration object
    var tmpCsrfToken = "{{ csrf_token() }}"
    var config = {
        routes: {
            store: "{{ route('apk.store') }}",
            view: "{{ route('apk.view') }}",
            delete: "{{ route('apk.destroy', ":apkId") }}"
        }
    };
</script>
<script type="text/javascript" src="{{ asset('admin/js/pages/apk.js') }}"></script>
@endsection