
{{--Get the Page Format--}}
@extends('layouts.app')

{{--Set Page Title--}}
@section('title', 'Manage Office Stationery Items')

{{--Include any Internal JS Code--}}
@section('internal-js')
    <script>

        $(document).ready(function () {
            $('#example').dataTable();

        });

        function addOfficeStationery(){
            var route_link = '/add-office-stationery-items';

            $('#edit_dialog_content').html('<div style="text-align: center; margin: 20px 0 20px 0;"><img src="{{asset('images/loads/loader.gif')}}" border=0></div>');
            $('#edit_dialog_content').load(encodeURI(route_link));
            $('#edit_dialog_content').dialog({
                modal: true,
                width: 450,
                title: "Add a New Item to be shown as Office Stationery",
                buttons: [
                    {
                        text: "Save Details",
                        icon: "ui-icon-check",
                        click: function(e) {
                            if(confirm('Are you sure to Save Entered Stationery Details?')){
                                e.preventDefault();
                                var datas = $('#add-new-office-stationery-item').serializeArray();

                                $.ajax({
                                    method: "POST",
                                    url: route_link,
                                    data: datas,

                                    success: function (res){
                                        //alert(res);
                                        if(res == 'empty item'){
                                            alert('Please fill out all Fields marked with RED Asterisk (*)');
                                        }else if(res == 'exists'){
                                            alert('The Item Name Entered already Exists');
                                        }else if(res == 'error'){
                                            alert('System is Unable to perform this Request. Please try again');
                                        }else if(res == 'success'){
                                            window.location = '/setup-office-stationary?submit=true';
                                        }else {
                                            alert('System Encountered an Error. Please Contact System Admin');
                                            window.location = '/setup-office-stationary?error=system';
                                        }
                                    }
                                });
                                return false;
                            }
                        }
                    }
                ],
                open: function() {
                    $(this).parent().css({'top': 50});
                }
            });
        }

    </script>
@endsection

{{--Include any Internal CSS Code--}}
@section('internal-css')
    <style>
        #example th, td {
            text-align: left;
            padding: 5px;
        }
        #example tr:hover {background-color: #a3aef6;}
        #example7 th, td {
            text-align: left;
            padding: 5px;
        }
        #example7 tr:hover {background-color: #a3aef6;}
    </style>
@endsection

{{--Control Page Header/Links--}}
@section('headers')
    @include('headers.finance-header')
@endsection

{{--Set Page Heading--}}

@section('heading', 'Manage Office Stationery Items:')

@section('done-by', '')

{{--Page Content Goes here--}}
@section('content')
    @isset($_GET['submit'])
        <div class="error-section">
            <span onclick="this.parentElement.style.display='none'" class="topright" style="color: white ;margin-top: -4px;font-weight: bold; margin-right: 5px">&times</span>
            @if($_GET['submit'] == 'true')
                <div class="yesFound"> Office Stationery Item Created Successfully.</div><br>
            @elseif($_GET['submit'] == 'false')
                <div class="notFound">System is unable to Create Office Stationery Item Entered. Please Contact System Admin for Assistance</div><br>
            @endif
        </div>
    @endisset
    <div class="tab">
        <button class="tablinks" onclick="openCity(event, 'list')" id="defaultOpen" >Office Stationery List</button>
    </div>

    <div class="tabcontent" id="list">
        <span onclick="this.parentElement.style.display='none'" class="topright" style="margin-left: 20px">&times</span>
        <h3 ><span class="error" style="margin-right: 20px">Office Stationery Items Listing</span>
            <button onclick="addOfficeStationery()" style="margin-left: 20px; cursor: pointer;height: 25px">+ Add Office Stationery</button>
        </h3>
        <i class="error"><b>This is a List of All Office Stationery Items that the Company can Requisition For</b></i><br><br>
        <table id="example" class="display" style="width:100%; border-collapse: collapse">
            <thead>
            <tr style="background-color: #a1b5d3">
                <th>No</th>
                <th>Item Name</th>
                <th>Status</th>
                <th style="width: 10px"></th>
                <th style="width: 10px"></th>
            </tr>
            </thead>
            <tbody>
            @foreach($lists as $list)
                <tr>
                    <td class="ar"></td>
                    <td>{!! $list->name !!}</td>
                    <td>
                        @if($list->status == 1)
                            <b>Active</b>
                        @else
                            <span class="error"><b>Inactive</b></span>
                        @endif
                    </td>
                    <td >
                        <a  href="javascript: void(0);" class="inner"  onclick="editItem('{{$list->id}}')"><b class="error"><i class="fa fa-pencil fa-md" style="font-size: 15px"></i></b></a>
                    </td>
                    <td >
                        <a  href="javascript: void(0);" class="inner"  onclick="deleteItem('{{$list->id}}')"><b class="error"><i class="fa fa-trash-o fa-md" style="font-size: 15px"></i></b></a>
                    </td>
                </tr>
            @endforeach
            </tbody>
            <tfoot>
            <tr style="background-color: #a1b5d3">
                <th>No</th>
                <th>Item Name</th>
                <th>Status</th>
                <th style="width: 10px"></th>
                <th style="width: 10px"></th>
            </tr>
            </tfoot>
        </table>
    </div>
@endsection
@section('other-js')

@endsection

{{--System Hints Page--}}

@section('modal_heading')
    <h1>Setup Office Stationery Items</h1>
@endsection
@section('modal_title')
    <h3><u>Dashboard Functionalities</u></h3>
    <b>
        <ol>
            <li>View and Manage Office Stationery Items</li>
            <li>Activate/Deactivate Stationery Items </li>
            <li>View Logs</li>
        </ol>
    </b>
@endsection
