@extends('layouts.member-app')

@section('page-title')
<div class="row bg-title">
    <!-- .page title -->
    <div class="col-lg-8 col-md-4 col-sm-4 col-xs-12">
        <h4 class="page-title"><i class="{{ $pageIcon }}"></i> {{ __($pageTitle) }} </h4>
    </div>
    <!-- /.page title -->
    <!-- .breadcrumb -->
    <div class="col-lg-4 col-sm-8 col-md-8 col-xs-12 text-right">
        <a href="{{ route('member.news.add') }}" class="btn btn-outline btn-success btn-sm">@lang('modules.news.add') <i
                class="fa fa-plus" aria-hidden="true"></i></a>
        <ol class="breadcrumb">
            <li><a href="{{ route('member.dashboard') }}">@lang('app.menu.home')</a></li>
            <li class="active">{{ __($pageTitle) }}</li>
        </ol>
    </div>
    <!-- /.breadcrumb -->
</div>
@endsection

@push('head-script')
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.13/css/dataTables.bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.1.1/css/responsive.bootstrap.min.css">
<link rel="stylesheet" href="//cdn.datatables.net/buttons/1.2.2/css/buttons.dataTables.min.css">
<link rel="stylesheet" href="//cdn.datatables.net/buttons/1.2.2/css/buttons.dataTables.min.css">
<link rel="stylesheet" href="{{ asset('plugins/bower_components/bootstrap-select/bootstrap-select.min.css') }}">
<link rel="stylesheet" href="{{ asset('plugins/bower_components/custom-select/custom-select.css') }}">
<link rel="stylesheet" href="{{ asset('plugins/bower_components/bootstrap-datepicker/bootstrap-datepicker.min.css') }}">


@endpush


@section('content')

<div class="row">

    <div class="col-xs-12">
        <div class="white-box">


            <div class="table-responsive">
                <table class="table table-striped table-bordered">
                    <tr>
                        <th>Title</th>
                        <th>Content</th>
                        <th>Created</th>
                        <th>Sponsor</th>
                        <th>Attachment</th>
                        <th>Action</th>
                    </tr>
                                    </table>
            </div>
        </div>
    </div>
</div>
<!-- .row -->
<div class="modal fade" id="mdl_detail_news" tabindex="-1" role="dialog" aria-labelledby="mdl_detail_news"
    aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title"><i class="ti-eye"></i> News Detail</h4>
            </div>
            <div class="modal-body">
                {!! Form::open(['id'=>'updateEvent','class'=>'ajax-form','method'=>'GET']) !!}
                <div class="form-body">
                    <div class="row">
                        <div class="col-md-12 ">
                            <div class="form-group">
                                <label id="news_name"></label>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-xs-12 col-md-12 ">
                            <div class="form-group">
                                <label>Created</label>
                                <p id="created_news"></p>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12" id="img_url_news">

                        </div>
                    </div>

                    <div class="row">
                        <div class="col-xs-12 ">
                            <div class="form-group">
                                <p id="description_news"></p>
                            </div>
                        </div>
                    </div>


                </div>
                {!! Form::close() !!}

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="submit" class="btn btn-primary">Save</button>
            </div>
        </div>
    </div>
</div>
@endsection

@push('footer-script')
<script src="{{ asset('plugins/bower_components/datatables/jquery.dataTables.min.js') }}"></script>
<script src="https://cdn.datatables.net/1.10.13/js/dataTables.bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/responsive/2.1.1/js/dataTables.responsive.min.js"></script>
<script src="https://cdn.datatables.net/responsive/2.1.1/js/responsive.bootstrap.min.js"></script>
<script src="{{ asset('plugins/bower_components/custom-select/custom-select.min.js') }}"></script>
<script src="{{ asset('plugins/bower_components/bootstrap-select/bootstrap-select.min.js') }}"></script>
<script src="{{ asset('plugins/bower_components/bootstrap-datepicker/bootstrap-datepicker.min.js') }}"></script>
<script src="{{ asset('plugins/bower_components/bootstrap-daterangepicker/daterangepicker.js') }}"></script>
<script src="https://cdn.datatables.net/buttons/1.0.3/js/dataTables.buttons.min.js"></script>
<script src="{{ asset('js/datatables/buttons.server-side.js') }}"></script>
<script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
    $("#mdl_detail_news").on('show.bs.modal', function (e) {
                                var x = $(e.relatedTarget);
                                var id = x.data('id');
                                $.get('/member/news/getDetailNews/' + id, function (res) {
                                    $('#news_name').text(res.title)
                                    $('#created_news').text(res.created_at)
                                    $('#img_url_news').html('<a href="' + res.file_url + '" target="_blank"><img src="' + res.file_url + '" class="img-thumbnail"/></a>')
                                    $('#description_news').html(res.note_details)
                                }, 'json')
                            })
</script>
@endpush