@extends('template.master')

@section('page_styles')
{{--CUSTOM STYLES HERE--}}
    <link rel="stylesheet" href="{{ asset('css/layout/account.css') }}">
    <link rel="stylesheet" href="{{ asset('assets/css/datatable/jquery.dataTables.min.css') }}">
@stop

@section('content')
    @include('company.edit_company_page')

<div class="container-fluid account-page">
    <!-- Begin Page Header-->
    <div class="row">
        <div class="page-header">
            <div class="d-flex align-items-center">
                <h2 class="page-header-title">Clients</h2>

            </div>
        </div>
    </div>
    <!-- End Page Header -->

    <!--Tabs started-->

    <div class="card new-card">
        <div class="card-title">
            <h1>Manage Clients</h1>
        </div>
        <div class="card-content">
                @if ($errors->any())
                <div class="alert alert-danger tab-company tab-company-3" style="width: 100%;">
                    <ul>
                        @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
                @elseif ($error)
                <div class="alert alert-danger tab-company tab-company-3" style="width: 100%;">
                    <ul>
                        <li>{{ $error }}</li>
                    </ul>
                </div>
                @elseif ($success)
                <div class="alert alert-success tab-company tab-company-3" style="width: 100%;">
                    <ul>
                        <li>{{ $success }}</li>
                    </ul>
                </div>
                @endif
            <div class="manage-company">
                <a href="javascript: void(0)" class="btn btn-square btn-outline-success" data-toggle="modal" data-target="#edit-company-modal-page" onclick="javascript: addCompany()"><i class="la la-plus-circle"></i>&nbsp; Add Company</a>
                <div class="float-right mb-3">
                    <div class="styled-checkbox">
                        <input type="checkbox" name="checkbox" id="check-1">
                        <label for="check-1">Toggle Archived Companies</label>
                    </div>
                </div>

                <br/><br/>
                <div class="widget has-shadow">
                    <div class="widget-header bordered no-actions d-flex align-items-center">
                        <h4>Company List</h4>
                    </div>
                    <div class="widget-body">
                        <table id="companys-tbl" class="display" style="width:100%">
                            <thead>
                                <tr>
                                    <th>Name</th>
                                    <th>Website</th>
                                    <th>Email</th>
                                    <th>Address</th>
                                    <th>Phone</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                @if(!empty($companies))
                                    @foreach($companies as $key => $value)
                                        <tr data-status="{{ $value->deleted_at }}" 
                                                id="company-tr-{{$value->id}}">
                                            <td>{{$value->name}}</td>
                                            <td>{{$value->website}}</td>
                                            <td>{{$value->email}}</td>
                                            <td>{{$value->address}}</td>
                                            <td>{{$value->phone}}</td>
                                            <td>
                                                @if(empty($value->deleted_at))

                                                <div class="btn-group" role="group" aria-label="Actions">
                                                    <a href="javascript: void(0)" class="btn mb-2 btn-primary" data-toggle="modal" data-target="#edit-company-modal-page" onclick="javascript: editCompany({{$value->id}}, '{{trim($value->name)}}', '{{trim($value->email)}}', '{{trim($value->phone)}}', '{{trim($value->website)}}', '{{trim($value->address)}}')"><i class="la la-edit"></i>&nbsp; EDIT</a>
                                                    @if(auth()->user()->company_id != $value->id)
                                                    <a href="user?cid={{$value->id}}" class="btn mb-2 btn-success">
                                                        <i class="la la-users"></i>&nbsp; USERS</a>
                                                    <button type="button" class="btn mb-2 btn-danger" onclick="javascript: deleteCompany({{$value->id}})">
                                                        <i class="la la-trash"></i>&nbsp; DELETE</button>
                                                    @endif
                                                </div>

                                                @else

                                                <div class="btn-group" role="group" aria-label="Actions">
                                                    <button type="button" class="btn mb-2 btn-warning" onclick="javascript: restoreCompany({{$value->id}})">
                                                        <i class="la la-rotate-right"></i>&nbsp; RESTORE</button>
                                                </div>

                                                @endif
                                            </td>
                                        </tr>
                                    @endforeach
                                @endif
                            </tbody>
                            <tfoot>
                                <tr>
                                    <th>Name</th>
                                    <th>Website</th>
                                    <th>Email</th>
                                    <th>Address</th>
                                    <th>Phone</th>
                                    <th>Actions</th>
                                </tr>
                            </tfoot>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!--Tabs End-->

<!-- End Row -->

</div>

@stop

@section('page_modals')

@stop
@section('page_scripts')
<script src="{{ asset('page_assets/accounts/js/page.js')}}"></script>
<script src="{{ asset('assets/js/datatable/jquery.dataTables.min.js') }}"></script>
<!--CUSTOM SCRIPTS-->

<script type="text/javascript">

    $(document).ready(function() {
        var table = $('#companys-tbl').DataTable();

        // Hide / Show Tickets
        $('#check-1').click(function(){
            $.fn.dataTable.ext.search.pop();
            table.draw();

            if($(this).prop("checked") == true){
                $.fn.dataTable.ext.search.push(
                  function(settings, data, dataIndex) {
                      return $(table.row(dataIndex).node()).attr('data-status') != '';
                    }
                );
            }
            else{
                $.fn.dataTable.ext.search.push(
                  function(settings, data, dataIndex) {
                      return $(table.row(dataIndex).node()).attr('data-status') == '';
                    }
                );
            }
            table.draw();
        });

        // Tweaks
        setTimeout(function(){ $('#check-1').click(); $('#check-1').click(); }, 500);

    });

    function getUrlVars() {
        var vars = {};
        var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {
            vars[key] = value;
        });
        return vars;
    }

    function addCompany()
    {
        $('.company_id').val(0);
        $('#company_name').val('');
        $('#company_email').val('');
        $('#company_phone').val('');
        $('#company_website').val('');
        $('#company_address').val('');
    }

    function editCompany(id, name, email, phone, website, address)
    {
        $('.company_id').val(id);
        $('.company_name').val(name);
        $('.company_email').val(email);
        $('.company_phone').val(phone);
        $('.company_website').val(website);
        $('.company_address').val(address);
    }

    function submitCompany()
    {
        $('#companyDataForm').submit();
    }

    function deleteCompany(id)
    {
        if (confirm('Are you sure you want to DELETE this company and its users?')) {
            var data = {
                "_token": "{{ csrf_token() }}"
            };

            $.ajax({
                type: 'DELETE',
                url: 'company/' + id,
                data: data,
                dataType: 'json',
                success: function(resp) {
                    $('#company-tr-'+id).remove();
                    location.reload();
                },
                error: function(xhr, status, error) {
                    
                }

            });
        }
    }

    function restoreCompany(id)
    {
        if (confirm('Are you sure you want to RESTORE this company and its users?')) {
            var data = {
                "_token": "{{ csrf_token() }}"
            };

            $.ajax({
                type: 'POST',
                url: 'company/restore/' + id,
                data: data,
                dataType: 'json',
                success: function(resp) {
                    $('#company-tr-'+id).remove();
                    location.reload();
                },
                error: function(xhr, status, error) {
                    
                }

            });
        }
    }

    function manageUsers(id)
    {
        alert('ONGOING!');
    }

    function readCompanyURL(input, name) {
        $('.uploadLogo').hide();

        if (input.files && input.files[0]) {
            var reader = new FileReader();

            reader.onload = function(e) {
                $('#' + name).attr('src', e.target.result);
                $('.file-select[select-name=' + name + ']').addClass('has-file');

            }

            reader.readAsDataURL(input.files[0]);
        }

        $('.edit-icon').click(function() {
            $(this).parents('.file-select').removeClass('has-file');
            $(this).parents('.file-select').find('input').val('');
            $('.uploadLogo').show();
        });
    }


    function readURL(input, name) {
        $('.uploadProfilePicture').hide();

        if (input.files && input.files[0]) {
            var reader = new FileReader();

            reader.onload = function(e) {
                console.log(e.target.result);
                $('#' + name).attr('src', e.target.result);
                $('.file-select[select-name=' + name + ']').addClass('has-file');

            }

            reader.readAsDataURL(input.files[0]);
        }

        $('.edit-icon').click(function() {
            $(this).parents('.file-select').removeClass('has-file');
            $(this).parents('.file-select').find('input').val('');
            $('.uploadProfilePicture').show();
        });
    }

</script>
@stop