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

{{--Set Page Title--}}
@section('title', 'Manage Sub-Modes of Payments for'.$mode->name)

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

        $(document).ready(function () {

            $('#example').dataTable();
            $('#example1').dataTable();

            $('#search-mode').select2();

            $('#submit-search').on('click', function (){
                var mode = $('#search-mode').val();
                if(mode == ""){
                    alert('Please Select a Mode of Payment to Search');
                }else{
                    window.location = mode+'?type=summary';
                }
            });


            $('#summary-url').on('click', function (){
                window.history.pushState({}, null, '?type=summary');
            });
            $('#log-url').on('click', function (){
                window.history.pushState({}, null, '?type=log');
            });

        });

        function addSubModeOfPayment(id, name){
            var route_link = '/add-company-sub-mode-of-payment/'+id;

            $('#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: 600,
                title: "Create New Sub-Mode of Payment Under "+name,
                buttons: [
                    {
                        text: "Save Details",
                        icon: "ui-icon-check",
                        click: function(e) {
                            if(confirm('Are you sure to Save Entered Sub-Mode Details?')){
                                e.preventDefault();
                                var datas = $('#add-company-sub-mode-of-payment').serializeArray();

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

                                    success: function (res){
                                        // alert(res);
                                        if(res == 'empty field'){
                                            alert('Please fill out the Sub-Mode Name Field marked with RED Asterisk (*)');
                                        }else if(res == 'exists'){
                                            alert('Entered Sub-Mode Name already Exists under '+name);
                                        }else if(res == 'error' ){
                                            window.location = '/company-sub-modes-of-payment/'+id+'?submit=false&type=summary';
                                        }else if(res == 'success'){
                                            window.location = '/company-sub-modes-of-payment/'+id+'?submit=true&type=summary';
                                        }else{
                                            alert('System Encountered an Error. Please Contact System Admin');
                                            window.location = 'company-sub-modes-of-payment/'+id+'?type=summary&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;}
        #example1 th, td {
            text-align: left;
            padding: 5px;
        }
        #example1 tr:hover {background-color: #a3aef6;}
    </style>

@endsection

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

{{--Set Page Heading--}}
@section('heading')
    Manage Sub-Modes of Payments Under:- <span class="error">{{$mode->name}}</span>
@endsection
@section('searches')
    <div style="float: right">
        <br>
        {!! Form::open(['method'=>'POST']) !!}
        <div class="guestDetails_input">
            <div class="guestDetails_input" style="text-align: center">
                <select name="search-mode" id="search-mode" style="width: 200px">
                    <option value="">--Select Mode of Payment--</option>
                    @if(isset($modes))
                        @foreach($modes as $row)
                            <option value="{{$row->id}}">{{$row->name}}</option>
                        @endforeach
                    @endif
                </select>
            </div>
        </div>
        <div class="guestDetails_input">
            <div class="guestDetails_input">
                <button type="button" id="submit-search" style="width: auto; height: 22px; cursor: pointer" title="Search a Product"><i class="fa fa-search" aria-hidden="true"></i></button>
            </div>
        </div>
        {!! Form::close() !!}
    </div>
@endsection

{{--Page Content Goes here--}}
@section('content')
    @isset($_GET['submit'])
        <div>
            <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">Sub-Mode of Payment Added Successfully</div><br>
            @elseif($_GET['submit'] == 'false')
                <div class="notFound">System is unable to save Sub-Mode of Payment Details entered . Please Contact System Admin for Assistance</div><br>
            @endif
        </div>
    @endisset

    <div class="tab">
        <button class="tablinks" onclick="openCity(event, 'general')" @if(isset($_GET['type']) && $_GET['type'] == 'summary')id="defaultOpen" @else id="summary-url"@endif>General</button>
        @if(app('UserReads')->log == 1)
            <button class="tablinks" onclick="openCity(event, 'log')" @if(isset($_GET['type']) && $_GET['type'] == 'log')id="defaultOpen" @else id="log-url"@endif>LOG
                @isset($history)
                    <span class="
                @if(count($history) > 0)
                countItems
                @else
                zeroItems
                @endif">
               &nbsp;{{count($history)}}&nbsp;
            </span>
                @endisset
            </button>
        @endif
    </div>

    <div class="tabcontent" id="general">
        <span onclick="this.parentElement.style.display='none'" class="topright">&times</span>
        <h3 class="error">Customize Sub-Modes of Payment under:- {{$mode->name}}
            <button style="margin-left: 20px; cursor: pointer;height: 25px" onclick="addSubModeOfPayment('{{$mode->id}}', '{{$mode->name}}')">+ Add New Sub-Mode</button>
        </h3>

        <table id="example" class="display" style="width: 100%; border-collapse: collapse; ">
            <thead>
            <tr style="background-color: #a1b5d3">
                <th>No</th>
                <th>Sub-Mode Name</th>
                <th>Date Created</th>
                <th>User</th>
                <th></th>
                <th></th>
            </tr>
            </thead>
            <tbody>
            @isset($lists)
                @foreach($lists as $list)
                    <tr>
                        <td class="ar"></td>
                        <td><a href="{{url('#')}}" class="inner" style="color: red; font-weight: bold" >{{$list->name}}</a></td>
                        <td>{{$list->created_at->format('d/m/Y')}}</td>
                        <td>
                            @if($list->user != null)
                                {{$list->user->f_nm." ".$list->user->l_nm}}
                            @else
                                -
                            @endif
                        </td>
                        <td><a href="javascript: editDetails('{{$list->id}}');"><b class="error"><i class="fa fa-pencil fa-md" style="font-size: 15px" title="Edit Mode"></i></b></a></td>
                        <td><b><i onclick="delMode('{{$list->id}}','{{$list->name}}')" class="fa fa-trash-o" style="font-size: 16px; cursor: pointer" title="Delete Mode"></i></b></td>
                    </tr>
                @endforeach
            @endisset
            </tbody>

            <tfoot>
            <tr style="background-color: #a1b5d3">
                <th>No</th>
                <th>Sub-Mode Name</th>
                <th>Date Created</th>
                <th>User</th>
                <th></th>
                <th></th>
            </tr>
            </tfoot>
        </table>
    </div>

    <div class="tabcontent" id="log">
        <span onclick="this.parentElement.style.display='none'" class="topright">&times</span>
        <h3 class="error">Audit Trails [LOGs]</h3>
        <table id="example1" class="display" style="width:100%; border-collapse: collapse">
            <thead>
            <tr style="background-color: #a1b5d3">
                <th style="text-align: left">No</th>
                <th style="text-align: left">Log Narration.</th>
                <th style="text-align: left">User</th>
                <th style="text-align: left">Date & Time</th>
            </tr>
            </thead>
            <tbody>

            @if(isset($history))
                @foreach($history as $histo)
                    <tr>
                        <td style="width: 50px" class="br"></td>
                        <td class="error">{!!   $histo->narration !!}</td>
                        <td>{{\App\Models\User::where('id', $histo->created_by)->first()->l_nm}}</td>
                        <td>{{$histo->created_at->format('d/m/Y') .' at '. $histo->created_at->format('h:i:s a')}}</td>
                    </tr>
                @endforeach
            @endif
            </tbody>
            <tfoot>
            <tr style="background-color: #a1b5d3">
                <th style="text-align: left">No</th>
                <th style="text-align: left">Log Narration.</th>
                <th style="text-align: left">User</th>
                <th style="text-align: left">Date & Time</th>
            </tr>
            </tfoot>
        </table>
    </div>
@endsection

{{--System Hints Page--}}


@section('modal_heading')
    <h1>Setup Company Sub-Modes of Payments </h1>
@endsection
@section('modal_title')
    <h3><u>Dashboard Functionalities</u></h3>
    <ol><b>
            <li>View and amend Company Sub-Modes of Payments i.e for Mobile Payments:- MPESA, PESA LINK</li>
            <li>Add New Sub-Modes of Payments</li>
            <li>Delete/Deactivate Sub-Modes of Payment</li>
        </b>
    </ol>
@endsection





