@extends('layout.app')
@section('title', 'Item Master')

@push('header_script')
<link rel="stylesheet" href="{{ asset('theme/assets/vendor/datatables/dataTables.bs5.css') }}">
<link rel="stylesheet" href="{{ asset('theme/assets/vendor/datatables/dataTables.bs5-custom.css') }}">
<link rel="stylesheet" href="{{ asset('theme/assets/vendor/datatables/buttons/dataTables.bs5-custom.css') }}">
<link rel="stylesheet" href="{{ asset('theme/assets/sweetalert/sweet-alert.css') }}" type="text/css">
<style>
    /* Clean Segmented Navigation */
    .segmented-nav {
        display: inline-flex;
        background: #f1f5f9;
        padding: 4px;
        border-radius: 10px;
        border: 1px solid #e2e8f0;
        gap: 4px;
        flex-wrap: wrap;
    }
    .segmented-nav .nav-link {
        border: none !important;
        background: transparent !important;
        color: #64748b;
        font-size: 13.5px;
        font-weight: 600;
        padding: 7px 16px;
        border-radius: 7px;
        transition: all 0.2s ease;
    }
    .segmented-nav .nav-link.active {
        background: #ffffff !important;
        color: #f97316 !important;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
    }

    /* Primary Action Buttons */
    .btn-modern-add {
        background: #f97316;
        color: #ffffff;
        font-size: 13px;
        font-weight: 700;
        padding: 7px 16px;
        border-radius: 8px;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        gap: 6px;
    }
    .btn-modern-add:hover { background: #ea580c; color: #ffffff; }

    /* Modern Table Header & Controls */
    .table thead th {
        background: #0f172a !important;
        color: #ffffff !important;
        font-size: 12px;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        padding: 10px 12px;
        border: none !important;
    }
    .dataTables_wrapper .dataTables_filter input,
    .dataTables_wrapper .dataTables_length select {
        border: 1.5px solid #cbd5e1 !important;
        border-radius: 6px !important;
        padding: 4px 8px;
        font-size: 13px;
    }
    .dataTables_wrapper .dataTables_filter input:focus {
        border-color: #f97316 !important;
        outline: none;
    }
    .page-item.active .page-link {
        background-color: #f97316 !important;
        border-color: #f97316 !important;
    }
</style>
@endpush

@section('content')
<div class="app-hero-header d-flex align-items-center">
    <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="javascript:void(0);">Master</a></li>
        <li class="breadcrumb-item active">Item Master</li>
    </ol>
</div>

<div class="app-body">
    <div class="row gx-3">
        <div class="col-sm-12">
            <div class="item-master-card">
                <div class="item-master-card-body">
                    <!-- Modern Segmented Pill Tabs -->
                    <div class="d-flex flex-wrap align-items-center justify-content-between gap-3 mb-4">
                        <ul class="nav segmented-nav" id="itemMasterTabs">
                            <li class="nav-item">
                                <button class="nav-link active" data-bs-toggle="tab" data-bs-target="#tab-items" type="button">
                                    <i class="ri-box-3-line"></i> Items
                                </button>
                            </li>
                            <li class="nav-item">
                                <button class="nav-link" data-bs-toggle="tab" data-bs-target="#tab-categories" type="button">
                                    <i class="ri-price-tag-3-line"></i> Categories
                                </button>
                            </li>
                            <li class="nav-item">
                                <button class="nav-link" data-bs-toggle="tab" data-bs-target="#tab-units" type="button">
                                    <i class="ri-ruler-line"></i> Units
                                </button>
                            </li>
                            <li class="nav-item">
                                <button class="nav-link" data-bs-toggle="tab" data-bs-target="#tab-brands" type="button">
                                    <i class="ri-bookmark-3-line"></i> Brands
                                </button>
                            </li>
                            <li class="nav-item">
                                <button class="nav-link" data-bs-toggle="tab" data-bs-target="#tab-manufacturers" type="button">
                                    <i class="ri-building-2-line"></i> Manufacturers
                                </button>
                            </li>
                        </ul>
                    </div>

                    <div class="tab-content" id="itemMasterTabContent">

                        <!-- ============ TAB: ITEMS ============ -->
                        <div class="tab-pane fade show active" id="tab-items">
                            <div class="d-flex justify-content-between align-items-center mb-3">
                                <span class="text-muted small fw-semibold"><i class="ri-information-line me-1"></i> Inventory items, categories, brands & current stock levels</span>
                                <a href="{{ route('product.create') }}" class="btn-modern-add">
                                    <i class="ri-add-line fs-5"></i> Add Item
                                </a>
                            </div>

                            <div class="table-card-wrapper mb-3">
                                <div class="table-responsive">
                                    <table id="dt-items" class="table table-hover truncate m-0 align-middle">
                                        <thead>
                                            <tr>
                                                <th>S.No.</th>
                                                <th>Item Name</th>
                                                <th>Category</th>
                                                <th>Brand</th>
                                                <th>Unit</th>
                                                <th>Current Stock</th>
                                                <th>Rate</th>
                                                <th>Status</th>
                                                <th>Action</th>
                                            </tr>
                                        </thead>
                                        <tbody></tbody>
                                    </table>
                                </div>
                            </div>
                        </div>

                        <!-- ============ TAB: CATEGORIES ============ -->
                        <div class="tab-pane fade" id="tab-categories">
                            <div class="d-flex justify-content-between align-items-center mb-3">
                                <span class="text-muted small fw-semibold"><i class="ri-information-line me-1"></i> Product categories & classifications</span>
                                <a href="{{ route('product-category.create') }}" class="btn-modern-add">
                                    <i class="ri-add-line fs-5"></i> Add Category
                                </a>
                            </div>
                            <div class="table-card-wrapper mb-3">
                                <div class="table-responsive">
                                    <table id="dt-categories" class="table table-hover truncate m-0 align-middle">
                                        <thead>
                                            <tr>
                                                <th>S.No.</th>
                                                <th>Category Name</th>
                                                <th>Action</th>
                                            </tr>
                                        </thead>
                                        <tbody></tbody>
                                    </table>
                                </div>
                            </div>
                        </div>

                        <!-- ============ TAB: UNITS ============ -->
                        <div class="tab-pane fade" id="tab-units">
                            <div class="d-flex justify-content-between align-items-center mb-3">
                                <span class="text-muted small fw-semibold"><i class="ri-information-line me-1"></i> Units of measurement</span>
                                <a href="{{ route('units.create') }}" class="btn-modern-add">
                                    <i class="ri-add-line fs-5"></i> Add Unit
                                </a>
                            </div>
                            <div class="table-card-wrapper mb-3">
                                <div class="table-responsive">
                                    <table id="dt-units" class="table table-hover truncate m-0 align-middle">
                                        <thead>
                                            <tr>
                                                <th>S.No.</th>
                                                <th>Unit Name</th>
                                                <th>Status</th>
                                                <th>Action</th>
                                            </tr>
                                        </thead>
                                        <tbody></tbody>
                                    </table>
                                </div>
                            </div>
                        </div>

                        <!-- ============ TAB: BRANDS ============ -->
                        <div class="tab-pane fade" id="tab-brands">
                            <div class="d-flex justify-content-between align-items-center mb-3">
                                <span class="text-muted small fw-semibold"><i class="ri-information-line me-1"></i> Product brand names & catalog</span>
                                <a href="{{ route('brands.create') }}" class="btn-modern-add">
                                    <i class="ri-add-line fs-5"></i> Add Brand
                                </a>
                            </div>
                            <div class="table-card-wrapper mb-3">
                                <div class="table-responsive">
                                    <table id="dt-brands" class="table table-hover truncate m-0 align-middle">
                                        <thead>
                                            <tr>
                                                <th>S.No.</th>
                                                <th>Brand Name</th>
                                                <th>Status</th>
                                                <th>Action</th>
                                            </tr>
                                        </thead>
                                        <tbody></tbody>
                                    </table>
                                </div>
                            </div>
                        </div>

                        <!-- ============ TAB: MANUFACTURERS ============ -->
                        <div class="tab-pane fade" id="tab-manufacturers">
                            <div class="d-flex justify-content-between align-items-center mb-3">
                                <span class="text-muted small fw-semibold"><i class="ri-information-line me-1"></i> Part manufacturers & vendors</span>
                                <a href="{{ route('manufacturers.create') }}" class="btn-modern-add">
                                    <i class="ri-add-line fs-5"></i> Add Manufacturer
                                </a>
                            </div>
                            <div class="table-card-wrapper mb-3">
                                <div class="table-responsive">
                                    <table id="dt-manufacturers" class="table table-hover truncate m-0 align-middle">
                                        <thead>
                                            <tr>
                                                <th>S.No.</th>
                                                <th>Manufacturer Name</th>
                                                <th>Category</th>
                                                <th>Status</th>
                                                <th>Action</th>
                                            </tr>
                                        </thead>
                                        <tbody></tbody>
                                    </table>
                                </div>
                            </div>
                        </div>

                    </div>{{-- end tab-content --}}
                </div>{{-- end card-body --}}
            </div>
        </div>
    </div>
</div>
@endsection

@push('footer_script')
<script src="{{ asset('theme/assets/vendor/datatables/dataTables.min.js') }}"></script>
<script src="{{ asset('theme/assets/vendor/datatables/dataTables.bootstrap.min.js') }}"></script>
<script src="{{ asset('theme/assets/vendor/datatables/custom/custom-datatables.js') }}"></script>
<script src="{{ asset('theme/assets/sweetalert/sweet-alert.min.js') }}"></script>

<script>
var CSRF = '{{ csrf_token() }}';

var dtItems, dtCategories, dtUnits, dtBrands, dtManufacturers;

$(document).ready(function() {
    dtItems = $('#dt-items').DataTable({
        processing: true, serverSide: true, stateSave: true, responsive: true,
        ajax: '{{ route("product.getData") }}',
        columns: [
            { data: 'DT_RowIndex', name: 'DT_RowIndex', orderable: false, searchable: false },
            { data: 'product_name', name: 'product_name' },
            { data: 'category_name', name: 'category_name', orderable: false },
            { data: 'brand_name', name: 'brand_name', orderable: false },
            { data: 'units', name: 'units' },
            { data: 'current_stock', name: 'current_stock' },
            { data: 'rate_per', name: 'rate_per' },
            { data: 'status_label', name: 'status', orderable: false, searchable: false },
            { data: 'action', name: 'action', orderable: false, searchable: false },
        ]
    });

    dtCategories = $('#dt-categories').DataTable({
        processing: true, serverSide: true, responsive: true,
        ajax: '{{ route("product-category.getData") }}',
        columns: [
            { data: 'DT_RowIndex', name: 'DT_RowIndex', orderable: false, searchable: false },
            { data: 'category_name', name: 'category_name' },
            { data: 'action', name: 'action', orderable: false, searchable: false },
        ]
    });

    dtUnits = $('#dt-units').DataTable({
        processing: true, serverSide: true, responsive: true,
        ajax: '{{ route("units.getData") }}',
        columns: [
            { data: 'DT_RowIndex', name: 'DT_RowIndex', orderable: false, searchable: false },
            { data: 'name', name: 'name' },
            { data: 'status_label', name: 'status', orderable: false, searchable: false },
            { data: 'action', name: 'action', orderable: false, searchable: false },
        ]
    });

    dtBrands = $('#dt-brands').DataTable({
        processing: true, serverSide: true, responsive: true,
        ajax: '{{ route("brands.getData") }}',
        columns: [
            { data: 'DT_RowIndex', name: 'DT_RowIndex', orderable: false, searchable: false },
            { data: 'brand_name', name: 'brand_name' },
            { data: 'status_label', name: 'status', orderable: false, searchable: false },
            { data: 'action', name: 'action', orderable: false, searchable: false },
        ]
    });

    dtManufacturers = $('#dt-manufacturers').DataTable({
        processing: true, serverSide: true, responsive: true,
        ajax: '{{ route("manufacturers.getData") }}',
        columns: [
            { data: 'DT_RowIndex', name: 'DT_RowIndex', orderable: false, searchable: false },
            { data: 'name', name: 'name' },
            { data: 'category_name', name: 'category.category_name' },
            { data: 'status_label', name: 'status', orderable: false, searchable: false },
            { data: 'action', name: 'action', orderable: false, searchable: false },
        ]
    });

    // Reload DataTables on tab shown (to fix column widths)
    document.querySelectorAll('#itemMasterTabs button').forEach(function(btn) {
        btn.addEventListener('shown.bs.tab', function() {
            $.fn.dataTable.tables({ visible: true, api: true }).columns.adjust();
        });
    });

    // Auto-activate tab from hash (#tab-brands) or ?tab= query param
    var activeHash = window.location.hash;
    var urlParams = new URLSearchParams(window.location.search);
    var tabParam = urlParams.get('tab');
    var targetTab = activeHash || (tabParam ? '#tab-' + tabParam : null);
    if (targetTab) {
        var triggerEl = document.querySelector('#itemMasterTabs button[data-bs-target="' + targetTab + '"]');
        if (triggerEl) {
            var tabInstance = bootstrap.Tab.getOrCreateInstance(triggerEl);
            tabInstance.show();
        }
    }

    // ─── DELETE ──────────────────────────────────────────────────────────────
    window.deleteIt = function(id, type) {
        var urls = {
            product:      '{{ url("product") }}/' + id,
            category:     '{{ url("product-category") }}/' + id,
            unit:         '{{ url("units") }}/' + id,
            brand:        '{{ url("brands") }}/' + id,
            manufacturer: '{{ url("manufacturers") }}/' + id,
        };
        var tables = {
            product:      dtItems,
            category:     dtCategories,
            unit:         dtUnits,
            brand:        dtBrands,
            manufacturer: dtManufacturers,
        };
        swal({
            title: "Are you sure?",
            text: "This cannot be recovered!",
            type: "warning",
            showCancelButton: true,
            confirmButtonColor: '#DD6B55',
            confirmButtonText: 'Yes, delete it!',
            cancelButtonText: "Cancel",
            closeOnConfirm: false,
            closeOnCancel: false,
        }, function(isConfirm) {
            if (isConfirm) {
                $.ajax({
                    url: urls[type],
                    type: 'DELETE',
                    data: { "_token": CSRF },
                    success: function(res) {
                        if (res.success) {
                            swal("Deleted!", res.message || "Deleted successfully.", "success");
                            tables[type].ajax.reload(null, false);
                        } else {
                            swal("Warning", res.message || "Cannot delete.", "warning");
                        }
                    },
                    error: function(xhr) {
                        swal("Error", (xhr.responseJSON && xhr.responseJSON.message) || "An error occurred.", "error");
                    }
                });
            } else {
                swal("Cancelled", "Data is safe.", "error");
            }
        });
    };
});
</script>
@endpush