@extends('admin.layout.master')
@section('content')
@section('boards', 'active')
@section('title', 'Boards')
<style>
    .approved{
        color: green;
    }

    .pending{
        color: white;
        background-color: green;
    }

    $badge-text-color: #ffffff;
$badge-default-bg: #2c3e50;
$badge-info-bg: #3498db;
$badge-warning-bg: #f1c40f;
$badge-danger-bg: #e74c3c;
$badge-success-bg: #2ecc71;

// Basiz setup
.badge {
    box-sizing: border-box;
    display: inline-block;
    background-color: $badge-default-bg;
    color: $badge-text-color;
    
    border-radius: 3rem; // As longe as this is bigger than the fontsize
    text-align: center;

    font-size: 1.6rem;
    font-weight: 400;
    padding: .05rem .8rem .1rem;
    line-height: inherit;
}

// Style
.badge--line {
    background-color: transparent;
    color: #95a5a6;
    box-shadow: 0 0 0 1px #95a5a6;
}

.badge--info {
    background-color: $badge-info-bg;
}

.badge--warning {
    background-color: $badge-warning-bg;
}

.badge-danger {
    background-color: red;
}

.badge-success {
    background-color: green;
}

// Sizes
.badge--small {
    font-size: 1.2rem;
    padding: .1rem .65rem .2rem;
}

.badge--smaller {
    font-size: .7rem;
    padding: .05rem .4rem .15rem;
}


// Presentation
html,
body {
    height: 100%;
    background-color: #34495e;
    display: flex;
    align-items: center;
    justify-content: space-around;
    flex-flow: row wrap;
    font-family: 'Open Sans', sans-serif;
}

.container {
    box-sizing: border-box;
    padding: 1rem;
    width: calc(100% / 3);
    
    @media (max-width: 360px) {
        width: 100%;
    }
    
    .badge {
        margin: .5rem;
    }
}
</style>


<div class="container-xxl flex-grow-1 container-p-y">
    @if (session('success'))
        <div class="alert alert-success">{{ session('success') }}</div>
    @endif
    <div class="row">
        <div class="card">
            <h5 class="card-header row">
                <div class="col-md-3">
                    Boards
                </div>
                <div class="col-md-3">
                </div>
                <div class="col-md-4">

                </div>
                <div class="col-md-2">
                    {{-- <a class="btn btn-primary" href="{{ route('admin.add.honor') }}">Wall of Honor</a> --}}
                </div>

            </h5>
            <div class="table-responsive text-nowrap">
                <table class="table table-hover w-100" id="table">
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>Board Name</th>
                            <th>DOB</th>
                            <th>Death Date</th>
                            <th>Status</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                    <tbody class="table-border-bottom-0">
                       
                        @foreach ($boards as $board)
                            <tr>
                                <td>{{$board->id}}</td>
                                <td>{{$board->board_name}}</td>
                                <td>{{$board->dob}}</td>
                                <td>{{$board->death_date}}</td>
                                @if($board->status == 'Featured')
                                <td><span class="badge badge-success">Featured</a></td>
                                @else
                                <td><span class="badge badge-danger">UnFeatured</span></td>
                                @endif

                               
                                <td>
                                    <a href="javascript:void(0)" data-id="{{ $board->id }}" data-status="{{ $board->status }}" data-bs-toggle="modal" data-bs-target="#comment" class="fa fa-check tribute"></a>
                                    <a href="{{route('admin.board.detail',['id'=>$board->id])}}" class="fa fa-file"></a>
                                    <a href="javascript:void(0)" data-id="{{$board->id}}" class="fa fa-trash delete-board"></a>


                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>

            </div>

        </div>
    </div>
</div>
</div>
<!-- Modal Honor -->
<div class="modal fade" id="comment" tabindex="-1" aria-labelledby="comment" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Change Status</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="btn-close"></button>
            </div>
            <div class="modal-body">
                <form action="{{route('admin.board.status')}}" method="POST" enctype="multipart/form-data">
                    @csrf
                    <input type="hidden" name="id" class="tribute_id" value="{{$board->id}}">
                    
                    <div class="mb-3">
                        <h6 class="card-title">Status</h6>
                        <select name="status" class="form-control status">
                            <option value="Featured"  @if (!empty($board) && $board->status == 'Featured') selected @endif>Featured</option>
                            <option value="UnFeatured"  @if (!empty($board) && $board->status == 'UnFeatured') selected @endif>UnFeatured</option>
                        </select>
                        <span class="text-danger">{{ $errors->first('status') }}</span>
                    </div>
                </div>
            <div class="modal-footer">
                <button type="submit" class="btn btn-primary">Submit</button>

            </div>
        </form>
        </div>
    </div>
</div>
@endsection
@push('script')
<script>
    $(document).on('click', '.delete-board', function (e) {
        e.preventDefault();
        var boardId = $(this).data('id');
        var deleteUrl = "{{ route('admin.delete.board', ':id') }}";
        deleteUrl = deleteUrl.replace(':id', boardId);

        Swal.fire({
            title: 'Are you sure?',
            text: "Do you want to delete this board?",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: 'Yes, delete it!'
        }).then((result) => {
            if (result.isConfirmed) {
                window.location.href = deleteUrl;
            }
        })
    });
</script>

<script>
    $(document).ready(function() {


        $('#table').DataTable({
            "scrollX": true

        });

        $(".comment").on("click", function() {
            //var dataId = $(this).attr("data-id");
            var favorite = [];
            $.each($("input[name='id[]']:checked"), function() {
                favorite.push($(this).val());
            });
            //alert("My Plants ID are: " + favorite.join(", "));
            // $('.id[]').attr(favorite);
            console.log("favorite.toString()", favorite.toString())
            let ab = document.getElementById("abc");
            ab.value = favorite.toString()
            //$(".blotter").val(dataId);
        });
    });
</script>

<script>
    $(".tribute").on("click", function() {
        var dataId = $(this).attr("data-id");
        var datastatus = $(this).attr("data-status");

        $(".tribute_id").val(dataId);
        $(".status").val(datastatus);

        // alert("The data-id of clicked item is: " + dataId);
    });
</script>
@endpush