@extends('backend.layouts.app')

@section('title', 'Flash News')
@section('page-title', 'Flash News')
@section('page-breadcrumb', 'Flash News')

<!-- <div id="element" class="btn btn-default show-modal">show modal</div> -->

@section('content')

<div class="col-md-12">
    <div class="card">
        <div class="card-header card-header-color">
            <span class="h4"><i class="fa fa-list-alt"></i> Flash News List</span>
            <a id="AddFlashNewsModel" onclick="openModal('')" class="btn btn-sm btn-success  float-right text-white"><i class="fa fa-user-plus fa-lg"></i> Flash News</a>
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-hover table-sm">
                    <thead>
                        <tr class="table-primary">
                            <th>S.No</th>
                            <th>News</th>
                            <th>News For</th>
                            <th>Status</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($FlashNewsList as $flashnews)
                        <tr>
                            <td>{{$flashnews->FlashNewsId}}</td>
                            <td>{{$flashnews->Message}}<input type="hidden" id="Message_{{$flashnews->FlashNewsId}}" value="{{$flashnews->Message}}"></td>
                            <td>{{$flashnews->FlashType }}<input type="hidden" id="FlashType_{{$flashnews->FlashNewsId}}" value="{{$flashnews->FlashType}}"></td>
                            <td><input type="checkbox"  disabled />
                                <input type="hidden" id="IsActive_{{$flashnews->FlashNewsId}}" value="{{$flashnews->IsActive}}"></td>
                            <!-- <td>{{$flashnews->CreatedDate}}</td> -->
                            <td>
                                <span class="sertcursure btn btn-danger btn-xs" data-toggle="modal" onclick="openModal({{$flashnews->FlashNewsId}})">
                                    <i class="fa fa-edit"></i>
                                </span>
                            </td>
                            </th>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="FlashNewsModel" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="card">
                <div class="card-header" id="modalTitle">
                    <strong>Flash News</strong>
                </div>
                <form action="" method="post" id="FlashNewsForm" class="form-horizontal">
                    @csrf
                    <input type="hidden" name="FlashNewsId" id="FlashNewsId">
                    <div class="container">
                        <div class="card-body">

                            <div class="form-group">
                                <label for="Message" class="col-sm-4 control-label">Flash Message:</label>
                                <div class="col-sm-12">
                                    <textarea class="form-control" id="Message" name="Message" autofocus></textarea>
                                </div>
                            </div>

                            <div class="col-md-12 row">
                                <div class="form-group col-md-12 customRadio custom-control-inline">
                                    <label class=" col-sm-2 col-form-label" for="UserType">User Type</label>

                                    <div class="col-md-4 mt-2">
                                        <input type="radio" name="FlashType" id="ChannelUser" value="ChannelUser">
                                        <label for="ChannelUser">Channel User</label>
                                    </div>
                                    <div class="col-md-4 mt-2">
                                        <input type="radio" name="FlashType" id="OtherUser" value="OtherUser" checked>
                                        <label for="OtherUser">Multiple Users</label>
                                    </div>
                                </div>
                            </div>

                            <div class="col-md-12 row">
                                <div class="form-group col-md-12 custom-control-inline">
                                    <label class=" col-sm-2 col-form-label" for="UserType">Status</label>

                                    <div class="custom-control custom-checkbox mt-2">
                                        <input type="checkbox" class="custom-control-input" id="IsActive">
                                        <label class="custom-control-label" for="IsActive">IsActive</label>
                                    </div>
                                </div>
                            </div>


                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="submit" onclick="SaveFlashNews()" class="btn btn-primary btn-sm">
                    <i class="fa fa-arrow-circle-right fa-lg"></i> Save
                </button>
                <button type="button" class="btn btn-danger btn-sm" data-dismiss="modal">
                    <i class="fa fa-arrow-circle-left fa-lg"></i> Close
                </button>
            </div>
        </div>
    </div>
</div>





@endsection

@section('self_script')

<script>
    //$(document).ready(function() {
    function SaveFlashNews() {
        var Message = $("#Message").val();
        var FlashType = $("input[name=FlashType]:checked").val();
        var IsActive = ($('#IsActive').is(":checked")) ? 1 : 0

        if (Message != "") {
            $.ajax({
                type: 'POST',
                url: baseurl + "admin/save_flash_news",
                data: {
                    "_token": $("input[name=_token]").val(),
                    "Message": Message,
                    "FlashType": FlashType,
                    "IsActive": IsActive,
                    "FlashNewsId": $("#FlashNewsId").val()
                },
                success: function(response) {
                    var response = JSON.parse(response);
                    alert(response.message);
                    if (response.status) {
                        $('#IsActive,#Message, input[name=FlashType]').val('');
                        $("#FlashNewsModel").modal('hide');
                    }
                }
            });
        } else {
            alert('Message is required.');
        }
    }

    function openModal(id) {
        if (id == "") {
            $('#IsActive,#Message').val('');
            $("#modalTitle").html("Add Flash News");
        } else {
            $("#Message").val($("#Message_" + id).val());
            $('input:radio[name=FlashType][value='+$("#FlashType_" + id).val()+']').attr('checked', true);
            console.log($("#IsActive_" + id).val() );
            $("#IsActive").prop('checked', ($("#IsActive_" + id).val() == "1")?true:false);
            $("#modalTitle").html("Update Flash News");
        }
        $("#FlashNewsId").val(id);
        $("#FlashNewsModel").modal('show');

    }
    // });
</script>



@endsection