@extends('admin.layouts.master')
@section('title', CARD_TITLE_ADMIN)
@section('content')
<style>
    table,
    th,
    td {
        border: 1px solid black;
        border-collapse: collapse;
    }

    th,
    td {
        padding: 5px;
        text-align: left;
    }
</style>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.8.2/css/lightbox.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.8.2/js/lightbox.min.js"></script>
<h4 class="fw-bold py-3 mb-4"><span class="text-muted fw-light">
        <ol class="breadcrumb float-end">
            <li> <a class="bread-item" href="{{ route('admin.dashboard') }}"> Dashboard </a></li>
            <li> <a class="bread-item" href="{{ route('cards.index') }}"> Cards </a></li>
            <li> <span class=" inactive-bread">Show</span></li>
        </ol>
    </span> Show {{ CARD_TITLE_ADMIN }}
</h4>

<div class="row">
    <div class="col-xl">
        <div class="card mb-4">
            <h5 class="card-header">Show {{ CARD_TITLE_ADMIN }}
                <div class="float-end">
                    <a href="{{ route('cards.edit',encrypt_id($category->card_id)) }}">
                        <span class="btn btn-success ">Edit {{ CARD_TITLE_ADMIN }} </span>
                    </a>
                    <a href="{{ route('tags.card',encrypt_id($category->tag_id)) }}">
                        <span class="btn btn-primary ">Back </span>
                    </a>
                </div>
            </h5>
            <div class="card-body">
                <div class="container">
                    <table class="table">
                        <tr>
                            <th>Card:</th>
                            <td>{{ $category->card_name }}</td>
                        </tr>
                        <tr>
                            <th>Card Category:</th>
                            <td>{{ $category->card_category }}</td>
                        </tr>
                        {{-- <tr>
                            <th>Card Coin:</th>
                            <td>{{ 0 }}</td>
                        </tr> --}}
                        <tr>
                            <th>Card Image Preview:</th>
                            <td>
                                {!!
                                fileExist($category->card_image_preview);
                                !!}
                            </td>
                        </tr>
                        <tr>
                            <th>Card Ratio:</th>
                            <td>{{ $category->card_ratio }}</td>
                        </tr>
                        <tr>
                            <th>Card Height:</th>
                            <td>{{ $category->card_height }}</td>
                        </tr>
                        <tr>
                            <th>Card Width:</th>
                            <td>{{ $category->card_width }}</td>
                        </tr>

                        <tr>
                            <th>Is Pro:</th>
                            <td>{{ $category->is_pro==1?IS_PAID:IS_FREE }}</td>
                        </tr>
                        <tr>
                            <th>Is New:</th>
                            <td>{{ $category->is_new==1?IS_NEW:IS_OLD }}</td>
                        </tr>
                        <tr>
                            <th>Is Published:</th>
                            <td>{{ $category->is_published==1?'Published':'Draft' }}</td>
                        </tr>
                        {{-- <tr>
                            <th>Backdrop Name:</th>
                            <td>{{ 0 }}</td>
                        </tr>
                        <tr>
                            <th>Card Type:</th>
                            <td>{{ 0 }}</td>
                        </tr>
                        <tr>
                            <th>Envelope Linear Image:</th>
                            <td>{{ 0 }}</td>
                        </tr>
                        <tr>
                            <th>Card Image Transparent:</th>
                            <td>{{ 0 }}</td>
                        </tr>
                        <tr>
                            <th>Is Backdrop Set:</th>
                            <td>{{ 'False' }}</td>
                        </tr>
                        <tr>
                            <th>Is Envelope Added:</th>
                            <td>{{ 'False' }}</td>
                        </tr>
                        <tr>
                            <th>Backdrop Name:</th>
                            <td>{{ 0 }}</td>
                        </tr> --}}
                        <tr>
                            <th>Create Date:</th>
                            <td>{{ date('M d, Y',$category->created_at) }}</td>
                        </tr>
                        <tr>
                            <th>Update Date:</th>
                            <td>{{ date('M d, Y',$category->updated_at) }}</td>
                        </tr>
                    </table>
                </div>
            </div>

        </div>
    </div>
</div>
</div>
<script>
    // Get the modal
var modal = document.getElementById("myModal");

// Get the image and insert it inside the modal - use its "alt" text as a caption
var img = document.getElementById("myImg");
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
img.onclick = function(){
  modal.style.display = "block";
  modalImg.src = this.src;
  captionText.innerHTML = this.alt;
}

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
  modal.style.display = "none";
}
</script>
@endsection