@extends('admin.layout')

@section('content')
<div class="flex items-center justify-between mb-6">
    <div>
        <h1 class="text-3xl font-bold text-gray-800">Export Users</h1>
        <p class="text-gray-600 mt-1">Select the fields you want to export to CSV</p>
    </div>
    <a href="{{ route('users.index') }}" style="background-color: #6b7280;" class="inline-flex items-center text-white px-4 py-2 rounded-lg font-semibold shadow-md hover:shadow-lg transition-all duration-200 transform hover:-translate-y-0.5">
        <svg class="w-5 h-5 mr-2" style="fill: #ffffff;" viewBox="0 0 20 20">
            <path fill-rule="evenodd" d="M9.707 16.707a1 1 0 01-1.414 0l-6-6a1 1 0 010-1.414l6-6a1 1 0 011.414 1.414L5.414 9H17a1 1 0 110 2H5.414l4.293 4.293a1 1 0 010 1.414z" clip-rule="evenodd"></path>
        </svg>
        Back to Users
    </a>
</div>

<div class="bg-white rounded-xl shadow-lg overflow-hidden">
    <div style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);" class="px-6 py-4">
        <h2 class="text-xl font-bold text-white flex items-center">
            <svg class="w-6 h-6 mr-2" style="fill: #ffffff;" viewBox="0 0 20 20">
                <path fill-rule="evenodd" d="M3 17a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm3.293-7.707a1 1 0 011.414 0L9 10.586V3a1 1 0 112 0v7.586l1.293-1.293a1 1 0 111.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z" clip-rule="evenodd"></path>
            </svg>
            Export Configuration
        </h2>
    </div>

    <form action="{{ route('users.export') }}" method="POST" class="p-6">
        @csrf

        {{-- Optional Filters --}}
        <div class="mb-8">
            <h3 class="text-lg font-semibold text-gray-800 mb-4 flex items-center">
                <svg class="w-5 h-5 mr-2" style="fill: #4b5563;" viewBox="0 0 20 20">
                    <path fill-rule="evenodd" d="M3 3a1 1 0 011-1h12a1 1 0 011 1v3a1 1 0 01-.293.707L12 11.414V15a1 1 0 01-.293.707l-2 2A1 1 0 018 17v-5.586L3.293 6.707A1 1 0 013 6V3z" clip-rule="evenodd"></path>
                </svg>
                Filters (Optional)
            </h3>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4 bg-gray-50 p-4 rounded-lg">
                <div>
                    <label for="gender" class="block text-sm font-medium text-gray-700 mb-2">Filter by Gender</label>
                    <select name="gender" id="gender" class="w-full px-4 py-2 border-2 border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                        <option value="">All Genders</option>
                        <option value="male">Male</option>
                        <option value="female">Female</option>
                        <option value="non_binary">Non-Binary</option>
                        <option value="not_specified">Not Specified</option>
                    </select>
                </div>
                <div>
                    <label for="role" class="block text-sm font-medium text-gray-700 mb-2">Filter by Role</label>
                    <select name="role" id="role" class="w-full px-4 py-2 border-2 border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                        <option value="">All Roles</option>
                        <option value="user">User</option>
                        <option value="admin">Admin</option>
                    </select>
                </div>
            </div>
        </div>

        {{-- Field Selection --}}
        <div class="mb-8">
            <h3 class="text-lg font-semibold text-gray-800 mb-4 flex items-center">
                <svg class="w-5 h-5 mr-2" style="fill: #4b5563;" viewBox="0 0 20 20">
                    <path fill-rule="evenodd" d="M6 2a2 2 0 00-2 2v12a2 2 0 002 2h8a2 2 0 002-2V7.414A2 2 0 0015.414 6L12 2.586A2 2 0 0010.586 2H6zm5 6a1 1 0 10-2 0v3.586l-1.293-1.293a1 1 0 10-1.414 1.414l3 3a1 1 0 001.414 0l3-3a1 1 0 00-1.414-1.414L11 11.586V8z" clip-rule="evenodd"></path>
                </svg>
                Select Fields to Export *
            </h3>
            @error('fields')
                <div class="mb-4 bg-red-50 border border-red-200 text-red-800 px-4 py-3 rounded-lg">
                    {{ $message }}
                </div>
            @enderror
            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                <label class="flex items-center p-4 border-2 border-gray-300 rounded-lg cursor-pointer hover:bg-gray-50 transition">
                    <input type="checkbox" name="fields[]" value="id" class="w-5 h-5 text-blue-600 rounded focus:ring-blue-500">
                    <span class="ml-3 text-gray-700 font-medium">ID</span>
                </label>
                <label class="flex items-center p-4 border-2 border-gray-300 rounded-lg cursor-pointer hover:bg-gray-50 transition">
                    <input type="checkbox" name="fields[]" value="first_name" class="w-5 h-5 text-blue-600 rounded focus:ring-blue-500" checked>
                    <span class="ml-3 text-gray-700 font-medium">First Name</span>
                </label>
                <label class="flex items-center p-4 border-2 border-gray-300 rounded-lg cursor-pointer hover:bg-gray-50 transition">
                    <input type="checkbox" name="fields[]" value="last_name" class="w-5 h-5 text-blue-600 rounded focus:ring-blue-500" checked>
                    <span class="ml-3 text-gray-700 font-medium">Last Name</span>
                </label>
                <label class="flex items-center p-4 border-2 border-gray-300 rounded-lg cursor-pointer hover:bg-gray-50 transition">
                    <input type="checkbox" name="fields[]" value="email" class="w-5 h-5 text-blue-600 rounded focus:ring-blue-500" checked>
                    <span class="ml-3 text-gray-700 font-medium">Email</span>
                </label>
                <label class="flex items-center p-4 border-2 border-gray-300 rounded-lg cursor-pointer hover:bg-gray-50 transition">
                    <input type="checkbox" name="fields[]" value="phone" class="w-5 h-5 text-blue-600 rounded focus:ring-blue-500">
                    <span class="ml-3 text-gray-700 font-medium">Phone</span>
                </label>
                <label class="flex items-center p-4 border-2 border-gray-300 rounded-lg cursor-pointer hover:bg-gray-50 transition">
                    <input type="checkbox" name="fields[]" value="gender" class="w-5 h-5 text-blue-600 rounded focus:ring-blue-500">
                    <span class="ml-3 text-gray-700 font-medium">Gender</span>
                </label>
                <label class="flex items-center p-4 border-2 border-gray-300 rounded-lg cursor-pointer hover:bg-gray-50 transition">
                    <input type="checkbox" name="fields[]" value="role" class="w-5 h-5 text-blue-600 rounded focus:ring-blue-500">
                    <span class="ml-3 text-gray-700 font-medium">Role</span>
                </label>
                <label class="flex items-center p-4 border-2 border-gray-300 rounded-lg cursor-pointer hover:bg-gray-50 transition">
                    <input type="checkbox" name="fields[]" value="created_at" class="w-5 h-5 text-blue-600 rounded focus:ring-blue-500">
                    <span class="ml-3 text-gray-700 font-medium">Created At</span>
                </label>
                <label class="flex items-center p-4 border-2 border-gray-300 rounded-lg cursor-pointer hover:bg-gray-50 transition">
                    <input type="checkbox" name="fields[]" value="last_logged_in_at" class="w-5 h-5 text-blue-600 rounded focus:ring-blue-500">
                    <span class="ml-3 text-gray-700 font-medium">Last Login</span>
                </label>
            </div>
        </div>

        {{-- Quick Selection Buttons --}}
        <div class="mb-8 flex space-x-4">
            <button type="button" onclick="selectAll()" style="background-color: #10b981;" class="inline-flex items-center text-white px-4 py-2 rounded-lg font-medium shadow-md hover:shadow-lg transition-all duration-200">
                <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                </svg>
                Select All
            </button>
            <button type="button" onclick="deselectAll()" style="background-color: #6b7280;" class="inline-flex items-center text-white px-4 py-2 rounded-lg font-medium shadow-md hover:shadow-lg transition-all duration-200">
                <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                </svg>
                Deselect All
            </button>
        </div>

        {{-- Submit Button --}}
        <div class="flex space-x-4 pt-6 border-t border-gray-200">
            <button type="submit" style="background: linear-gradient(to right, #10b981, #059669);" class="inline-flex items-center text-white px-8 py-3 rounded-lg font-semibold shadow-lg hover:shadow-xl transition-all duration-200 transform hover:-translate-y-0.5">
                <svg class="w-5 h-5 mr-2" style="fill: #ffffff;" viewBox="0 0 20 20">
                    <path fill-rule="evenodd" d="M3 17a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm3.293-7.707a1 1 0 011.414 0L9 10.586V3a1 1 0 112 0v7.586l1.293-1.293a1 1 0 111.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z" clip-rule="evenodd"></path>
                </svg>
                Export to CSV
            </button>
            <a href="{{ route('users.index') }}" style="background-color: #e5e7eb;" class="inline-flex items-center text-gray-700 px-8 py-3 rounded-lg font-semibold shadow-md hover:shadow-lg transition-all duration-200">
                Cancel
            </a>
        </div>
    </form>
</div>

<script>
function selectAll() {
    document.querySelectorAll('input[name="fields[]"]').forEach(checkbox => {
        checkbox.checked = true;
    });
}

function deselectAll() {
    document.querySelectorAll('input[name="fields[]"]').forEach(checkbox => {
        checkbox.checked = false;
    });
}
</script>
@endsection