@extends('dashboard_layouts.app')
@section('content')
<div id="content-wrapper" class="d-flex flex-column">

    <!-- Main Content -->
    <div id="content">

        <!-- Topbar -->
        @include('dashboard_layouts.navbar')
        <!-- End of Topbar -->

        <!-- Begin Page Content -->
        <div class="container-fluid">

            <!-- Page Heading -->
            <h1 class="h3 mb-2 text-gray-800">Tables</h1>
            <p class="mb-4">DataTables is a third party plugin that is used to generate the demo table below.
                For more information about DataTables, please visit the <a target="_blank"
                    href="https://datatables.net">official DataTables documentation</a>.</p>

            <!-- DataTales Example -->
            <div class="card shadow mb-4">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">DataTables Example</h6>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-bordered" id="dataTable" width="100%" cellspacing="0">
                            <thead>
                                <tr>
                                    <th>ID</th>
                                    <th>Name</th>
                                    <th>Size</th>
                                    <th>Design Name</th>
                                    <th>Required Design</th>
                                    <th>Selected Design</th>
                                    <th>Action</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($cyberEasons as $data)     
                                <tr>
                                    <td>cyber-{{ $data->id }}</td>
                                    <td>{{ $data->name }}</td>
                                    <td>{{ $data->size }}</td>
                                    <td>{{ $data->design_name }}</td>
                                    <td><img src="{{ asset('required_design/images/'.$data->required_design) }}" alt="required_design" style="height:50px;"></td>
                                    <td><img src="{{ asset('selected_design/images/'.$data->selected_design) }}" alt="selected_design" style="height:50px;"></td>
                                    <td><a href="{{ route('cyber-eason-detail',['cyberEason'=>$data->id]) }}">View</a></td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

        </div> 
        <!-- /.container-fluid -->

    </div>
    <!-- End of Main Content -->

    <!-- Footer -->
    <footer class="sticky-footer bg-white">
        <div class="container my-auto">
            <div class="copyright text-center my-auto">
                <span>Copyright &copy; Your Website 2022</span>
            </div>
        </div>
    </footer>
    <!-- End of Footer -->

</div>
@endsection