@extends('layouts.master')

@section('title', 'Channels')

@section('content')

    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper">
        <!-- Content Header (Page header) -->
        <div class="content-header">
            <div class="container-fluid">
                <div class="row mb-2">
                    <div class="col-sm-6">
                        <h1 class="m-0 text-dark">Channels</h1>
                    </div><!-- /.col -->

                    <div class="col-sm-6">
                        <span class="btn btn-primary btn-md float-right" data-toggle="modal" data-target="#NewChannelModal"><i class="fa fa-plus-circle mr-2"></i>New Channel</span>
                    </div>
                </div><!-- /.row -->
            </div><!-- /.container-fluid -->
        </div>
        <!-- /.content-header -->

        <!-- Main content -->
        <section class="content">
            <div class="container-fluid">

                <!-- /.row -->

                <!-- Main row -->
                <div class="row">
                    <!-- Left col -->
                    <div class="col-md-12">

                        <!-- /.card -->

                        <!-- TABLE: LATEST ORDERS -->
                        <div class="card">
                            <div class="card-header border-transparent">
                                <h3 class="card-title">Channels</h3>
                            </div>
                            <!-- /.card-header -->
                            <div class="card-body p-0">
                                <div class="table-responsive">
                                    <table id="channelTable" class="table m-0">
                                        <thead>
                                        <tr>
                                            <th>Image</th>
                                            <th>Name</th>
                                            <th>Live Stream</th>
                                            <th>Actions</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        @if(!empty($channels))
                                            @foreach($channels as $channel)
                                                <tr>
                                                    <td><img src="{{asset($channel->logo)}}" style="width: 40px; height: 40px"/></td>
                                                    <td>{{$channel->name}}</td>
                                                    <td>{{substr($channel->stream, 0, 40).'...'}}</td>
                                                    <td><div class="row" style="text-align: center">
                                                            <span class="badge badge-danger m-1" data-toggle="modal" data-target="#DeleteChannelModal" channel-id="{{$channel->id}}"><i class="fa fa-2x fa-trash"></i></span>
                                                            <span class="badge badge-info m-1"
                                                                  data-toggle="modal" data-target="#EditChannelModal"
                                                                  channel-id="{{$channel->id}}"
                                                                  channel-name="{{$channel->name}}"
                                                                  channel-link="{{$channel->stream}}"
                                                                  channel-allow-free = "{{$channel->allow_free}}"
                                                                  channel-is-live = "{{$channel->is_live}}">
                                                            <i class="fa fa-2x fa-edit"></i></span>
                                                        </div>
                                                    </td>
                                                </tr>
                                            @endforeach
                                        @endif
                                        </tbody>
                                    </table>
                                </div>
                                <!-- /.table-responsive -->
                            </div>

                            <!-- /.card-footer -->
                        </div>
                        <!-- /.card -->
                    </div>
                    <!-- /.col -->

                    <!-- /.col -->
                </div>
                <!-- /.row -->
            </div><!--/. container-fluid -->
        </section>
        <!-- /.content -->
    </div>

    <div id="NewChannelModal" class="modal fade" role="dialog">
        <div class="modal-dialog">

            <!-- Modal content-->
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">Add New Channel</h4>
                </div>
                <form method="post" role="form" action="{{route('newChannel')}}" enctype="multipart/form-data">
                    {{ csrf_field() }}
                    <div class="modal-body">
                        <label class="mt-2" for="title">Channel Name</label>
                        <input id="title" name="name" type="text" placeholder="Enter Channel Name" class="form-control" required>
                        <label class="mt-2" for="notification">Channel Live Stream</label>
                        <input type="text" name="stream" id="notification" placeholder="Enter live stream link" class="form-control" required>
                        <label class="mt-2">Allow Free
                        <input id="add_channel_checkbox" type="checkbox" value="0" name="allow_free"></label><br>
                        <label class="mt-2">Is Live
                            <input id="add_channel_checkbox_live" type="checkbox" value="0" name="is_live"></label><br>
                        <label class="mt-2" for="notification">Channel Logo</label><br>
                        <input type="file" name="logo" placeholder="Select logo for channel" required>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-primary">Submit</button>
                    </div>
                </form>

            </div>

        </div>
    </div>

    <div id="EditChannelModal" class="modal fade" role="dialog">
        <div class="modal-dialog">

            <!-- Modal content-->
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">Edit Channel</h4>
                </div>
                <form id="EditForm" method="post" role="form" action="{{route('editChannel')}}" enctype="multipart/form-data">
                    {{ csrf_field() }}
                    <div class="modal-body">
                        <input id="title" name="id" type="hidden" class="form-control" required>
                        <label class="mt-2" for="title">Channel Name</label>
                        <input id="title" name="name" type="text" placeholder="Enter Channel Name" class="form-control" required>
                        <label class="mt-2" for="notification">Channel Live Stream</label>
                        <input type="text" name="stream" id="notification" placeholder="Enter live stream link" class="form-control" required>
                        <label class="mt-2">Allow Free
                        <input id="edit_channel_checkbox" type="checkbox" name="allow_free"></label><br>
                        <label class="mt-2">Is Live
                            <input id="edit_channel_checkbox_live" type="checkbox" value="0" name="is_live"></label><br>
                        <label class="mt-2" for="notification">Channel Logo</label><br>
                        <input type="file" name="logo" placeholder="Select logo for channel">
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-primary">Submit</button>
                    </div>
                </form>

            </div>

        </div>
    </div>

    <div id="DeleteChannelModal" class="modal fade" role="dialog">
        <div class="modal-dialog">

            <!-- Modal content-->
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">Delete Channel</h4>
                </div>
                <form id="DeleteForm" method="post" role="form" action="{{route('deleteChannel')}}" enctype="multipart/form-data">
                    {{ csrf_field() }}
                    <div class="modal-body">
                        <input name="id" type="hidden" placeholder="Enter Channel Name" class="form-control" required>
                        <p>Are you sure you want to delete this channel?</p>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-warning">Yes!</button>
                    </div>
                </form>

            </div>

        </div>
    </div>

    <!-- /.content-wrapper -->
@endsection

@section('javascript')
    <!-- jQuery -->
    <script src="/public/dist/plugins/jquery/jquery.min.js"></script>
    <!-- jQuery UI 1.11.4 -->
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
    <!-- Bootstrap 4 -->
    <script src="/public/dist/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
    <!-- Sparkline -->
    <script src="/public/dist/plugins/sparkline/jquery.sparkline.min.js"></script>
    <!-- jvectormap -->
    <script src="/public/dist/plugins/jvectormap/jquery-jvectormap-1.2.2.min.js"></script>
    <script src="/public/dist/plugins/jvectormap/jquery-jvectormap-world-mill-en.js"></script>
    <!-- Slimscroll -->
    <script src="/public/dist/plugins/slimScroll/jquery.slimscroll.min.js"></script>
    <!-- ChartJS 1.0.2 -->
    <script src="/public/dist/plugins/chartjs-old/Chart.min.js"></script>
    <!-- AdminLTE App -->
    <script src="/public/dist/js/adminlte.js"></script>
    <!-- AdminLTE dashboard demo (This is only for demo purposes) -->
    <script src="/public/dist/js/pages/dashboard2.js"></script>
    <!-- AdminLTE for demo purposes -->
    <script src="/public/dist/js/demo.js"></script>



    <script>
        $('#EditChannelModal').on('show.bs.modal', function (e) {
            // get information to update quickly to modal view as loading begins
            var opener=e.relatedTarget;//this holds the element who called the modal

            //we get details from attributes
            var channelname=$(opener).attr('channel-name');
            var channellink=$(opener).attr('channel-link');
            var channelid=$(opener).attr('channel-id');
            var allowFree=$(opener).attr('channel-allow-free');
            var isLive=$(opener).attr('channel-is-live');

            //alert("Allow Free: "+ allowFree+", Is Live: ");
            console.log("Allow Free: "+ allowFree+", Is Live: "+isLive);

            $('#EditForm').find('[name="name"]').val(channelname);
            $('#EditForm').find('[name="id"]').val(channelid);
            $('#EditForm').find('[name="stream"]').val(channellink);
            if(allowFree == 1 || allowFree == '1'){
                $("#edit_channel_checkbox").attr('value', true);
                $("#edit_channel_checkbox").prop('checked', true);
            }else {
                $("#edit_channel_checkbox").attr('value', false)
                $("#edit_channel_checkbox").prop('checked', false);
            }

            if(isLive == 1 || isLive == '1'){
                $("#edit_channel_checkbox_live").attr('value', true);
                $("#edit_channel_checkbox_live").prop('checked', true);
            }else {
                $("#edit_channel_checkbox_live").attr('value', false)
                $("#edit_channel_checkbox_live").prop('checked', false);
            }
        });

        $('#DeleteChannelModal').on('show.bs.modal', function (e) {
            // get information to update quickly to modal view as loading begins
            var opener=e.relatedTarget;//this holds the element who called the modal

            //we get details from attributes
            var channelid=$(opener).attr('channel-id');

            $('#DeleteForm').find('[name="id"]').val(channelid);
        });


        $("#add_channel_checkbox").on('change', function() {
            if ($(this).is(':checked')) {
                $(this).attr('value', 'true');
            } else {
                $(this).attr('value', 'false');
            }
        });

        $("#edit_channel_checkbox").on('change', function() {
            if ($(this).is(':checked')) {
                $(this).attr('value', 'true');
            } else {
                $(this).attr('value', 'false');
            }
        });

        $("#edit_channel_checkbox_live").on('change', function() {
            if ($(this).is(':checked')) {
                $(this).attr('value', 'true');
            } else {
                $(this).attr('value', 'false');
            }
        });

    </script>


@stop