@extends('layouts.master')

@section('css')
<style>
    /* ==========================================================
       Templates & Clothing Types Modern UI
       ========================================================== */
    body {
        background-color: #f1f5f9;
        font-family: 'Segoe UI', Tahoma, 'Inter', sans-serif;
    }

    /* كارت الصفحة الرئيسي */
    .invoices-main-card {
        background: #ffffff;
        border: 1px solid #e2e8f0;
        border-radius: 14px;
        box-shadow: 0 1px 3px rgba(15, 23, 42, 0.03);
        margin-bottom: 24px;
        overflow: hidden;
    }

    .invoices-main-card .card-header {
        background-color: #ffffff;
        border-bottom: 1px solid #f1f5f9;
        padding: 16px 20px;
        font-size: 15px;
        font-weight: 800;
        color: #0f172a;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    /* تنسيقات الجدول */
    .table-modern {
        border-collapse: separate;
        border-spacing: 0;
        margin-bottom: 0;
        width: 100% !important;
    }

    .table-modern thead th {
        background: #1e293b !important;
        color: #f8fafc !important;
        font-size: 13px !important;
        font-weight: 700 !important;
        padding: 12px 10px !important;
        border: none !important;
        white-space: nowrap;
        vertical-align: middle;
        text-align: center;
    }

    .table-modern tbody td {
        vertical-align: middle !important;
        padding: 12px 10px !important;
        font-size: 13px;
        color: #334155;
        border-bottom: 1px solid #f1f5f9;
        transition: background 0.15s ease;
    }

    .table-modern tbody tr:hover td {
        background-color: #f8fafc;
    }

    /* شارات مكونات النموذج */
    .component-badge {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        background-color: #f1f5f9;
        color: #1e293b;
        border: 1px solid #e2e8f0;
        border-radius: 8px;
        padding: 4px 10px;
        font-size: 12px;
        font-weight: 700;
        margin: 2px 3px;
    }

    .component-badge i {
        color: #3b82f6;
        font-size: 11px;
    }

    /* أزرار العمليات */
    .action-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 34px;
        height: 34px;
        border-radius: 8px;
        transition: all 0.2s ease;
        border: none;
        color: white !important;
        text-decoration: none !important;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    }

    .action-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.18);
        color: white !important;
    }

    .btn-edit {
        background: linear-gradient(135deg, #0284c7, #0369a1) !important;
    }

    .btn-delete {
        background: linear-gradient(135deg, #ef4444, #dc2626) !important;
    }
</style>
@endsection

@section('title')
{{ __('home.templates') }}
@stop

@section('page-header')
<div class="main-parent">
    <div class="breadcrumb-header justify-content-between mb-3">
        <div class="my-auto">
            <div class="d-flex align-items-center">
                <div class="bg-primary text-white rounded d-flex align-items-center justify-content-center mr-2" style="width: 38px; height: 38px; border-radius: 10px !important;">
                    <i class="fa fa-th-large" style="font-size: 18px;"></i>
                </div>
                <div>
                    <h4 class="content-title mb-0 font-weight-bold" style="color: #0f172a;">{{ __('home.templates') }}</h4>
                    <span class="text-muted tx-13 font-weight-bold">إدارة قوالب ونماذج المنتجات ومكونات التصنيع</span>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('content')

@if(session()->has('success'))
    <div class="alert alert-success alert-dismissible fade show font-weight-bold shadow-sm" style="border-radius: 10px;" role="alert">
        <strong><i class="fa fa-check-circle ml-1"></i> تم بنجاح:</strong> {{ session()->get('success') }}
        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
            <span aria-hidden="true">&times;</span>
        </button>
    </div>
@endif

@if(session()->has('error'))
    <div class="alert alert-danger alert-dismissible fade show font-weight-bold shadow-sm" style="border-radius: 10px;" role="alert">
        <strong><i class="fa fa-exclamation-triangle ml-1"></i> خطأ:</strong> {{ session()->get('error') }}
        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
            <span aria-hidden="true">&times;</span>
        </button>
    </div>
@endif

@if ($errors->any())
    <div class="alert alert-danger font-weight-bold shadow-sm" style="border-radius: 10px;">
        <ul class="mb-0">
            @foreach ($errors->all() as $error)
                <li>{{ $error }}</li>
            @endforeach
        </ul>
    </div>
@endif

<!-- row -->
<div class="row">
    <div class="col-xl-12">
        <div class="invoices-main-card">

            <div class="card-header">
                <i class="fa fa-list-alt text-primary"></i> {{ __('home.clothing_types_list') }}
            </div>

            <div class="table-responsive p-0">
                <table class="table table-modern text-center">
                    <thead>
                        <tr>
                            <th style="width: 20%;">{{ __('home.template_name') }}</th>
                            <th style="width: 45%;">{{ __('home.components') }}</th>
                            <th style="width: 20%;">{{ __('home.notes') }}</th>
                            <th style="width: 15%;">{{ __('home.actions') }}</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($templates as $template)
                        <tr>
                            <!-- اسم القالب -->
                            <td style="font-weight: 800; color: #1e40af; font-size: 14px;">
                                {{ $template->template_name }}
                            </td>

                            <!-- المكونات -->
                            <td class="text-right">
                                <div class="d-flex flex-wrap align-items-center">
                                    @forelse($template->items as $item)
                                        <span class="component-badge">
                                            <i class="fa fa-cube"></i> {{ $item->product->product_name ?? __('home.unknown') }}
                                        </span>
                                    @empty
                                        <span class="text-muted font-weight-normal tx-12">لا توجد مكونات مضافة</span>
                                    @endforelse
                                </div>
                            </td>

                            <!-- الملاحظات -->
                            <td style="color: #64748b; font-weight: 600;">
                                {{ $template->notes ?: '---' }}
                            </td>

                            <!-- الإجراءات -->
                            <td>
                                <div class="d-flex align-items-center justify-content-center" style="gap: 6px;">

                                    <!-- تعديل -->
                                    <a href="{{ route('templates.edit', $template->id) }}"
                                       class="action-btn btn-edit"
                                       title="{{ __('home.edit') }}">
                                        <i class="fa fa-edit"></i>
                                    </a>

                                    <!-- حذف -->
                                    <a href="{{ route('templates.destroy', $template->id) }}"
                                       class="action-btn btn-delete"
                                       onclick="return confirm('{{ __('home.delete_confirm') }}')"
                                       title="{{ __('home.delete') }}">
                                        <i class="fa fa-trash"></i>
                                    </a>

                                </div>
                            </td>
                        </tr>
                        @empty
                        <tr>
                            <td colspan="4" class="py-5 text-center text-muted font-weight-bold">
                                <i class="fa fa-folder-open-o fa-2x d-block mb-2 text-muted"></i>
                                لا توجد قوالب ملابس مضافة حتى الآن
                            </td>
                        </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>

        </div>
    </div>
</div>
<!-- row closed -->

@endsection