@extends('layouts.app')
@section('title', 'Raw Materials')

@section('content')
<style>
    /* Card Styles */
    .raw-material-card {
        background: #ffffff;
        border-radius: 10px;
        box-shadow: 0 0 1px rgba(0,0,0,.125), 0 1px 3px rgba(0,0,0,.2);
        border: none;
        margin-top: 20px;
    }
    .raw-material-card .card-body {
        padding: 20px;
    }
    
    /* Summary Cards */
    .summary-card {
        background: #ffffff;
        border-radius: 10px;
        padding: 15px 20px;
        border: 1px solid #e9ecef;
        transition: all 0.2s ease;
    }
    .summary-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    }
    .summary-card .summary-icon {
        width: 40px;
        height: 40px;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .summary-card .summary-icon svg {
        width: 20px;
        height: 20px;
    }
    .summary-card .summary-number {
        font-size: 22px;
        font-weight: 700;
        margin: 5px 0 0 0;
    }
    .summary-card .summary-label {
        font-size: 13px;
        color: #6c757d;
        margin: 0;
    }
    .summary-icon-primary { background: #e7f1ff; color: #0d6efd; }
    .summary-icon-success { background: #d4edda; color: #28a745; }
    .summary-icon-warning { background: #fff3e0; color: #fd7e14; }
    .summary-icon-danger { background: #f8d7da; color: #dc3545; }
    
    /* Table Styles */
    .raw-material-table {
        background: #ffffff !important;
        border-collapse: separate;
        border-spacing: 0;
        width: 100%;
        margin-bottom: 0;
    }
    .raw-material-table thead th {
        background: #f8f9fa !important;
        color: #495057;
        font-weight: 600;
        font-size: 13px;
        padding: 12px 15px;
        border-bottom: 2px solid #dee2e6;
        white-space: nowrap;
    }
    .raw-material-table tbody td {
        padding: 10px 15px;
        font-size: 13px;
        vertical-align: middle;
        border-bottom: 1px solid #e9ecef;
    }
    .raw-material-table tbody tr:hover {
        background-color: #f5f7fa !important;
    }
    .raw-material-table tbody tr:last-child td {
        border-bottom: none;
    }
    
    /* Button Styles */
    .btn-action {
        border-radius: 6px;
        padding: 4px 10px;
        font-size: 12px;
        margin: 0 2px;
        transition: all 0.2s ease;
        border: none;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    .btn-action:hover {
        transform: translateY(-1px);
        box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    }
    .btn-action svg {
        width: 16px;
        height: 16px;
    }
    
    .btn-view {
        background: #17a2b8;
        color: #fff;
    }
    .btn-view:hover {
        background: #138496;
        color: #fff;
    }
    
    .btn-edit {
        background: #ffc107;
        color: #212529;
    }
    .btn-edit:hover {
        background: #e0a800;
        color: #212529;
    }
    
    .btn-delete {
        background: #dc3545;
        color: #fff;
    }
    .btn-delete:hover {
        background: #c82333;
        color: #fff;
    }
    
    .btn-primary-custom {
        background: #007bff;
        color: #fff;
        border-radius: 8px;
        padding: 8px 20px;
        border: none;
        transition: all 0.2s ease;
        font-size: 13px;
        display: inline-flex;
        align-items: center;
        gap: 6px;
    }
    .btn-primary-custom:hover {
        background: #0069d9;
        color: #fff;
        transform: translateY(-1px);
        box-shadow: 0 2px 8px rgba(0, 123, 255, 0.3);
    }
    .btn-primary-custom svg {
        width: 18px;
        height: 18px;
    }
    
    .btn-success-custom {
        background: #28a745;
        color: #fff;
        border-radius: 8px;
        padding: 8px 20px;
        border: none;
        transition: all 0.2s ease;
        font-size: 13px;
        display: inline-flex;
        align-items: center;
        gap: 6px;
    }
    .btn-success-custom:hover {
        background: #218838;
        color: #fff;
        transform: translateY(-1px);
        box-shadow: 0 2px 8px rgba(40, 167, 69, 0.3);
    }
    .btn-success-custom svg {
        width: 18px;
        height: 18px;
    }
    
    .btn-filter {
        background: #007bff;
        color: #fff;
        border-radius: 8px;
        padding: 8px 18px;
        border: none;
        font-size: 13px;
        transition: all 0.2s ease;
        white-space: nowrap;
        height: 38px;
        display: inline-flex;
        align-items: center;
        gap: 6px;
    }
    .btn-filter:hover {
        background: #0069d9;
        color: #fff;
        transform: translateY(-1px);
        box-shadow: 0 2px 8px rgba(0, 123, 255, 0.3);
    }
    .btn-filter svg {
        width: 16px;
        height: 16px;
    }
    
    .btn-clear {
        background: #6c757d;
        color: #fff;
        border-radius: 8px;
        padding: 8px 18px;
        border: none;
        font-size: 13px;
        transition: all 0.2s ease;
        white-space: nowrap;
        height: 38px;
        display: inline-flex;
        align-items: center;
        gap: 6px;
    }
    .btn-clear:hover {
        background: #5a6268;
        color: #fff;
        transform: translateY(-1px);
    }
    .btn-clear svg {
        width: 16px;
        height: 16px;
    }
    
    /* Alert Styles */
    .alert-custom {
        border-radius: 8px;
        padding: 12px 20px;
        margin-bottom: 20px;
        border: none;
        display: flex;
        align-items: center;
        gap: 10px;
    }
    .alert-success-custom {
        background: #d4edda;
        color: #155724;
        border-left: 4px solid #28a745;
    }
    .alert-success-custom .close {
        color: #155724;
        opacity: 0.7;
        margin-left: auto;
        background: none;
        border: none;
        font-size: 20px;
        cursor: pointer;
    }
    .alert-success-custom svg {
        width: 20px;
        height: 20px;
        flex-shrink: 0;
    }
    
    /* Empty State */
    .empty-state {
        padding: 40px 20px;
        text-align: center;
    }
    .empty-state svg {
        width: 48px;
        height: 48px;
        color: #ccc;
    }
    .empty-state p {
        margin-top: 10px;
        color: #6c757d;
        font-size: 14px;
    }
    
    /* Pagination */
    .pagination-custom {
        margin: 0;
    }
    .pagination-custom .page-link {
        border-radius: 6px;
        padding: 6px 14px;
        margin: 0 2px;
        color: #495057;
        border: 1px solid #dee2e6;
    }
    .pagination-custom .page-item.active .page-link {
        background: #007bff;
        border-color: #007bff;
        color: #fff;
    }
    .pagination-custom .page-link:hover {
        background: #e9ecef;
        border-color: #dee2e6;
    }
    
    /* Checkbox Styles */
    .form-check-input-custom {
        width: 16px;
        height: 16px;
        cursor: pointer;
        accent-color: #007bff;
    }
    
    /* Status Badge */
    .badge-custom {
        padding: 5px 14px;
        font-size: 11px;
        font-weight: 600;
        border-radius: 20px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }
    .badge-active {
        background: #d4edda;
        color: #155724;
    }
    .badge-inactive {
        background: #f8d7da;
        color: #721c24;
    }
    .badge-success {
        background: #d4edda;
        color: #155724;
    }
    .badge-warning {
        background: #fff3e0;
        color: #856404;
    }
    .badge-danger {
        background: #f8d7da;
        color: #721c24;
    }
    
    /* Filter Row - Right Aligned */
    .filter-row {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: flex-end;
        gap: 10px;
        margin-bottom: 15px;
    }
    .filter-row .filter-group {
        display: flex;
        align-items: center;
        gap: 8px;
    }
    .filter-row .filter-group .input-group {
        min-width: 220px;
        display: flex;
        align-items: center;
    }
    .filter-row .filter-group select,
    .filter-row .filter-group input[type="date"] {
        min-width: 150px;
        height: 38px;
        border-radius: 8px;
        font-size: 13px;
        border: 1px solid #ced4da;
        padding: 0 12px;
        background: #ffffff;
        transition: all 0.2s ease;
    }
    .filter-row .filter-group select:focus,
    .filter-row .filter-group input[type="date"]:focus {
        border-color: #007bff;
        box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.15);
        outline: none;
    }
    .filter-row .input-group-text {
        background: #f8f9fa;
        border-radius: 8px 0 0 8px;
        border: 1px solid #ced4da;
        border-right: none;
        height: 38px;
        display: flex;
        align-items: center;
        padding: 0 12px;
    }
    .filter-row .input-group-text svg {
        width: 16px;
        height: 16px;
        color: #6c757d;
    }
    .filter-row .input-group .form-control {
        border-radius: 0 8px 8px 0;
        font-size: 13px;
        height: 38px;
        border: 1px solid #ced4da;
        border-left: none;
    }
    .filter-row .input-group .form-control:focus {
        border-color: #007bff;
        box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.15);
        outline: none;
    }
    .filter-row .filter-actions {
        display: flex;
        align-items: center;
        gap: 8px;
        flex-shrink: 0;
    }
    
    /* Stock Status Dot */
    .stock-dot {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        display: inline-block;
        margin-right: 6px;
    }
    .stock-dot-success { background: #28a745; }
    .stock-dot-warning { background: #fd7e14; }
    .stock-dot-danger { background: #dc3545; }
    
    /* Modal Styles */
    .modal-content-custom {
        border-radius: 12px;
        border: none;
        box-shadow: 0 10px 40px rgba(0,0,0,0.15);
    }
    .modal-header-custom {
        background: #dc3545;
        color: #fff;
        border-radius: 12px 12px 0 0;
        padding: 15px 20px;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .modal-header-custom svg {
        width: 20px;
        height: 20px;
        margin-right: 8px;
    }
    .modal-body-custom {
        padding: 25px 20px;
    }
    .modal-footer-custom {
        border-top: 1px solid #e9ecef;
        padding: 15px 20px;
        border-radius: 0 0 12px 12px;
        display: flex;
        justify-content: flex-end;
        gap: 10px;
    }
    .btn-close-white {
        background: none;
        border: none;
        color: #fff;
        font-size: 24px;
        cursor: pointer;
        opacity: 0.8;
    }
    .btn-close-white:hover {
        opacity: 1;
    }
    
    /* Responsive */
    @media (max-width: 992px) {
        .filter-row {
            flex-direction: column;
            align-items: stretch;
        }
        .filter-row .filter-group {
            width: 100%;
        }
        .filter-row .filter-group .input-group {
            min-width: 100%;
        }
        .filter-row .filter-group select,
        .filter-row .filter-group input[type="date"] {
            min-width: 100%;
            width: 100%;
        }
        .filter-row .filter-actions {
            justify-content: flex-end;
            order: -1;
        }
        .summary-cards .summary-card {
            margin-bottom: 10px;
        }
    }
    
    @media (max-width: 576px) {
        .filter-row .filter-actions {
            justify-content: stretch;
        }
        .filter-row .filter-actions .btn {
            flex: 1;
            text-align: center;
            justify-content: center;
        }
        .summary-card .summary-number {
            font-size: 18px;
        }
    }
    
    @media (max-width: 768px) {
        .raw-material-table thead th {
            font-size: 11px;
            padding: 8px 10px;
        }
        .raw-material-table tbody td {
            font-size: 11px;
            padding: 6px 10px;
        }
        .btn-action {
            padding: 3px 6px;
            font-size: 10px;
        }
        .btn-action svg {
            width: 14px;
            height: 14px;
        }
        .btn-primary-custom,
        .btn-success-custom {
            font-size: 11px;
            padding: 6px 12px;
        }
        .btn-primary-custom svg,
        .btn-success-custom svg {
            width: 14px;
            height: 14px;
        }
    }
</style>

<section class="content-header">
    <h1 class="tw-text-xl md:tw-text-3xl tw-font-bold tw-text-black">
        <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-package" style="display: inline-block; vertical-align: middle; margin-right: 8px;">
            <path stroke="none" d="M0 0h24v24H0z" fill="none" />
            <path d="M12 3l8 4.5l0 9l-8 4.5l-8 -4.5l0 -9l8 -4.5" />
            <path d="M12 12l8 -4.5" />
            <path d="M12 12l0 9" />
            <path d="M12 12l-8 -4.5" />
            <path d="M16 5.25l-8 4.5" />
        </svg>
        Raw Materials
    </h1>
</section>

<section class="content">
    <!-- Include Navigation -->
    @include('manufacturing.partials.navigation')
    
    <!-- Summary Cards -->
    <div class="row summary-cards mb-4">
        <div class="col-md-3 col-6">
            <div class="summary-card">
                <div class="d-flex align-items-center justify-content-between">
                    <div>
                        <p class="summary-label">Total Materials</p>
                        <h4 class="summary-number">{{ $summary['total_materials'] ?? 0 }}</h4>
                    </div>
                    <div class="summary-icon summary-icon-primary">
                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-box">
                            <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                            <path d="M12 3l8 4.5l0 9l-8 4.5l-8 -4.5l0 -9l8 -4.5" />
                            <path d="M12 12l8 -4.5" />
                            <path d="M12 12l0 9" />
                            <path d="M12 12l-8 -4.5" />
                        </svg>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3 col-6">
            <div class="summary-card">
                <div class="d-flex align-items-center justify-content-between">
                    <div>
                        <p class="summary-label">Available Stock</p>
                        <h4 class="summary-number" style="color: #28a745;">{{ $summary['available_stock'] ?? 0 }}</h4>
                    </div>
                    <div class="summary-icon summary-icon-success">
                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-check">
                            <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                            <path d="M5 12l5 5l10 -10" />
                        </svg>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3 col-6">
            <div class="summary-card">
                <div class="d-flex align-items-center justify-content-between">
                    <div>
                        <p class="summary-label">Low Stock</p>
                        <h4 class="summary-number" style="color: #fd7e14;">{{ $summary['low_stock'] ?? 0 }}</h4>
                    </div>
                    <div class="summary-icon summary-icon-warning">
                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-alert-circle">
                            <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                            <path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0" />
                            <path d="M12 8l0 4" />
                            <path d="M12 16l.01 0" />
                        </svg>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3 col-6">
            <div class="summary-card">
                <div class="d-flex align-items-center justify-content-between">
                    <div>
                        <p class="summary-label">Inventory Value</p>
                        <h4 class="summary-number" style="color: #0d6efd;">KES {{ number_format($summary['total_value'] ?? 0, 2) }}</h4>
                    </div>
                    <div class="summary-icon summary-icon-danger">
                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-currency-dollar">
                            <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                            <path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0" />
                            <path d="M9 8l3 -2l0 12" />
                            <path d="M15 10a2 2 0 0 0 -2 -2h-2a2 2 0 0 0 0 4h2a2 2 0 0 1 0 4h-2a2 2 0 0 1 -2 -2" />
                        </svg>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <div class="raw-material-card">
        @if(session('success'))
            <div class="alert alert-success-custom alert-custom alert-dismissible" style="margin: 15px 20px 0 20px;">
                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-check-circle">
                    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                    <path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0" />
                    <path d="M9 12l2 2l4 -4" />
                </svg>
                {{ session('success') }}
                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
        @endif

        <div class="card-body">
            <!-- Header -->
            <div class="d-flex flex-wrap justify-content-between align-items-center mb-4">
                <div>
                    <h5 class="mb-0" style="font-weight: 600; font-size: 16px; color: #212529;">
                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-package" style="display: inline-block; vertical-align: middle; margin-right: 6px; color: #007bff;">
                            <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                            <path d="M12 3l8 4.5l0 9l-8 4.5l-8 -4.5l0 -9l8 -4.5" />
                            <path d="M12 12l8 -4.5" />
                            <path d="M12 12l0 9" />
                            <path d="M12 12l-8 -4.5" />
                            <path d="M16 5.25l-8 4.5" />
                        </svg>
                        Raw Materials Management
                    </h5>
                    <small class="text-muted" style="font-size: 13px;">Manage all your raw materials and stock levels</small>
                </div>
                <div class="d-flex flex-wrap gap-2 mt-2 mt-sm-0">
                    <a href="{{ route('manufacturing.procurement.raw-materials.create') }}" class="btn btn-primary-custom">
                        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-plus">
                            <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                            <path d="M12 5l0 14" />
                            <path d="M5 12l14 0" />
                        </svg>
                        Add Material
                    </a>
                    <button class="btn btn-success-custom" id="exportBtn">
                        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-file-spreadsheet">
                            <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                            <path d="M14 3v4a1 1 0 0 0 1 1h4" />
                            <path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" />
                            <path d="M8 11h8v7h-8z" />
                            <path d="M8 15h8" />
                            <path d="M8 18h8" />
                        </svg>
                        Export
                    </button>
                </div>
            </div>
            
            <!-- Search & Filter - Right Aligned Row -->
            <div class="filter-row">
                
                
                <div class="filter-group">
                    <select class="form-select" id="categoryFilter">
                        <option value="">All Categories</option>
                        @foreach($categories ?? [] as $category)
                            <option value="{{ $category }}" {{ request('category') == $category ? 'selected' : '' }}>
                                {{ $category }}
                            </option>
                        @endforeach
                    </select>
                </div>
                
                <div class="filter-group">
                    <select class="form-select" id="statusFilter">
                        <option value="">All Status</option>
                        <option value="active" {{ request('status') == 'active' ? 'selected' : '' }}>Active</option>
                        <option value="inactive" {{ request('status') == 'inactive' ? 'selected' : '' }}>Inactive</option>
                    </select>
                </div>
                
                <div class="filter-group">
                    <div class="input-group">
                        <span class="input-group-text">
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-search">
                                <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                                <path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0" />
                                <path d="M21 21l-6 -6" />
                            </svg>
                        </span>
                        <input type="text" class="form-control" id="searchInput" placeholder="Search materials..." 
                               value="{{ request('search') }}">
                    </div>
                </div>
                
                <div class="filter-actions">
                    <button class="btn btn-clear" id="clearFiltersBtn">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-x">
                            <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                            <path d="M18 6l-12 12" />
                            <path d="M6 6l12 12" />
                        </svg>
                        Clear
                    </button>
                    <button class="btn btn-filter" id="applyFiltersBtn">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-filter">
                            <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                            <path d="M4 4h16v2.172a2 2 0 0 1 -.586 1.414l-4.414 4.414v7l-6 2v-8.5l-4.414 -4.414a2 2 0 0 1 -.586 -1.414z" />
                        </svg>
                        Filter
                    </button>
                </div>
                
            </div>
            
            <!-- Table -->
            <div class="table-responsive" style="padding-top: 5px;">
                <table class="raw-material-table table">
                    <thead>
                        <tr>
                            <th width="45">
                                <input type="checkbox" id="selectAll" class="form-check-input-custom">
                            </th>
                            <th>Code</th>
                            <th>Name</th>
                            <th>Category</th>
                            <th>Unit</th>
                            <th>Current Stock</th>
                            <th>Min Stock</th>
                            <th>Reorder Point</th>
                            <th>Status</th>
                            <th width="180">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($data as $material)
                        <tr>
                            <td>
                                <input type="checkbox" class="rowCheckbox form-check-input-custom" value="{{ $material->id }}">
                            </td>
                            <td><strong>{{ $material->material_code }}</strong></td>
                            <td>{{ $material->name }}</td>
                            <td>{{ $material->category ?? 'N/A' }}</td>
                            <td>{{ $material->unit_of_measure }}</td>
                            <td>
                                <span class="{{ $material->current_stock <= $material->reorder_point ? 'text-danger' : '' }}">
                                    {{ number_format($material->current_stock, 2) }}
                                </span>
                            </td>
                            <td>{{ number_format($material->minimum_stock_level, 2) }}</td>
                            <td>{{ number_format($material->reorder_point, 2) }}</td>
                            <td>
                                @php
                                    $statusClass = $material->is_active ? 'badge-active' : 'badge-inactive';
                                    $statusText = $material->is_active ? 'Active' : 'Inactive';
                                @endphp
                                <span class="badge-custom {{ $statusClass }}">
                                    {{ $statusText }}
                                </span>
                            </td>
                            <td>
                                <div class="d-flex flex-wrap gap-1">
                                    <a href="{{ route('manufacturing.procurement.raw-materials.show', $material->id) }}" 
                                       class="btn-action btn-view" title="View Material">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-eye">
                                            <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                                            <path d="M10 12a2 2 0 1 0 4 0a2 2 0 0 0 -4 0" />
                                            <path d="M21 12c-2.4 4 -5.4 6 -9 6c-3.6 0 -6.6 -2 -9 -6c2.4 -4 5.4 -6 9 -6c3.6 0 6.6 2 9 6" />
                                        </svg>
                                    </a>
                                    <a href="{{ route('manufacturing.procurement.raw-materials.edit', $material->id) }}" 
                                       class="btn-action btn-edit" title="Edit Material">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-pencil">
                                            <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                                            <path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4" />
                                            <path d="M13.5 6.5l4 4" />
                                        </svg>
                                    </a>
                                    <button class="btn-action btn-delete deleteBtn" 
                                            data-id="{{ $material->id }}" 
                                            data-name="{{ $material->name }}" 
                                            title="Delete Material">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-trash">
                                            <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                                            <path d="M4 7l16 0" />
                                            <path d="M10 11l0 6" />
                                            <path d="M14 11l0 6" />
                                            <path d="M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2 -2l1 -12" />
                                            <path d="M9 7v-3a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v3" />
                                        </svg>
                                    </button>
                                    
                                </div>
                            </td>
                        </tr>
                        @empty
                        <tr>
                            <td colspan="10" class="empty-state">
                                <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-package" style="color: #ccc;">
                                    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                                    <path d="M12 3l8 4.5l0 9l-8 4.5l-8 -4.5l0 -9l8 -4.5" />
                                    <path d="M12 12l8 -4.5" />
                                    <path d="M12 12l0 9" />
                                    <path d="M12 12l-8 -4.5" />
                                    <path d="M16 5.25l-8 4.5" />
                                </svg>
                                <p>No raw materials found</p>
                                <a href="{{ route('manufacturing.procurement.raw-materials.create') }}" class="btn btn-primary-custom btn-sm">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-plus">
                                        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                                        <path d="M12 5l0 14" />
                                        <path d="M5 12l14 0" />
                                    </svg>
                                    Add First Material
                                </a>
                            </td>
                        </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
            
            <!-- Pagination -->
            <div class="d-flex flex-wrap justify-content-between align-items-center mt-3 pt-2" style="border-top: 1px solid #e9ecef;">
                <div style="font-size: 13px; color: #6c757d;">
                    Showing {{ $data->firstItem() ?? 0 }} to {{ $data->lastItem() ?? 0 }} of {{ $data->total() }} entries
                </div>
                <div class="pagination-custom">
                    {{ $data->appends(request()->query())->links() }}
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Delete Modal -->
<div class="modal fade" id="deleteModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content modal-content-custom">
            <div class="modal-header-custom">
                <h5 class="modal-title" style="font-weight: 600; display: flex; align-items: center;">
                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-alert-triangle">
                        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                        <path d="M12 9v4" />
                        <path d="M12 17h.01" />
                        <path d="M12 3a9 9 0 1 0 0 18a9 9 0 0 0 0 -18z" />
                    </svg>
                    Confirm Delete
                </h5>
                <button type="button" class="btn-close-white" data-bs-dismiss="modal">&times;</button>
            </div>
            <div class="modal-body-custom">
                <p style="font-size: 15px; margin-bottom: 5px;">
                    Are you sure you want to delete <strong id="deleteName" style="color: #dc3545;"></strong>?
                </p>
                <p class="text-danger" style="font-size: 13px; margin-bottom: 0;">
                    <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-info-circle" style="display: inline-block; vertical-align: middle;">
                        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                        <path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0" />
                        <path d="M12 8l.01 0" />
                        <path d="M11 12l1 0l0 4l1 0" />
                    </svg>
                    This action cannot be undone.
                </p>
            </div>
            <div class="modal-footer-custom">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal" style="border-radius: 8px; padding: 8px 25px;">
                    Cancel
                </button>
                <form id="deleteForm" method="POST">
                    @csrf
                    @method('DELETE')
                    <button type="submit" class="btn btn-danger" style="border-radius: 8px; padding: 8px 25px; display: inline-flex; align-items: center; gap: 6px;">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-trash">
                            <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                            <path d="M4 7l16 0" />
                            <path d="M10 11l0 6" />
                            <path d="M14 11l0 6" />
                            <path d="M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2 -2l1 -12" />
                            <path d="M9 7v-3a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v3" />
                        </svg>
                        Delete
                    </button>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- Stock Adjustment Modal -->
<div class="modal fade" id="stockModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content modal-content-custom">
            <div class="modal-header" style="background: #ffc107; color: #212529; border-radius: 12px 12px 0 0; padding: 15px 20px;">
                <h5 class="modal-title" style="font-weight: 600; display: flex; align-items: center;">
                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-rotate-clockwise">
                        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                        <path d="M4.05 11a8 8 0 1 1 .5 4m-.5 5v-5h5" />
                    </svg>
                    Adjust Stock
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form id="stockForm" method="POST">
                @csrf
                <div class="modal-body-custom">
                    <p style="font-size: 14px; margin-bottom: 15px;">
                        Adjusting stock for: <strong id="stockMaterialName" style="color: #007bff;"></strong>
                    </p>
                    <div class="form-group" style="margin-bottom: 15px;">
                        <label style="font-weight: 500; font-size: 13px; display: block; margin-bottom: 5px;">Quantity <span class="text-danger">*</span></label>
                        <input type="number" name="quantity" class="form-control" step="0.01" min="0.01" required 
                               style="border-radius: 8px; padding: 10px 14px; border: 1px solid #ced4da; width: 100%;">
                    </div>
                    <div class="form-group" style="margin-bottom: 15px;">
                        <label style="font-weight: 500; font-size: 13px; display: block; margin-bottom: 5px;">Type <span class="text-danger">*</span></label>
                        <select name="type" class="form-control" required style="border-radius: 8px; padding: 10px 14px; border: 1px solid #ced4da; width: 100%;">
                            <option value="add">Add Stock</option>
                            <option value="subtract">Subtract Stock</option>
                        </select>
                    </div>
                    <div class="form-group" style="margin-bottom: 0;">
                        <label style="font-weight: 500; font-size: 13px; display: block; margin-bottom: 5px;">Reason</label>
                        <input type="text" name="reason" class="form-control" placeholder="e.g., Stock take, Return, Damage" 
                               style="border-radius: 8px; padding: 10px 14px; border: 1px solid #ced4da; width: 100%;">
                    </div>
                </div>
                <div class="modal-footer-custom">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal" style="border-radius: 8px; padding: 8px 25px;">
                        Cancel
                    </button>
                    <button type="submit" class="btn btn-warning" style="border-radius: 8px; padding: 8px 25px; display: inline-flex; align-items: center; gap: 6px; color: #212529;">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-save">
                            <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                            <path d="M6 4h10l4 4v10a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2" />
                            <path d="M8 4m0 1a1 1 0 0 1 1 -1h6a1 1 0 0 1 1 1v4a1 1 0 0 1 -1 1h-6a1 1 0 0 1 -1 -1z" />
                            <path d="M8 15m0 1a1 1 0 0 1 1 -1h6a1 1 0 0 1 1 1v4a1 1 0 0 1 -1 1h-6a1 1 0 0 1 -1 -1z" />
                            <path d="M16 4v4" />
                        </svg>
                        Update Stock
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
    // =============================================
    // Select All Checkbox
    // =============================================
    document.getElementById('selectAll')?.addEventListener('change', function() {
        document.querySelectorAll('.rowCheckbox').forEach(cb => cb.checked = this.checked);
    });

    // =============================================
    // Delete Button - Show Modal
    // =============================================
    document.querySelectorAll('.deleteBtn').forEach(btn => {
        btn.addEventListener('click', function() {
            const id = this.dataset.id;
            const name = this.dataset.name;
            document.getElementById('deleteName').textContent = name;
            document.getElementById('deleteForm').action = '{{ route("manufacturing.procurement.raw-materials.index") }}/' + id;
            new bootstrap.Modal(document.getElementById('deleteModal')).show();
        });
    });

    // =============================================
    // Stock Adjustment Button
    // =============================================
    document.querySelectorAll('.stockBtn').forEach(btn => {
        btn.addEventListener('click', function() {
            const id = this.dataset.id;
            const name = this.dataset.name;
            document.getElementById('stockMaterialName').textContent = name;
            document.getElementById('stockForm').action = '{{ route("manufacturing.procurement.raw-materials.update-stock", "") }}/' + id;
            new bootstrap.Modal(document.getElementById('stockModal')).show();
        });
    });

    // =============================================
    // Export Button
    // =============================================
    document.getElementById('exportBtn')?.addEventListener('click', function() {
        window.location.href = '{{ route("manufacturing.procurement.raw-materials.index") }}?export=csv';
    });

    // =============================================
    // Apply Filters
    // =============================================
    document.getElementById('applyFiltersBtn')?.addEventListener('click', function() {
        const search = document.getElementById('searchInput').value;
        const status = document.getElementById('statusFilter').value;
        const category = document.getElementById('categoryFilter').value;
        
        let url = window.location.pathname + '?';
        if (search) url += 'search=' + encodeURIComponent(search) + '&';
        if (status) url += 'status=' + encodeURIComponent(status) + '&';
        if (category) url += 'category=' + encodeURIComponent(category) + '&';
        
        window.location.href = url;
    });

    // =============================================
    // Clear Filters
    // =============================================
    document.getElementById('clearFiltersBtn')?.addEventListener('click', function() {
        window.location.href = window.location.pathname;
    });

    // =============================================
    // Enter Key for Search
    // =============================================
    document.getElementById('searchInput')?.addEventListener('keypress', function(e) {
        if (e.key === 'Enter') {
            document.getElementById('applyFiltersBtn').click();
        }
    });

    // =============================================
    // Bulk Delete
    // =============================================
    document.getElementById('bulkDeleteBtn')?.addEventListener('click', function() {
        const selected = document.querySelectorAll('.rowCheckbox:checked');
        if (selected.length === 0) {
            alert('Please select at least one record');
            return;
        }
        if (confirm('Delete ' + selected.length + ' records?')) {
            const ids = Array.from(selected).map(cb => cb.value);
            fetch('{{ route("manufacturing.procurement.raw-materials.bulk-destroy") }}', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                },
                body: JSON.stringify({ ids: ids })
            }).then(response => {
                if (response.ok) {
                    window.location.reload();
                }
            });
        }
    });
</script>

@endsection