@extends('layouts.master')
@section('content')

    <div class="modal fade" id="approveModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content top_border">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel" align="center">Distributor <span>Approve</span></h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body confir_pay">
                    <div class="check_mark">
                        <div class="sa-icon sa-success animate">
                            <span class="sa-line sa-tip animateSuccessTip"></span>
                            <span class="sa-line sa-long animateSuccessLong"></span>
                            <div class="sa-placeholder"></div>
                            <div class="sa-fix"></div>
                        </div>
                    </div>

                    <p align="center"><strong>Are you sure you want to approve distributor?</strong></p>
                </div>
                <div class="modal-footer border-0">
                    <div style="display: block; text-align: center; margin: auto">
                        <button type="button" onclick="updateApproveStatus()" data-dismiss="modal" class="btn btn-primary">Yes</button>
                        <button type="submit" class="btn btn-cancel" data-dismiss="modal" aria-label="Close">No</button>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <div class="row mt-2 mb-3">
        <div class="col-lg-6 col-md-6 col-sm-6">
            <h2 class="_head01">New<span> Distributors</span></h2>
        </div>

        <div class="col-lg-6 col-md-6 col-sm-6">
            <ol class="breadcrumb">
                <li><a><span>New Distributors</span></a></li>
                <li><span>List</span></li>
            </ol>
        </div>
    </div>

    <div class="row">
        <div class="col-md-12">
            <div class="card">
                <div class="header" id="order-title">
                    <h2>Distributors <span> List</span>
                    </h2>
                </div>
                <div class="body">
                    <table class="table table-hover data-table nowrap primary_order" id="primary_order" style="width:100%">
                        <thead>
                        <tr>
                            <th>Date</th>
                            <th>Name</th>
                            <th>Type</th>
                            <th>Added By</th>
                            <th>Region</th>
                            <th>City</th>

                            <th>Actions</th>
                        </tr>
                        </thead>
                        <tbody id="new-distributor-list" class="new-distributor-list">
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <input type="hidden" id="approve_id" value="">
@endsection

@section('scripts')
    <script>
        function addAprroveID(id){
            $('#approve_id').val(id);
        }

        function updateApproveStatus(){
            var id= document.getElementById('approve_id').value;
            var url = '/approve-distributor/'+id;
            http('POST', url).then((e) => {
                if(JSON.parse(e) =="success"){
                    self.notification('success', 'Successfully Updated!');
                }else if(JSON.parse(e) =="territory_missing"){
                    self.notification('error', 'Territory Missing!');
                }else{
                    self.notification('error', 'Some Error Occured, please try again!');
                }

            });
        }

        function notification(type, message) {
            var bgColor = (type == 'error') ? 'red' : 'green';
            var el = $('#notifDiv');
            el.fadeIn();
            el.css('background', bgColor);
            el.text(message);
            setTimeout(() => {
                el.fadeOut();
            }, 3000);
        }

        function http(type, url, formData) {
            var self = this;
            return new Promise(function(resolve, reject) {
                $.ajax({
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')
                    },
                    url: url,
                    type: type,
                    cache: false,
                    contentType: false,
                    processData: false,
                    data: formData,
                    success: function(e) {
                        resolve(e);
                    },
                    error: function(err) {
                        console.log(err);
                        if (err.status == 422 || err.status == 500) {
                            self.notification('error', 'Some Error Occured, please try again.');
                        }
                    }
                });
            });
        }
    </script>
@endsection