@extends('layouts.app')
@section('title', session('company_code') . ' Elite System')

@section('body')
<div class="box box-default">
    <div class="box-body">
        <div class="row">
            <div class="col-xs-12">
                <label class="text-primary" style="font-size:16px; margin-top:6px">Account Classifications</label>
            </div>    
        </div>
        <hr style="margin-top:6px; margin-bottom:8px">
        <div class="row">
            <div class="col-xs-4">
                <div class="form-group">
                    <label class="control-label">Branch</label>
                    <input type="text" class="form-control" value="{{ session('branch_name') }}" disabled="true">
                </div>
                <div class="form-group">
                    <label class="control-label">Account Classification</label>
                    <select id="acct_class" class="form-control select2 select2-hidden-accessible" style="width: 100%;" data-placeholder="" aria-hidden="true">
                        <option></option>
                        <option value="RES">Residential</option>
                        <option value="COM">Commercial</option>
                        <option value="GOV">Goverment</option>
                        <option value="IND">Industrial</option>
                        <option value="REL">Religious</option>
                        <option value="BLK">Bulk Water</option>
                    </select>
                </div>
                <div class="form-group">
                    <label class="control-label">Sub-Classification</label>
                    <input type="text" class="form-control" id="acct_subclassification">
                </div>
                <div class="form-group">
                    <label class="control-label">Description</label>
                    <input type="text" class="form-control" id="description">
                </div>
                <div class="form-group">
                    <button class="btn btn-success" id="btn-add-class" data-mode="add"><i class="fa fa-fw fa-plus"></i> ADD CLASSIFICATION</button>
                    <button class="btn btn-default" id="btn-cancel"><i class="fa fa-fw fa-ban"></i> CANCEL</button>
                </div>
            </div>

            <div class="col-xs-8">
                <label class="control-label">List of Classifications</label>
                <table class="table table-bordered table-hover">
                    <thead class="table-header-bg">
                        <tr>
                            <th width="20%">Account Classification</th>
                            <th width="15%">Sub-Classification</th>
                            <th width="35%">Description</th>
                            <th width="15%">Status</th>
                            <th width="15%">Action</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($classifications AS $c)
                        <tr>
                            <td>{{ strtoupper($c->class) }}</td>
                            <td>{{ strtoupper($c->sub_class) }}</td>
                            <td>{{ ucwords($c->description) }}</td>
                            <td>
                                @if($c->is_active == 1)
                                <label class="label label-success">Active</label>
                                @else
                                <label class="label label-danger">Inactive</label>
                                @endif
                            </td>
                            <td style="padding:3px">
                                <div class="btn-group">
                                    <button class="btn btn-sm btn-success btn-edit-class" data-class-id="{{ $c->id }}"><i class="fa fa-fw fa-pencil"></i></button>
                                    @if($c->is_active == 1)
                                    <button class="btn btn-sm btn-warning btn-set-status" data-class-id="{{ $c->id }}" data-action="deactivate"><i class="fa fa-fw fa-power-off"></i></button>
                                    @else
                                    <button class="btn btn-sm btn-success btn-set-status" data-class-id="{{ $c->id }}" data-action="activate"><i class="fa fa-fw fa-power-off"></i></button>
                                    @endif
                                </div>
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')   
<script type="text/javascript">    
    $(document).ready(function() {
        $('#btn-add-class').click(function() {
            $mode = $(this).data('mode');

            // ADD NEW CLASSIFICATION
            if($mode == "add") {
                $jc = $.confirm({
                    title: false,
                    type: 'green',
                    draggable: true,
                    content: '<p class="text-center"><i class="fa fa-fw fa-question-circle text-bold text-success" style="font-size:54px"></i></p>' + '<p class="text-center">Are you sure you want to add new account classification?</p>',
                    buttons: {
                        CANCEL: {
                            btnClass: 'btn btn-default',
                            text: '<small>[ESC]</small> CANCEL',
                            keys: ['esc']
                        },
                        CONFIRM: {
                            btnClass: 'btn btn-success',
                            text: '<small>[ENTER]</small> CONFIRM',
                            action: function() {
                                $acct_class    = $('#acct_class').val();
                                $acct_subclass = $('#acct_subclassification').val();
                                $description = $('#description').val();

                                $.ajax({
                                    url: $app_url + '/administrator/account-classifications/add',
                                    type: 'post',
                                    data: {
                                        'acct_class': $acct_class,
                                        'acct_subclassification': $acct_subclass,
                                        'description': $description
                                    },
                                    beforeSend: function(e) {
                                        $('.form-group').removeClass('has-error');
                                    },
                                    success: function(e) {
                                        location.reload();
                                    },
                                    error: function(e) {
                                        if(e.status == 422) {
                                            $.each(e.responseJSON, function(field, message) {
                                                $('#'+field).closest('.form-group').addClass('has-error').prop('title', message);
                                            });
                                        }
                                    },
                                    complete: function(e) {
                                        console.log(e);
                                    }
                                });
                            },
                            keys: ['enter']
                        } 
                    }
                });
            }

            // UPDATE EXISTING USER
            if($mode == "edit") {
                $jc = $.confirm({
                    title: false,
                    type: 'blue',
                    draggable: true,
                    content: '<p class="text-center"><i class="fa fa-fw fa-question-circle text-bold text-info" style="font-size:54px"></i></p>' + '<p class="text-center">Are you sure you want to update classification?</p>',
                    buttons: {
                        CANCEL: {
                            btnClass: 'btn btn-default',
                            text: '<small>[ESC]</small> CANCEL',
                            keys: ['esc']
                        },
                        CONFIRM: {
                            btnClass: 'btn btn-primary',
                            text: '<small>[ENTER]</small> CONFIRM',
                            action: function() {
                                $class_id = $('#btn-add-class').data('class-id');
                                $acct_class = $('#acct_class').val();
                                $acct_subclass = $('#acct_subclassification').val();
                                $description = $('#description').val();

                                $.ajax({
                                    url: $app_url + '/administrator/account-classifications/patch',
                                    type: 'post',
                                    data: {
                                        'cid' : $class_id,
                                        'acct_class': $acct_class,
                                        'acct_subclassification': $acct_subclass,
                                        'description': $description
                                    },
                                    beforeSend: function(e) {
                                        $('.form-group').removeClass('has-error');
                                    },
                                    success: function(e) {
                                        location.reload();
                                    },
                                    error: function(e) {
                                        if(e.status == 422) {
                                            $.each(e.responseJSON, function(field, message) {
                                                $('#'+field).closest('.form-group').addClass('has-error').prop('title', message);
                                            });
                                        }
                                    },
                                    complete: function(e) {
                                        console.log(e);
                                    }
                                });
                            },
                            keys: ['enter']
                        } 
                    }
                });
            } 
        });

        $('#btn-cancel').click(function() {
            // $('#acct_class').val('').trigger('change');
            // $('#acct_subclassification').val('');
            // $('#description').val('');

            // $('#btn-add-class').removeClass("btn-primary")
            //                   .addClass("btn-success")
            //                   .data("class-id", null)
            //                   .data("mode", "add")
            //                   .html("<i class='fa fa-fw fa-plus'></i> ADD CLASSIFICATION");
            location.reload();
        });

        $('.btn-edit-class').click(function() {
            showBoxLoadingState();
            $class_id = $(this).data("class-id");
            $button   = $("#btn-add-class");

            $.get($app_url + "/administrator/account-classifications/details", { "class_id" : $(this).data("class-id") }, function(data) {
                $("#acct_class").val(data.class).trigger("change");
                $("#acct_subclassification").val(data.sub_class);
                $("#description").val(data.description);

                $button.removeClass("btn-success")
                       .addClass("btn-primary")
                       .data("class-id", $class_id)
                       .data("mode", "edit")
                       .html("<i class='fa fa-fw fa-pencil'></i> UPDATE CLASSIFICATION");
            }).done(function(e) {
                removeBoxLoadingState();
            }).error(function(e) {
                removeBoxLoadingState();
            });
        });

        $('.btn-set-status').click(function() {
            $class_id = $(this).data('class-id');
            $action   = $(this).data('action');

            $jc = $.confirm({
                title: false,
                type: $action == 'activate' ? 'green' : 'orange',
                draggable: true,
                content: '<p class="text-center"><i class="fa fa-fw fa-warning text-bold" style="font-size:54px"></i></p>' + "<p class='text-center'>Are you sure you want to "+$action+" this account classification? You won't be able to select this account classification on new application and change account classification once it is de-activated.</p>",
                buttons: {
                    CANCEL: {
                        btnClass: 'btn btn-default'
                    },
                    CONFIRM: {
                        btnClass: $action == 'activate' ? 'btn btn-success' : 'btn btn-warning',
                        action: function() {
                            $.ajax({
                                url: $app_url + '/administrator/account-classifications/status',
                                type: 'post',
                                data: {
                                    'class_id' : $class_id,
                                    'action' : $action
                                },
                                success: function(e) {
                                    location.reload();
                                },
                                error: function(e) {

                                },
                                complete: function(e) {
                                    console.log(e);
                                }
                            });
                        }
                    } 
                }
            });
        });
    });
</script>
@endsection