@extends('backEnd.layouts.master')
@section('title','Childcategory Manage')

@section('css')
<link href="{{asset('/public/backEnd/')}}/assets/libs/datatables.net-bs5/css/dataTables.bootstrap5.min.css" rel="stylesheet" type="text/css" />
<link href="{{asset('/public/backEnd/')}}/assets/libs/datatables.net-responsive-bs5/css/responsive.bootstrap5.min.css" rel="stylesheet" type="text/css" />
<link href="{{asset('/public/backEnd/')}}/assets/libs/datatables.net-buttons-bs5/css/buttons.bootstrap5.min.css" rel="stylesheet" type="text/css" />
<link href="{{asset('/public/backEnd/')}}/assets/libs/datatables.net-select-bs5/css/select.bootstrap5.min.css" rel="stylesheet" type="text/css" />

<style>
    /* Premium Table Design */
    .table-container {
        background: #fff;
        border-radius: 12px;
        box-shadow: 0 4px 20px rgba(0,0,0,0.04);
        overflow: hidden;
    }
    .table thead th {
        background-color: #f8f9fa !important;
        color: #495057 !important;
        font-weight: 700 !important;
        text-transform: uppercase;
        font-size: 11px;
        letter-spacing: 0.5px;
        border-bottom: 1px solid #edf2f9 !important;
        padding: 15px !important;
    }
    .table tbody td {
        vertical-align: middle !important;
        padding: 12px 15px !important;
        border-bottom: 1px solid #f1f4f8;
        color: #334155;
        font-size: 14px;
    }
    
    /* Category Information Styling */
    .cat-title {
        font-weight: 600;
        color: #1e293b;
        margin: 0;
        display: block;
    }
    .parent-label {
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        font-weight: 700;
        color: #64748b;
        margin-bottom: 2px;
        display: block;
    }
    .parent-name {
        display: inline-flex;
        align-items: center;
        padding: 4px 8px;
        background: #f1f5f9;
        border-radius: 4px;
        font-size: 12px;
        color: #475569;
        font-weight: 600;
    }

    /* Action Buttons */
    .action-btn {
        width: 34px;
        height: 34px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 8px;
        transition: all 0.2s;
        border: 1px solid #e2e8f0;
        background: #fff;
        color: #64748b;
        margin: 0 2px;
    }
    .action-btn:hover {
        background: #f8fafc;
        color: #0f172a;
        transform: translateY(-2px);
        box-shadow: 0 4px 6px rgba(0,0,0,0.05);
    }
    .btn-edit:hover { color: #3b82f6; border-color: #3b82f6; }
    .btn-delete:hover { color: #ef4444; border-color: #ef4444; }
    .btn-status:hover { color: #10b981; border-color: #10b981; }

    /* Badges */
    .badge-premium {
        padding: 5px 10px;
        border-radius: 6px;
        font-weight: 600;
        font-size: 11px;
    }
    .badge-soft-success { background-color: #ecfdf5; color: #059669; }
    .badge-soft-danger { background-color: #fef2f2; color: #dc2626; }
    .badge-soft-info { background-color: #f0f9ff; color: #0369a1; }

    /* Page Header */
    .premium-page-header {
        margin-bottom: 25px;
    }
    .premium-page-title {
        font-weight: 800;
        color: #0f172a;
        letter-spacing: -0.5px;
    }
</style>
@endsection

@section('content')
<div class="container-fluid">
    
    <div class="row premium-page-header mt-3">
        <div class="col-12 d-flex justify-content-between align-items-center">
            <div>
                <h3 class="premium-page-title mb-0">Childcategory Management</h3>
                <p class="text-muted mb-0 font-13">Organize and manage your store's tertiary product categories.</p>
            </div>
            <a href="{{route('childcategories.create')}}" class="btn btn-primary rounded-pill shadow-sm px-4">
                <i class="fe-plus me-1"></i> Add Childcategory
            </a>
        </div>
    </div>

    <div class="row">
        <div class="col-12">
            <div class="card table-container border-0">
                <div class="card-body p-0">
                    <div class="table-responsive">
                        <table id="datatable-buttons" class="table table-hover w-100 dt-responsive nowrap mb-0">
                            <thead>
                                <tr>
                                    <th style="width: 60px;">SL</th>
                                    <th>Parent Subcategory</th>
                                    <th>Childcategory Name</th>
                                    <th>Status</th>
                                    <th class="text-end" style="width: 150px;">Operations</th>
                                </tr>
                            </thead>                
                            <tbody>
                                @foreach($data as $key=>$value)
                                <tr>
                                    <td class="text-center fw-bold text-muted">{{$loop->iteration}}</td>
                                    
                                    <td>
                                        <span class="parent-label">Subcategory</span>
                                        @if($value->subcategory)
                                            <div class="parent-name">
                                                <i class="fe-corner-down-right me-1 text-info"></i> {{$value->subcategory->subcategoryName}}
                                            </div>
                                        @else
                                            <span class="badge badge-premium badge-soft-danger">No Parent</span>
                                        @endif
                                    </td>

                                    <td>
                                        <span class="cat-title">{{$value->childcategoryName}}</span>
                                        <small class="text-muted">Slug: {{$value->slug}}</small>
                                    </td>
                                    
                                    <td>
                                        @if($value->status==1)
                                            <span class="badge badge-premium badge-soft-success">
                                                <i class="fe-check-circle me-1"></i> Active
                                            </span> 
                                        @else 
                                            <span class="badge badge-premium badge-soft-danger">
                                                <i class="fe-x-circle me-1"></i> Inactive
                                            </span> 
                                        @endif
                                    </td>

                                    <td class="text-end">
                                        <div class="d-inline-flex">
                                            {{-- Status Toggle --}}
                                            @if($value->status == 1)
                                                <form method="post" action="{{route('childcategories.inactive')}}" class="d-inline"> 
                                                    @csrf
                                                    <input type="hidden" value="{{$value->id}}" name="hidden_id">        
                                                    <button type="submit" class="action-btn btn-status" title="Deactivate">
                                                        <i class="fe-eye-off"></i>
                                                    </button>
                                                </form>
                                            @else
                                                <form method="post" action="{{route('childcategories.active')}}" class="d-inline">
                                                    @csrf
                                                    <input type="hidden" value="{{$value->id}}" name="hidden_id">        
                                                    <button type="submit" class="action-btn btn-status" title="Activate">
                                                        <i class="fe-eye"></i>
                                                    </button>
                                                </form>
                                            @endif

                                            {{-- Edit --}}
                                            <a href="{{route('childcategories.edit',$value->id)}}" class="action-btn btn-edit" title="Edit">
                                                <i class="fe-edit"></i>
                                            </a>

                                            {{-- Delete --}}
                                            <form method="post" action="{{ route('childcategories.destroy') }}" class="d-inline">
                                                @csrf
                                                <input type="hidden" name="hidden_id" value="{{ $value->id }}">
                                                <button type="submit" class="action-btn btn-delete delete-confirm" title="Delete">
                                                    <i class="fe-trash-2"></i>
                                                </button>
                                            </form>
                                        </div>
                                    </td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('script')
<script src="{{asset('/public/backEnd/')}}/assets/libs/datatables.net/js/jquery.dataTables.min.js"></script>
<script src="{{asset('/public/backEnd/')}}/assets/libs/datatables.net-bs5/js/dataTables.bootstrap5.min.js"></script>
<script src="{{asset('/public/backEnd/')}}/assets/libs/datatables.net-responsive/js/dataTables.responsive.min.js"></script>
<script src="{{asset('/public/backEnd/')}}/assets/libs/datatables.net-responsive-bs5/js/responsive.bootstrap5.min.js"></script>
<script src="{{asset('/public/backEnd/')}}/assets/libs/datatables.net-buttons/js/dataTables.buttons.min.js"></script>
<script src="{{asset('/public/backEnd/')}}/assets/libs/datatables.net-buttons-bs5/js/buttons.bootstrap5.min.js"></script>
<script src="{{asset('/public/backEnd/')}}/assets/libs/datatables.net-buttons/js/buttons.html5.min.js"></script>
<script src="{{asset('/public/backEnd/')}}/assets/libs/datatables.net-buttons/js/buttons.flash.min.js"></script>
<script src="{{asset('/public/backEnd/')}}/assets/libs/datatables.net-buttons/js/buttons.print.min.js"></script>
<script src="{{asset('/public/backEnd/')}}/assets/libs/datatables.net-keytable/js/dataTables.keyTable.min.js"></script>
<script src="{{asset('/public/backEnd/')}}/assets/libs/datatables.net-select/js/dataTables.select.min.js"></script>
<script src="{{asset('/public/backEnd/')}}/assets/libs/pdfmake/build/pdfmake.min.js"></script>
<script src="{{asset('/public/backEnd/')}}/assets/libs/pdfmake/build/vfs_fonts.js"></script>
<script src="{{asset('/public/backEnd/')}}/assets/js/pages/datatables.init.js"></script>
@endsection
