@extends('main.layouts.app')
@section('content')

<style>
    .bg-yellow {
        background: #ffc966 !important;
    }
    .single_pr_price h2 {
        color: #0e194d;
    }
    .sub {
        display: flex;
        justify-content: space-between;
    }
    .sub h3 {
        font-size: 19px;
        line-height: 23px;
        color: #1f365c;
        padding-right: 0px;
        margin-bottom: 0;
    }
    .total {
        display: flex;
        justify-content: space-between;
        font-size: 28px;
        line-height: 35px;
        color: #1f365c;
    }
    .product_title {
        display: flex;
        align-items: center;
    }
    .h-300 {
        max-height: 300px;
        overflow-y: auto;
    }
    .proprice h3 {
        font-size: 26px;
        line-height: 28px;
        color: #1f365c;
        padding-right: 0px;
        margin-bottom: 0;
        font-weight: bold;
    }
    .Quantity {
        width: 40%;
    }
    .title {
        padding: 10px;
    }
    .title h3 {
        font-size: 16px;
        line-height: 20px;
        color: #1f365c;
        padding-right: 0px;
        margin-bottom: 0;
    }
    .bg_blue_color {
        border-radius: 20px !important;
        background-color: #0E194D !important;
    }
    .depo {
        font-size: 14px;
    }
    .dash-text {
        text-align: center;
    }
    .details-card .sub {
        border-bottom: 1px dashed;
        padding: 5px 0;
    }
    i.fas.fa-fw.fa-store-alt {
        font-size: 24px;
    }
</style>

<link rel="stylesheet" href="https://cdn.datatables.net/2.0.3/css/dataTables.dataTables.css">
<link rel="stylesheet" href="https://cdn.datatables.net/searchbuilder/1.7.0/css/searchBuilder.dataTables.css">
<link rel="stylesheet" href="https://cdn.datatables.net/datetime/1.5.2/css/dataTables.dateTime.min.css">

<div class="main-content">
    <div class="section-header d-block bg_blue_color mb-0">
        <h1 class="text-white">Attributes</h1>
        <a href="{{ route('attributes.create') }}" class="btn btn-primary">Add New Attribute</a>
    </div>

    @if(session('success'))
        <div class="alert alert-success">{{ session('success') }}</div>
    @endif

    <div class="card">
        <div class="card-body">
            <table id="photos_table" class="table table-striped table-bordered">
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($attributes as $attribute)
                        <tr>
                            <td>{{ $attribute->name }}</td>
                            <td>
                                <a href="{{ route('attributes.edit', $attribute->id) }}" class="btn btn-warning">Edit</a>
                                <form action="{{ route('attributes.destroy', $attribute->id) }}" method="POST" style="display:inline;">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" class="btn btn-danger" onclick="return confirm('Are you sure?')">Delete</button>
                                </form>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>
</div>

<script src="https://code.jquery.com/jquery-3.7.1.js"></script>
<script src="https://cdn.datatables.net/2.0.3/js/dataTables.js"></script>
<script src="https://cdn.datatables.net/searchbuilder/1.7.0/js/dataTables.searchBuilder.js"></script>
<script src="https://cdn.datatables.net/datetime/1.5.2/js/dataTables.dateTime.min.js"></script>
<script>
    $(document).ready(function() {
        $('#photos_table').DataTable();
    });
</script>

@endsection