@extends('layouts.public.app')

@section('title', 'Material Safety Data Sheet | Chemical Wholesale')

@section('content')
    <div class=" pb-4">
        <div class="search-keywords">
            <div class="container-fluid">
                <div class="d-flex justify-content-between align-items-center">
                    <div>
                        <p class="search-keywords-text"> Safety Data Sheet</p>
                        <p class="small text-secondary">Home > Safety Data Sheet</p>
                    </div>
                    @if (@Auth::user()->trade_role == '3' || @Auth::user()->trade_role == '2')
                        <div>
                            <a data-bs-toggle="modal" data-bs-target="#addsds" class="btn btn-primary"><i
                                    class="bi bi-plus me-1"></i> Upload new SDS</a>
                        </div>
                    @endif
                </div>
            </div>
        </div>

        <div class="mt-2 mb-5">
            <div class="container">
                <div class="row justify-content-center">
                    <div class="col-lg-12">
                        <div class="d-flex justify-content-center cw-frontpage-title">
                            <h4 class="fw-bold mt-4 mb-3">Find a Safety Data Sheet</h4>
                        </div>
                        <div class="card">
                            <div class="card-body">

                                <form action="{{ route('public.msds_sheet') }}" method="post" autocomplete="off"
                                    id="msdsSearchPage">
                                    @csrf
                                    <div class="d-flex w-100">
                                        <div class="me-2 w-100">
                                            <div class="autocomplete">
                                                <input type="text" name="keyword" class="form-control cw-input"
                                                    onkeyup="getMsdsSuggestions(this, 'msdsSuggestions')" id="msdsKeyword"
                                                    placeholder="Search" required>
                                                <div id="msdsSuggestions" class="autocomplete-items"
                                                    data-ref="msdsSearchPage"></div>
                                            </div>
                                        </div>
                                        <div class="input-group-append">
                                            <button class="btn btn-dark cw-input" type="submit"><span
                                                    class="d-flex fw-bold"><i class="bi bi-search me-2"></i>
                                                    Search</span>
                                            </button>
                                        </div>
                                    </div>
                                </form>

                            </div>
                        </div>
                    </div>
                </div>
                <div class="row mt-4">
                    <div class="col-lg-12">
                        <div class="">
                            <div class="pb-3">
                                <div class="d-flex justify-content-between align-items-center">
                                    @if (!empty(@$keyword))
                                        <h6 class="mb-0">Showing search result for
                                            <span class="fw-bold text-primary">"{{ @$keyword }}"</span>
                                        </h6>
                                    @endif
                                </div>
                            </div>
                            @if (!empty($msds))
                                <div class="card">
                                    <div class="table-responsive">
                                        <table class="table cwtable">
                                            <thead class="table-light">
                                                <tr>
                                                    <th scope="col">#</th>
                                                    <th scope="col">Product Name</th>
                                                    <th scope="col">Category Name</th>
                                                    <th scope="col">Grade</th>
                                                    <th scope="col">Supplier of SDS</th>
                                                    <th scope="col">Revision date</th>
                                                    <th scope="col"></th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @if (count($msds) > 0)
                                                    @foreach ($msds as $doc)
                                                        <tr>
                                                            <th scope="row">{{ $loop->index + 1 }}</th>
                                                            <td>{{ @$doc['name'] }}</td>
                                                            <td>
                                                                @foreach ($doc['assignedCategory'] as $category)
                                                                    <span class="badge bg-primary">
                                                                        {{ $category['getCategory']['name'] }}</span>
                                                                @endforeach
                                                            </td>
                                                            <td>{{ @$doc['grade'] }}</td>
                                                            <td>{{ @$doc['getBusiness']['company'] }}</td>
                                                            <td>{{ @$doc['getMsds']['created_at']->format('m/d/Y') }}</td>
                                                            <td><a href="{{ @$doc['getMsds']['path'] }}" target="_blank"
                                                                    class="btn btn-light">
                                                                    Download</a></td>
                                                        </tr>
                                                    @endforeach
                                                @else
                                                    <tr>
                                                        <td colspan="7" class="text-center">No Search result found</td>
                                                    </tr>
                                                @endif
                                            </tbody>
                                        </table>
                                    </div>

                                </div>
                            @endif
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>


    <div class="modal fade" id="addsds" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h1 class="modal-title fs-5" id="">Upload New Safety Data Sheet</h1>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form action="{{ route('public.saveProductSDS') }}" method="post" enctype="multipart/form-data">
                        @csrf
                        <div class="mb-3"><label class="form-label">Product</label>
                            <select name="product_id" id="productSelect" class="form-control form-select cw-input"
                                onchange="selectProduct()">
                                <option value="">Select Product</option>
                                @foreach ($products as $p)
                                    <option value="{{ $p['id'] }}">{{ $p['name'] }}</option>
                                @endforeach
                            </select>
                        </div>
                        <input type="text" name="title" value="MSDS" hidden>
                        <div class="mb-3"><label class="form-label">Trade Name</label>
                            <input type="text" class="form-control cw-input" placeholder="Trade Name"
                                id="trade" readonly>
                        </div>
                        <div class="mb-3"><label class="form-label">Product Grade</label>
                            <input type="text" class="form-control cw-input" id="grade"
                                placeholder="Grade of Product" readonly>
                        </div>
                        <div class="mb-3"><label class="form-label">Supplier</label>
                            <input type="text" class="form-control cw-input" id="supplier"
                                placeholder="Product Supplier" readonly>
                        </div>
                        <div class="mb-3"><label class="form-label">MSDS File</label>
                            <input type="file" name="document" class="form-control cw-input"
                                accept="application/pdf">
                        </div>

                        <button type="submit" class="btn btn-primary w-100">Save</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection
@push('css')
@endpush
@push('js')
    <script>
        function selectProduct() {
            const selectElement = document.getElementById('productSelect');
            const selectedValue = selectElement.value;

            if (selectedValue) {
                $.ajax({
                    url: '{{ route('public.getProductInfo') }}',
                    type: 'GET',
                    data: {
                        id: selectedValue,
                    },
                    success: function(response) {
                        $('#trade').val(response.category_name);
                        $('#grade').val(response.product_grade);
                        $('#supplier').val(response.supplier_name);
                    },
                    error: function(xhr, status, error) {
                        console.error(error);
                    }
                });
            } else {
                alert('Please select a product.');
            }
        }
    </script>
    <script>
        function getMsdsSuggestions(element, result_id) {
            var searchType = 'document';
            var keyword = $(element).val();
            if (keyword.length >= 2) {
                fetchMSDSSuggestions(keyword, result_id);
            } else {
                $('#' + result_id).empty().hide();
            }
        }

        function fetchMSDSSuggestions(keyword, suggestion_div) {
            $.ajax({
                url: '/suggestions',
                method: 'POST',
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                dataType: 'json',
                data: {
                    keyword: keyword
                },
                success: function(response) {
                    displayMSDSSuggestions(response, suggestion_div);
                },
                error: function(xhr, status, error) {
                    console.error('Error fetching suggestions:', error);
                }
            });
        }


        function displayMSDSSuggestions(suggestions, suggestions_div) {
            var key = $('#msdsKeyword').val();
            var dropdown = $('#' + suggestions_div);
            dropdown.empty();
            if (suggestions.length) {
                suggestions.forEach(function(item) {
                    var highlightedItem = item.replace(new RegExp(key, 'gi'),
                        '<span class="fw-bold text-primary">$&</span>');
                    dropdown.append('<a href="#" class="autocomplete-item msds">' +
                        highlightedItem +
                        '</a>');
                });
                dropdown.show();
            } else {
                dropdown.hide();
            }
        }

        $(document).on('click', '.autocomplete-item.msds', function(e) {
            e.preventDefault();
            var selectedValue = $(this).text();
            var dataRef = $(this).parent().attr('data-ref');
            $('#msdsKeyword').val(selectedValue);
        });
    </script>
@endpush