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

{{--Set Page Title--}}
@section('title', 'Setup Services')

{{--Include any Internal JS Code--}}
@section('internal-js')
    <script>
        $(document).ready(function () {
            $('#active-table').dataTable();

        });

        {{--Create New User Account Function--}}
        function addNewService(){
            var route_link = '/add-new-service';

            $('#edit_dialog_content').html('<div style="text-align: center; margin: 20px 0 20px 0;"><img src="{{asset('images/loads/loader.gif')}}" border=0></div>')
                .load(encodeURI(route_link)).dialog({
                modal: true,
                width: 600,
                title: "Create New Service",
                buttons: [
                    {
                        text: "Save Details",
                        icon: "ui-icon-check",
                        id: "my-button-1",
                        click: function(e) {
                            if(confirm('Are you sure to Save Entered Details?')){
                                e.preventDefault();
                                $("#my-button-1").attr('disabled', true).text('Please Wait....');
                                var datas = $('#add-new-service').serializeArray();

                                $.ajax({
                                    method: "POST",
                                    url: route_link,
                                    data: datas,
                                    success: function (res){
                                        if(res == 'empty name'){
                                            alert('Please enter the name of the Service');
                                            $("#my-button-1").attr('disabled', false).text('Save Details');
                                        }else if(res == 'error'){
                                            alert('An Error occurred and System is unable to perform the requested action. Try again later');
                                            location.reload();
                                        }else if(res == 'success'){
                                            alert('Service Successfully created');
                                            location.reload();
                                        }else{
                                            alert('System Encountered an Error. Please Contact System Admin');
                                            location.reload();
                                        }
                                    }
                                });
                            }
                            return false;
                        }
                    }
                ],
                open: function() {
                    $(this).parent().css({'top': 50});
                }
            });
        }
    </script>
@endsection

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

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

{{--Set Page Heading--}}
@section('heading', 'Setup Services')

{{--Page Content Goes here--}}
@section('content')
    <div class="tab">
        <button class="tablinks" onclick="openCity(event, 'users')" id="defaultOpen">Active Services</button>
    </div>

    <div id="users" class="tabcontent">
        <span onclick="this.parentElement.style.display='none'" class="topright" style="margin-left: 20px">&times</span>
        <!--Export Links/Buttons-->
        <h3 class="error">
            Company's Active Services
            <button onclick="addNewService()" class="section-button">+ Add New Service</button>
        </h3>
        <table id="active-table" class="display" style="width: 100%; border-collapse: collapse; ">
            <thead>
            <tr style="background-color: #a1b5d3">
                <th>No</th>
                <th>Product Name</th>
                <th>Status</th>
                <th style="width: 40px">Edit</th>
                <th style="width: 40px">Delete</th>
            </tr>
            </thead>
            <tbody>
            @foreach($services as $service)
                <tr>
                    <td class="ar"></td>
                    <td>{!! $service->lgnm !!}</td>
                    <td>
                        @if($service->status == 1)
                            <b class="success">Active</b>
                        @else
                            <b class="error">Inactive</b>
                        @endif
                    </td>
                    <td><a onclick="editProduct('{{$service->id}}')" class="inner" title="Edit Service" style="cursor: pointer"><b class="error"><i class="fa fa-pencil" style="font-size: 14px"></i></b></a></td>
                    <td><a onclick="deleteProduct('{{$service->id}}')" title="Delete Service" style="cursor: pointer"><b><i class="fa fa-trash error" style="font-size: 14px"></i></b></a></td>
                </tr>
            @endforeach
            </tbody>
            <tfoot>
            <tr style="background-color: #a1b5d3">
                <th>No</th>
                <th>Product Name</th>
                <th>Status</th>
                <th style="width: 40px">Edit</th>
                <th style="width: 40px">Delete</th>
            </tr>
            </tfoot>
        </table>
    </div>
@endsection

@section('modal_heading')
    <h1>Setup Services</h1>
@endsection
@section('modal_title')
    <h3><u>Dashboard Functionalities</u></h3>
    <b>
        <ol>
            <li>View all Active Services </li>
            <li>Update Details of a Particular Service</li>
        </ol>
    </b>
@endsection
