@extends('layouts.app')

@section('title', 'Terms & Conditions')

@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">Terms & Conditions</li>
        </ol>
    </nav>

    <!-- Main Table Card -->
    <div class="card mb-3" id="termsConditionsTable" data-list='{"valueNames":["title","type","description","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">Terms & Conditions</h5>
                </div>
                <div class="col-8 col-sm-auto text-end ps-2">
                    <div class="d-none" id="table-terms-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="delete">Delete</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-terms-replace-element">
                        <button class="btn btn-falcon-default btn-sm" type="button" data-bs-toggle="modal" data-bs-target="#termsModal">
                            <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="#termsFilters">
                            <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="exportTerms">
                            <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="termsFilters">
            <div class="card-body border-top fs-10">
                <div class="row g-3">
                    <div class="col-6 col-md-4 col-lg-3">
                        <select class="form-select form-select-sm" id="typeFilter">
                            <option value="">All Types</option>
                            <option value="Sales">Sales</option>
                            <option value="Purchase">Purchase</option>
                            <option value="Returns">Returns</option>
                            <option value="Service">Service</option>
                        </select>
                    </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="applyTermsFilters">Apply</button>
                        <button class="btn btn-falcon-default btn-sm" type="button" id="clearTermsFilters">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-terms-select" type="checkbox"
                                           data-bulk-select='{"body":"table-terms-body","actions":"table-terms-actions","replacedElement":"table-terms-replace-element"}' />
                                </div>
                            </th>
                            <th class="text-900 sort pe-1 align-middle white-space-nowrap" data-sort="title">Title</th>
                            <th class="text-900 sort pe-1 align-middle white-space-nowrap" data-sort="type">Type</th>
                            <th class="text-900 sort pe-1 align-middle white-space-nowrap" data-sort="description">Description</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-terms-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="terms-0" data-bulk-select-row="data-bulk-select-row" />
                                </div>
                            </td>
                            <td class="title 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-primary text-primary"><span>ST</span></div>
                                    </div>
                                    <div class="flex-1">
                                        <h6 class="mb-0 fs-10">Standard Sales Terms</h6>
                                    </div>
                                </div>
                            </td>
                            <td class="type align-middle py-2">
                                <span class="badge rounded-pill badge-subtle-primary">Sales</span>
                            </td>
                            <td class="description align-middle py-2">Standard terms and conditions for sales transactions</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="terms-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="terms-dropdown-0">
                                        <div class="py-2">
                                            <a class="dropdown-item" href="#!" onclick="editTerms(0)">
                                                <i class="fas fa-edit me-2"></i>Edit
                                            </a>
                                            <a class="dropdown-item" href="#!" onclick="viewTerms(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="toggleTermsStatus(0)">
                                                <i class="fas fa-toggle-on me-2"></i>Toggle Status
                                            </a>
                                            <a class="dropdown-item text-danger" href="#!" onclick="deleteTerms(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>

    <!-- Terms Modal -->
    <div class="modal fade" id="termsModal" tabindex="-1" aria-labelledby="termsModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-xl">
            <div class="modal-content">
                <div class="modal-header bg-light">
                    <h5 class="modal-title" id="termsModalLabel">
                        <i class="fas fa-file-contract me-2"></i>Add New Terms & Conditions
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form id="termsForm">
                    <div class="modal-body">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="title" class="form-label">Title <span class="text-danger">*</span></label>
                                    <input type="text" class="form-control" id="title" name="title" required>
                                    <div class="form-text">Descriptive title for the terms and conditions</div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="type" class="form-label">Type <span class="text-danger">*</span></label>
                                    <select class="form-select" id="type" name="type" required>
                                        <option value="">Select Type</option>
                                        <option value="Sales">Sales</option>
                                        <option value="Purchase">Purchase</option>
                                        <option value="Returns">Returns</option>
                                        <option value="Service">Service</option>
                                        <option value="General">General</option>
                                    </select>
                                </div>
                            </div>
                        </div>

                        <div class="mb-3">
                            <label for="description" class="form-label">Description</label>
                            <input type="text" class="form-control" id="description" name="description" maxlength="500">
                            <div class="form-text">Brief description of the terms and conditions</div>
                        </div>

                        <div class="mb-3">
                            <label for="content" class="form-label">Content <span class="text-danger">*</span></label>
                            <textarea class="form-control" id="content" name="content" rows="10" required
                                      placeholder="Enter the complete terms and conditions content here..."></textarea>
                            <div class="form-text">Full terms and conditions text</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>
                    </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 Terms & Conditions
                        </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 termsList = new List('termsConditionsTable', {
                valueNames: ['title', 'type', 'description', 'is_active', 'created_at'],
                page: 10,
                pagination: true
            });

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

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

                termsList.filter(function(item) {
                    var matchType = !typeFilter || item.values().type.includes(typeFilter);
                    var matchStatus = !statusFilter || item.values().is_active.includes(statusFilter);
                    return matchType && matchStatus;
                });
            });

            // Clear filters
            document.getElementById('clearTermsFilters').addEventListener('click', function() {
                document.getElementById('typeFilter').value = '';
                document.getElementById('statusFilter').value = '';
                document.getElementById('createdDateFilter').value = '';
                termsList.filter();
            });

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

            // Form submission
            document.getElementById('termsForm').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('termsModal'));
                modal.hide();
                this.reset();

                showAlert('Terms & Conditions added successfully!', 'success');
                loadTermsData();
            });
        });

        function editTerms(id) {
            console.log('Edit terms:', id);
        }

        function viewTerms(id) {
            console.log('View terms:', id);
        }

        function toggleTermsStatus(id) {
            console.log('Toggle status for terms:', id);
        }

        function deleteTerms(id) {
            if (confirm('Are you sure you want to delete this terms & conditions?')) {
                console.log('Delete terms:', id);
            }
        }

        function loadTermsData() {
            console.log('Loading terms data...');
        }

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