@extends('layouts.app')

@section('title', 'Products')

@push('style')
    <link rel="stylesheet" href="https://cdn.datatables.net/1.13.8/css/dataTables.bootstrap5.min.css">
    <style>
        #products-table_wrapper .dataTables_length,
        #products-table_wrapper .dataTables_filter {
            display: none;
        }

        #products-table_wrapper .dataTables_info {
            font-size: 12px;
            font-weight: 500;
            color: #718096;
        }

        #products-table_wrapper .pagination {
            gap: 6px;
        }

        #products-table_wrapper .page-link {
            border-radius: 8px;
        }

        #products-table_wrapper .page-item.active .page-link {
            background-color: var(--bs-primary);
            color: #fff;
            border-color: var(--bs-primary);
        }

        #products-table td,
        #products-table th {
            vertical-align: middle;
            white-space: nowrap;
        }

        #products-table td:nth-child(2) {
            white-space: normal;
            min-width: 220px;
        }

        .badge-dosage {
            background: #e8f4fd;
            color: #1a73e8;
            font-size: 0.78rem;
        }

        .badge-packing {
            background: #f0fdf4;
            color: #16a34a;
            font-size: 0.78rem;
        }

        .badge-gst {
            background: #fef9ec;
            color: #b45309;
            font-size: 0.78rem;
        }

        .badge-status {
            font-size: 0.85em;
            padding: 0.35em 1em;
            border-radius: 1em;
        }
        .badge-status-Active {
            background: #e8f4fd;
            color: #1a73e8;
        }
        .badge-status-Discontinued {
            background: #fef2f2;
            color: #dc2626;
        }
        .badge-status-UnderRegistration {
            background: #fef9ec;
            color: #b45309;
        }
    </style>
@endpush

@section('content')
    @php
        use App\Models\Product;
        $routePrefix = strtolower(auth()->user()->role->name);
        $canCreateLeads = auth()->user()->hasPermissionName('products.create');
        $dosageForms = Product::where('company_id', Auth::user()->company_id)
            ->distinct()
            ->pluck('dosage_form')
            ->sort()
            ->values();
    @endphp

    <div class="d-flex justify-content-between align-items-center flex-wrap gap-2 mb-4">
        <div>
            <h3 class="mb-0">Product Management</h3>
            <span class="text-secondary fs-13">Manage your pharmaceutical products and inventory.</span>
        </div>

        @if($canCreateLeads)
            <div class="d-flex gap-2">
                <a href="{{ route($routePrefix . '.products.create') }}" class="btn btn-outline-primary py-1 px-2 px-sm-4 fs-14 fw-medium rounded-3 hover-bg">
                    <span class="py-sm-1 d-block">
                        <i class="ri-add-line d-none d-sm-inline-block"></i>
                        <span>Add New Product</span>
                    </span>
                </a>
                <button class="btn btn-primary py-1 px-2 px-sm-4 fs-14 fw-medium rounded-3" data-bs-toggle="modal" data-bs-target="#importModal">
                    <span class="py-sm-1 d-block">
                        <i class="ri-upload-2-line d-none d-sm-inline-block"></i>
                        <span>Import Products</span>
                    </span>
                </button>
            </div>
        @endif

        <!-- Import Modal -->
        <div class="modal fade" id="importModal" tabindex="-1" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content">
                    <form action="{{ route($routePrefix . '.products.import.process') }}" method="POST" enctype="multipart/form-data">
                        @csrf
                        <div class="modal-header">
                            <h5 class="modal-title">Import Products</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                        </div>
                        <div class="modal-body">
                            <p>You can upload CSV or Excel (.xlsx) file. Download template: <a href="{{ route($routePrefix . '.products.import.template') }}">Download CSV template</a></p>
                            <div class="mb-3">
                                <label class="form-label">File</label>
                                <input type="file" name="file" class="form-control" accept=".csv, .xlsx, .xls" required>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
                            <button type="submit" class="btn btn-primary">Upload</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    @if(session('success'))
        <div class="alert alert-success alert-dismissible fade show" role="alert">
            {{ session('success') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    @endif

    <div class="card bg-white border-0 rounded-3 mb-4">
        <div class="card-body p-4">
            <div class="row g-3 align-items-center">
                <div class="col-lg-6 col-md-6">
                    <label class="form-label">Search</label>
                    <input type="text" id="global-search" class="form-control" placeholder="Search brand name, composition, dosage, therapeutic category...">
                </div>
                <div class="col-lg-4 col-md-4">
                    <label class="form-label">Dosage Form</label>
                    <select id="dosage-filter" class="form-control form-select">
                        <option value="">All Dosages</option>
                        @foreach($dosageForms as $form)
                            <option value="{{ $form }}">{{ $form }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-lg-2 col-md-2 d-grid">
                    <label class="form-label" style="visibility:hidden">Reset</label>
                    <button type="button" id="reset-filters" class="btn btn-outline-secondary">Reset</button>
                </div>
            </div>
        </div>
    </div>

    <div class="card bg-white border-0 rounded-3 mb-4">
        <div class="card-body p-0">
            <div class="d-flex justify-content-between align-items-center flex-wrap gap-2 p-4">
                <div>
                    <h5 class="mb-1">All Products</h5>
                </div>
            </div>

            <div class="default-table-area style-two default-table-width">
                <div class="table-responsive">
                    <table id="products-table" class="table align-middle mb-0">
                        <thead>
                            <tr>
                                <th scope="col">#</th>
                                <th scope="col">Brand Name</th>
                                <th scope="col">Dosage Form</th>
                                <th scope="col">Packing Type</th>
                                <th scope="col">Pack Size</th>
                                <th scope="col">Therapeutic Category</th>
                                <th scope="col">MRP (₹)</th>
                                <th scope="col">HSN Code</th>
                                <th scope="col">GST Rate</th>
                                <th scope="col">Status</th>
                                <th scope="col">Action</th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

@endsection

@push('script')
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <script src="https://cdn.datatables.net/1.13.8/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.13.8/js/dataTables.bootstrap5.min.js"></script>
    <script>
        $(function () {
            const table = $('#products-table').DataTable({
                processing: true,
                serverSide: true,
                searching: false,
                lengthChange: true,
                pageLength: 10,
                order: [[1, 'asc']],
                ajax: {
                    url: @json(route($routePrefix . '.products.data')),
                    data: function (d) {
                        d.search = $('#global-search').val();
                        d.dosage = $('#dosage-filter').val();
                    }
                },
                columns: [
                    {data: 'DT_RowIndex', name: 'DT_RowIndex', orderable: false, searchable: false},
                    {data: 'brand_name', name: 'brand_name'},
                    {data: 'dosage_form', name: 'dosage_form', orderable: false, searchable: false},
                    {data: 'packing_type', name: 'packing_type'},
                    {data: 'pack_size', name: 'pack_size'},
                    {data: 'therapeutic_category', name: 'therapeutic_category'},
                    {data: 'mrp', name: 'mrp'},
                    {data: 'hsn_code', name: 'hsn_code'},
                    {data: 'gst_rate', name: 'gst_rate'},
                    {data: 'status', name: 'status'},
                    {data: 'action', name: 'action', orderable: false, searchable: false}
                ],
                language: {
                    paginate: {
                        previous: '<i class="ri-arrow-left-s-line"></i>',
                        next: '<i class="ri-arrow-right-s-line"></i>'
                    },
                    info: 'Showing _START_ to _END_ of _TOTAL_ results',
                    infoEmpty: 'Showing 0 to 0 of 0 results',
                    emptyTable: 'No products found.'
                },
                drawCallback: function () {
                    feather.replace && feather.replace();
                }
            });

            let searchTimer;
            $('#global-search').on('input', function () {
                clearTimeout(searchTimer);
                searchTimer = setTimeout(function () { table.ajax.reload(); }, 300);
            });

            // Dosage filter change event
            $('#dosage-filter').on('change', function () {
                table.ajax.reload();
            });

            $('#reset-filters').on('click', function () {
                $('#global-search').val('');
                $('#dosage-filter').val('');
                table.ajax.reload();
            });
        });
    </script>
@endpush