@extends('layouts.app')
@section('title', 'Counter Information')

@section('styles')
    <!--start select2-->
    <link href="{{asset('assets/plugins/multiselect/css/multi-select.css')}}" rel="stylesheet" type="text/css"/>
    <link href="{{asset('assets/plugins/select2/css/select2.min.css')}}" rel="stylesheet" type="text/css"/>
    <!--end select2-->

    <!--start datatable-->
    <link href="{{asset('assets/plugins/datatables/fixedHeader.bootstrap.min.css')}}" rel="stylesheet" type="text/css"/>
    <link href="{{asset('assets/plugins/datatables/dataTables.bootstrap.min.css')}}" rel="stylesheet" type="text/css"/>
    <link href="{{asset('assets/plugins/switchery/css/switchery.min.css')}}" rel="stylesheet" type="text/css"/>
    <!--end datatable-->
@endsection

@section('content')
    <div class="row">
        <div class="col-sm-12">
            <h4 class="page-title">Counter Information</h4>
            <p class="text-muted page-title-alt"></p>
        </div>
    </div>
    {{--{{dd($editData)}}}--}}
    <div class="row">
        <div class="col-sm-12">
            <div class="card-box">
                <h4 class="page-title">Counter Information</h4>

                <div id="error_msg"></div>
                <form role="form-horizontal"
                      action="{{($editData)?url('/counter_entry/edit/'.$editData['counter_no'].'/'.$editData['stn_code']):url('/counter_entry')}}"
                      method="post" enctype="multipart/form-data" onsubmit="return checkLotForm()">

                    @csrf
                    <div class="row">
                        <div class="col-md-12">
                            <div class="row">
                                <div class="col-md-3">
                                    <div class="form-group @error('user_type') has-error @enderror">
                                        <label for="name">Counter No</label>
                                        <input type="text" id="counter_no" name="counter_no" class="form-control"
                                               placeholder="Counter No"
                                               value="{{($editData)?$editData['counter_no']:''}}">
                                        @error('counter_no')<span class="text-danger">{{ $message }}</span>@enderror
                                    </div>
                                </div>

                                <div class="col-md-3">
                                    <div class="form-group @error('user_type') has-error @enderror">
                                        <label for="name">Station</label>
                                        <select class="select2 form-control" name="stn_code" id="stn_code">
                                            <option value="">-- Please select an option --</option>
                                            @foreach($allStations as $station)
                                                <option value="{{$station->stn_code}}"
                                                @if(!empty($editData)) @if($station->stn_code == $editData['stn_code']) {{'selected="selected"'}} @endif @endif
                                                >{{$station->stn_name}}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-3">
                                    <label for="name" class="col-md-6">Refund CNT</label>
                                    <input type="checkbox" data-plugin="switchery" name="refund_cnt_yn"
                                           id="refund_cnt_yn"
                                           data-color="#4c5667" {{isset($editData['refund_cnt_yn']) && $editData['refund_cnt_yn'] == "Y" ? 'checked' : ''}}/>
                                </div>

                                <div class="col-md-3">
                                    <label for="name" class="col-md-6">Esheba CNT</label>
                                    <input type="checkbox" data-plugin="switchery" name="esheba_cnt_yn"
                                           id="esheba_cnt_yn"
                                           data-color="#4c5667" {{isset($editData['esheba_cnt_yn']) && $editData['esheba_cnt_yn'] == "Y" ? 'checked' : ''}}/>
                                </div>

                                <div class="col-md-3">
                                    <label for="name" class="col-md-6">Warrent CNT</label>
                                    <input type="checkbox" data-plugin="switchery" name="warrent_cnt_yn"
                                           id="warrent_cnt_yn"
                                           data-color="#4c5667" {{isset($editData['warrent_cnt_yn']) && $editData['warrent_cnt_yn'] == "Y" ? 'checked' : ''}}/>
                                </div>

                                <div class="col-md-3">
                                    <label for="name" class="col-md-6">Non AC Class Only</label>
                                    <input type="checkbox" data-plugin="switchery" name="nonac_class_only"
                                           id="nonac_class_only"
                                           data-color="#4c5667" {{isset($editData['nonac_class_only']) && $editData['nonac_class_only'] == "Y" ? 'checked' : ''}}/>
                                </div>
                            </div>
                            <br/>
                            <div class="row">
                                <div class="col-md-3">
                                    <label for="name" class="col-md-6">Display Attached</label>
                                    <input type="checkbox" data-plugin="switchery" name="display_attached_yn"
                                           id="display_attached_yn"
                                           data-color="#4c5667" {{isset($editData['display_attached_yn']) && $editData['display_attached_yn'] == "Y" ? 'checked' : ''}}/>
                                </div>

                                <div class="col-md-3">
                                    <label for="name" class="col-md-6">Pass CNT</label>
                                    <input type="checkbox" data-plugin="switchery" name="pass_cnt_yn" id="pass_cnt_yn"
                                           data-color="#4c5667" {{isset($editData['pass_cnt_yn']) && $editData['pass_cnt_yn'] == "Y" ? 'checked' : ''}}/>
                                </div>

                                <div class="col-md-3">
                                    <label for="name" class="col-md-6">Remote Ticket</label>
                                    <input type="checkbox" data-plugin="switchery" name="remote_tckt_yn"
                                           id="remote_tckt_yn"
                                           data-color="#4c5667" {{isset($editData['remote_tckt_yn']) && $editData['remote_tckt_yn'] == "Y" ? 'checked' : ''}}/>
                                </div>

                                <div class="col-md-3">
                                    <label for="name" class="col-md-6">Seat Release Counter</label>
                                    <input type="checkbox" data-plugin="switchery" name="seat_release_counter_yn"
                                           id="seat_release_counter_yn"
                                           data-color="#4c5667" {{isset($editData['seat_release_counter_yn']) && $editData['seat_release_counter_yn'] == "Y" ? 'checked' : ''}}/>
                                </div>
                            </div>
                            <br/>
                            <div class="row">
                                <div class="col-md-3">
                                    <label for="name" class="col-md-6">International</label>
                                    <input type="checkbox" data-plugin="switchery" name="international_yn"
                                           id="international_yn"
                                           data-color="#4c5667" {{isset($editData['international_yn']) && $editData['international_yn'] == "Y" ? 'checked' : ''}}/>
                                </div>

                                <div class="col-md-3">
                                    <label for="name" class="col-md-6">Enabled</label>
                                    <input type="checkbox" data-plugin="switchery" name="enabled_yn" id="enabled_yn"
                                           data-color="#4c5667" {{isset($editData['enabled_yn']) && $editData['enabled_yn'] == "Y" ? 'checked' : ''}}/>
                                </div>
                            </div>
                            <br/>

                            <div id="portlet2" class="panel-collapse collapse in">
                                <div class="portlet-body">
                                    <div class="table-responsive col-md-6">
                                        <table class="table table-striped table-bordered" id="tblEntAttributes">
                                            <thead>
                                            <tr>
                                                <th>#</th>
                                                <th>IP</th>
                                                <th class="text-center"><button type="button" id="append"
                                                                                class="btn btn-pink waves-effect waves-light">ADD IP
                                                    </button></th>
                                            </tr>
                                            </thead>

                                            <tbody>
                                            @if(count($counter_IP)>0)
                                                @foreach($counter_IP as $key=>$ip)
                                                    <tr>
                                                        <td>{{++$key}}<input type="hidden" name="ip_count" value="{{count($counter_IP)}}" id="ip_count"></td>
                                                        <td><input type="text" class="form-control" id="counter_ip"
                                                                   placeholder="IP Address" value="{{$ip->counter_ip}}"></td>
                                                        <td class="text-center">
                                                            <button type='button' id="remove" onClick='deleteRow()' class='btn btn-danger waves-effect waves-light'>REMOVE</button>
                                                            <button type='button' id="update" class='btn btn-inverse waves-effect waves-light'>UPDATE</button>
                                                        </td>

                                                    </tr>
                                                @endforeach
                                            @else
                                                <tr>
                                                    <td>1</td>
                                                    <td>
                                                        <input type="text" class="form-control" id="counter_ip"
                                                               placeholder="IP Address" name="counter_ip[]">
                                                    </td>
                                                    <td class="text-center">
                                                        <button type='button' id="remove" onClick='deleteRow()' class='btn btn-danger waves-effect waves-light'>REMOVE</button>
                                                    </td>
                                                </tr>
                                            @endif


                                            </tbody>
                                        </table>
                                    </div>

                                </div>
                            </div>
                        </div>

                        @if($editData)
                            <div class="row">
                                <div class="col-md-12 text-right" id="cancel">
                                    <button type="submit" id="update" class="btn btn-default waves-effect waves-light">
                                        Update
                                    </button>
                                    <a href="{{url('/counter_entry')}}">
                                        <button type="button" id="cancel"
                                                class="btn btn-inverse waves-effect waves-light">
                                            Cancel
                                        </button>
                                    </a>
                                </div>
                            </div>
                        @else
                            <div class="row">
                                <div class="col-md-12 text-right" id="add">
                                    <button type="reset" id="reset" class="btn btn-inverse waves-effect waves-light">
                                        Reset
                                    </button>
                                    <button type="submit" id="add" class="btn btn-default waves-effect waves-light ">
                                        Submit
                                    </button>

                                </div>
                            </div>
                        @endif
                        <script type="text/javascript"
                                src="{{asset('assets/plugins/switchery/js/switchery.min.js')}}"></script>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-lg-12">
            <div class="portlet"><!-- /primary heading -->
                <div class="portlet-heading">
                    <h3 class="portlet-title text-dark text-uppercase">
                        User Information List
                    </h3>
                    <div class="clearfix"></div>
                </div>

                <div id="portlet2" class="panel-collapse collapse in">
                    <div class="portlet-body">
                        <div class="table-responsive">
                            <table id="datatable-fixed-header" class="table table-striped table-bordered">
                                <thead>
                                <tr>
                                    <th>#</th>
                                    <th>Counter No</th>
                                    <th>Station</th>
                                    <th>Refund CNT</th>
                                    <th>Esheba CNT</th>
                                    <th>Warrent CNT</th>
                                    <th>Non AC Class Only</th>
                                    <th>Display Attached</th>
                                    <th>Pass CNT</th>
                                    <th>Remote Ticket</th>
                                    <th>Seat Release Counter</th>
                                    <th>International</th>
                                    <th>Enabled</th>
                                    <th>ACTION</th>
                                </tr>
                                </thead>

                                <tbody>

                                @foreach($allCounterEntry as $key=>$entry)
                                    <tr>
                                        <td>{{++$key}}.</td>
                                        <td>{{$entry->counter_no}}</td>
                                        <td>{{$entry->stn_name}}</td>
                                        <td>{{$entry->refund_cnt_yn == "Y" ? 'YES' : 'NO'}}</td>
                                        <td>{{$entry->esheba_cnt_yn == "Y" ? 'YES' : 'NO'}}</td>
                                        <td>{{$entry->warrent_cnt_yn == "Y" ? 'YES' : 'NO'}}</td>
                                        <td>{{$entry->nonac_class_only == "Y" ? 'YES' : 'NO'}}</td>
                                        <td>{{$entry->display_attached_yn == "Y" ? 'YES' : 'NO'}}</td>
                                        <td>{{$entry->pass_cnt_yn == "Y" ? 'YES' : 'NO'}}</td>
                                        <td>{{$entry->remote_tckt_yn == "Y" ? 'YES' : 'NO'}}</td>
                                        <td>{{$entry->seat_release_counter_yn == "Y" ? 'YES' : 'NO'}}</td>
                                        <td>{{$entry->international_yn == "Y" ? 'YES' : 'NO'}}</td>
                                        <td>{{$entry->enabled_yn == "Y" ? 'YES' : 'NO'}}</td>
                                        <td>

                                            <a href="{{ url('/counter_entry/edit') }}/{{$entry->counter_no}}/{{$entry->stn_code}}"
                                               class="table-action-btn" title=" Edit">
                                                <i class="md md-edit"></i>
                                            </a>
                                        </td>
                                    </tr>
                                @endforeach
                                </tbody>
                            </table>
                        </div>

                    </div>
                </div>
            </div>
        </div> <!-- end col -->

    </div>


@endsection


@section('script')

    <!--start datatable-->
    <script type="text/javascript" src="{{asset('assets/plugins/datatables/jquery.dataTables.min.js')}}"></script>
    <script type="text/javascript" src="{{asset('assets/plugins/datatables/dataTables.bootstrap.js')}}"></script>
    <script type="text/javascript" src="{{asset('assets/plugins/datatables/dataTables.fixedHeader.min.js')}}"></script>
    <script type="text/javascript" src="{{asset('assets/plugins/datatables/dataTables.fixedColumns.min.js')}}"></script>
    <script>
        $(document).ready(function () {
            $('#datatable').dataTable();
            $('#datatable-fixed-header').DataTable({fixedHeader: true});

        });
    </script>
    <!--end datatable-->

    <!--start select2-->
    <script src="{{asset('assets/plugins/bootstrap-touchspin/js/jquery.bootstrap-touchspin.min.js')}}"
            type="text/javascript"></script>
    <script src="https://cdn.jsdelivr.net/lodash/4/lodash.min.js"></script>

    <!--end select2-->

    <!--start Add-->
    <script>

        $(".select2").select2();

        /*function deleteRow(row) {
            var i = row.parentNode.parentNode.rowIndex;
            document.getElementById('POITable').deleteRow(i);
        }*/


        function insRow() {
            var x = document.getElementById('POITable');
            var new_row = x.rows[1].cloneNode(true);
            var len = x.rows.length;
            new_row.cells[0].innerHTML = len;

            var inp1 = new_row.cells[1].getElementsByTagName('input')[0];
            inp1.id += len;
            inp1.value = '';
            var inp2 = new_row.cells[2].getElementsByTagName('input')[0];
            inp2.id += len;
            inp2.value = '';
            x.appendChild(new_row);
        }

        function checkLotForm() {
            var counter_no = $("#counter_no").val();
            var stn_code = $("#stn_code").val();

            if (counter_no == "") {
                $("#error_msg").html('<div class="text-danger">ENTER COUNTER NO</div>');
                return false;
            }
            if (stn_code == "") {
                $("#error_msg").html('<div class="text-danger">SELECT STATION</div>');
                return false;
            }
            return true;
        }


    </script>
    <!--end Add-->
    <script>

        function deleteRow() {

            let val = '{{count($counter_IP)+1}}';
            if(val>1)
            {
                document.getElementById("tblEntAttributes").deleteRow(val);
            }
            else
            {
                document.getElementById("tblEntAttributes").deleteRow(2);
            }
        }
        function removeRow(){
            var items = table.querySelectorAll('tr');
            if (rowCount > 1){
                table.removeChild(items[rowCount - 1]);
            }
            rowCount -= 1;
        }
        var count;
        var ip_count = parseInt(document.getElementById("ip_count").value);

        if(ip_count>0)
        {
            count =  ip_count+1;
        }
        window.addEventListener('load', function () {
            var compiledRow = _.template("<tr>"
                +"<td><%= serialNo %></td>"
                +"<td><input type='text' class='form-control' id=\"<%= counter_ip %>\" placeholder='IP Address' name='counter_ip[]'></td>"
                +"<td class='text-center'><button type='button' id=\"<%= remove %>\" onClick='deleteRow()' class='btn btn-danger waves-effect waves-light'>REMOVE</button></td>"
                +"</tr>");
            document.getElementById('append').addEventListener('click', function (e) {
                var ajaxData = { 'serialNo':count, 'counter_ip': 'counter_ip_' + count, 'stn_code_tbl': 'stn_code_tbl_' + count, 'remove': 'remove_' + count };
                var tableRowData = compiledRow(ajaxData);
                $("#tblEntAttributes tbody").append(tableRowData);
                count++;
            });
        });
    </script>

@endsection