@extends('layouts.app')

@section('title', 'Number Series')

@section('content')
    <!-- Breadcrumb -->
    <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{{ route('dashboard') }}">Dashboard</a></li>
            <li class="breadcrumb-item">Terms & Templates</li>
            <li class="breadcrumb-item active" aria-current="page">Number Series</li>
        </ol>
    </nav>

    <!-- Main Table Card -->
    <div class="card mb-3" id="numberSeriesTable" data-list='{"valueNames":["series_name","prefix","current_number","next_number","is_active","created_at"],"page":10,"pagination":true}'>
        <div class="card-header">
            <div class="row flex-between-center">
                <div class="col-4 col-sm-auto d-flex align-items-center pe-0">
                    <h5 class="fs-9 mb-0 text-nowrap py-2 py-xl-0">Number Series</h5>
                </div>
                <div class="col-8 col-sm-auto text-end ps-2">
                    <div class="d-none" id="table-numberseries-actions">
                        <div class="d-flex">
                            <select class="form-select form-select-sm" aria-label="Bulk actions">
                                <option selected="">Bulk actions</option>
                                <option value="activate">Activate</option>
                                <option value="deactivate">Deactivate</option>
                                <option value="reset">Reset Counter</option>
                                <option value="export">Export Selected</option>
                            </select>
                            <button class="btn btn-falcon-default btn-sm ms-2" type="button">Apply</button>
                        </div>
                    </div>
                    <div id="table-numberseries-replace-element">
                        <button class="btn btn-falcon-default btn-sm" type="button" data-bs-toggle="modal" data-bs-target="#numberSeriesModal">
                            <span class="fas fa-plus" data-fa-transform="shrink-3 down-2"></span>
                            <span class="d-none d-sm-inline-block ms-1">New</span>
                        </button>
                        <button class="btn btn-falcon-default btn-sm mx-2" type="button" data-bs-toggle="collapse" data-bs-target="#numberSeriesFilters">
                            <span class="fas fa-filter" data-fa-transform="shrink-3 down-2"></span>
                            <span class="d-none d-sm-inline-block ms-1">Filter</span>
                        </button>
                        <button class="btn btn-falcon-default btn-sm" type="button" id="exportNumberSeries">
                            <span class="fas fa-external-link-alt" data-fa-transform="shrink-3 down-2"></span>
                            <span class="d-none d-sm-inline-block ms-1">Export</span>
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <!-- Advanced Filters (Collapsible) -->
        <div class="collapse" id="numberSeriesFilters">
            <div class="card-body border-top fs-10">
                <div class="row g-3">
                    <div class="col-6 col-md-4 col-lg-3">
                        <input class="form-control form-control-sm" id="prefixFilter" type="text" placeholder="Filter by Prefix" />
                    </div>
                    <div class="col-6 col-md-4 col-lg-3">
                        <select class="form-select form-select-sm" id="statusFilter">
                            <option value="">All Status</option>
                            <option value="Active">Active</option>
                            <option value="Inactive">Inactive</option>
                        </select>
                    </div>
                    <div class="col-6 col-md-4 col-lg-3">
                        <input class="form-control form-control-sm datetimepicker" id="createdDateFilter" type="text" placeholder="Created Date" />
                    </div>
                    <div class="col-6 col-md-4 col-lg-3">
                        <button class="btn btn-falcon-default btn-sm me-2" type="button" id="applyNumberSeriesFilters">Apply</button>
                        <button class="btn btn-falcon-default btn-sm" type="button" id="clearNumberSeriesFilters">Clear</button>
                    </div>
                </div>
            </div>
        </div>

        <div class="card-body p-0">
            <div class="table-responsive scrollbar">
                <table class="table table-sm table-striped fs-10 mb-0 overflow-hidden">
                    <thead class="bg-200">
                        <tr>
                            <th>
                                <div class="form-check fs-9 mb-0 d-flex align-items-center">
                                    <input class="form-check-input" id="checkbox-bulk-numberseries-select" type="checkbox"
                                           data-bulk-select='{"body":"table-numberseries-body","actions":"table-numberseries-actions","replacedElement":"table-numberseries-replace-element"}' />
                                </div>
                            </th>
                            <th class="text-900 sort pe-1 align-middle white-space-nowrap" data-sort="series_name">Series Name</th>
                            <th class="text-900 sort pe-1 align-middle white-space-nowrap" data-sort="prefix">Prefix</th>
                            <th class="text-900 sort pe-1 align-middle white-space-nowrap" data-sort="current_number">Current Number</th>
                            <th class="text-900 sort pe-1 align-middle white-space-nowrap" data-sort="next_number">Next Number</th>
                            <th class="text-900 sort pe-1 align-middle white-space-nowrap" data-sort="increment_by">Increment</th>
                            <th class="text-900 sort pe-1 align-middle white-space-nowrap" data-sort="is_active">Status</th>
                            <th class="text-900 sort pe-1 align-middle white-space-nowrap" data-sort="created_at">Created</th>
                            <th class="align-middle no-sort"></th>
                        </tr>
                    </thead>
                    <tbody class="list" id="table-numberseries-body">
                        <!-- Sample Data Rows -->
                        <tr class="btn-reveal-trigger">
                            <td class="align-middle py-2" style="width: 28px;">
                                <div class="form-check fs-9 mb-0 d-flex align-items-center">
                                    <input class="form-check-input" type="checkbox" id="numberseries-0" data-bulk-select-row="data-bulk-select-row" />
                                </div>
                            </td>
                            <td class="series_name align-middle white-space-nowrap py-2">
                                <div class="d-flex align-items-center">
                                    <div class="avatar avatar-xl me-2">
                                        <div class="avatar-name rounded-circle bg-soft-info text-info"><span>SI</span></div>
                                    </div>
                                    <div class="flex-1">
                                        <h6 class="mb-0 fs-10">Sales Invoice</h6>
                                    </div>
                                </div>
                            </td>
                            <td class="prefix align-middle py-2">
                                <span class="badge rounded-pill badge-subtle-info">SI</span>
                            </td>
                            <td class="current_number align-middle py-2">1000</td>
                            <td class="next_number align-middle py-2">1001</td>
                            <td class="increment_by align-middle py-2">1</td>
                            <td class="is_active align-middle py-2">
                                <span class="badge rounded-pill badge-subtle-success">Active</span>
                            </td>
                            <td class="created_at align-middle py-2">{{ now()->format('d/m/Y') }}</td>
                            <td class="align-middle white-space-nowrap py-2 text-end">
                                <div class="dropdown font-sans-serif position-static">
                                    <button class="btn btn-link text-600 btn-sm dropdown-toggle btn-reveal" type="button"
                                            id="numberseries-dropdown-0" data-bs-toggle="dropdown" data-boundary="window"
                                            aria-haspopup="true" aria-expanded="false">
                                        <span class="fas fa-ellipsis-h fs-10"></span>
                                    </button>
                                    <div class="dropdown-menu dropdown-menu-end border py-0" aria-labelledby="numberseries-dropdown-0">
                                        <div class="py-2">
                                            <a class="dropdown-item" href="#!" onclick="editNumberSeries(0)">
                                                <i class="fas fa-edit me-2"></i>Edit
                                            </a>
                                            <a class="dropdown-item" href="#!" onclick="viewNumberSeries(0)">
                                                <i class="fas fa-eye me-2"></i>View Details
                                            </a>
                                            <div class="dropdown-divider"></div>
                                            <a class="dropdown-item text-warning" href="#!" onclick="resetNumberSeries(0)">
                                                <i class="fas fa-redo me-2"></i>Reset Counter
                                            </a>
                                            <a class="dropdown-item text-info" href="#!" onclick="toggleNumberSeriesStatus(0)">
                                                <i class="fas fa-toggle-on me-2"></i>Toggle Status
                                            </a>
                                            <a class="dropdown-item text-danger" href="#!" onclick="deleteNumberSeries(0)">
                                                <i class="fas fa-trash me-2"></i>Delete
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>

        <!-- Pagination -->
        <div class="card-footer d-flex align-items-center justify-content-center">
            <button class="btn btn-sm btn-falcon-default me-1" type="button" title="Previous" data-list-pagination="prev">
                <span class="fas fa-chevron-left"></span>
            </button>
            <ul class="pagination mb-0"></ul>
            <button class="btn btn-sm btn-falcon-default ms-1" type="button" title="Next" data-list-pagination="next">
                <span class="fas fa-chevron-right"></span>
            </button>
        </div>
    </div>

    <!-- Number Series Modal -->
    <div class="modal fade" id="numberSeriesModal" tabindex="-1" aria-labelledby="numberSeriesModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header bg-light">
                    <h5 class="modal-title" id="numberSeriesModalLabel">
                        <i class="fas fa-sort-numeric-up me-2"></i>Add New Number Series
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form id="numberSeriesForm">
                    <div class="modal-body">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="series_name" class="form-label">Series Name <span class="text-danger">*</span></label>
                                    <input type="text" class="form-control" id="series_name" name="series_name" required>
                                    <div class="form-text">Descriptive name for the number series</div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="prefix" class="form-label">Prefix</label>
                                    <input type="text" class="form-control" id="prefix" name="prefix" maxlength="10">
                                    <div class="form-text">Optional prefix (e.g., SI, PO, INV)</div>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="suffix" class="form-label">Suffix</label>
                                    <input type="text" class="form-control" id="suffix" name="suffix" maxlength="10">
                                    <div class="form-text">Optional suffix</div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="current_number" class="form-label">Starting Number <span class="text-danger">*</span></label>
                                    <input type="number" class="form-control" id="current_number" name="current_number" min="0" required>
                                    <div class="form-text">Starting number for the series</div>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="increment_by" class="form-label">Increment By <span class="text-danger">*</span></label>
                                    <input type="number" class="form-control" id="increment_by" name="increment_by" min="1" value="1" required>
                                    <div class="form-text">Number to increment by (usually 1)</div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="padding_zeros" class="form-label">Padding Zeros <span class="text-danger">*</span></label>
                                    <input type="number" class="form-control" id="padding_zeros" name="padding_zeros" min="0" max="10" value="4" required>
                                    <div class="form-text">Number of leading zeros (e.g., 4 = 0001)</div>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <div class="form-check form-switch">
                                        <input class="form-check-input" type="checkbox" id="is_active" name="is_active" checked>
                                        <label class="form-check-label" for="is_active">Active</label>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label class="form-label">Preview</label>
                                    <div class="form-control bg-light" id="preview">
                                        <span id="previewText">SI0001</span>
                                    </div>
                                    <div class="form-text">Preview of generated number</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                            <i class="fas fa-times me-1"></i>Cancel
                        </button>
                        <button type="submit" class="btn btn-primary">
                            <i class="fas fa-save me-1"></i>Save Number Series
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@push('styles')
    <link href="{{ asset('vendors/flatpickr/flatpickr.min.css') }}" rel="stylesheet">
@endpush

@push('scripts')
    <script src="{{ asset('vendors/list.js/list.min.js') }}"></script>
    <script src="{{ asset('vendors/flatpickr/flatpickr.min.js') }}"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Initialize List.js for table functionality
            var numberSeriesList = new List('numberSeriesTable', {
                valueNames: ['series_name', 'prefix', 'current_number', 'next_number', 'increment_by', 'is_active', 'created_at'],
                page: 10,
                pagination: true
            });

            // Initialize date picker
            flatpickr('#createdDateFilter', {
                dateFormat: 'd/m/Y',
                allowInput: true
            });

            // Preview update functionality
            function updatePreview() {
                var prefix = document.getElementById('prefix').value || '';
                var suffix = document.getElementById('suffix').value || '';
                var currentNumber = document.getElementById('current_number').value || '1';
                var paddingZeros = document.getElementById('padding_zeros').value || '4';

                var paddedNumber = currentNumber.toString().padStart(parseInt(paddingZeros), '0');
                var preview = prefix + paddedNumber + suffix;

                document.getElementById('previewText').textContent = preview || 'Preview';
            }

            // Add event listeners for preview update
            ['prefix', 'suffix', 'current_number', 'padding_zeros'].forEach(function(id) {
                document.getElementById(id).addEventListener('input', updatePreview);
            });

            // Filter functionality
            document.getElementById('applyNumberSeriesFilters').addEventListener('click', function() {
                var prefixFilter = document.getElementById('prefixFilter').value;
                var statusFilter = document.getElementById('statusFilter').value;
                var dateFilter = document.getElementById('createdDateFilter').value;

                numberSeriesList.filter(function(item) {
                    var matchPrefix = !prefixFilter || item.values().prefix.toLowerCase().includes(prefixFilter.toLowerCase());
                    var matchStatus = !statusFilter || item.values().is_active.includes(statusFilter);
                    return matchPrefix && matchStatus;
                });
            });

            // Clear filters
            document.getElementById('clearNumberSeriesFilters').addEventListener('click', function() {
                document.getElementById('prefixFilter').value = '';
                document.getElementById('statusFilter').value = '';
                document.getElementById('createdDateFilter').value = '';
                numberSeriesList.filter();
            });

            // Export functionality
            document.getElementById('exportNumberSeries').addEventListener('click', function() {
                alert('Export functionality will be implemented');
            });

            // Form submission
            document.getElementById('numberSeriesForm').addEventListener('submit', function(e) {
                e.preventDefault();

                var formData = new FormData(this);

                console.log('Form data:', Object.fromEntries(formData));

                var modal = bootstrap.Modal.getInstance(document.getElementById('numberSeriesModal'));
                modal.hide();
                this.reset();

                showAlert('Number Series added successfully!', 'success');
                loadNumberSeriesData();
            });

            // Initialize preview
            updatePreview();
        });

        function editNumberSeries(id) {
            console.log('Edit number series:', id);
        }

        function viewNumberSeries(id) {
            console.log('View number series:', id);
        }

        function resetNumberSeries(id) {
            if (confirm('Are you sure you want to reset the counter for this number series?')) {
                console.log('Reset number series:', id);
            }
        }

        function toggleNumberSeriesStatus(id) {
            console.log('Toggle status for number series:', id);
        }

        function deleteNumberSeries(id) {
            if (confirm('Are you sure you want to delete this number series?')) {
                console.log('Delete number series:', id);
            }
        }

        function loadNumberSeriesData() {
            console.log('Loading number series data...');
        }

        function showAlert(message, type) {
            alert(message);
        }
    </script>
@endpush