@section('page_title')
{{ "Composer - Delete Customers" }}
@endsection
@include('header')

<section class="body-section">
    <x-transient-message />
    <div class="content-width-container split-view">
        @include('left-split-view')

        <div class="primary-content-container">
            <div class="title-block">
                <div class="title-block-title">
                    <div>Customers List</div>
                    <div class="title-block-description">You can delete customers by selecting them from the list. You
                        can filter the list by start and end date to find the customers more easily.<br></div>
                </div>
          </div>

            <!-- Date Range Filter Form -->
            <form method="GET" action="{{ route('delete-customers') }}" class="date-filter-form">
                <label for="start_date">Start Date:</label>
                <input type="date" id="start_date" name="start_date" value="{{ old('start_date', request('start_date')) }}"
                    max="{{ date('Y-m-d') }}" onchange="checkFilters()">

                @error('start_date')
                    <div class="error-message error-date-range-message">{{ $message }}</div>
                @enderror

                <label for="end_date">End Date:</label>
                <input type="date" id="end_date" name="end_date" value="{{ old('end_date', request('end_date')) }}"
                    max="{{ date('Y-m-d') }}" onchange="checkFilters()">

                @error('end_date')
                    <div class="error-message error-date-range-message">{{ $message }}</div>
                @enderror

                <label for="search">Search:</label>
                <input type="text" id="search-value" class="email-search-container" name="search" placeholder="Search..." value="{{ old('search', request('search')) }}" onchange="checkFilters()">

                @error('search')
                    <div class="error-message error-date-range-message">{{ $message }}</div>
                @enderror

                <button type="submit" class="button button-shadow purple-gradient w-inline-block" id="applyFilterBtn" disabled>Apply Filters</button>

                @if(!empty($startDate) || !empty($endDate) || !empty($search))
                    <button type="button" class="button button-shadow purple-gradient w-inline-block"
                        onclick="clearFilters()">Clear</button>
                @endif
            </form>

            <!-- Customers Table -->
            <form id="delete-customers-form" method="POST" action="{{ route('delete-multiple-customers') }}">
                @csrf
                <meta name="csrf-token" content="{{ csrf_token() }}">
                <div class="table-grid-scroller">
                    <div class="w-layout-grid table-grid customer-grid">
                        @php
                        array_pop($tableColumns);
                        @endphp

                        <!-- Table Headers -->
                        @if(!empty($customers['data']))
                        <div class="table-grid-title"></div>
                        @foreach($tableColumns as $key => $column)
                        <div class="table-grid-title">
                            <div>{{ $column }}</div>
                        </div>
                        @endforeach
                        <div class="grid-action-container"></div>

                        <!-- Table Rows -->
                        @foreach($customers['data'] as $customer)
                        <div class="table-grid-value">
                            <input type="checkbox" name="selected_customers[]" value="{{ $customer->client_id }}"
                                class="customer-checkbox">
                        </div>
                        <div class="table-grid-value">
                            <div class="grid-text-center">
                                {{ $customer->last_dt ? \Carbon\Carbon::parse($customer->last_dt)->format('d/m/y') : 'NA' }}
                            </div>
                        </div>
                        <div class="table-grid-value">
                            <div class="grid-text-center">
                                {{ $customer->created_at ? \Carbon\Carbon::parse($customer->created_at)->format('d/m/y') : 'NA' }}
                            </div>
                        </div>
                        <div class="table-grid-value">
                            <div class="grid-text-center">{{ $customer->email }}</div>
                        </div>
                        <div class="table-grid-value">
                            <div class="grid-text-center">{{ $customer->company_name }}</div>
                        </div>
                        <div class="table-grid-value">
                            <div class="grid-text-center">{{ $customer->headline_count }}</div>
                        </div>
                        <div class="table-grid-value">
                            <div class="grid-text-center">{{ $customer->narrative_count }}</div>
                        </div>
                        <div class="table-grid-value">
                            <div class="grid-text-center">{{ $customer->outline_count }}</div>
                        </div>
                        <div class="table-grid-value">
                            <div class="grid-text-center">{{ $customer->article_count }}</div>
                        </div>
                        <a href="#" class="button button-delete-all-customers"
                            id="delete-customer-{{$customer->client_id}}"
                            onclick="deleteCustomer({{ $customer->client_id }})">
                            <div class="button-label white-text">Delete</div>
                        </a>
                        @endforeach
                        @endif
                    </div>
                    @if(empty($customers['data']))
                    <h1 class="body-main-title">
                        <strong>No record found!</strong>
                    </h1>
                    @endif
                </div>

                <!-- Bulk Delete Button -->
                @if(!empty($customers['data']))
                <button type="button"
                    class="button button-shadow purple-gradient w-inline-block delete-all-selected-customers"
                    onclick="confirmDelete()">Delete Selected Customers</button>
                @endif
            </form>

            <!-- Pagination -->
            @if(!empty($customers['to']))
            <div class="pagination-container">
                @foreach ($customers['links'] as $link)
                <a href="{{ !empty($link['url']) ? $link['url'] : '#' }}"
                    class="pagination-elipse{{ $link['active'] ? ' pagination-active' : '' }}">{{ html_entity_decode($link['label']) }}</a>
                @endforeach
            </div>
            @endif
        </div>
    </div>
</section>

<script>
function clearFilters() {
    // Reset the form
    document.querySelector('.date-filter-form').reset();
    // Optionally reload the page to clear query parameters
    window.location.href = "{{ route('delete-customers') }}";
}

function confirmDelete() {
    let selectedCustomers = document.querySelectorAll('.customer-checkbox:checked');
    if (selectedCustomers.length === 0) {
        alert('Please select at least one customer to delete.');
        return false;
    }
    if (confirm("Are you sure you want to delete the selected customers?")) {
        document.getElementById('delete-customers-form').submit();
    }
}
</script>
<script>
    // Disable manual date entry (prevent typing)
    document.getElementById('start_date').addEventListener('keydown', function(e) {
        e.preventDefault();  // Disable keyboard input
    });
    document.getElementById('end_date').addEventListener('keydown', function(e) {
        e.preventDefault();  // Disable keyboard input
    });

    // Enable Apply Filters button only if a filter is selected
    function checkFilters() {
        const startDate = document.getElementById('start_date').value;
        const endDate = document.getElementById('end_date').value;
        const search = document.getElementById('search-value').value;
        const applyFilterBtn = document.getElementById('applyFilterBtn');

        // Enable the button if any filter is applied
        if (startDate || endDate || search) {
            applyFilterBtn.disabled = false;
        } else {
            applyFilterBtn.disabled = true;
        }
    }

    // Check filters on page load as well
    window.onload = checkFilters;
</script>
@include('footer')